import * as React from "react";
import { Puzzle, CircleCheck } 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";
import { Spinner } from "@/components/ui/spinner";

/**
 * CopilotConnectionState — WealthX DS (Molecule)
 *
 * Whole-panel state for the WealthX ↔ Copilot extension handshake used by the
 * onboarding flow: the extension is not installed, is being detected, or is
 * connected. Composes Empty + Button + Spinner.
 *
 * Pure display — the host drives `status` from the install-detection event and
 * wires onInstall / onContinue.
 */

export type CopilotConnectionStatus =
  | "not-installed"
  | "connecting"
  | "connected";

export interface CopilotConnectionStateProps {
  status: CopilotConnectionStatus;
  /** Override the default title for the current status. */
  title?: string;
  /** Override the default description for the current status. */
  description?: string;
  /** not-installed → primary action to install the extension. */
  onInstall?: () => void;
  installLabel?: string;
  /** connected → optional action to continue into the chat / onboarding. */
  onContinue?: () => void;
  continueLabel?: string;
  className?: string;
}

const DEFAULT_COPY: Record<
  CopilotConnectionStatus,
  { title: string; description: string }
> = {
  "not-installed": {
    title: "Copilot isn't installed yet",
    description:
      "Install the WealthX Copilot extension to chat with your assistant here.",
  },
  connecting: {
    title: "Connecting to Copilot…",
    description: "Checking for the WealthX Copilot extension.",
  },
  connected: {
    title: "Copilot connected",
    description: "You're all set — start a conversation below.",
  },
};

export function CopilotConnectionState({
  status,
  title,
  description,
  onInstall,
  installLabel = "Install Copilot",
  onContinue,
  continueLabel = "Get started",
  className,
}: CopilotConnectionStateProps) {
  const copy = DEFAULT_COPY[status];

  const action =
    status === "not-installed" && onInstall ? (
      <Button type="button" onClick={onInstall}>
        {installLabel}
      </Button>
    ) : status === "connected" && onContinue ? (
      <Button type="button" onClick={onContinue}>
        {continueLabel}
      </Button>
    ) : null;

  return (
    <Empty className={className}>
      <EmptyHeader>
        <EmptyMedia
          variant="icon"
          className={status === "connected" ? "text-success-text" : undefined}
        >
          {status === "connecting" ? (
            <Spinner size="lg" />
          ) : status === "connected" ? (
            <CircleCheck />
          ) : (
            <Puzzle />
          )}
        </EmptyMedia>
        <EmptyTitle>{title ?? copy.title}</EmptyTitle>
        <EmptyDescription>{description ?? copy.description}</EmptyDescription>
      </EmptyHeader>

      {action && <EmptyContent>{action}</EmptyContent>}
    </Empty>
  );
}