import * as React from "react";
import {
  Users,
  CalendarClock,
  CircleCheck,
  Circle,
  ArrowUpRight,
} from "lucide-react";
import { cn } from "@/lib/utils";
import {
  Card,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";

/**
 * CopilotMeetingNoteCard — WealthX DS (Molecule)
 *
 * Renders the notes the Copilot captured for a meeting between a broker and the
 * end-user who booked an appointment through WealthX: a summary plus action
 * items, with a link back to the source appointment. Composes Card + Badge +
 * Button + Separator.
 *
 * Pure display — host wires onOpenAppointment.
 */

export interface CopilotMeetingActionItem {
  label: string;
  done?: boolean;
}

export interface CopilotMeetingNoteCardProps {
  /** Meeting title, e.g. "Meeting with Jordan Avery". */
  title: string;
  /** When it happened, e.g. "18 Jun 2026 · 2:00 PM". */
  dateLabel?: string;
  /** Participant names. */
  attendees?: string[];
  /** Short recap of the meeting. */
  summary?: string;
  /** Follow-up items, optionally marked done. */
  actionItems?: CopilotMeetingActionItem[];
  /** Label shown in the status badge. Defaults to "Meeting notes". */
  badgeLabel?: string;
  /** Deep-link back to the source appointment. */
  onOpenAppointment?: () => void;
  openLabel?: string;
  className?: string;
}

export function CopilotMeetingNoteCard({
  title,
  dateLabel,
  attendees,
  summary,
  actionItems,
  badgeLabel = "Meeting notes",
  onOpenAppointment,
  openLabel = "Open appointment",
  className,
}: CopilotMeetingNoteCardProps) {
  const hasActionItems = actionItems && actionItems.length > 0;

  return (
    <Card className={cn("gap-3 py-3", className)}>
      <div className="flex items-start justify-between gap-2 px-3">
        <div className="flex min-w-0 flex-col gap-0.5">
          <CardTitle>{title}</CardTitle>
          {dateLabel && (
            <CardDescription className="flex items-center gap-1">
              <CalendarClock className="size-3.5" aria-hidden="true" />
              {dateLabel}
            </CardDescription>
          )}
        </div>
        <Badge variant="secondary" className="shrink-0">
          {badgeLabel}
        </Badge>
      </div>

      <CardContent className="flex flex-col gap-2.5 px-3">
        {attendees && attendees.length > 0 && (
          <div className="flex items-center gap-1.5 text-body-small text-muted-foreground">
            <Users className="size-3.5 shrink-0" aria-hidden="true" />
            <span className="truncate">{attendees.join(" · ")}</span>
          </div>
        )}

        {summary && (
          <p className="text-body-small leading-relaxed text-foreground">
            {summary}
          </p>
        )}

        {hasActionItems && (
          <>
            <Separator />
            <div className="flex flex-col gap-1.5">
              <span className="text-caption font-medium text-muted-foreground">
                Action items
              </span>
              <ul className="flex flex-col gap-1">
                {actionItems.map((item, i) => (
                  <li
                    key={i}
                    className="flex items-start gap-1.5 text-body-small"
                  >
                    {item.done ? (
                      <CircleCheck
                        className="mt-0.5 size-3.5 shrink-0 text-success-text"
                        aria-label="Done"
                      />
                    ) : (
                      <Circle
                        className="mt-0.5 size-3.5 shrink-0 text-muted-foreground"
                        aria-label="Pending"
                      />
                    )}
                    <span
                      className={cn(
                        item.done && "text-muted-foreground line-through",
                      )}
                    >
                      {item.label}
                    </span>
                  </li>
                ))}
              </ul>
            </div>
          </>
        )}
      </CardContent>

      {onOpenAppointment && (
        <CardFooter className="px-3">
          <Button
            type="button"
            variant="outline"
            size="sm"
            onClick={onOpenAppointment}
            className="h-7 gap-1"
          >
            {openLabel}
            <ArrowUpRight className="size-3.5" aria-hidden="true" />
          </Button>
        </CardFooter>
      )}
    </Card>
  );
}