import React, { useEffect, useState } from 'react';
import { useAuth } from '../../contexts/AuthContext';

interface Benchmarking {
  ajuizados15dias: number;
  emTramitacao: number;
}

export const BenchmarkingEscritorio: React.FC = () => {
  const { token } = useAuth();
  const [benchmarking, setBenchmarking] = useState<Benchmarking | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    async function fetchBenchmarking() {
      try {
        setLoading(true);
        setError(null);
        const res = await fetch('/api/benchmarking', {
          headers: {
            Authorization: `Bearer ${token}`,
            'Content-Type': 'application/json',
          },
        });
        if (!res.ok) throw new Error('Erro ao buscar benchmarking');
        const data = await res.json();
        setBenchmarking(data);
      } catch (err: any) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }
    fetchBenchmarking();
  }, [token]);

  if (loading) return <div>Carregando benchmarking...</div>;
  if (error) return <div className="text-red-600">{error}</div>;
  if (!benchmarking) return null;

  return (
    <div className="border rounded p-4 shadow flex flex-col gap-4">
      <div>
        <span className="font-semibold">Processos ajuizados (últimos 15 dias):</span>
        <span className="ml-2 text-blue-700 font-bold">{benchmarking.ajuizados15dias}</span>
      </div>
      <div>
        <span className="font-semibold">Processos em tramitação:</span>
        <span className="ml-2 text-green-700 font-bold">{benchmarking.emTramitacao}</span>
      </div>
    </div>
  );
};