import Image from "next/image";
import { Gift, NotebookText } from "lucide-react";
import type { ReactNode } from "react";
import { Card } from "@/components/ui/card";
import { StatusPill } from "@/components/ui/status-pill";
import type { AppointmentStatus, StaffSummary } from "@/types/domain";

export interface AppointmentCardProps {
  status: AppointmentStatus;
  serviceName: string;
  /** The other party shown on the card — the barber on a customer-facing card, the customer on a staff-facing one. Same {id, name, avatarUrl} shape either way. */
  person: StaffSummary;
  /** Defaults to "with" — a staff card might prefer e.g. "for". */
  personLabel?: string;
  /** Pre-formatted for display, e.g. "Sat, Oct 12" — omit when the surrounding page already makes the date clear (e.g. a single day's agenda). */
  formattedDate?: string;
  /** Pre-formatted for display, e.g. "2:00 PM". */
  formattedTime: string;
  /** Small notes-exist indicator — staff calendar/agenda use, customer cards leave this unset. */
  hasNotes?: boolean;
  /** Small loyalty-reward-available indicator — same. */
  hasAvailableReward?: boolean;
  /** Reschedule/Cancel/Book again buttons — left to the caller so this
   * component stays agnostic of which actions apply to which status. */
  actions?: ReactNode;
  href?: string;
}

export function AppointmentCard({
  status,
  serviceName,
  person,
  personLabel = "with",
  formattedDate,
  formattedTime,
  hasNotes,
  hasAvailableReward,
  actions,
}: AppointmentCardProps) {
  return (
    <Card className="p-5">
      <div className="mb-4 flex items-start justify-between">
        <StatusPill status={status} />
        <div className="text-right">
          {formattedDate && <p className="text-sm font-bold">{formattedDate}</p>}
          <p className="text-muted text-xs">{formattedTime}</p>
        </div>
      </div>
      <div className="mb-4 flex items-center gap-3">
        {person.avatarUrl ? (
          <Image
            src={person.avatarUrl}
            alt=""
            width={40}
            height={40}
            className="h-10 w-10 rounded-full object-cover"
          />
        ) : (
          <div className="bg-stone text-muted flex h-10 w-10 items-center justify-center rounded-full text-xs font-bold">
            {person.name.charAt(0)}
          </div>
        )}
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-1.5">
            <h3 className="truncate text-sm font-bold">{serviceName}</h3>
            {hasNotes && (
              <NotebookText className="text-muted h-3.5 w-3.5 shrink-0" aria-label="Has notes" />
            )}
            {hasAvailableReward && (
              <Gift
                className="text-accent-loyalty h-3.5 w-3.5 shrink-0"
                aria-label="Reward available"
              />
            )}
          </div>
          <p className="text-muted text-xs">
            {personLabel} {person.name}
          </p>
        </div>
      </div>
      {actions && <div className="border-line flex gap-2 border-t pt-4">{actions}</div>}
    </Card>
  );
}