"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { ReactNode, useEffect, useState } from "react";
import { VIBNSidebar } from "./vibn-sidebar";
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;
}

const TABS = [
  { id: "overview",    label: "Atlas",    path: "overview" },
  { id: "prd",         label: "PRD",      path: "prd" },
  { id: "design",      label: "Design",   path: "design" },
  { id: "build",       label: "Build",    path: "build" },
  { id: "deployment",  label: "Launch",   path: "deployment" },
  { id: "grow",        label: "Grow",     path: "grow" },
  { id: "insights",    label: "Insights", path: "insights" },
  { id: "settings",    label: "Settings", path: "settings" },
];

const DISCOVERY_PHASES = [
  { id: "big_picture",     label: "Big Picture" },
  { id: "users_personas",  label: "Users & Personas" },
  { id: "features_scope",  label: "Features" },
  { id: "business_model",  label: "Business Model" },
  { id: "screens_data",    label: "Screens" },
  { id: "risks_questions", label: "Risks" },
];

interface SavedPhase {
  phase: string;
  title: string;
  summary: string;
  data: Record<string, unknown>;
  saved_at: string;
}

function timeAgo(dateStr?: string): string {
  if (!dateStr) return "—";
  const date = new Date(dateStr);
  if (isNaN(date.getTime())) return "—";
  const diff = (Date.now() - date.getTime()) / 1000;
  if (diff < 60) return "just now";
  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
  const days = Math.floor(diff / 86400);
  if (days === 1) return "Yesterday";
  if (days < 7) return `${days}d ago`;
  return new Date(dateStr).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
}

function SectionLabel({ children }: { children: ReactNode }) {
  return (
    <div style={{
      fontSize: "0.6rem", fontWeight: 600, color: "#a09a90",
      letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 12,
    }}>
      {children}
    </div>
  );
}

function StatusTag({ status }: { status?: string }) {
  const label = status === "live" ? "Live" : status === "building" ? "Building" : "Defining";
  const color = status === "live" ? "#2e7d32" : status === "building" ? "#3d5afe" : "#9a7b3a";
  const bg = status === "live" ? "#2e7d3210" : status === "building" ? "#3d5afe10" : "#d4a04a12";
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 5,
      padding: "3px 9px", borderRadius: 4,
      fontSize: "0.68rem", fontWeight: 600, letterSpacing: "0.02em",
      color, background: bg, fontFamily: "Outfit, sans-serif",
    }}>
      {label}
    </span>
  );
}

