import { knowledgetoolUrl } from '@/hooks/useExpertAuthBootstrap';
import { Archive, Loader2, MessageSquareText, Plus, RefreshCw, Trash2, X } from 'lucide-react';
import { useCallback, useEffect, useMemo, useState } from 'react';

export interface SkillCreatorThread {
  id: number;
  title: string;
  archived: boolean;
  expert_agent_id: number | null;
  created_at: string;
  updated_at: string;
}

interface ThreadListResponse {
  threads?: SkillCreatorThread[];
  archived_threads?: SkillCreatorThread[];
}

interface SkillCreatorThreadSidebarProps {
  authedFetch: (input: Parameters<typeof fetch>[0], init?: Parameters<typeof fetch>[1]) => Promise<Response>;
  currentThreadId: string;
  isDarkMode: boolean;
  isOpen: boolean;
  isBusy?: boolean;
  createThreadPayload?: Record<string, unknown>;
  createButtonText?: string;
  emptyText?: string;
  subtitle?: string;
  threadFilter?: (thread: SkillCreatorThread) => boolean;
  onClose: () => void;
  onThreadSelect: (threadId: string) => void;
}

const THREADS_API_URL = `${knowledgetoolUrl}/api/v1/expert-agent-chat/threads`;

const sortThreads = (threads: SkillCreatorThread[]) =>
  [...threads].sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime());

