"use client";

import { useRouter } from "next/navigation";
import { useState, useSyncExternalStore } from "react";

import { ChatHistoryList } from "./HistoryPanel";
import { chatActive } from "@/lib/chat-active";
import { chatHistoryStore, deleteConversation, renameConversation, saveConversation } from "@/lib/chat-store";
import { useI18n } from "@/lib/i18n";
import { showToast } from "@/lib/toast";
import type { ChatConversation } from "@/lib/schemas";

/**
 * Chat history inside the main sidebar: when the Chat section is active the
 * deck navigation is replaced by the chat list (search, new chat, items with
 * rename/delete). Collapsed, it keeps one New-chat icon row.
 */
export function SidebarChatSection({ collapsed }: { collapsed: boolean }) {
  const { t } = useI18n();
  const router = useRouter();
  const conversations = useSyncExternalStore(
    chatHistoryStore.subscribe,
    chatHistoryStore.getSnapshot,
    chatHistoryStore.getServerSnapshot,
  );
  const activeId = useSyncExternalStore(chatActive.subscribe, chatActive.getSnapshot, chatActive.getServerSnapshot);
  const [query, setQuery] = useState("");

  const onDelete = (conversation: ChatConversation) => {
    deleteConversation(conversation.id);
    showToast({
      message: t("chat.deletedChat"),
      actionLabel: t("toast.undo"),
      onAction: () => saveConversation(conversation),
    });
  };

  // Collapsed, the list needs width — the highlighted Chat row above (and the
  // expand chevron) already cover navigation, so the section renders nothing.
  if (collapsed) return null;

  return (
    <div className="flex min-h-0 flex-1 flex-col">
      <h2 className="px-2 pb-1 pt-1 text-[11px] font-semibold uppercase tracking-wider text-[var(--text-subtle)]">
        {t("chat.history")}
      </h2>
      <ChatHistoryList
        conversations={conversations}
        currentId={activeId}
        query={query}
        onQueryChange={setQuery}
        onOpen={(id) => router.push(`/chat?c=${id}`)}
        onRename={renameConversation}
        onDelete={onDelete}
        onNew={() => router.push("/chat")}
      />
    </div>
  );
}