import * as React from "react";
import { Pencil, Trash2, X } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";

/**
 * CopilotChatHistory — WealthX DS (Molecule)
 *
 * The Copilot's chat-history panel: a scrollable list of past conversations.
 * The current conversation is highlighted with a "current" badge and inline
 * rename / delete actions; the rest are tappable rows that reopen the thread.
 *
 * Pure display — the host supplies the conversations and wires the callbacks.
 */

export interface CopilotConversation {
  id: string;
  /** Conversation title (usually the first user message). */
  title: string;
  /** Relative time, e.g. "a few seconds ago" / "20 hours ago". */
  timeLabel: string;
}

export interface CopilotChatHistoryProps {
  conversations: CopilotConversation[];
  /** Id of the conversation currently open — gets the highlight + actions. */
  currentId?: string;
  /** Panel heading. Defaults to "Chat History". */
  title?: string;
  onSelect?: (id: string) => void;
  onRename?: (id: string) => void;
  onDelete?: (id: string) => void;
  onClose?: () => void;
  /** Shown when there are no conversations. */
  emptyLabel?: string;
  className?: string;
}

export function CopilotChatHistory({
  conversations,
  currentId,
  title = "Chat History",
  onSelect,
  onRename,
  onDelete,
  onClose,
  emptyLabel = "No conversations yet.",
  className,
}: CopilotChatHistoryProps) {
  return (
    <div
      className={cn(
        "flex h-full w-full flex-col overflow-hidden bg-background",
        className,
      )}
    >
      <div className="flex items-center justify-between gap-2 border-b border-border px-4 py-3">
        <h2 className="text-body-large font-semibold text-foreground">
          {title}
        </h2>
        {onClose && (
          <Button
            type="button"
            variant="ghost"
            size="icon-sm"
            aria-label="Close chat history"
            onClick={onClose}
          >
            <X className="size-4" />
          </Button>
        )}
      </div>

      <div className="flex-1 overflow-y-auto">
        {conversations.length === 0 ? (
          <p className="px-4 py-8 text-center text-body-small text-muted-foreground">
            {emptyLabel}
          </p>
        ) : (
          conversations.map((conv) => {
            const isCurrent = conv.id === currentId;
            return (
              <div
                key={conv.id}
                className={cn(
                  "flex items-start justify-between gap-2",
                  isCurrent
                    ? "m-2 bg-primary/5 p-3"
                    : "border-b border-border px-4 py-3 transition-colors hover:bg-muted/40",
                )}
              >
                <button
                  type="button"
                  onClick={() => onSelect?.(conv.id)}
                  className="flex min-w-0 flex-1 flex-col gap-1 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                >
                  <span className="flex items-center gap-2">
                    {isCurrent && <Badge>current</Badge>}
                    <span className="truncate text-body-medium font-semibold text-foreground">
                      {conv.title}
                    </span>
                  </span>
                  <span className="text-caption text-muted-foreground">
                    {conv.timeLabel}
                  </span>
                </button>
                {isCurrent && (onRename || onDelete) && (
                  <div className="flex shrink-0 items-center gap-0.5">
                    {onRename && (
                      <Button
                        type="button"
                        variant="ghost"
                        size="icon-sm"
                        aria-label="Rename conversation"
                        onClick={() => onRename(conv.id)}
                      >
                        <Pencil className="size-3.5" />
                      </Button>
                    )}
                    {onDelete && (
                      <Button
                        type="button"
                        variant="ghost"
                        size="icon-sm"
                        aria-label="Delete conversation"
                        onClick={() => onDelete(conv.id)}
                        className="text-muted-foreground hover:text-destructive"
                      >
                        <Trash2 className="size-3.5" />
                      </Button>
                    )}
                  </div>
                )}
              </div>
            );
          })
        )}
      </div>
    </div>
  );
}