"use client";

import { useEffect, useState } from "react";
import ChatApp from "@/components/ChatApp";
import { CodeView } from "@/components/CodeView";
import { TabBar, type TabId } from "@/components/TabBar";
import { subscribeToCodeNavigation } from "@/lib/workbench-navigation";

export default function AppShell() {
  const [activeTab, setActiveTab] = useState<TabId>("chat");

  useEffect(() => {
    return subscribeToCodeNavigation(() => {
      setActiveTab("code");
    });
  }, []);

  return (
    <div className="flex flex-col h-screen bg-rp-bg">
      <header className="shrink-0 flex items-center px-3 h-11 border-b border-rp-border/10">
        <TabBar activeTab={activeTab} onTabChange={setActiveTab} />
      </header>

      <div className="flex-1 min-h-0 relative">
        <div
          className="absolute inset-0"
          style={{ display: activeTab === "chat" || activeTab === "wiki" ? "block" : "none" }}
        >
          <ChatApp activeTab={activeTab === "wiki" ? "wiki" : "chat"} />
        </div>
        <div
          className="absolute inset-0"
          style={{ display: activeTab === "code" ? "block" : "none" }}
        >
          <CodeView />
        </div>
      </div>
    </div>
  );
}