import React, { useEffect, useState } from 'react';

interface Evento {
  id: string;
  data: string;
  tipo: string;
  descricao: string;
}

export const CalendarioAtendimentos: React.FC = () => {
  const [eventos, setEventos] = useState<Evento[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    async function fetchEventos() {
      try {
        setLoading(true);
        setError(null);
        const res = await fetch('/api/eventos');
        if (!res.ok) throw new Error('Erro ao buscar eventos');
        const data = await res.json();
        setEventos(data);
      } catch (err: any) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }
    fetchEventos();
  }, []);

  // Simulação de calendário mensal
  const diasMes = Array.from({ length: 30 }, (_, i) => i + 1);
  const mes = '06';
  const ano = '2024';

  if (loading) return <div>Carregando calendário...</div>;
  if (error) return <div className="text-red-600">{error}</div>;

  return (
    <div className="border rounded p-4 shadow">
      <div className="grid grid-cols-7 gap-2 mb-4">
        {diasMes.map((dia) => {
          const dataStr = `${ano}-${mes}-${dia.toString().padStart(2, '0')}`;
          const eventosDia = eventos.filter(e => e.data === dataStr);
          return (
            <div key={dia} className={`h-16 flex flex-col items-center justify-center border rounded ${eventosDia.length ? 'bg-blue-50' : ''}`}> 
              <span className="font-bold text-xs">{dia}</span>
              {eventosDia.map((ev) => (
                <span key={ev.id} className="text-[10px] text-blue-700">{ev.tipo}</span>
              ))}
            </div>
          );
        })}
      </div>
      <div>
        <h3 className="font-semibold mb-2">Próximos eventos</h3>
        <ul className="text-xs">
          {eventos.map((ev) => (
            <li key={ev.id} className="mb-1">{ev.data}: {ev.tipo} - {ev.descricao}</li>
          ))}
        </ul>
      </div>
    </div>
  );
};