import { Avatar, AvatarFallback } from "./avatar";
import { Button } from "./button";
import type { AppointmentStatus } from "./appointment-time-slot-picker";

// Re-export so consumers who import AppointmentStatus from this module still work
export type { AppointmentStatus } from "./appointment-time-slot-picker";

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

export interface AppointmentMiniCardItem {
  id: string;
  status: AppointmentStatus;
  clientName: string;
  clientAvatarInitials: string;
  /** ISO date string — "2026-04-22" */
  date: string;
  /** Display time — "10:00 AM" */
  timeStart: string;
  /** Display time — "10:30 AM" */
  timeEnd: string;
}

export interface AppointmentMiniCardProps {
  appointment: AppointmentMiniCardItem;
  onAccept?: () => void;
  onDecline?: () => void;
  onReschedule?: () => void;
}

// ---------------------------------------------------------------------------
// Status styling
// ---------------------------------------------------------------------------

const STATUS_BG: Record<AppointmentStatus, string> = {
  pending: "border-warning bg-warning/10",
  confirmed: "border-success bg-success/10",
  cancelled: "border-destructive bg-destructive/10 opacity-60",
  rescheduled: "border-info bg-info/10",
};

// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------

export function AppointmentMiniCard({
  appointment,
  onAccept,
  onDecline,
  onReschedule,
}: AppointmentMiniCardProps) {
  const isConfirmed = appointment.status === "confirmed";
  const isRescheduled = appointment.status === "rescheduled";
  const isCancelled = appointment.status === "cancelled";

  return (
    <div
      className={`flex items-center gap-4 border px-5 py-4 ${STATUS_BG[appointment.status]}`}
    >
      <Avatar className="h-10 w-10 shrink-0">
        <AvatarFallback className="text-sm">
          {appointment.clientAvatarInitials}
        </AvatarFallback>
      </Avatar>

      <div className="flex min-w-0 flex-1 flex-col gap-1">
        <p className="truncate text-base font-semibold">
          {appointment.clientName}
        </p>
        <p className="text-sm text-muted-foreground">
          {appointment.date} · {appointment.timeStart} – {appointment.timeEnd}
        </p>
      </div>

      {/* Always 3 buttons — enabled state varies by status */}
      <div className="flex shrink-0 items-center gap-2">
        <Button
          size="sm"
          disabled={isConfirmed || isCancelled}
          onClick={onAccept}
        >
          Accept
        </Button>
        <Button
          size="sm"
          variant="outline"
          disabled={isCancelled}
          onClick={onDecline}
        >
          Decline
        </Button>
        <Button
          size="sm"
          variant="ghost"
          disabled={isCancelled || isRescheduled}
          onClick={onReschedule}
        >
          Reschedule
        </Button>
      </div>
    </div>
  );
}