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

"use client";

import { usePathname } from "next/navigation";
import { ReactNode } from "react";
import Link from "next/link";
import { signOut, useSession } from "next-auth/react";
import { CooChat } from "./coo-chat";
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";
}

// Width of the left chat panel — must match in both the header and the body
const CHAT_W = 320;

const SECTIONS = [
  { id: "build",  label: "Build",  path: "build" },
  { id: "market", label: "Market", path: "growth" },
  { id: "assist", label: "Assist", path: "assist" },
] as const;

// Tool icons shown to the right of section pills
const TOOLS = [
  { id: "preview",  icon: "↗",  label: "Preview",    title: "Open preview" },
  { id: "tasks",    icon: "≡",  label: "Tasks",      title: "Agent tasks" },
  { id: "code",     icon: "</>", label: "Code",      title: "Code" },
  { id: "design",   icon: "◈",  label: "Design",     title: "Design" },
  { id: "backend",  icon: "⬡",  label: "Backend",    title: "Backend / Infra" },
] as const;

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

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

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

  return (
    <>
      <div style={{
        display: "flex", flexDirection: "column",
        height: "100dvh", overflow: "hidden",
        fontFamily: "Outfit, sans-serif",
        background: "#f6f4f0",
      }}>

        {/* ── Top bar — split to align with panels below ── */}
        <header style={{
          height: 48, flexShrink: 0,
          display: "flex", alignItems: "stretch",
          background: "#fff", borderBottom: "1px solid #e8e4dc",
          zIndex: 10,
        }}>

          {/* Left section — aligns with chat panel */}
          <div style={{
            width: CHAT_W, flexShrink: 0,
            display: "flex", alignItems: "center",
            padding: "0 14px", gap: 9,
            borderRight: "1px solid #e8e4dc",
          }}>
            <Link
              href={`/${workspace}/projects`}
              style={{ display: "flex", alignItems: "center", gap: 8, textDecoration: "none", flexShrink: 0 }}
            >
              <div style={{ width: 22, height: 22, borderRadius: 6, overflow: "hidden", flexShrink: 0 }}>
                <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: "#1a1a1a",
              overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1,
            }}>
              {projectName}
            </span>
          </div>

          {/* Right section — aligns with content panel */}
          <div style={{
            flex: 1, display: "flex", alignItems: "center",
            padding: "0 16px", gap: 0, minWidth: 0,
          }}>

            {/* Section pills: Build | Market | Assist */}
            <div style={{ display: "flex", alignItems: "center", gap: 2, marginRight: "auto" }}>
              {SECTIONS.map(s => {
                const isActive = activeSection === s.id;
                return (
                  <Link
                    key={s.id}
                    href={`/${workspace}/project/${projectId}/${s.path}`}
                    style={{
                      padding: "5px 13px",
                      borderRadius: 8,
                      fontSize: "0.8rem",
                      fontWeight: isActive ? 600 : 440,
                      color: isActive ? "#1a1a1a" : "#8a8478",
                      background: isActive ? "#f0ece4" : "transparent",
                      textDecoration: "none",
                      transition: "background 0.1s, color 0.1s",
                      whiteSpace: "nowrap",
                    }}
                    onMouseEnter={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "#f6f4f0"; }}
                    onMouseLeave={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
                  >
                    {s.label}
                  </Link>
                );
              })}
            </div>

            {/* Divider */}
            <div style={{ width: 1, height: 18, background: "#e8e4dc", margin: "0 14px", flexShrink: 0 }} />

            {/* Tool icons */}
            <div style={{ display: "flex", alignItems: "center", gap: 2, marginRight: 12 }}>
              {TOOLS.map(t => (
                <button
                  key={t.id}
                  title={t.title}
                  style={{
                    width: 32, height: 32, border: "none", borderRadius: 7,
                    background: "transparent", cursor: "pointer",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    fontSize: t.icon === "</>" ? "0.6rem" : "0.78rem",
                    color: "#9a9490", fontFamily: "Outfit, sans-serif",
                    fontWeight: 600, letterSpacing: t.icon === "</>" ? "-0.02em" : "normal",
                    transition: "background 0.1s, color 0.1s",
                  }}
                  onMouseEnter={e => {
                    (e.currentTarget as HTMLElement).style.background = "#f0ece4";
                    (e.currentTarget as HTMLElement).style.color = "#1a1a1a";
                  }}
                  onMouseLeave={e => {
                    (e.currentTarget as HTMLElement).style.background = "transparent";
                    (e.currentTarget as HTMLElement).style.color = "#9a9490";
                  }}
                >
                  {t.icon}
                </button>
              ))}
            </div>

            {/* 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: "#f0ece4", border: "none", cursor: "pointer",
                display: "flex", alignItems: "center", justifyContent: "center",
                fontSize: "0.65rem", fontWeight: 700, color: "#6b6560", flexShrink: 0,
              }}
            >
              {userInitial}
            </button>
          </div>
        </header>

        {/* ── Main area ── */}
        <div style={{ flex: 1, display: "flex", overflow: "hidden" }}>

          {/* Left: Assist chat — persistent */}
          <div style={{
            width: CHAT_W, flexShrink: 0,
            borderRight: "1px solid #e8e4dc",
            background: "#fff",
            display: "flex", flexDirection: "column",
            overflow: "hidden",
          }}>
            {/* Chat header */}
            <div style={{
              height: 44, flexShrink: 0,
              display: "flex", alignItems: "center",
              padding: "0 14px", gap: 8,
              borderBottom: "1px solid #e8e4dc",
              background: "#faf8f5",
            }}>
              <span style={{
                width: 22, height: 22, borderRadius: 6,
                background: "#1a1a1a",
                display: "flex", alignItems: "center", justifyContent: "center",
                fontSize: "0.52rem", color: "#fff", flexShrink: 0,
              }}>◈</span>
              <div>
                <div style={{ fontSize: "0.74rem", fontWeight: 600, color: "#1a1a1a" }}>Assist</div>
                <div style={{ fontSize: "0.57rem", color: "#a09a90", letterSpacing: "0.03em" }}>Your product COO</div>
              </div>
            </div>

            <CooChat projectId={projectId} />
          </div>

          {/* Right: content — changes per section */}
          <div style={{ flex: 1, overflow: "hidden", minWidth: 0 }}>
            {children}
          </div>
        </div>
      </div>

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