/**
 * WaitingRoom Component
 * Exibe lista de pacientes que fizeram check-in e aguardam atendimento
 * @version 1.0
 */

/* eslint-disable @typescript-eslint/no-explicit-any */

import { format } from "date-fns";
import { Clock, User } from "lucide-react";
import { useAppointments } from "../../hooks/useAppointments";

interface WaitingRoomProps {
  doctorId: string;
}

export function WaitingRoom({ doctorId }: WaitingRoomProps) {
  const today = format(new Date(), "yyyy-MM-dd");

  const { data: waitingAppointments = [], isLoading } = useAppointments({
    doctor_id: doctorId,
    status: "checked_in",
    scheduled_at: `gte.${today}T00:00:00`,
  });

  if (isLoading) {
    return (
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <div className="animate-pulse space-y-4">
          <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/4"></div>
          <div className="h-20 bg-gray-200 dark:bg-gray-700 rounded"></div>
          <div className="h-20 bg-gray-200 dark:bg-gray-700 rounded"></div>
        </div>
      </div>
    );
  }

  if (waitingAppointments.length === 0) {
    return (
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-8 text-center">
        <div className="flex flex-col items-center gap-4">
          <div className="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center">
            <User className="h-8 w-8 text-gray-400" />
          </div>
          <div>
            <p className="text-gray-600 dark:text-gray-400 font-medium">
              Nenhum paciente na sala de espera
            </p>
            <p className="text-sm text-gray-500 dark:text-gray-500 mt-1">
              Pacientes que fizerem check-in aparecerão aqui
            </p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow">
      <div className="divide-y divide-gray-200 dark:divide-gray-700">
        {waitingAppointments.map((appointment) => {
          const waitTime = Math.floor(
            (new Date().getTime() -
              new Date(
                appointment.created_at || appointment.scheduled_at
              ).getTime()) /
              60000
          );

          return (
            <div
              key={appointment.id}
              className="p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
            >
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center">
                    <User className="h-5 w-5 text-purple-600 dark:text-purple-400" />
                  </div>
                  <div>
                    <p className="font-medium text-gray-900 dark:text-white">
                      {(appointment as any).patient_name || "Paciente"}
                    </p>
                    <p className="text-sm text-gray-500 dark:text-gray-400">
                      Agendado para{" "}
                      {format(new Date(appointment.scheduled_at), "HH:mm")}
                    </p>
                  </div>
                </div>
                <div className="flex items-center gap-2 text-sm">
                  <Clock className="h-4 w-4 text-gray-400" />
                  <span className="text-gray-600 dark:text-gray-400">
                    {waitTime < 1 ? "Agora" : `${waitTime} min`}
                  </span>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