export default function SkillCreatorThreadSidebar({
  authedFetch,
  currentThreadId,
  isDarkMode,
  isOpen,
  isBusy = false,
  createThreadPayload,
  createButtonText = '新建聊天',
  emptyText = '暂无记录',
  subtitle = '切换或管理当前会话',
  threadFilter,
  onClose,
  onThreadSelect,
}: SkillCreatorThreadSidebarProps) {
  const [threads, setThreads] = useState<SkillCreatorThread[]>([]);
  const [archivedThreads, setArchivedThreads] = useState<SkillCreatorThread[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isCreating, setIsCreating] = useState(false);
  const [deletingThreadId, setDeletingThreadId] = useState<number | null>(null);
  const [error, setError] = useState('');

  const applyFilter = useCallback(
    (items: SkillCreatorThread[]) => (threadFilter ? items.filter(threadFilter) : items),
    [threadFilter],
  );

  const refreshThreads = useCallback(async () => {
    setIsLoading(true);
    setError('');

    try {
      const response = await authedFetch(THREADS_API_URL, { method: 'GET' });
      if (!response.ok) {
        throw new Error(`获取会话列表失败: ${response.status}`);
      }

      const data = (await response.json()) as ThreadListResponse;
      const nextThreads = Array.isArray(data.threads) ? data.threads : [];
      const nextArchivedThreads = Array.isArray(data.archived_threads) ? data.archived_threads : [];

      setThreads(sortThreads(applyFilter(nextThreads)));
      setArchivedThreads(sortThreads(applyFilter(nextArchivedThreads)));
    } catch (fetchError) {
      console.error('获取会话列表失败', fetchError);
      setError('会话列表加载失败，请稍后重试');
    } finally {
      setIsLoading(false);
    }
  }, [applyFilter, authedFetch]);

  useEffect(() => {
    if (!isOpen) return;
    void refreshThreads();
  }, [isOpen, refreshThreads]);

  const allThreads = useMemo(() => [...threads, ...archivedThreads], [archivedThreads, threads]);

  const handleCreateThread = async () => {
    if (isBusy || isCreating) return;

    setIsCreating(true);
    setError('');

    try {
      const response = await authedFetch(THREADS_API_URL, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          title: '新建技能',
          archived: false,
          is_real_chat: true,
          ...createThreadPayload,
        }),
      });

      if (!response.ok) {
        throw new Error(`创建会话失败: ${response.status}`);
      }

      const newThread = (await response.json()) as SkillCreatorThread;
      if (!threadFilter || threadFilter(newThread)) {
        setThreads((prev) => sortThreads([newThread, ...prev]));
      }
      onThreadSelect(String(newThread.id));
    } catch (createError) {
      console.error('创建会话失败', createError);
      setError('新建会话失败，请稍后重试');
    } finally {
      setIsCreating(false);
    }
  };

  const handleDeleteThread = async (thread: SkillCreatorThread) => {
    if (isBusy || deletingThreadId === thread.id) return;

    const confirmed = window.confirm(`确认删除会话“${thread.title || `会话 ${thread.id}`}”吗？`);
    if (!confirmed) return;

    setDeletingThreadId(thread.id);
    setError('');

    try {
      const response = await authedFetch(`${THREADS_API_URL}/${thread.id}`, {
        method: 'DELETE',
      });

      if (!response.ok) {
        throw new Error(`删除会话失败: ${response.status}`);
      }

      const nextThreads = threads.filter((item) => item.id !== thread.id);
      const nextArchivedThreads = archivedThreads.filter((item) => item.id !== thread.id);
      setThreads(nextThreads);
      setArchivedThreads(nextArchivedThreads);

      if (currentThreadId === String(thread.id)) {
        const fallbackThread = [...nextThreads, ...nextArchivedThreads][0];
        onThreadSelect(fallbackThread ? String(fallbackThread.id) : '');
      }
    } catch (deleteError) {
      console.error('删除会话失败', deleteError);
      setError('删除会话失败，请稍后重试');
    } finally {
      setDeletingThreadId(null);
    }
  };

  const renderThreadSection = (title: string, items: SkillCreatorThread[], archived = false) => (
    <div className="space-y-2.5">
      <div className="flex items-center justify-between px-1">
        <div className="flex items-center gap-1.5">
          {archived ? <Archive className="h-3.5 w-3.5" /> : <MessageSquareText className="h-3.5 w-3.5" />}
          <span className="text-[11px] font-semibold tracking-[0.14em]">{title}</span>
        </div>
        <span className={`text-[11px] ${isDarkMode ? 'text-slate-500' : 'text-gray-400'}`}>{items.length}</span>
      </div>

      {items.length === 0 ? (
        <div
          className={`rounded-xl border border-dashed px-3 py-4 text-center text-xs ${
            isDarkMode ? 'border-slate-700 text-slate-500' : 'border-gray-200 text-gray-400'
          }`}
        >
          {emptyText}
        </div>
      ) : (
        <div className="space-y-1">
          {items.map((thread) => {
            const isActive = currentThreadId === String(thread.id);
            const isDeleting = deletingThreadId === thread.id;

            return (
              <button
                key={thread.id}
                type="button"
                disabled={isBusy}
                onClick={() => onThreadSelect(String(thread.id))}
                className={`group flex w-full items-center gap-3 rounded-xl border px-3 py-2.5 text-left transition-all duration-200 ${
                  isActive
                    ? isDarkMode
                      ? 'border-slate-600 bg-slate-800/90 text-slate-50 shadow-sm'
                      : 'border-red-200 bg-red-50/80 text-gray-900 shadow-sm'
                    : isDarkMode
                      ? 'border-transparent text-slate-300 hover:border-slate-700 hover:bg-slate-800/60 hover:text-slate-100'
                      : 'border-transparent text-gray-700 hover:border-gray-200 hover:bg-gray-50 hover:text-gray-900'
                } ${isBusy ? 'cursor-not-allowed opacity-70' : ''}`}
              >
                <span
                  className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${
                    isActive
                      ? isDarkMode
                        ? 'bg-slate-700 text-slate-200'
                        : 'bg-white text-red-500 ring-1 ring-red-100'
                      : isDarkMode
                        ? 'bg-slate-800 text-slate-400'
                        : 'bg-gray-100 text-gray-500'
                  }`}
                >
                  {archived ? <Archive className="h-4 w-4" /> : <MessageSquareText className="h-4 w-4" />}
                </span>

                <span className="min-w-0 flex-1">
                  <span className="block truncate text-sm font-medium">{thread.title || `会话 ${thread.id}`}</span>
                </span>

                <span
                  onClick={(event) => {
                    event.stopPropagation();
                    void handleDeleteThread(thread);
                  }}
                  className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-lg transition ${
                    isActive ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100'
                  } ${
                    isDarkMode
                      ? 'text-slate-400 hover:bg-rose-500/15 hover:text-rose-300'
                      : 'text-gray-400 hover:bg-rose-50 hover:text-rose-500'
                  }`}
                  role="button"
                  aria-label={`删除会话 ${thread.title || thread.id}`}
                  tabIndex={0}
                  onKeyDown={(event) => {
                    if (event.key === 'Enter' || event.key === ' ') {
                      event.preventDefault();
                      event.stopPropagation();
                      void handleDeleteThread(thread);
                    }
                  }}
                >
                  {isDeleting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
                </span>
              </button>
            );
          })}
        </div>
      )}
    </div>
  );

  return (
    <aside
      className={`flex h-full shrink-0 flex-col overflow-hidden border-r transition-[width,opacity,transform,border-color] duration-300 ease-out ${
        isOpen ? 'w-[286px] translate-x-0 opacity-100' : 'w-0 -translate-x-3 opacity-0 pointer-events-none'
      } ${
        isDarkMode ? 'border-slate-700 bg-slate-950/90 text-slate-100' : 'border-gray-200 bg-[#fafafa] text-gray-900'
      }`}
    >
      <div className={`border-b px-4 py-4 ${isDarkMode ? 'border-slate-800 bg-slate-900/70' : 'border-gray-200 bg-white'}`}>
        <div className="flex items-center justify-between gap-3">
          <div className="min-w-0">
            <h3 className="text-sm font-semibold">聊天记录</h3>
            <p className={`mt-1 text-xs ${isDarkMode ? 'text-slate-500' : 'text-gray-500'}`}>{subtitle}</p>
          </div>

          <button
            type="button"
            onClick={onClose}
            className={`flex h-8 w-8 items-center justify-center rounded-lg transition ${
              isDarkMode ? 'text-slate-400 hover:bg-slate-800 hover:text-slate-100' : 'text-gray-400 hover:bg-gray-100 hover:text-gray-700'
            }`}
            title="关闭聊天记录"
          >
            <X className="h-4 w-4" />
          </button>
        </div>

        <div className="mt-4 flex items-center gap-2">
          <button
            type="button"
            disabled={isBusy || isCreating}
            onClick={() => void handleCreateThread()}
            className={`inline-flex h-9 flex-1 items-center justify-center gap-2 rounded-lg border px-3 text-sm font-medium transition ${
              isDarkMode
                ? 'border-slate-700 bg-slate-800 text-slate-100 hover:bg-slate-700'
                : 'border-gray-200 bg-white text-gray-700 hover:border-red-200 hover:bg-red-50 hover:text-red-600'
            } disabled:cursor-not-allowed disabled:opacity-70`}
          >
            {isCreating ? <Loader2 className="h-4 w-4 animate-spin" /> : <Plus className="h-4 w-4" />}
            {createButtonText}
          </button>
          <button
            type="button"
            disabled={isLoading}
            onClick={() => void refreshThreads()}
            className={`flex h-9 w-9 items-center justify-center rounded-lg border transition ${
              isDarkMode
                ? 'border-slate-700 bg-slate-800 text-slate-300 hover:bg-slate-700'
                : 'border-gray-200 bg-white text-gray-500 hover:border-gray-300 hover:text-gray-700'
            } ${isLoading ? 'cursor-not-allowed opacity-70' : ''}`}
            title="刷新会话列表"
          >
            <RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
          </button>
        </div>

        {error && (
          <div className={`mt-3 rounded-lg px-3 py-2 text-xs ${isDarkMode ? 'bg-rose-500/10 text-rose-300' : 'bg-rose-50 text-rose-500'}`}>
            {error}
          </div>
        )}
      </div>

      <div className="min-h-0 flex-1 overflow-y-auto px-3 py-3">
        {isLoading && allThreads.length === 0 ? (
          <div className={`flex h-full items-center justify-center gap-2 text-sm ${isDarkMode ? 'text-slate-400' : 'text-gray-500'}`}>
            <Loader2 className="h-4 w-4 animate-spin" />
            正在加载聊天记录...
          </div>
        ) : (
          <div className="space-y-5">
            {renderThreadSection('进行中', threads)}
            {renderThreadSection('已归档', archivedThreads, true)}
          </div>
        )}
      </div>
    </aside>
  );
}