import { useState } from "react";
import { useSessionStream } from "../stream/useSessionStream";
import { WidgetHost } from "./WidgetHost";
import { NavSessions } from "./NavSessions";
import { NewSessionDialog } from "./NewSessionDialog";
import { SteerInput } from "./SteerInput";
import { WorkflowBar } from "./WorkflowBar";

export function AppShell() {
  const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
  const [sidebarOpen, setSidebarOpen] = useState(true);

  useSessionStream(activeSessionId);

  function handleSessionSelect(id: string) {
    setActiveSessionId(id);
  }

  function handleCreated(id: string) {
    setActiveSessionId(id);
  }

  return (
    <div className="flex h-screen">
      {/* Left nav: new session button + sessions list */}
      <aside className="w-48 border-r p-2 flex flex-col gap-2">
        <NewSessionDialog onCreated={handleCreated} />
        <NavSessions
          activeSessionId={activeSessionId}
          onSessionSelect={handleSessionSelect}
        />
      </aside>

      <div className="flex flex-col flex-1 min-w-0">
        {/* Top workflow bar */}
        <header className="border-b px-4 py-2 flex items-center gap-4">
          <WorkflowBar />
          <button
            className="ml-auto text-xs text-muted-foreground hover:text-foreground border rounded px-2 py-0.5"
            onClick={() => setSidebarOpen((v) => !v)}
            aria-label={sidebarOpen ? "Chiudi sidebar" : "Apri sidebar"}
          >
            {sidebarOpen ? "←" : "→"}
          </button>
        </header>

        {/* Center: chat + steer input */}
        <main className="flex-1 overflow-auto p-4 flex flex-col gap-2">
          <WidgetHost sessionId={activeSessionId} />
          {activeSessionId && <SteerInput sessionId={activeSessionId} />}
        </main>
      </div>

      {/* Right artifact sidebar — collapsible */}
      {sidebarOpen && (
        <aside className="w-64 border-l p-2 flex flex-col">
          <p className="text-xs text-muted-foreground">Artefatti</p>
        </aside>
      )}
    </div>
  );
}