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

/**
 * CopilotAuthState — WealthX DS (Molecule)
 *
 * Whole-panel signed-out state for the Copilot extension. Shown when the broker
 * logs out of WealthX and the logout event is relayed to Copilot, so the
 * assistant clears its session and prompts a fresh sign-in. Composes
 * Empty + Button.
 *
 * Pure display — host wires onSignIn.
 */

export interface CopilotAuthStateProps {
  title?: string;
  description?: string;
  /** Primary action to re-authenticate. */
  onSignIn?: () => void;
  signInLabel?: string;
  className?: string;
}

export function CopilotAuthState({
  title = "You've been signed out",
  description = "Sign in to WealthX to keep using Copilot.",
  onSignIn,
  signInLabel = "Sign in",
  className,
}: CopilotAuthStateProps) {
  return (
    <Empty className={className}>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <LogOut />
        </EmptyMedia>
        <EmptyTitle>{title}</EmptyTitle>
        <EmptyDescription>{description}</EmptyDescription>
      </EmptyHeader>

      {onSignIn && (
        <EmptyContent>
          <Button type="button" onClick={onSignIn}>
            {signInLabel}
          </Button>
        </EmptyContent>
      )}
    </Empty>
  );
}