import { useAppStore } from "@/stores/app-store";
import { WorkspacePanel } from "./WorkspacePanel";
import { TableDataView } from "@/components/table-viewer/TableDataView";
import { TableStructure } from "@/components/table-viewer/TableStructure";
import { ChatPanel } from "@/components/chat/ChatPanel";

export function TabContent() {
  const { tabs, activeTabId, updateTab } = useAppStore();

  if (tabs.length === 0) {
    return (
      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
        Open a query tab or select a table to get started.
      </div>
    );
  }

  return (
    <>
      {tabs.map((tab) => {
        const isActive = tab.id === activeTabId;
        let content: React.ReactNode;

        switch (tab.type) {
          case "query":
            content = (
              <WorkspacePanel
                connectionId={tab.connectionId}
                initialSql={tab.sql}
                onSqlChange={(sql) => updateTab(tab.id, { sql })}
              />
            );
            break;
          case "table":
            content = (
              <TableDataView
                connectionId={tab.connectionId}
                schema={tab.schema!}
                table={tab.table!}
              />
            );
            break;
          case "structure":
            content = (
              <TableStructure
                connectionId={tab.connectionId}
                schema={tab.schema!}
                table={tab.table!}
              />
            );
            break;
          case "chat":
            content = (
              <ChatPanel tabId={tab.id} connectionId={tab.connectionId} />
            );
            break;
          default:
            content = null;
        }

        return (
          <div
            key={tab.id}
            className="h-full"
            style={{ display: isActive ? undefined : "none" }}
          >
            {content}
          </div>
        );
      })}
    </>
  );
}
