import React from 'react';
import { useBenchmarking } from '../../hooks/useBenchmarking';
import { CheckCircleIcon, XCircleIcon, FolderOpenIcon } from '@heroicons/react/24/solid';

export const BenchmarkingEscritorio: React.FC = () => {
  // Hook para buscar e calcular benchmarking
  const { data: benchmarking, isLoading, error } = useBenchmarking();

  if (isLoading) return <div>Carregando benchmarking...</div>;
  if (error) return <div className="text-red-600">Erro ao buscar benchmarking</div>;
  if (!benchmarking) return null;

  // Cálculo da porcentagem de sucesso das causas
  const totalCausas = benchmarking.procedentes + benchmarking.improcedentesOuSemMerito;
  const sucessoPercent = totalCausas > 0 ? Math.round((benchmarking.procedentes / totalCausas) * 100) : 0;

  return (
    <div className="border rounded-xl p-6 shadow-lg bg-white dark:bg-gray-900 flex flex-col gap-6 max-w-md mx-auto">
      <div className="grid grid-cols-2 gap-4">
        <div className="flex items-center gap-2 bg-blue-50 dark:bg-blue-900 rounded-lg p-3">
          <FolderOpenIcon className="h-7 w-7 text-blue-600" />
          <div>
            <div className="text-xs text-gray-500">Total de processos</div>
            <div className="text-lg font-bold text-blue-700 dark:text-blue-300">{benchmarking.totalProcessos}</div>
          </div>
        </div>
        <div className="flex items-center gap-2 bg-green-50 dark:bg-green-900 rounded-lg p-3">
          <CheckCircleIcon className="h-7 w-7 text-green-600" />
          <div>
            <div className="text-xs text-gray-500">Processos ativos</div>
            <div className="text-lg font-bold text-green-700 dark:text-green-300">{benchmarking.ativos}</div>
          </div>
        </div>
        <div className="flex items-center gap-2 bg-green-50 dark:bg-green-900 rounded-lg p-3">
          <CheckCircleIcon className="h-7 w-7 text-green-600" />
          <div>
            <div className="text-xs text-gray-500">Julgados procedentes</div>
            <div className="text-lg font-bold text-green-700 dark:text-green-300">{benchmarking.procedentes}</div>
          </div>
        </div>
        <div className="flex items-center gap-2 bg-red-50 dark:bg-red-900 rounded-lg p-3">
          <XCircleIcon className="h-7 w-7 text-red-600" />
          <div>
            <div className="text-xs text-gray-500">Improcedentes/Sem mérito</div>
            <div className="text-lg font-bold text-red-700 dark:text-red-300">{benchmarking.improcedentesOuSemMerito}</div>
          </div>
        </div>
      </div>
      <div className="mt-4 flex flex-col items-center">
        <span className="text-sm text-gray-500">% de sucesso das causas</span>
        <span className="text-3xl font-extrabold text-green-600 dark:text-green-400">{sucessoPercent}%</span>
      </div>
    </div>
  );
};