import { useEffect, useCallback } from "react";
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable";
import { Toolbar } from "@/components/layout/Toolbar";
import { Sidebar } from "@/components/layout/Sidebar";
import { TabBar } from "@/components/layout/TabBar";
import { TabContent } from "@/components/workspace/TabContent";
import { StatusBar } from "@/components/layout/StatusBar";
import { useAppStore } from "@/stores/app-store";
import type { Tab } from "@/types";

export default function App() {
  const { activeConnectionId, currentDatabase, addTab } = useAppStore();

  const handleNewQuery = useCallback(() => {
    if (!activeConnectionId) return;
    const tab: Tab = {
      id: crypto.randomUUID(),
      type: "query",
      title: "New Query",
      connectionId: activeConnectionId,
      database: currentDatabase ?? undefined,
      sql: "",
    };
    addTab(tab);
  }, [activeConnectionId, currentDatabase, addTab]);

  const handleCloseTab = useCallback(() => {
    const { activeTabId, closeTab } = useAppStore.getState();
    if (activeTabId) closeTab(activeTabId);
  }, []);

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if ((e.ctrlKey || e.metaKey) && e.key === "t") {
        e.preventDefault();
        handleNewQuery();
      }
      if ((e.ctrlKey || e.metaKey) && e.key === "w") {
        e.preventDefault();
        handleCloseTab();
      }
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [handleNewQuery, handleCloseTab]);

  return (
    <div className="flex h-screen flex-col">
      <Toolbar />
      <div className="flex-1 overflow-hidden">
        <ResizablePanelGroup orientation="horizontal">
          <ResizablePanel id="sidebar" defaultSize="20%" minSize="180px" maxSize="40%">
            <Sidebar />
          </ResizablePanel>
          <ResizableHandle />
          <ResizablePanel id="main" defaultSize="80%">
            <div className="flex h-full flex-col">
              <TabBar />
              <div className="flex-1 overflow-hidden">
                <TabContent />
              </div>
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </div>
      <StatusBar />
    </div>
  );
}