import * as React from "react";
import { Link2, 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";

/**
 * CopilotContextCard — WealthX DS (Molecule)
 *
 * Renders a record the broker shared INTO the Copilot conversation — e.g. when
 * they hit "Send to AI" on a Loan CRM (opportunity) card. It appears in the chat
 * thread as the user-supplied context the agent will reason over: a compact
 * preview of the shared record with a "Shared from …" attribution and an
 * optional link back to the source.
 *
 * Pure display — the host maps the source record (e.g. OpportunityCardProps) to
 * these props and wires onOpen. Composes Card + Badge + Button.
 */

export interface CopilotContextField {
  label: string;
  value: string;
}

export type CopilotContextBadgeVariant =
  | "default"
  | "secondary"
  | "outline"
  | "info"
  | "success"
  | "warning"
  | "destructive";

export interface CopilotContextCardProps {
  /** Primary title, e.g. the customer name. */
  title: string;
  /** Optional subtitle, e.g. "+1 co-applicant · Home Loan". */
  subtitle?: string;
  /** Where the record came from. Defaults to "Loan CRM". */
  sourceLabel?: string;
  /** Compact key/value fields to preview (amount, stage, …). */
  fields?: CopilotContextField[];
  /** Optional status badge (e.g. priority or stage). */
  badge?: { label: string; variant?: CopilotContextBadgeVariant };
  /** Opens the source record (deep-link back to the Loan CRM card). */
  onOpen?: () => void;
  openLabel?: string;
  className?: string;
}

export function CopilotContextCard({
  title,
  subtitle,
  sourceLabel = "Loan CRM",
  fields,
  badge,
  onOpen,
  openLabel = "Open record",
  className,
}: CopilotContextCardProps) {
  return (
    <Card className={cn("gap-2 border-l-2 border-l-primary 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">
          <span className="flex items-center gap-1 text-caption text-muted-foreground">
            <Link2 className="size-3" aria-hidden="true" />
            Shared from {sourceLabel}
          </span>
          <CardTitle className="truncate">{title}</CardTitle>
          {subtitle && <CardDescription>{subtitle}</CardDescription>}
        </div>
        {badge && (
          <Badge variant={badge.variant ?? "secondary"} className="shrink-0">
            {badge.label}
          </Badge>
        )}
      </div>

      {fields && fields.length > 0 && (
        <CardContent className="px-3">
          <dl className="flex flex-wrap gap-x-6 gap-y-1.5">
            {fields.map((field, i) => (
              <div key={i} className="flex flex-col">
                <dt className="text-caption text-muted-foreground">
                  {field.label}
                </dt>
                <dd className="text-body-small font-medium text-foreground">
                  {field.value}
                </dd>
              </div>
            ))}
          </dl>
        </CardContent>
      )}

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