"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";
}

const TOP_NAV = [
  { id: "build",  label: "Build",  path: "build" },
  { id: "market", label: "Market", path: "growth" },
  { id: "assist", label: "Assist", path: "assist" },
] 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", background: "#f6f4f0", overflow: "hidden", fontFamily: "Outfit, sans-serif" }}>

        {/* ── Top navbar ── */}
        <header style={{
          height: 48, flexShrink: 0,
          background: "#fff", borderBottom: "1px solid #e8e4dc",
          display: "flex", alignItems: "center",
          padding: "0 16px", gap: 0, zIndex: 10,
        }}>
          {/* Left: logo + project name */}
          <Link href={`/${workspace}/projects`} style={{ display: "flex", alignItems: "center", gap: 8, textDecoration: "none", flexShrink: 0, marginRight: 20 }}>
            <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>

          <div style={{ fontSize: "0.82rem", fontWeight: 600, color: "#1a1a1a", maxWidth: 180, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flexShrink: 0, marginRight: 24 }}>
            {projectName}
          </div>

          <div style={{ width: 1, height: 18, background: "#e8e4dc", flexShrink: 0, marginRight: 24 }} />

          {/* Center: section tabs */}
          <div style={{ display: "flex", alignItems: "center", gap: 2, flex: 1 }}>
            {TOP_NAV.map(item => {
              const isActive = activeSection === item.id;
              return (
                <Link
                  key={item.id}
                  href={`/${workspace}/project/${projectId}/${item.path}`}
                  style={{
                    padding: "5px 14px",
                    borderRadius: 8,
                    fontSize: "0.8rem",
                    fontWeight: isActive ? 600 : 450,
                    color: isActive ? "#1a1a1a" : "#8a8478",
                    background: isActive ? "#f0ece4" : "transparent",
                    textDecoration: "none",
                    transition: "all 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"; }}
                >
                  {item.label}
                </Link>
              );
            })}
          </div>

          {/* Right: user avatar */}
          <div style={{ display: "flex", alignItems: "center", gap: 10, flexShrink: 0 }}>
            <button
              onClick={() => signOut({ callbackUrl: "/auth" })}
              title="Sign out"
              style={{
                width: 30, height: 30, borderRadius: "50%",
                background: "#f0ece4", border: "none", cursor: "pointer",
                display: "flex", alignItems: "center", justifyContent: "center",
                fontSize: "0.68rem", fontWeight: 600, color: "#6b6560",
              }}
            >
              {userInitial}
            </button>
          </div>
        </header>

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

          {/* Left: COO / Assist — persistent across all sections */}
          <div style={{
            width: 320, 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.55rem", color: "#fff", flexShrink: 0,
              }}>◈</span>
              <div>
                <div style={{ fontSize: "0.75rem", fontWeight: 600, color: "#1a1a1a" }}>Assist</div>
                <div style={{ fontSize: "0.58rem", color: "#a09a90", letterSpacing: "0.03em" }}>Your product COO</div>
              </div>
            </div>

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

          {/* Right: page content — changes with top nav */}
          <div style={{ flex: 1, overflow: "hidden", minWidth: 0 }}>
            {children}
          </div>
        </div>
      </div>

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