"use client";

import { useState } from "react";

import { StudioMobileGate } from "@/components/studio/StudioMobileGate";
import { Toaster } from "@/components/ui/toaster";
import { CanvasArea } from "@/components/studio/video/CanvasArea";
import {
  StudioSidebarDock,
  type StudioSidebarTool,
} from "@/components/studio/video/StudioSidebarDock";
import { StudioSidebarContent } from "@/components/studio/video/StudioSidebarContent";
import { StudioTopBar } from "@/components/studio/video/StudioTopBar";
import { Timeline } from "@/components/studio/Timeline";
import { useIsMobile } from "@/hooks/useIsMobile";
import { useStudioProjectPersistence } from "@/hooks/useStudioProjectPersistence";

export interface VideoStudioLayoutProps {
  projectId: string;
}

export function VideoStudioLayout({ projectId }: VideoStudioLayoutProps) {
  const { isMobile, isReady } = useIsMobile();
  const { projectName, setProjectName, saveStatus, usingLocalStorage } =
    useStudioProjectPersistence(projectId);
  const [activeSidebarTool, setActiveSidebarTool] =
    useState<StudioSidebarTool>("scenes");

  if (!isReady) {
    return <div className="h-screen w-screen bg-[#0f111a]" aria-hidden />;
  }

  if (isMobile) {
    return <StudioMobileGate variant="video" />;
  }

  return (
    <div className="flex h-screen w-screen flex-col overflow-hidden bg-[#0f111a]">
      <Toaster />
      <StudioTopBar
        projectId={projectId}
        projectName={projectName}
        onProjectNameChange={setProjectName}
        saveStatus={saveStatus}
        usingLocalStorage={usingLocalStorage}
      />

      <div className="flex min-h-0 flex-1 overflow-hidden">
        <StudioSidebarDock
          activeTool={activeSidebarTool}
          onToolChange={setActiveSidebarTool}
        />
        <StudioSidebarContent activeTool={activeSidebarTool} />

        <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
          <CanvasArea />
          <Timeline
            onOpenTts={() => setActiveSidebarTool("tts")}
            onOpenAudio={() => setActiveSidebarTool("audio")}
            onSceneSelect={() => setActiveSidebarTool("scenes")}
          />
        </div>
      </div>
    </div>
  );
}
