import React, { useEffect, useRef, useState } from 'react';
import {
  Check,
  ChevronDown,
  MessageSquare,
  Pencil,
  Plus,
  Trash2,
  X,
} from 'lucide-react';

import { THREAD_TITLE_MAX_CHARS } from '../../lib/copilot/thread-turns';
import type { ICopilotThreadSummary } from '../../service/copilot/copilot.interface';

import { cn } from './cn';

/** Label shown when no saved conversation is open. */
const NO_THREAD_LABEL = 'New conversation';

/**
 * The "select a chat" control: every saved conversation, newest first, plus a
 * way to start a fresh one. Threads are per merchant and outlive the session,
 * so a conversation can be picked back up days later, from here or from the
 * dashboard.
 *
 * A title is the merchant's to change: it was only ever the opening question
 * cut at sixty characters, and a dozen conversations about the same subject
 * could not be told apart in the list.
 */
export function ThreadSwitcher({
  threads,
  activeThreadId,
  onOpen,
  onNew,
  onDelete,
  onRename,
}: {
  threads: ICopilotThreadSummary[];
  activeThreadId: string | null;
  onOpen: (threadId: string) => void;
  onNew: () => void;
  onDelete?: (threadId: string) => void;
  onRename?: (threadId: string, title: string) => void;
}): React.ReactElement {
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [draftTitle, setDraftTitle] = useState<string>('');
  const containerRef = useRef<HTMLDivElement>(null);
  const editInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (!isOpen) return undefined;
    const closeOnOutsideClick = (event: MouseEvent): void => {
      if (!containerRef.current?.contains(event.target as Node)) {
        setIsOpen(false);
        setEditingId(null);
      }
    };
    document.addEventListener('mousedown', closeOnOutsideClick);
    return () => document.removeEventListener('mousedown', closeOnOutsideClick);
  }, [isOpen]);

  useEffect(() => {
    if (editingId) editInputRef.current?.select();
  }, [editingId]);

  const activeThread: ICopilotThreadSummary | undefined = threads.find(
    thread => thread.thread_id === activeThreadId
  );
  const activeLabel: string = activeThread?.title || NO_THREAD_LABEL;

  const beginRename = (thread: ICopilotThreadSummary): void => {
    setEditingId(thread.thread_id);
    setDraftTitle(thread.title || '');
  };

  const commitRename = (): void => {
    const title: string = draftTitle.trim();
    if (editingId && title && onRename) onRename(editingId, title);
    setEditingId(null);
  };

  const onRenameKey = (event: React.KeyboardEvent<HTMLInputElement>): void => {
    if (event.key === 'Enter') {
      event.preventDefault();
      commitRename();
    } else if (event.key === 'Escape') {
      event.preventDefault();
      setEditingId(null);
    }
  };

  return (
    // min-w-0 here and w-full below are both load-bearing: without the first
    // the wrapper keeps its content-based minimum, without the second the
    // button falls back to shrink-to-fit, whose min-content floor no
    // min-width can lower. Drop either and the title paints over the
    // header's buttons.
    <div ref={containerRef} className="relative min-w-0">
      <button
        type="button"
        onClick={() => setIsOpen(value => !value)}
        className="flex w-full max-w-[220px] items-center gap-1.5 rounded-lg px-2 py-1 text-sm text-gray-700 transition hover:bg-gray-100"
      >
        <span className="truncate">{activeLabel}</span>
        <ChevronDown className="h-4 w-4 shrink-0" />
      </button>

      {isOpen && (
        <div className="absolute top-full left-0 z-40 mt-1 w-[290px] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl">
          <button
            type="button"
            onClick={() => {
              onNew();
              setIsOpen(false);
            }}
            className="flex w-full items-center gap-2 px-3 py-2.5 text-left text-sm text-gray-700 transition hover:bg-gray-50"
          >
            <Plus className="h-4 w-4" />
            New conversation
          </button>

          {threads.length > 0 && (
            <div className="max-h-[320px] overflow-y-auto border-t border-gray-200">
              {threads.map(thread => (
                <div
                  key={thread.thread_id}
                  className={cn(
                    'group flex items-center gap-2 px-3 py-2 transition hover:bg-gray-50',
                    thread.thread_id === activeThreadId && 'bg-gray-100'
                  )}
                >
                  {editingId === thread.thread_id ? (
                    <>
                      <input
                        ref={editInputRef}
                        value={draftTitle}
                        maxLength={THREAD_TITLE_MAX_CHARS}
                        onChange={event => setDraftTitle(event.target.value)}
                        onKeyDown={onRenameKey}
                        aria-label="Conversation title"
                        className="min-w-0 flex-1 rounded-md border border-gray-300 px-2 py-1 text-sm text-gray-900 outline-none focus:border-[#e85bbd]"
                      />
                      <button
                        type="button"
                        onClick={commitRename}
                        aria-label="Save title"
                        className="shrink-0 rounded-md p-1 text-green-600 hover:bg-gray-100"
                      >
                        <Check className="h-3.5 w-3.5" />
                      </button>
                      <button
                        type="button"
                        onClick={() => setEditingId(null)}
                        aria-label="Cancel"
                        className="shrink-0 rounded-md p-1 text-gray-500 hover:bg-gray-100"
                      >
                        <X className="h-3.5 w-3.5" />
                      </button>
                    </>
                  ) : (
                    <>
                      <button
                        type="button"
                        onClick={() => {
                          onOpen(thread.thread_id);
                          setIsOpen(false);
                        }}
                        className="flex min-w-0 flex-1 items-center gap-2 text-left"
                      >
                        <MessageSquare className="h-3.5 w-3.5 shrink-0 text-gray-400" />
                        <span className="truncate text-sm text-gray-700">
                          {thread.title || NO_THREAD_LABEL}
                        </span>
                      </button>
                      {onRename && (
                        <button
                          type="button"
                          onClick={() => beginRename(thread)}
                          aria-label="Rename conversation"
                          className="shrink-0 rounded-md p-1 text-gray-400 opacity-0 transition group-hover:opacity-100 hover:bg-gray-100"
                        >
                          <Pencil className="h-3.5 w-3.5" />
                        </button>
                      )}
                      {onDelete && (
                        <button
                          type="button"
                          onClick={() => onDelete(thread.thread_id)}
                          aria-label="Delete conversation"
                          className="shrink-0 rounded-md p-1 text-gray-400 opacity-0 transition group-hover:opacity-100 hover:bg-gray-100 hover:text-red-600"
                        >
                          <Trash2 className="h-3.5 w-3.5" />
                        </button>
                      )}
                    </>
                  )}
                </div>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}