import React, { useEffect, useState } from "react";
import toast from "react-hot-toast";
import { appointmentService, availabilityService } from "../../services";
import { format } from "date-fns";

interface Props {
  doctorId: string;
  date: string; // YYYY-MM-DD
  onSelect: (time: string) => void; // HH:MM
}

const AvailableSlotsPicker: React.FC<Props> = ({
  doctorId,
  date,
  onSelect,
}) => {
  const [slots, setSlots] = useState<string[]>([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    async function fetchSlots() {
      if (!doctorId || !date) return;

      console.log("🔍 [AvailableSlotsPicker] Calculando slots localmente:", {
        doctorId,
        date,
      });

      setLoading(true);
      try {
        // Busca a disponibilidade do médico
        const availabilities = await availabilityService.list({
          doctor_id: doctorId,
          active: true,
        });

        console.log(
          "📅 [AvailableSlotsPicker] Disponibilidades:",
          availabilities
        );

        if (!availabilities || availabilities.length === 0) {
          console.warn(
            "[AvailableSlotsPicker] Nenhuma disponibilidade configurada"
          );
          setSlots([]);
          setLoading(false);
          return;
        }

        // Pega o dia da semana da data selecionada
        const selectedDate = new Date(`${date}T00:00:00`);
        const dayOfWeek = selectedDate.getDay(); // 0-6

        console.log("[AvailableSlotsPicker] Dia da semana:", dayOfWeek);

        // Filtra disponibilidades para o dia da semana
        const dayAvailability = availabilities.filter(
          (avail) => avail.weekday === dayOfWeek && avail.active
        );

        console.log(
          "[AvailableSlotsPicker] Disponibilidades para o dia:",
          dayAvailability
        );

        if (dayAvailability.length === 0) {
          console.warn(
            "[AvailableSlotsPicker] Médico não atende neste dia da semana"
          );
          setSlots([]);
          setLoading(false);
          return;
        }

        // Gera slots para cada disponibilidade
        const allSlots: string[] = [];
        for (const avail of dayAvailability) {
          const startTime = avail.start_time; // "08:00"
          const endTime = avail.end_time; // "18:00"
          const slotMinutes = avail.slot_minutes || 30;

          // Converte para minutos desde meia-noite
          const [startHour, startMin] = startTime.split(":").map(Number);
          const [endHour, endMin] = endTime.split(":").map(Number);

          let currentMinutes = startHour * 60 + startMin;
          const endMinutes = endHour * 60 + endMin;

          while (currentMinutes < endMinutes) {
            const hours = Math.floor(currentMinutes / 60);
            const minutes = currentMinutes % 60;
            const timeStr = `${hours.toString().padStart(2, "0")}:${minutes
              .toString()
              .padStart(2, "0")}`;
            allSlots.push(timeStr);
            currentMinutes += slotMinutes;
          }
        }

        // Busca agendamentos existentes para esta data
        const appointments = await appointmentService.list({
          doctor_id: doctorId,
        });

        console.log(
          "[AvailableSlotsPicker] Agendamentos existentes:",
          appointments
        );

        // Filtra agendamentos para a data selecionada
        const bookedSlots = (Array.isArray(appointments) ? appointments : [])
          .filter((apt) => {
            if (!apt.scheduled_at) return false;
            const aptDate = new Date(apt.scheduled_at);
            return (
              format(aptDate, "yyyy-MM-dd") === date &&
              apt.status !== "cancelled" &&
              apt.status !== "no_show"
            );
          })
          .map((apt) => {
            const aptDate = new Date(apt.scheduled_at);
            return format(aptDate, "HH:mm");
          });

        console.log(
          "[AvailableSlotsPicker] Horários já ocupados:",
          bookedSlots
        );

        // Remove slots já ocupados
        const availableSlots = allSlots.filter(
          (slot) => !bookedSlots.includes(slot)
        );

        console.log(
          "✅ [AvailableSlotsPicker] Horários disponíveis:",
          availableSlots
        );
        setSlots(availableSlots);
        setLoading(false);
      } catch (error) {
        console.error("❌ [AvailableSlotsPicker] Erro ao buscar slots:", error);
        setLoading(false);
        toast.error("Erro ao calcular horários disponíveis");
      }
    }
    void fetchSlots();
  }, [doctorId, date]);

  if (!date || !doctorId) return null;

  if (loading)
    return <div className="text-sm text-gray-500">Carregando horários...</div>;

  if (!slots.length)
    return (
      <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
        <p className="text-sm text-yellow-800 font-medium mb-2">
          ⚠️ Nenhum horário disponível
        </p>
        <p className="text-xs text-yellow-700">
          Este médico ainda não tem disponibilidades cadastradas para este dia
          da semana. Configure a disponibilidade na seção "Disponibilidade" do
          painel.
        </p>
      </div>
    );

  return (
    <div className="grid grid-cols-3 md:grid-cols-6 gap-2">
      {slots.map((t) => (
        <button
          key={t}
          type="button"
          onClick={() => onSelect(t)}
          className="px-3 py-2 rounded bg-blue-50 hover:bg-blue-100 text-blue-700 text-sm"
        >
          {t}
        </button>
      ))}
    </div>
  );
};

export default AvailableSlotsPicker;
