"use client";

import { ReactNode, useState, useMemo } from "react";
import { usePathname } from "next/navigation";
import { LeftRail } from "./left-rail";
import { RightPanel } from "./right-panel";

interface AppShellProps {
  children: ReactNode;
  workspace: string;
  projectId: string;
  projectName?: string;
}

export function AppShell({ children, workspace, projectId, projectName }: AppShellProps) {
  const pathname = usePathname();
  const [activeSection, setActiveSection] = useState<string>("home");
  
  // Derive active section from pathname
  const derivedSection = useMemo(() => {
    if (pathname.includes('/overview')) return 'home';
    if (pathname.includes('/design')) return 'design';
    return activeSection;
  }, [pathname, activeSection]);
  
  const displayProjectName = projectName || "Product";

  return (
    <div className="flex h-screen w-full overflow-hidden bg-background">
      {/* Left Rail - App Navigation */}
      <LeftRail 
        key={projectId} // Force re-render when projectId changes
        activeSection={derivedSection} 
        onSectionChange={setActiveSection}
        projectName={displayProjectName}
        projectId={projectId}
        workspace={workspace}
      />

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

      {/* Right Panel - Activity & AI Chat */}
      <RightPanel />
    </div>
  );
}