"use client";

import { WorkspaceLeftRail } from "@/components/layout/workspace-left-rail";
import { RightPanel } from "@/components/layout/right-panel";
import { ProjectAssociationPrompt } from "@/components/project-association-prompt";
import { ReactNode, useState } from "react";
import { useParams } from "next/navigation";
import { Toaster } from "sonner";

export default function ProjectsLayout({
  children,
}: {
  children: ReactNode;
}) {
  const params = useParams();
  const workspace = params.workspace as string;
  const [activeSection, setActiveSection] = useState<string>("projects");

  return (
    <>
      <div className="flex h-screen w-full overflow-hidden bg-background">
        {/* Left Rail - Workspace Navigation */}
        <WorkspaceLeftRail activeSection={activeSection} onSectionChange={setActiveSection} />

        {/* Main Content Area */}
        <main className="flex-1 flex flex-col overflow-hidden">
          {children}
        </main>

        {/* Right Panel - AI Chat */}
        <RightPanel />
      </div>
      
      {/* Project Association Prompt - Detects new workspaces */}
      <ProjectAssociationPrompt workspace={workspace} />
      
      <Toaster position="top-center" />
    </>
  );
}