import * as React from "react";
import { Undo2, RefreshCw } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardAction,
  CardFooter,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Spinner } from "@/components/ui/spinner";

/**
 * CopilotActionCard — WealthX DS (Molecule)
 *
 * Renders an agentic action the broker Copilot proposes or has performed
 * (create a task, send an email, update a deal) with a confirm / undo / retry
 * affordance and a status badge. Composes Card + Button + Badge + Spinner.
 *
 * Pure display: the host wires onConfirm/onUndo/onRetry/onCancel to the real
 * side-effect (and any toast).
 */

export type CopilotActionStatus = "proposed" | "pending" | "done" | "failed";

export interface CopilotActionCardProps {
  /** What the action does, e.g. "Create follow-up task". */
  title: string;
  /** Optional detail, e.g. "Call Jordan re: pre-approval · due Fri". */
  description?: string;
  /** Lifecycle state. Defaults to "proposed". */
  status?: CopilotActionStatus;
  /** Confirm a proposed action. */
  onConfirm?: () => void;
  /** Dismiss a proposed action. */
  onCancel?: () => void;
  /** Undo a completed action. */
  onUndo?: () => void;
  /** Retry a failed action. */
  onRetry?: () => void;
  confirmLabel?: string;
  cancelLabel?: string;
  undoLabel?: string;
  retryLabel?: string;
  className?: string;
}

const STATUS_BADGE: Record<
  Exclude<CopilotActionStatus, "proposed">,
  { label: string; variant: "warning" | "success" | "destructive" }
> = {
  pending: { label: "Working…", variant: "warning" },
  done: { label: "Done", variant: "success" },
  failed: { label: "Failed", variant: "destructive" },
};

export function CopilotActionCard({
  title,
  description,
  status = "proposed",
  onConfirm,
  onCancel,
  onUndo,
  onRetry,
  confirmLabel = "Confirm",
  cancelLabel = "Cancel",
  undoLabel = "Undo",
  retryLabel = "Retry",
  className,
}: CopilotActionCardProps) {
  const badge = status === "proposed" ? null : STATUS_BADGE[status];

  return (
    <Card className={cn("gap-3 py-3", className)}>
      <CardHeader className="px-3">
        <CardTitle>{title}</CardTitle>
        {description && (
          <CardDescription className="col-start-1">
            {description}
          </CardDescription>
        )}
        {badge && (
          <CardAction>
            <Badge variant={badge.variant} className="gap-1">
              {status === "pending" && <Spinner size="sm" />}
              {badge.label}
            </Badge>
          </CardAction>
        )}
      </CardHeader>

      {status === "proposed" && (onConfirm || onCancel) && (
        <CardFooter className="gap-2 px-3">
          {onConfirm && (
            <Button type="button" size="sm" onClick={onConfirm} className="h-7">
              {confirmLabel}
            </Button>
          )}
          {onCancel && (
            <Button
              type="button"
              variant="ghost"
              size="sm"
              onClick={onCancel}
              className="h-7"
            >
              {cancelLabel}
            </Button>
          )}
        </CardFooter>
      )}

      {status === "done" && onUndo && (
        <CardFooter className="px-3">
          <Button
            type="button"
            variant="outline"
            size="sm"
            onClick={onUndo}
            className="h-7 gap-1.5"
          >
            <Undo2 className="size-3.5" aria-hidden="true" />
            {undoLabel}
          </Button>
        </CardFooter>
      )}

      {status === "failed" && onRetry && (
        <CardFooter className="px-3">
          <Button
            type="button"
            variant="outline"
            size="sm"
            onClick={onRetry}
            className="h-7 gap-1.5"
          >
            <RefreshCw className="size-3.5" aria-hidden="true" />
            {retryLabel}
          </Button>
        </CardFooter>
      )}
    </Card>
  );
}