export function ProjectShell({
  children,
  workspace,
  projectId,
  projectName,
  projectDescription,
  projectStatus,
  projectProgress,
  createdAt,
  updatedAt,
  featureCount = 0,
}: ProjectShellProps) {
  const pathname = usePathname();
  const activeTab = TABS.find((t) => pathname?.includes(`/${t.path}`))?.id ?? "overview";
  const progress = projectProgress ?? 0;

  const [savedPhases, setSavedPhases] = useState<SavedPhase[]>([]);

  useEffect(() => {
    fetch(`/api/projects/${projectId}/save-phase`)
      .then(r => r.json())
      .then(d => setSavedPhases(d.phases ?? []))
      .catch(() => {});

    // Refresh every 10s while the user is chatting with Atlas
    const interval = setInterval(() => {
      fetch(`/api/projects/${projectId}/save-phase`)
        .then(r => r.json())
        .then(d => setSavedPhases(d.phases ?? []))
        .catch(() => {});
    }, 10_000);
    return () => clearInterval(interval);
  }, [projectId]);

  const savedPhaseIds = new Set(savedPhases.map(p => p.phase));
  const firstUnsavedIdx = DISCOVERY_PHASES.findIndex(p => !savedPhaseIds.has(p.id));

  return (
    <>
      <style>{`
        @media (max-width: 768px) {
          .vibn-left-sidebar  { display: none !important; }
          .vibn-right-panel   { display: none !important; }
          .vibn-tab-bar       { overflow-x: auto; -webkit-overflow-scrolling: touch; }
          .vibn-tab-bar a     { padding: 10px 14px !important; font-size: 0.75rem !important; }
          .vibn-project-header { padding: 12px 16px !important; }
          .vibn-page-content  { padding-bottom: env(safe-area-inset-bottom); }
        }
        @media (max-width: 480px) {
          .vibn-tab-bar a     { padding: 10px 10px !important; }
        }
      `}</style>
      <div style={{ display: "flex", height: "100dvh", background: "#f6f4f0", overflow: "hidden" }}>
        {/* Left sidebar */}
        <div className="vibn-left-sidebar" style={{ display: "flex" }}>
          <VIBNSidebar workspace={workspace} />
        </div>

        {/* Main column */}
        <div style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0 }}>

          {/* Project header */}
          <div className="vibn-project-header" style={{
            padding: "18px 32px",
            borderBottom: "1px solid #e8e4dc",
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            background: "#fff",
            flexShrink: 0,
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
              <div style={{
                width: 34, height: 34, borderRadius: 9,
                background: "#1a1a1a12",
                display: "flex", alignItems: "center", justifyContent: "center",
              }}>
                <span style={{ fontFamily: "Newsreader, serif", fontSize: "1rem", fontWeight: 500, color: "#1a1a1a" }}>
                  {projectName[0]?.toUpperCase() ?? "P"}
                </span>
              </div>
              <div>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <h2 style={{
                    fontSize: "1.05rem", fontWeight: 600, color: "#1a1a1a",
                    letterSpacing: "-0.02em", fontFamily: "Outfit, sans-serif", margin: 0,
                  }}>
                    {projectName}
                  </h2>
                  <StatusTag status={projectStatus} />
                </div>
                {projectDescription && (
                  <p style={{
                    fontSize: "0.75rem", color: "#a09a90", marginTop: 1,
                    fontFamily: "Outfit, sans-serif",
                    overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
                    maxWidth: 400,
                  }}>
                    {projectDescription}
                  </p>
                )}
              </div>
            </div>
            <div style={{
              fontFamily: "IBM Plex Mono, monospace",
              fontSize: "0.78rem", fontWeight: 500,
              color: "#1a1a1a", background: "#f6f4f0",
              padding: "6px 12px", borderRadius: 6,
            }}>
              {progress}%
            </div>
          </div>

          {/* Tab bar */}
          <div className="vibn-tab-bar" style={{
            padding: "0 32px",
            borderBottom: "1px solid #e8e4dc",
            display: "flex",
            background: "#fff",
            flexShrink: 0,
          }}>
            {TABS.map((t) => (
              <Link
                key={t.id}
                href={`/${workspace}/project/${projectId}/${t.path}`}
                style={{
                  padding: "12px 18px",
                  fontSize: "0.8rem",
                  fontWeight: 500,
                  color: activeTab === t.id ? "#1a1a1a" : "#a09a90",
                  borderBottom: activeTab === t.id ? "2px solid #1a1a1a" : "2px solid transparent",
                  transition: "all 0.12s",
                  fontFamily: "Outfit, sans-serif",
                  textDecoration: "none",
                  display: "block",
                  whiteSpace: "nowrap",
                }}
              >
                {t.label}
              </Link>
            ))}
          </div>

          {/* Page content */}
          <div className="vibn-page-content" style={{ flex: 1, overflow: "auto" }}>
            {children}
          </div>
        </div>

        {/* Right panel — hidden on design tab (design page has its own right panel) */}
        <div className="vibn-right-panel" style={{
          width: activeTab === "design" ? 0 : 230,
          borderLeft: activeTab === "design" ? "none" : "1px solid #e8e4dc",
          background: "#fff",
          padding: activeTab === "design" ? 0 : "22px 18px",
          overflow: "auto",
          flexShrink: 0,
          fontFamily: "Outfit, sans-serif",
          display: activeTab === "design" ? "none" : undefined,
        }}>
          {/* Discovery phases */}
          <SectionLabel>Discovery</SectionLabel>
          {DISCOVERY_PHASES.map((phase, i) => {
            const isDone = savedPhaseIds.has(phase.id);
            const isActive = !isDone && i === firstUnsavedIdx;
            return (
              <div
                key={phase.id}
                style={{
                  display: "flex", alignItems: "center", gap: 10,
                  padding: "9px 0",
                  borderBottom: i < DISCOVERY_PHASES.length - 1 ? "1px solid #f0ece4" : "none",
                }}
              >
                <div style={{
                  width: 20, height: 20, borderRadius: 5, flexShrink: 0,
                  background: isDone ? "#2e7d3210" : isActive ? "#d4a04a12" : "#f6f4f0",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontSize: "0.58rem", fontWeight: 700,
                  color: isDone ? "#2e7d32" : isActive ? "#9a7b3a" : "#c5c0b8",
                }}>
                  {isDone ? "✓" : isActive ? "→" : i + 1}
                </div>
                <span style={{
                  fontSize: "0.78rem",
                  fontWeight: isActive ? 600 : 400,
                  color: isDone ? "#6b6560" : isActive ? "#1a1a1a" : "#b5b0a6",
                }}>
                  {phase.label}
                </span>
              </div>
            );
          })}

          <div style={{ height: 1, background: "#f0ece4", margin: "16px 0" }} />

          {/* Captured data — summaries from saved phases */}
          <SectionLabel>Captured</SectionLabel>
          {savedPhases.length > 0 ? (
            savedPhases.map((p) => (
              <div key={p.phase} style={{ marginBottom: 14 }}>
                <div style={{
                  fontSize: "0.62rem", color: "#2e7d32",
                  textTransform: "uppercase", letterSpacing: "0.05em",
                  marginBottom: 3, fontWeight: 600, display: "flex", alignItems: "center", gap: 4,
                }}>
                  <span>✓</span><span>{p.title}</span>
                </div>
                <div style={{ fontSize: "0.75rem", color: "#4a4640", lineHeight: 1.45 }}>
                  {p.summary}
                </div>
              </div>
            ))
          ) : (
            <p style={{ fontSize: "0.78rem", color: "#c5c0b8", lineHeight: 1.5, margin: 0 }}>
              Atlas will capture key details here as you chat.
            </p>
          )}

          <div style={{ height: 1, background: "#f0ece4", margin: "16px 0" }} />

          {/* Project info */}
          <SectionLabel>Project Info</SectionLabel>
          {[
            { k: "Created",     v: timeAgo(createdAt) },
            { k: "Last active", v: timeAgo(updatedAt) },
            { k: "Features",    v: featureCount > 0 ? `${featureCount} defined` : "None yet" },
          ].map((item, i) => (
            <div key={i} style={{ marginBottom: 12 }}>
              <div style={{
                fontSize: "0.62rem", color: "#b5b0a6",
                textTransform: "uppercase", letterSpacing: "0.05em",
                marginBottom: 3, fontWeight: 600,
              }}>
                {item.k}
              </div>
              <div style={{ fontSize: "0.8rem", color: "#4a4640" }}>{item.v}</div>
            </div>
          ))}
        </div>
      </div>
      <Toaster position="top-center" />
    </>
  );
}