import * as React from "react";
import { Sparkles, ArrowRight } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  Empty,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
} from "@/components/ui/empty";
import { Button } from "@/components/ui/button";

/**
 * CopilotEmptyState — WealthX DS (Molecule)
 *
 * First-run / empty-thread welcome for the Copilot panel: a short greeting plus
 * optional suggested starter prompts the broker can tap to begin. Composes
 * Empty + Button.
 *
 * Pure display — host wires each prompt's onSelect.
 */

export interface CopilotSuggestedPrompt {
  label: string;
  onSelect: () => void;
}

export interface CopilotEmptyStateProps {
  title?: string;
  description?: string;
  /** Suggested starter prompts, rendered as tappable rows. */
  prompts?: CopilotSuggestedPrompt[];
  className?: string;
}

export function CopilotEmptyState({
  title = "Hi, I'm your Copilot",
  description = "Ask about a client, a loan, or your pipeline — or share a record from the Loan CRM.",
  prompts,
  className,
}: CopilotEmptyStateProps) {
  return (
    <Empty className={className}>
      <EmptyHeader>
        <EmptyMedia variant="icon" className="text-primary">
          <Sparkles />
        </EmptyMedia>
        <EmptyTitle>{title}</EmptyTitle>
        <EmptyDescription>{description}</EmptyDescription>
      </EmptyHeader>

      {prompts && prompts.length > 0 && (
        <EmptyContent>
          <div className="flex w-full flex-col gap-2">
            {prompts.map((prompt, i) => (
              <Button
                key={i}
                type="button"
                variant="outline"
                onClick={prompt.onSelect}
                className="h-auto justify-between gap-2 py-2 text-left font-normal whitespace-normal"
              >
                <span>{prompt.label}</span>
                <ArrowRight
                  className="size-4 shrink-0 text-muted-foreground"
                  aria-hidden="true"
                />
              </Button>
            ))}
          </div>
        </EmptyContent>
      )}
    </Empty>
  );
}