import { Calendar } from "lucide-react";
import DoctorCalendar from "../agenda/DoctorCalendar";
import AvailabilityManager from "../agenda/AvailabilityManager";
import ExceptionsManager from "../agenda/ExceptionsManager";

interface Medico {
  id: string;
  nome: string;
}

interface AgendaSectionProps {
  medicos: Medico[];
  selectedDoctorId: string | null;
  onSelectDoctor: (doctorId: string) => void;
}

export default function AgendaSection({
  medicos,
  selectedDoctorId,
  onSelectDoctor,
}: AgendaSectionProps) {
  return (
    <section className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-bold text-foreground">
          Gerenciar Agenda Médica
        </h1>
        <p className="text-muted-foreground">
          Configure disponibilidades, exceções e visualize o calendário dos
          médicos
        </p>
      </div>

      {/* Doctor Selector */}
      <div className="bg-card rounded-lg border border-border p-6">
        <label className="block text-sm font-medium text-foreground mb-2">
          Selecione um médico para gerenciar sua agenda:
        </label>
        {medicos.length === 0 ? (
          <p className="text-sm text-muted-foreground">
            Nenhum médico cadastrado. Adicione médicos na aba "Médicos"
            primeiro.
          </p>
        ) : (
          <select
            value={selectedDoctorId || ""}
            onChange={(e) => onSelectDoctor(e.target.value)}
            className="w-full md:w-96 h-10 px-3 rounded-md border border-input bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
          >
            <option value="">Selecione um médico</option>
            {medicos.map((medico) => (
              <option key={medico.id} value={medico.id}>
                {medico.nome}
              </option>
            ))}
          </select>
        )}
      </div>

      {/* Calendar and Availability Management */}
      {selectedDoctorId ? (
        <div className="space-y-6">
          <DoctorCalendar doctorId={selectedDoctorId} />
          <AvailabilityManager doctorId={selectedDoctorId} />
          <ExceptionsManager doctorId={selectedDoctorId} />
        </div>
      ) : (
        <div className="bg-card rounded-lg border border-border p-12">
          <div className="flex flex-col items-center justify-center text-center">
            <Calendar className="w-16 h-16 text-muted-foreground mb-4" />
            <h3 className="text-lg font-semibold text-foreground mb-2">
              Selecione um médico
            </h3>
            <p className="text-muted-foreground max-w-md">
              Escolha um médico acima para visualizar e gerenciar sua agenda,
              disponibilidades e exceções de horários.
            </p>
          </div>
        </div>
      )}
    </section>
  );
}