"use client";

import { Suspense, useState, useEffect, useCallback } from "react";
import { useParams, useSearchParams, useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
import Link from "next/link";

// ── Types ─────────────────────────────────────────────────────────────────────

interface AppEntry { name: string; path: string; }
interface SurfaceEntry { id: string; label: string; lockedTheme?: string; }
interface FileItem { name: string; path: string; type: "file" | "dir" | "symlink"; }
interface TreeNode {
  name: string; path: string; type: "file" | "dir";
  children?: TreeNode[]; expanded?: boolean; loaded?: boolean;
}

// ── Constants ─────────────────────────────────────────────────────────────────

const INFRA_ITEMS = [
  { id: "builds",      label: "Builds",      icon: "⬡" },
  { id: "databases",   label: "Databases",   icon: "◫" },
  { id: "services",    label: "Services",    icon: "◎" },
  { id: "environment", label: "Environment", icon: "≡" },
  { id: "domains",     label: "Domains",     icon: "◬" },
  { id: "logs",        label: "Logs",        icon: "≈" },
];

const SURFACE_LABELS: Record<string, string> = {
  webapp: "Web App", marketing: "Marketing Site", admin: "Admin Panel",
};
const SURFACE_ICONS: Record<string, string> = {
  webapp: "◈", marketing: "◌", admin: "◫",
};

// ── Language / syntax helpers ─────────────────────────────────────────────────

function langFromName(name: string): string {
  const ext = name.split(".").pop()?.toLowerCase() ?? "";
  const map: Record<string, string> = {
    ts: "typescript", tsx: "typescript", js: "javascript", jsx: "javascript",
    json: "json", md: "markdown", css: "css", scss: "css", html: "html",
    py: "python", sh: "shell", yaml: "yaml", yml: "yaml",
    toml: "toml", prisma: "prisma", sql: "sql",
  };
  return map[ext] ?? "text";
}

function highlightCode(code: string, lang: string): React.ReactNode[] {
  return code.split("\n").map((line, i) => {
    const commentPrefixes = ["//", "#", "--"];
    if (commentPrefixes.some(p => line.trimStart().startsWith(p))) {
      return <div key={i}><span style={{ color: "#6a9955" }}>{line}</span></div>;
    }
    const kwRe = /\b(import|export|from|const|let|var|function|return|if|else|async|await|type|interface|class|extends|new|default|null|undefined|true|false|void|string|number|boolean|React)\b/g;
    const parts = line.split(kwRe);
    const tokens = parts.map((p, j) => {
      if (!p) return null;
      if (/^(import|export|from|const|let|var|function|return|if|else|async|await|type|interface|class|extends|new|default|null|undefined|true|false|void|string|number|boolean|React)$/.test(p))
        return <span key={j} style={{ color: "#569cd6" }}>{p}</span>;
      return <span key={j}>{p}</span>;
    });
    return <div key={i} style={{ minHeight: "1.4em" }}>{tokens.length ? tokens : "\u00a0"}</div>;
  });
}

// ── File tree row ─────────────────────────────────────────────────────────────

function TreeRow({ node, depth, selectedPath, onSelect, onToggle }: {
  node: TreeNode; depth: number; selectedPath: string | null;
  onSelect: (p: string) => void; onToggle: (p: string) => void;
}) {
  const active = selectedPath === node.path;
  const isDir = node.type === "dir";
  const ext = node.name.split(".").pop()?.toLowerCase() ?? "";
  const fileColor = ext === "tsx" || ext === "ts" ? "#3178c6" : ext === "jsx" || ext === "js" ? "#f0db4f"
    : ext === "css" || ext === "scss" ? "#e879f9" : "#b5b0a6";

  return (
    <>
      <button onClick={() => isDir ? onToggle(node.path) : onSelect(node.path)} style={{
        display: "flex", alignItems: "center", gap: 5, width: "100%", textAlign: "left",
        background: active ? "#eceae5" : "transparent", border: "none", cursor: "pointer",
        padding: `4px 8px 4px ${10 + depth * 12}px`, borderRadius: 4,
        fontFamily: "IBM Plex Mono, monospace", fontSize: "0.72rem",
        color: active ? "#1a1a1a" : "#4a4640",
      }}
        onMouseEnter={e => { if (!active) (e.currentTarget as HTMLElement).style.background = "#f0ece4"; }}
        onMouseLeave={e => { if (!active) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
      >
        {isDir
          ? <span style={{ fontSize: "0.48rem", color: "#a09a90", display: "inline-block", transition: "transform 0.1s", transform: node.expanded ? "rotate(90deg)" : "none" }}>▶</span>
          : <span style={{ color: fileColor, fontSize: "0.65rem" }}>◌</span>}
        <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{node.name}</span>
      </button>
      {isDir && node.expanded && node.children?.map(c =>
        <TreeRow key={c.path} node={c} depth={depth + 1} selectedPath={selectedPath} onSelect={onSelect} onToggle={onToggle} />
      )}
    </>
  );
}

// ── Left nav shared styles ────────────────────────────────────────────────────

const NAV_GROUP_LABEL: React.CSSProperties = {
  fontSize: "0.6rem", fontWeight: 700, color: "#b5b0a6",
  letterSpacing: "0.09em", textTransform: "uppercase",
  padding: "12px 12px 5px", fontFamily: "Outfit, sans-serif",
};

function NavItem({ label, active, onClick, indent = false }: { label: string; active: boolean; onClick: () => void; indent?: boolean }) {
  return (
    <button onClick={onClick} style={{
      display: "flex", alignItems: "center", gap: 7, width: "100%", textAlign: "left",
      background: active ? "#f0ece4" : "transparent", border: "none", cursor: "pointer",
      padding: `5px 12px 5px ${indent ? 22 : 12}px`, borderRadius: 5,
      fontSize: "0.78rem", fontWeight: active ? 600 : 440,
      color: active ? "#1a1a1a" : "#5a5550", fontFamily: "Outfit, sans-serif",
    }}
      onMouseEnter={e => { if (!active) (e.currentTarget as HTMLElement).style.background = "#f6f4f0"; }}
      onMouseLeave={e => { if (!active) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
    >
      {label}
    </button>
  );
}

// ── Placeholder panel ─────────────────────────────────────────────────────────

function Placeholder({ icon, title, desc }: { icon: string; title: string; desc: string }) {
  return (
    <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 14, padding: 60, textAlign: "center" }}>
      <div style={{ width: 52, height: 52, borderRadius: 13, background: "#f0ece4", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "1.4rem", color: "#b5b0a6" }}>{icon}</div>
      <div>
        <div style={{ fontSize: "0.9rem", fontWeight: 600, color: "#1a1a1a", marginBottom: 6 }}>{title}</div>
        <div style={{ fontSize: "0.8rem", color: "#a09a90", maxWidth: 320, lineHeight: 1.6 }}>{desc}</div>
      </div>
      <div style={{ marginTop: 4, padding: "7px 18px", background: "#1a1a1a", color: "#fff", borderRadius: 7, fontSize: "0.77rem", fontWeight: 500, opacity: 0.35 }}>Coming soon</div>
    </div>
  );
}

// ── Infra content ─────────────────────────────────────────────────────────────

function InfraContent({ tab, projectId, workspace }: { tab: string; projectId: string; workspace: string }) {
  const base = `/${workspace}/project/${projectId}/infrastructure`;
  const descriptions: Record<string, { icon: string; title: string; desc: string }> = {
    databases:   { icon: "◫", title: "Databases",   desc: "PostgreSQL, Redis, and other databases — provisioned and managed with connection strings auto-injected." },
    services:    { icon: "◎", title: "Services",    desc: "Background workers, queues, email delivery, file storage, and third-party integrations." },
    environment: { icon: "≡", title: "Environment", desc: "Environment variables and secrets, encrypted at rest and auto-injected into your containers." },
    domains:     { icon: "◬", title: "Domains",     desc: "Custom domains and SSL certificates for all your deployed services." },
    logs:        { icon: "≈", title: "Logs",        desc: "Runtime logs, request traces, and error reports streaming from deployed services." },
    builds:      { icon: "⬡", title: "Builds",      desc: "Deployment history, build logs, and rollback controls for all your apps." },
  };
  const d = descriptions[tab];
  return (
    <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={{ padding: "20px 28px 0", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ fontSize: "0.68rem", fontWeight: 700, color: "#a09a90", letterSpacing: "0.08em", textTransform: "uppercase", fontFamily: "Outfit, sans-serif" }}>{tab}</div>
        <Link href={`${base}?tab=${tab}`} style={{ fontSize: "0.72rem", color: "#a09a90", textDecoration: "none", fontFamily: "Outfit, sans-serif" }}>Open full view →</Link>
      </div>
      {d && <Placeholder icon={d.icon} title={d.title} desc={d.desc} />}
    </div>
  );
}

// ── Layouts content ───────────────────────────────────────────────────────────

function LayoutsContent({ surfaces, projectId, workspace, activeSurfaceId, onSelectSurface }: {
  surfaces: SurfaceEntry[]; projectId: string; workspace: string;
  activeSurfaceId: string | null; onSelectSurface: (id: string) => void;
}) {
  if (surfaces.length === 0) {
    return (
      <Placeholder icon="◌" title="No design surfaces yet" desc="Add design surfaces from the Design page to configure your web app, marketing site, or admin panel." />
    );
  }
  const active = surfaces.find(s => s.id === activeSurfaceId) ?? surfaces[0];
  return (
    <div style={{ flex: 1, display: "flex", flexDirection: "column", padding: "24px 28px", gap: 20 }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ fontSize: "0.68rem", fontWeight: 700, color: "#a09a90", letterSpacing: "0.08em", textTransform: "uppercase", fontFamily: "Outfit, sans-serif" }}>Layouts</div>
        <Link href={`/${workspace}/project/${projectId}/design?surface=${active?.id ?? ""}`} style={{ fontSize: "0.72rem", color: "#a09a90", textDecoration: "none", fontFamily: "Outfit, sans-serif" }}>Edit in Design →</Link>
      </div>
      <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
        {surfaces.map(s => (
          <div key={s.id} onClick={() => onSelectSurface(s.id)} style={{
            background: active?.id === s.id ? "#fff" : "#faf8f5",
            border: `1px solid ${active?.id === s.id ? "#1a1a1a" : "#e8e4dc"}`,
            borderRadius: 10, padding: "16px 20px", cursor: "pointer",
            minWidth: 180, flex: "1 1 180px", maxWidth: 240,
            transition: "border-color 0.1s",
          }}>
            <div style={{ fontSize: "0.85rem", fontWeight: 600, color: "#1a1a1a", fontFamily: "Outfit, sans-serif", marginBottom: 4 }}>
              {SURFACE_LABELS[s.id] ?? s.id}
            </div>
            {s.lockedTheme ? (
              <div style={{ fontSize: "0.72rem", color: "#6b6560", fontFamily: "Outfit, sans-serif" }}>Theme: {s.lockedTheme}</div>
            ) : (
              <div style={{ fontSize: "0.72rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif", fontStyle: "italic" }}>Not configured</div>
            )}
          </div>
        ))}
      </div>
      <div style={{ fontSize: "0.75rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>
        Click a surface to select it, then open the Design editor to configure themes, fonts, and components.
      </div>
    </div>
  );
}

// ── Code content (file browser) ───────────────────────────────────────────────

function CodeContent({ projectId, appName, rootPath }: { projectId: string; appName: string; rootPath: string }) {
  const { status } = useSession();
  const [tree, setTree] = useState<TreeNode[]>([]);
  const [treeLoading, setTreeLoading] = useState(false);
  const [selectedPath, setSelectedPath] = useState<string | null>(null);
  const [fileContent, setFileContent] = useState<string | null>(null);
  const [fileLoading, setFileLoading] = useState(false);
  const [fileName, setFileName] = useState<string | null>(null);

  const fetchDir = useCallback(async (path: string): Promise<TreeNode[]> => {
    const res = await fetch(`/api/projects/${projectId}/file?path=${encodeURIComponent(path)}`);
    const data = await res.json();
    if (!res.ok) throw new Error(data.error);
    const items: FileItem[] = data.items ?? [];
    return items.filter(i => i.type !== "symlink")
      .sort((a, b) => a.type === "dir" && b.type !== "dir" ? -1 : a.type !== "dir" && b.type === "dir" ? 1 : a.name.localeCompare(b.name))
      .map(i => ({ name: i.name, path: i.path, type: i.type === "dir" ? "dir" : "file", expanded: false, loaded: i.type !== "dir", children: i.type === "dir" ? [] : undefined }));
  }, [projectId]);

  useEffect(() => {
    if (!rootPath || status !== "authenticated") return;
    setTree([]); setSelectedPath(null); setFileContent(null); setTreeLoading(true);
    fetchDir(rootPath).then(nodes => { setTree(nodes); setTreeLoading(false); }).catch(() => setTreeLoading(false));
  }, [rootPath, status, fetchDir]);

  const handleToggle = useCallback(async (path: string) => {
    setTree(prev => {
      const toggle = (nodes: TreeNode[]): TreeNode[] => nodes.map(n => n.path === path ? { ...n, expanded: !n.expanded } : n.children ? { ...n, children: toggle(n.children) } : n);
      return toggle(prev);
    });
    const findNode = (nodes: TreeNode[], p: string): TreeNode | null => { for (const n of nodes) { if (n.path === p) return n; if (n.children) { const f = findNode(n.children, p); if (f) return f; } } return null; };
    const node = findNode(tree, path);
    if (node && !node.loaded) {
      const children = await fetchDir(path).catch(() => []);
      setTree(prev => {
        const update = (nodes: TreeNode[]): TreeNode[] => nodes.map(n => n.path === path ? { ...n, children, loaded: true } : n.children ? { ...n, children: update(n.children) } : n);
        return update(prev);
      });
    }
  }, [tree, fetchDir]);

  const handleSelectFile = useCallback(async (path: string) => {
    setSelectedPath(path); setFileContent(null); setFileName(path.split("/").pop() ?? null); setFileLoading(true);
    try {
      const res = await fetch(`/api/projects/${projectId}/file?path=${encodeURIComponent(path)}`);
      const data = await res.json();
      setFileContent(data.content ?? "");
    } catch { setFileContent("// Failed to load"); }
    finally { setFileLoading(false); }
  }, [projectId]);

  const lang = fileName ? langFromName(fileName) : "text";
  const lines = (fileContent ?? "").split("\n");

  if (!appName) {
    return (
      <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 12, padding: 40, textAlign: "center" }}>
        <div style={{ width: 48, height: 48, borderRadius: 12, background: "#f0ece4", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "1.3rem", color: "#b5b0a6" }}>▢</div>
        <div>
          <div style={{ fontSize: "0.88rem", fontWeight: 600, color: "#1a1a1a", marginBottom: 6, fontFamily: "Outfit, sans-serif" }}>Select an app</div>
          <div style={{ fontSize: "0.78rem", color: "#a09a90", maxWidth: 240, lineHeight: 1.5, fontFamily: "Outfit, sans-serif" }}>Choose an app from the left to browse its source files.</div>
        </div>
      </div>
    );
  }

  return (
    <div style={{ flex: 1, display: "flex", overflow: "hidden" }}>
      {/* File tree */}
      <div style={{ width: 200, flexShrink: 0, borderRight: "1px solid #e8e4dc", background: "#faf8f5", display: "flex", flexDirection: "column", overflow: "hidden" }}>
        <div style={{ padding: "10px 12px 8px", borderBottom: "1px solid #e8e4dc", display: "flex", alignItems: "center", gap: 6, flexShrink: 0 }}>
          <span style={{ fontSize: "0.7rem", color: "#a09a90" }}>▢</span>
          <span style={{ fontSize: "0.76rem", fontWeight: 600, color: "#1a1a1a", fontFamily: "Outfit, sans-serif" }}>{appName}</span>
        </div>
        <div style={{ flex: 1, overflow: "auto", padding: "4px" }}>
          {treeLoading && <div style={{ padding: "12px", fontSize: "0.72rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>Loading…</div>}
          {!treeLoading && tree.length === 0 && <div style={{ padding: "12px", fontSize: "0.72rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>Empty.</div>}
          {tree.map(n => <TreeRow key={n.path} node={n} depth={0} selectedPath={selectedPath} onSelect={handleSelectFile} onToggle={handleToggle} />)}
        </div>
      </div>
      {/* Code viewer */}
      <div style={{ flex: 1, display: "flex", flexDirection: "column", background: "#1e1e1e", overflow: "hidden" }}>
        <div style={{ padding: "9px 18px", borderBottom: "1px solid #2d2d2d", background: "#252526", display: "flex", alignItems: "center", gap: 8, flexShrink: 0 }}>
          {selectedPath ? (
            <span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.71rem", color: "#a09a90" }}>
              {(() => { const rel = selectedPath.startsWith(rootPath + "/") ? selectedPath.slice(rootPath.length + 1) : selectedPath; return rel.split("/").map((s, i, a) => <span key={i}>{i > 0 && <span style={{ color: "#555", margin: "0 3px" }}>/</span>}<span style={{ color: i === a.length - 1 ? "#d4d4d4" : "#888" }}>{s}</span></span>); })()}
            </span>
          ) : <span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.71rem", color: "#555" }}>Select a file</span>}
          {fileName && <span style={{ marginLeft: "auto", fontFamily: "IBM Plex Mono, monospace", fontSize: "0.62rem", color: "#555", textTransform: "uppercase" }}>{lang}</span>}
        </div>
        <div style={{ flex: 1, overflow: "auto", display: "flex" }}>
          {!selectedPath && !fileLoading && <div style={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%", color: "#555", fontSize: "0.78rem", fontFamily: "IBM Plex Mono, monospace" }}>Select a file to view</div>}
          {fileLoading && <div style={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%", color: "#555", fontSize: "0.78rem", fontFamily: "IBM Plex Mono, monospace" }}>Loading…</div>}
          {!fileLoading && fileContent !== null && (
            <div style={{ display: "flex", width: "100%" }}>
              <div style={{ padding: "14px 0", background: "#1e1e1e", borderRight: "1px solid #2d2d2d", textAlign: "right", userSelect: "none", flexShrink: 0, minWidth: 40 }}>
                {lines.map((_, i) => <div key={i} style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.71rem", lineHeight: "1.4em", color: "#555", padding: "0 10px 0 6px" }}>{i + 1}</div>)}
              </div>
              <div style={{ padding: "14px 22px", fontFamily: "IBM Plex Mono, monospace", fontSize: "0.71rem", lineHeight: "1.4em", color: "#d4d4d4", flex: 1, whiteSpace: "pre", overflow: "auto" }}>
                {highlightCode(fileContent, lang)}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ── Main Build hub ────────────────────────────────────────────────────────────

function BuildHubInner() {
  const params = useParams();
  const searchParams = useSearchParams();
  const router = useRouter();
  const projectId = params.projectId as string;
  const workspace = params.workspace as string;

  const section = searchParams.get("section") ?? "code";
  const activeApp = searchParams.get("app") ?? "";
  const activeRoot = searchParams.get("root") ?? "";
  const activeInfra = searchParams.get("tab") ?? "builds";
  const activeSurfaceParam = searchParams.get("surface") ?? "";

  const [apps, setApps] = useState<AppEntry[]>([]);
  const [surfaces, setSurfaces] = useState<SurfaceEntry[]>([]);
  const [activeSurfaceId, setActiveSurfaceId] = useState<string>(activeSurfaceParam);

  useEffect(() => {
    fetch(`/api/projects/${projectId}/apps`).then(r => r.json()).then(d => setApps(d.apps ?? [])).catch(() => {});
    fetch(`/api/projects/${projectId}/design-surfaces`).then(r => r.json()).then(d => {
      const ids: string[] = d.surfaces ?? [];
      const themes: Record<string, string> = d.surfaceThemes ?? {};
      setSurfaces(ids.map(id => ({ id, label: SURFACE_LABELS[id] ?? id, lockedTheme: themes[id] })));
      if (!activeSurfaceId && ids.length > 0) setActiveSurfaceId(ids[0]);
    }).catch(() => {});
  }, [projectId]);

  const navigate = (params: Record<string, string>) => {
    const sp = new URLSearchParams({ section, ...params });
    router.push(`/${workspace}/project/${projectId}/build?${sp.toString()}`, { scroll: false });
  };

  const setSection = (s: string) => router.push(`/${workspace}/project/${projectId}/build?section=${s}`, { scroll: false });

  return (
    <div style={{ display: "flex", height: "100%", fontFamily: "Outfit, sans-serif", overflow: "hidden" }}>

      {/* ── Left nav ── */}
      <div style={{ width: 200, flexShrink: 0, borderRight: "1px solid #e8e4dc", background: "#faf8f5", display: "flex", flexDirection: "column", overflow: "auto" }}>

        {/* Code group */}
        <div style={NAV_GROUP_LABEL}>Code</div>
        {apps.length > 0 ? apps.map(app => (
          <NavItem key={app.name} label={app.name} indent
            active={section === "code" && activeApp === app.name}
            onClick={() => navigate({ section: "code", app: app.name, root: app.path })}
          />
        )) : (
          <NavItem label="No apps yet" indent active={section === "code" && !activeApp} onClick={() => setSection("code")} />
        )}

        {/* Layouts group */}
        <div style={{ ...NAV_GROUP_LABEL, marginTop: 8 }}>Layouts</div>
        {surfaces.length > 0 ? surfaces.map(s => (
          <NavItem key={s.id} label={SURFACE_LABELS[s.id] ?? s.id} indent
            active={section === "layouts" && activeSurfaceId === s.id}
            onClick={() => { setActiveSurfaceId(s.id); navigate({ section: "layouts", surface: s.id }); }}
          />
        )) : (
          <NavItem label="Not configured" indent active={section === "layouts"} onClick={() => setSection("layouts")} />
        )}

        {/* Infrastructure group */}
        <div style={{ ...NAV_GROUP_LABEL, marginTop: 8 }}>Infrastructure</div>
        {INFRA_ITEMS.map(item => (
          <NavItem key={item.id} label={item.label} indent
            active={section === "infrastructure" && activeInfra === item.id}
            onClick={() => navigate({ section: "infrastructure", tab: item.id })}
          />
        ))}
      </div>

      {/* ── Content ── */}
      <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden", minWidth: 0 }}>
        {section === "code" && (
          <CodeContent projectId={projectId} appName={activeApp} rootPath={activeRoot} />
        )}
        {section === "layouts" && (
          <LayoutsContent surfaces={surfaces} projectId={projectId} workspace={workspace} activeSurfaceId={activeSurfaceId} onSelectSurface={id => { setActiveSurfaceId(id); navigate({ section: "layouts", surface: id }); }} />
        )}
        {section === "infrastructure" && (
          <InfraContent tab={activeInfra} projectId={projectId} workspace={workspace} />
        )}
      </div>
    </div>
  );
}

export default function BuildPage() {
  return (
    <Suspense fallback={<div style={{ display: "flex", height: "100%", alignItems: "center", justifyContent: "center", color: "#a09a90", fontFamily: "Outfit, sans-serif", fontSize: "0.85rem" }}>Loading…</div>}>
      <BuildHubInner />
    </Suspense>
  );
}