import { Badge } from "./badge";
import { Toggle } from "./toggle";

// ---------------------------------------------------------------------------
// Shared appointment domain types
//
// These are the canonical definitions — all other appointment components import
// from here instead of re-defining their own copies.
// ---------------------------------------------------------------------------

export type AppointmentStatus =
  | "pending"
  | "confirmed"
  | "cancelled"
  | "rescheduled";

export type AppointmentMeetingFormat =
  | "call"
  | "google-meet"
  | "microsoft-teams"
  | "online"
  | "offline";

// ---------------------------------------------------------------------------
// Time slot
// ---------------------------------------------------------------------------

export interface AppointmentTimeSlot {
  id: string;
  /** Display label — "9:00 AM" */
  label: string;
  available: boolean;
}

// ---------------------------------------------------------------------------
// Slot section — shared sub-component used by multiple appointment dialogs
// ---------------------------------------------------------------------------

export interface AppointmentSlotSectionProps {
  label: string;
  slots: AppointmentTimeSlot[];
  selectedSlotId?: string;
  onSelect?: (slot: AppointmentTimeSlot) => void;
}

export function AppointmentSlotSection({
  label,
  slots,
  selectedSlotId,
  onSelect,
}: AppointmentSlotSectionProps) {
  const hasAvailable = slots.some((s) => s.available);
  return (
    <div className="flex flex-col gap-2">
      <div className="flex items-center gap-2">
        <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
          {label}
        </p>
        {!hasAvailable && (
          <Badge variant="secondary" className="text-[10px]">
            No availability
          </Badge>
        )}
      </div>
      <div className="flex flex-wrap gap-2">
        {slots.map((slot) => (
          <Toggle
            key={slot.id}
            variant="outline"
            pressed={selectedSlotId === slot.id}
            onPressedChange={(pressed) => {
              if (pressed && slot.available) onSelect?.(slot);
            }}
            disabled={!slot.available}
            className="min-w-[88px]"
          >
            {slot.label}
          </Toggle>
        ))}
      </div>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Full picker (Morning + Afternoon sections combined)
// ---------------------------------------------------------------------------

export interface AppointmentTimeSlotPickerProps {
  amSlots: AppointmentTimeSlot[];
  pmSlots: AppointmentTimeSlot[];
  selectedSlotId?: string;
  onSelect?: (slot: AppointmentTimeSlot) => void;
}

export function AppointmentTimeSlotPicker({
  amSlots,
  pmSlots,
  selectedSlotId,
  onSelect,
}: AppointmentTimeSlotPickerProps) {
  const totalAvailable = [...amSlots, ...pmSlots].filter(
    (s) => s.available,
  ).length;

  return (
    <div className="flex flex-col gap-5">
      <div className="flex items-center justify-between">
        <p className="text-sm font-semibold">Select a time slot</p>
        <span className="text-xs text-muted-foreground">
          {totalAvailable} available
        </span>
      </div>
      <AppointmentSlotSection
        label="Morning"
        slots={amSlots}
        selectedSlotId={selectedSlotId}
        onSelect={onSelect}
      />
      <AppointmentSlotSection
        label="Afternoon"
        slots={pmSlots}
        selectedSlotId={selectedSlotId}
        onSelect={onSelect}
      />
    </div>
  );
}