"use client";

import { usePathname, useSearchParams, useRouter } from "next/navigation";
import { ReactNode, Suspense } from "react";
import Link from "next/link";
import { signOut, useSession } from "next-auth/react";
import { CooChat } from "./coo-chat";
import { Toaster } from "sonner";
import { MonitorPlay, ListChecks, Code2, Palette, Cloud } from "lucide-react";

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

// Each tool maps to a section param on the build page
const TOOLS = [
  { id: "preview",  Icon: MonitorPlay, title: "Preview",     section: "preview" },
  { id: "tasks",    Icon: ListChecks,  title: "Tasks",       section: "tasks" },
  { id: "code",     Icon: Code2,       title: "Code",        section: "code" },
  { id: "design",   Icon: Palette,     title: "Design",      section: "layouts" },
  { id: "backend",  Icon: Cloud,       title: "Backend",     section: "infrastructure" },
];

// Maps URL section → tool id (for active highlight)
const SECTION_TO_TOOL: Record<string, string> = {
  preview: "preview",
  tasks:   "tasks",
  code:    "code",
  layouts: "design",
  infrastructure: "backend",
};

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

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

  const urlSection = searchParams.get("section") ?? "code";
  const activeTool = SECTION_TO_TOOL[urlSection] ?? "code";

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

  const handleToolClick = (toolSection: string) => {
    // Always navigate to the build page with the appropriate section
    router.push(`/${workspace}/project/${projectId}/build?section=${toolSection}`, { scroll: false });
  };

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

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

          {/* Left — 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", 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: "#1a1a1a",
              overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1,
            }}>
              {projectName}
            </span>
          </div>

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

            {/* Pills + tool icons grouped together */}
            <div style={{ display: "flex", alignItems: "center", gap: 2 }}>

              {/* Section pills: Build | Market | Assist */}
              {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 ? "#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>
                );
              })}

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

              {/* Tool icons — toggle the main content view */}
              {TOOLS.map(({ id, Icon, title, section }) => {
                const isActive = activeTool === id;
                return (
                  <button
                    key={id}
                    title={title}
                    onClick={() => handleToolClick(section)}
                    style={{
                      width: 32, height: 32,
                      border: isActive ? "1.5px solid #d4cfc6" : "1.5px solid transparent",
                      borderRadius: 8,
                      background: isActive ? "#f0ece4" : "transparent",
                      cursor: "pointer",
                      display: "flex", alignItems: "center", justifyContent: "center",
                      color: isActive ? "#1a1a1a" : "#9a9490",
                      transition: "all 0.1s",
                    }}
                    onMouseEnter={e => {
                      if (!isActive) {
                        (e.currentTarget as HTMLElement).style.background = "#f6f4f0";
                        (e.currentTarget as HTMLElement).style.color = "#1a1a1a";
                      }
                    }}
                    onMouseLeave={e => {
                      if (!isActive) {
                        (e.currentTarget as HTMLElement).style.background = "transparent";
                        (e.currentTarget as HTMLElement).style.color = "#9a9490";
                      }
                    }}
                  >
                    <Icon size={15} strokeWidth={isActive ? 2 : 1.75} />
                  </button>
                );
              })}
            </div>

            {/* 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: "#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",
          }}>
            <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 */}
          <div style={{ flex: 1, overflow: "hidden", minWidth: 0 }}>
            {children}
          </div>
        </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>
  );
}