vibn-frontend/components/layout/project-shell.tsx

"use client";

import { usePathname } from "next/navigation";
import { ReactNode, Suspense } from "react";
import Link from "next/link";
import { signOut, useSession } from "next-auth/react";
import { Toaster } from "sonner";

interface ProjectShellProps {
  children: ReactNode;
  workspace: string;
  projectId: string;
  projectName: string;
  projectDescription?: string;
  projectStatus?: string;
  projectProgress?: number;
  discoveryPhase?: number;
  capturedData?: Record<string, string>;
  createdAt?: string;
  updatedAt?: string;
  featureCount?: number;
  creationMode?: "fresh" | "chat-import" | "code-import" | "migration";
}

const SECTIONS = [
  { id: "overview",  label: "Vibn",      path: "overview" },
  { id: "prd",       label: "PRD",       path: "prd" },
  { id: "build",     label: "Build",     path: "build" },
  { id: "growth",    label: "Growth",    path: "growth" },
  { id: "assist",    label: "Assist",    path: "assist" },
  { id: "analytics", label: "Analytics", path: "analytics" },
] as const;


function ProjectShellInner({
  children,
  workspace,
  projectId,
  projectName,
}: ProjectShellProps) {
  const pathname = usePathname();
  const { data: session } = useSession();

  const activeSection =
    pathname?.includes("/overview")  ? "overview"  :
    pathname?.includes("/prd")        ? "prd"        :
    pathname?.includes("/build")      ? "build"      :
    pathname?.includes("/growth")     ? "growth"     :
    pathname?.includes("/assist")     ? "assist"     :
    pathname?.includes("/analytics")  ? "analytics"  :
    "overview";

  const userInitial = (
    session?.user?.name?.[0] ?? session?.user?.email?.[0] ?? "?"
  ).toUpperCase();

  return (
    <>
      <div style={{
        display: "flex", flexDirection: "column",
        height: "100dvh", overflow: "hidden",
        fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
        background: "var(--background)",
      }}>

        {/* ── Top bar ── */}
        <header style={{
          height: 48, flexShrink: 0,
          display: "flex", alignItems: "stretch",
          background: "var(--card)", borderBottom: "1px solid var(--border)",
          zIndex: 10,
        }}>

          {/* Logo + project name */}
          <div style={{
            display: "flex", alignItems: "center",
            padding: "0 16px", gap: 9, flexShrink: 0,
            borderRight: "1px solid var(--border)",
          }}>
            <Link
              href={`/${workspace}/projects`}
              style={{ display: "flex", alignItems: "center", textDecoration: "none", flexShrink: 0 }}
            >
              <div style={{ width: 22, height: 22, borderRadius: 6, overflow: "hidden" }}>
                <img src="/vibn-black-circle-logo.png" alt="VIBN" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              </div>
            </Link>
            <span style={{
              fontSize: "0.82rem", fontWeight: 600, color: "var(--foreground)",
              maxWidth: 160, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
            }}>
              {projectName}
            </span>
          </div>

          {/* Tab nav */}
          <div style={{ flex: 1, display: "flex", alignItems: "center", padding: "0 12px", gap: 2 }}>
            {SECTIONS.map(s => {
              const isActive = activeSection === s.id;
              return (
                <Link
                  key={s.id}
                  href={`/${workspace}/project/${projectId}/${s.path}`}
                  style={{
                    padding: "5px 12px", borderRadius: 8,
                    fontSize: "0.8rem",
                    fontWeight: isActive ? 600 : 440,
                    color: isActive ? "var(--foreground)" : "var(--muted-foreground)",
                    background: isActive ? "var(--secondary)" : "transparent",
                    textDecoration: "none",
                    transition: "background 0.1s, color 0.1s",
                    whiteSpace: "nowrap",
                  }}
                  onMouseEnter={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "var(--muted)"; }}
                  onMouseLeave={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
                >
                  {s.label}
                </Link>
              );
            })}

            {/* Spacer */}
            <div style={{ flex: 1 }} />

            {/* User avatar */}
            <button
              onClick={() => signOut({ callbackUrl: "/auth" })}
              title={`${session?.user?.name ?? session?.user?.email ?? "Account"} — Sign out`}
              style={{
                width: 28, height: 28, borderRadius: "50%",
                background: "var(--secondary)", border: "none", cursor: "pointer",
                display: "flex", alignItems: "center", justifyContent: "center",
                fontSize: "0.65rem", fontWeight: 700, color: "var(--muted-foreground)", flexShrink: 0,
              }}
            >
              {userInitial}
            </button>
          </div>
        </header>

        {/* ── Full-width content ── */}
        <div style={{ flex: 1, overflow: "hidden", display: "flex", flexDirection: "column" }}>
          {children}
        </div>
      </div>

      <Toaster position="top-center" />
    </>
  );
}

// Wrap in Suspense because useSearchParams requires it
export function ProjectShell(props: ProjectShellProps) {
  return (
    <Suspense fallback={null}>
      <ProjectShellInner {...props} />
    </Suspense>
  );
}