"use client";

import { useEffect, useState, useCallback } from "react";
import { useParams } from "next/navigation";
import { useSession } from "next-auth/react";

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

interface FileItem {
  name: string;
  path: string;
  type: "file" | "dir" | "symlink";
  size?: number;
}

interface TreeNode {
  name: string;
  path: string;
  type: "file" | "dir";
  children?: TreeNode[];
  expanded?: boolean;
  loaded?: boolean;
}

// ── Language detection for syntax colouring hint ─────────────────────────────

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", mdx: "markdown",
    css: "css", scss: "css", html: "html",
    py: "python", sh: "shell", yaml: "yaml", yml: "yaml",
    toml: "toml", prisma: "prisma", sql: "sql",
    env: "dotenv", gitignore: "shell", dockerfile: "dockerfile",
  };
  return map[ext] ?? "text";
}

// ── Icons ─────────────────────────────────────────────────────────────────────

function FileIcon({ name, type }: { name: string; type: "file" | "dir" }) {
  if (type === "dir") return <span style={{ color: "#d4a04a", fontSize: "0.78rem" }}>▶</span>;
  const ext = name.split(".").pop()?.toLowerCase() ?? "";
  const color =
    ext === "tsx" || ext === "ts" ? "#3178c6"
    : ext === "jsx" || ext === "js" ? "#f0db4f"
    : ext === "json" ? "#a09a90"
    : ext === "css" || ext === "scss" ? "#e879f9"
    : ext === "md" || ext === "mdx" ? "#6b6560"
    : ext === "prisma" ? "#5a67d8"
    : "#b5b0a6";
  return <span style={{ color, fontSize: "0.7rem" }}>◌</span>;
}

// ── Simple token-based highlighter ────────────────────────────────────────────

