import * as React from "react";
import { CheckCircle2, HelpCircle, ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";

/**
 * CopilotDataCard — WealthX DS (Molecule)
 *
 * A structured summary the Copilot returns (client / loan / deal snapshot):
 * a titled card of label→value rows, each optionally tagged with a confidence
 * marker, plus an optional "view full record" CTA.
 *
 * Mirrors the field/confidence pattern of AICollectedDataSection so the two
 * surfaces stay consistent. Pure display — host wires onView.
 */

export type CopilotDataConfidence = "confirmed" | "estimated";

export interface CopilotDataField {
  label: string;
  value: string;
  /** Confidence marker. Omit for no marker. */
  confidence?: CopilotDataConfidence;
}

export interface CopilotDataCardProps {
  /** Card heading, e.g. "Loan snapshot". */
  title: string;
  /** Optional subheading, e.g. "Jordan Avery · #4821". */
  subtitle?: string;
  fields: CopilotDataField[];
  /** When provided, renders a CTA in the footer (e.g. open the full record). */
  onView?: () => void;
  viewLabel?: string;
  className?: string;
}

export function CopilotDataCard({
  title,
  subtitle,
  fields,
  onView,
  viewLabel = "View full record",
  className,
}: CopilotDataCardProps) {
  return (
    <Card className={cn("gap-3 py-3", className)}>
      <CardHeader className="px-3">
        <CardTitle>{title}</CardTitle>
        {subtitle && (
          <CardDescription className="col-start-1">{subtitle}</CardDescription>
        )}
      </CardHeader>

      <CardContent className="px-3">
        <dl className="flex flex-col">
          {fields.map((field, i) => (
            <div
              key={i}
              className="flex items-center justify-between gap-2 border-b border-border/40 py-1.5 last:border-b-0"
            >
              <dt className="shrink-0 text-body-small text-muted-foreground">
                {field.label}
              </dt>
              <dd className="flex items-center gap-1.5">
                <span className="text-right text-body-small font-medium text-foreground">
                  {field.value}
                </span>
                {field.confidence === "confirmed" && (
                  <CheckCircle2
                    className="size-3 shrink-0 text-success-text"
                    aria-label="Confirmed"
                  />
                )}
                {field.confidence === "estimated" && (
                  <HelpCircle
                    className="size-3 shrink-0 text-warning-text"
                    aria-label="Estimated"
                  />
                )}
              </dd>
            </div>
          ))}
        </dl>
      </CardContent>

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