function highlightCode(code: string, lang: string): React.ReactNode[] {
  if (lang === "text" || lang === "dotenv" || lang === "dockerfile") {
    return code.split("\n").map((line, i) => (
      <div key={i}>{line || " "}</div>
    ));
  }

  // Split into lines and apply simple token colouring per line
  return code.split("\n").map((line, i) => {
    const tokens: React.ReactNode[] = [];
    let remaining = line;
    let ki = 0;

    // Comment
    const commentPrefixes = ["//", "#", "--"];
    for (const p of commentPrefixes) {
      if (remaining.trimStart().startsWith(p)) {
        tokens.push(<span key={ki++} style={{ color: "#6a9955" }}>{remaining}</span>);
        remaining = "";
        break;
      }
    }

    if (remaining) {
      // Keywords
      const kwRe = /\b(import|export|from|const|let|var|function|return|if|else|async|await|type|interface|class|extends|implements|new|default|null|undefined|true|false|void|string|number|boolean|object|Promise|React)\b/g;
      const parts = remaining.split(kwRe);
      for (let j = 0; j < parts.length; j++) {
        const part = parts[j];
        if (!part) continue;
        if (kwRe.test(part) || /^(import|export|from|const|let|var|function|return|if|else|async|await|type|interface|class|extends|implements|new|default|null|undefined|true|false|void|string|number|boolean|object|Promise|React)$/.test(part)) {
          tokens.push(<span key={ki++} style={{ color: "#569cd6" }}>{part}</span>);
        } else if (/^(['"`]).*\1$/.test(part.trim())) {
          tokens.push(<span key={ki++} style={{ color: "#ce9178" }}>{part}</span>);
        } else {
          tokens.push(<span key={ki++}>{part}</span>);
        }
      }
    }

    return (
      <div key={i} style={{ minHeight: "1.4em" }}>
        {tokens.length > 0 ? tokens : " "}
      </div>
    );
  });
}

// ── File tree node ────────────────────────────────────────────────────────────

function TreeNodeRow({
  node,
  depth,
  selectedPath,
  onSelect,
  onToggle,
  projectId,
}: {
  node: TreeNode;
  depth: number;
  selectedPath: string | null;
  onSelect: (path: string, type: "file" | "dir") => void;
  onToggle: (path: string) => void;
  projectId: string;
}) {
  const isSelected = selectedPath === node.path;
  const isDir = node.type === "dir";

  return (
    <>
      <button
        onClick={() => isDir ? onToggle(node.path) : onSelect(node.path, "file")}
        style={{
          display: "flex", alignItems: "center",
          gap: 6, width: "100%", textAlign: "left",
          background: isSelected ? "#f0ece4" : "transparent",
          border: "none", cursor: "pointer",
          padding: `5px 10px 5px ${14 + depth * 14}px`,
          borderRadius: 4,
          transition: "background 0.1s",
          fontFamily: "IBM Plex Mono, monospace",
          fontSize: "0.75rem",
          color: isSelected ? "#1a1a1a" : "#4a4640",
        }}
        onMouseEnter={e => { if (!isSelected) (e.currentTarget as HTMLElement).style.background = "#f6f4f0"; }}
        onMouseLeave={e => { if (!isSelected) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
      >
        {isDir ? (
          <span style={{ fontSize: "0.55rem", color: "#a09a90", transform: node.expanded ? "rotate(90deg)" : "none", display: "inline-block", transition: "transform 0.12s", flexShrink: 0 }}>▶</span>
        ) : (
          <FileIcon name={node.name} type="file" />
        )}
        <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
          {node.name}
        </span>
      </button>
      {isDir && node.expanded && node.children && (
        node.children.map(child => (
          <TreeNodeRow
            key={child.path}
            node={child}
            depth={depth + 1}
            selectedPath={selectedPath}
            onSelect={onSelect}
            onToggle={onToggle}
            projectId={projectId}
          />
        ))
      )}
    </>
  );
}

// ── Main page ─────────────────────────────────────────────────────────────────

export default function BuildPage() {
  const params = useParams();
  const projectId = params.projectId as string;
  const { status: authStatus } = useSession();

  // File tree state
  const [tree, setTree] = useState<TreeNode[]>([]);
  const [treeLoading, setTreeLoading] = useState(true);
  const [treeError, setTreeError] = useState<string | null>(null);

  // File content state
  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);

  // Fetch a directory listing and return items
  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 ?? "Failed to load");
    const items: FileItem[] = data.items ?? [];
    return items.map(item => ({
      name: item.name,
      path: item.path,
      type: item.type === "dir" ? "dir" : "file",
      expanded: false,
      loaded: item.type !== "dir",
      children: item.type === "dir" ? [] : undefined,
    }));
  }, [projectId]);

  // Load root tree on mount
  useEffect(() => {
    if (authStatus !== "authenticated") return;
    setTreeLoading(true);
    fetchDir("")
      .then(nodes => { setTree(nodes); setTreeLoading(false); })
      .catch(e => { setTreeError(e.message); setTreeLoading(false); });
  }, [authStatus, fetchDir]);

  // Toggle dir expand/collapse
  const handleToggle = useCallback(async (path: string) => {
    setTree(prev => {
      const toggle = (nodes: TreeNode[]): TreeNode[] =>
        nodes.map(n => {
          if (n.path === path) {
            return { ...n, expanded: !n.expanded };
          }
          if (n.children) return { ...n, children: toggle(n.children) };
          return n;
        });
      return toggle(prev);
    });

    // Lazy-load children if not yet fetched
    const findNode = (nodes: TreeNode[], p: string): TreeNode | null => {
      for (const n of nodes) {
        if (n.path === p) return n;
        if (n.children) { const found = findNode(n.children, p); if (found) return found; }
      }
      return null;
    };

    const node = findNode(tree, path);
    if (node && !node.loaded) {
      try {
        const children = await fetchDir(path);
        setTree(prev => {
          const update = (nodes: TreeNode[]): TreeNode[] =>
            nodes.map(n => {
              if (n.path === path) return { ...n, children, loaded: true };
              if (n.children) return { ...n, children: update(n.children) };
              return n;
            });
          return update(prev);
        });
      } catch { /* silently fail */ }
    }
  }, [tree, fetchDir]);

  // Select file and load content
  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 file content");
    } finally {
      setFileLoading(false);
    }
  }, [projectId]);

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

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

      {/* ── File tree panel ── */}
      <div style={{
        width: 240, flexShrink: 0,
        borderRight: "1px solid #e8e4dc",
        background: "#faf8f5",
        display: "flex", flexDirection: "column",
        overflow: "hidden",
      }}>
        {/* Tree header */}
        <div style={{
          padding: "12px 14px 10px",
          borderBottom: "1px solid #e8e4dc",
          fontSize: "0.65rem", fontWeight: 700,
          color: "#a09a90", letterSpacing: "0.08em",
          textTransform: "uppercase", flexShrink: 0,
        }}>
          Files
        </div>

        {/* Tree content */}
        <div style={{ flex: 1, overflow: "auto", padding: "6px 4px" }}>
          {treeLoading && (
            <div style={{ padding: "16px 14px", fontSize: "0.75rem", color: "#b5b0a6" }}>
              Loading…
            </div>
          )}
          {treeError && (
            <div style={{ padding: "16px 14px", fontSize: "0.75rem", color: "#e53e3e" }}>
              {treeError === "No Gitea repo connected"
                ? "No repository connected yet. Create a project to get started."
                : treeError}
            </div>
          )}
          {!treeLoading && !treeError && tree.length === 0 && (
            <div style={{ padding: "16px 14px", fontSize: "0.75rem", color: "#b5b0a6" }}>
              Repository is empty.
            </div>
          )}
          {tree.map(node => (
            <TreeNodeRow
              key={node.path}
              node={node}
              depth={0}
              selectedPath={selectedPath}
              onSelect={handleSelectFile}
              onToggle={handleToggle}
              projectId={projectId}
            />
          ))}
        </div>
      </div>

      {/* ── Code preview panel ── */}
      <div style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0, background: "#1e1e1e", overflow: "hidden" }}>

        {/* File path breadcrumb */}
        <div style={{
          padding: "10px 20px",
          borderBottom: "1px solid #333",
          background: "#252526",
          display: "flex", alignItems: "center", gap: 8,
          flexShrink: 0,
        }}>
          {selectedPath ? (
            <span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.73rem", color: "#a09a90" }}>
              {selectedPath.split("/").map((seg, i, arr) => (
                <span key={i}>
                  {i > 0 && <span style={{ color: "#555", margin: "0 4px" }}>/</span>}
                  <span style={{ color: i === arr.length - 1 ? "#d4d4d4" : "#a09a90" }}>{seg}</span>
                </span>
              ))}
            </span>
          ) : (
            <span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.73rem", color: "#555" }}>
              Select a file to view
            </span>
          )}
          {selectedPath && (
            <span style={{ marginLeft: "auto", fontFamily: "IBM Plex Mono, monospace", fontSize: "0.65rem", color: "#555", textTransform: "uppercase" }}>
              {lang}
            </span>
          )}
        </div>

        {/* Code area */}
        <div style={{ flex: 1, overflow: "auto", display: "flex" }}>
          {!selectedPath && !fileLoading && (
            <div style={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%", color: "#555", fontSize: "0.82rem", fontFamily: "IBM Plex Mono, monospace" }}>
              Select a file from the tree
            </div>
          )}
          {fileLoading && (
            <div style={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%", color: "#555", fontSize: "0.82rem", fontFamily: "IBM Plex Mono, monospace" }}>
              Loading…
            </div>
          )}
          {!fileLoading && fileContent !== null && (
            <div style={{ display: "flex", width: "100%", overflow: "auto" }}>
              {/* Line numbers */}
              <div style={{
                padding: "16px 0",
                background: "#1e1e1e",
                borderRight: "1px solid #2d2d2d",
                textAlign: "right",
                userSelect: "none",
                flexShrink: 0,
                minWidth: 44,
              }}>
                {lines.map((_, i) => (
                  <div key={i} style={{
                    fontFamily: "IBM Plex Mono, monospace",
                    fontSize: "0.73rem",
                    lineHeight: "1.4em",
                    color: "#555",
                    padding: "0 12px 0 8px",
                  }}>
                    {i + 1}
                  </div>
                ))}
              </div>
              {/* Code content */}
              <div style={{
                padding: "16px 24px",
                fontFamily: "IBM Plex Mono, monospace",
                fontSize: "0.73rem",
                lineHeight: "1.4em",
                color: "#d4d4d4",
                flex: 1,
                whiteSpace: "pre",
                overflow: "auto",
              }}>
                {highlightCode(fileContent, lang)}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}