import { useEffect, useRef, useState } from "react";
import { useLocation } from "react-router-dom";
import AskAI from "../components/AskAI";
import GitHubSearch from "../components/GitHubSearch";
import { useAuth } from "../context/AuthContext";
import { pyRunner } from "../lib/pyRunner";
import { createSnippet } from "../lib/snippets";

/* ===== CDN sources (not available as npm packages in this setup) ===== */

const CM_BASE = "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13";
const CM_JS = `${CM_BASE}/codemirror.min.js`;
const CM_CSS = `${CM_BASE}/codemirror.min.css`;
const CM_PYTHON_MODE = `${CM_BASE}/mode/python/python.min.js`;
const CM_DRACULA_CSS = `${CM_BASE}/theme/dracula.min.css`;

const STARTER_CODE = `import os

# 1. Testing Environment Variables
print("Environment Variable (MODE):", os.environ.get("MODE"))

# 2. Testing Virtual File System Access
try:
    with open('/data/config.txt', 'r') as file:
        print("File Contents:", file.read())
except Exception as e:
    print("File error:", e)

# 3. Testing Package Auto-installation (e.g., NumPy)
try:
    import numpy as np
    print("NumPy imported successfully! Array:", np.array([1, 2, 3]))
except Exception as e:
    print("Dependency error:", e)
`;

interface CodeMirrorEditor {
  getValue(): string;
  setValue(code: string): void;
  toTextArea(): void;
  on(eventName: string, handler: (instance: CodeMirrorEditor) => void): void;
}

declare global {
  interface Window {
    CodeMirror?: {
      fromTextArea(
        el: HTMLTextAreaElement,
        opts: Record<string, unknown>,
      ): CodeMirrorEditor;
    };
  }
}

/* ===== Idempotent CDN loaders (safe across remounts / StrictMode) ===== */

function loadScript(src: string): Promise<void> {
  return new Promise((resolve, reject) => {
    const existing = document.querySelector<HTMLScriptElement>(
      `script[src="${src}"]`,
    );
    if (existing) {
      if (existing.dataset.loaded) return resolve();
      existing.addEventListener("load", () => resolve());
      existing.addEventListener("error", () =>
        reject(new Error(`Failed to load ${src}`)),
      );
      return;
    }
    const script = document.createElement("script");
    script.src = src;
    script.onload = () => {
      script.dataset.loaded = "1";
      resolve();
    };
    script.onerror = () => {
      // Remove the failed tag so a later mount can retry the download
      // (a lingering failed tag would make waiting promises hang forever).
      script.remove();
      reject(new Error(`Failed to load ${src}`));
    };
    document.head.appendChild(script);
  });
}

function loadCss(href: string): void {
  if (document.querySelector(`link[href="${href}"]`)) return;
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = href;
  document.head.appendChild(link);
}

/* ===== Page ===== */

type Status = "loading" | "ready" | "running" | "failed";

export default function Compiler() {
  const location = useLocation();
  const { enabled: authEnabled, user, signInWithGoogle } = useAuth();
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const editorBoxRef = useRef<HTMLDivElement>(null);
  const editorRef = useRef<CodeMirrorEditor | null>(null);
  const [status, setStatus] = useState<Status>("loading");
  const [output, setOutput] = useState("Loading Python environment...");
  const [editorFailed, setEditorFailed] = useState(false);
  const [needsInput, setNeedsInput] = useState(false);
  const [stdin, setStdin] = useState("");
  const [copied, setCopied] = useState(false);
  const [saveOpen, setSaveOpen] = useState(false);
  const [saveTitle, setSaveTitle] = useState("");
  const [saveState, setSaveState] = useState<"idle" | "saving" | "saved" | "error">("idle");

  // Real-time code analysis: wrong-language banner + sandbox warnings.
  const [detectedLang, setDetectedLang] = useState<string>("Python 3");
  const [unsupportedWarnings, setUnsupportedWarnings] = useState<string[]>([]);

  // Code passed from other pages (e.g. My Codes → Open).
  const initialCode =
    (location.state as { code?: string } | null)?.code ?? STARTER_CODE;

  // Simple heuristics to analyze the code
  const analyzeCode = (code: string) => {
    // 1. Language Detection
    if (/\bprint\s+['"]/.test(code) || /\braw_input\s*\(/.test(code)) {
      setDetectedLang("Python 2");
    } else if (/#include\s*<|\bint\s+main\s*\(/.test(code)) {
      setDetectedLang("C/C++");
    } else if (/\bpublic\s+class\s+|\bSystem\.out\.println/.test(code)) {
      setDetectedLang("Java");
    } else {
      setDetectedLang("Python 3");
    }

    // 2. Sandbox Warnings (subprocess, spawned processes, local drives).
    // Plain `import os` is fine — the environment mocks env vars and a
    // virtual filesystem — so only flag the calls that truly can't work.
    const warnings = [];
    if (/import\s+subprocess|\bsubprocess\./.test(code)) warnings.push("subprocess module");
    if (/os\.system|os\.spawn|os\.fork|os\.exec/.test(code)) warnings.push("OS level commands");
    if (/[a-zA-Z]:\\|\/[Uu]sers\//.test(code)) warnings.push("local file paths");

    setUnsupportedWarnings(warnings);
    // stdin box appears whenever the program reads input().
    setNeedsInput(code.includes("input("));
  };

  useEffect(() => {
    let cancelled = false;
    let editor: CodeMirrorEditor | null = null;

    analyzeCode(initialCode);

    // Editor: CodeMirror core must load before the Python mode.
    (async () => {
      try {
        loadCss(CM_CSS);
        loadCss(CM_DRACULA_CSS);
        await loadScript(CM_JS);
        await loadScript(CM_PYTHON_MODE);
        if (cancelled || !textareaRef.current || !window.CodeMirror) return;
        editor = window.CodeMirror.fromTextArea(textareaRef.current, {
          mode: "python",
          theme: "dracula",
          lineNumbers: true,
          indentUnit: 4,
          matchBrackets: true,
        });
        editor.on("change", (instance) => {
          if (!cancelled) analyzeCode(instance.getValue());
        });
        editorRef.current = editor;
      } catch {
        // Non-fatal: the plain textarea still works and runCode falls back
        // to it, so don't block the Run button over a missing editor.
        if (!cancelled) setEditorFailed(true);
      }
    })();

    // Runtime: the Pyodide worker initializes in parallel with the editor.
    pyRunner.init().then(
      () => {
        if (cancelled) return;
        setStatus("ready");
        setOutput("Environment Ready.");
      },
      () => {
        if (cancelled) return;
        setStatus("failed");
        setOutput(
          "Failed to load the Python environment. Check your internet connection and refresh.",
        );
      },
    );

    return () => {
      cancelled = true;
      editorRef.current = null;
      editor?.toTextArea();
    };
    // initialCode is stable for the lifetime of the mount (navigation remounts).
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const getCode = () =>
    editorRef.current?.getValue() ?? textareaRef.current?.value ?? "";

  // Shared with the GitHub search panel and the AI panel: loads fetched
  // code into the editor.
  const handleImport = (code: string) => {
    if (editorRef.current) {
      editorRef.current.setValue(code);
    } else if (textareaRef.current) {
      textareaRef.current.value = code;
      analyzeCode(code);
    }
    // On mobile the panel sits below the compiler — bring the editor into view.
    editorBoxRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  const handleCopyCode = () => {
    navigator.clipboard.writeText(getCode());
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const runCode = async () => {
    if (status !== "ready") return;
    const code = getCode();
    setStatus("running");
    setOutput("Running...");
    const result = await pyRunner.run(code, stdin);
    const parts = [result.output, result.error].filter(Boolean);
    let text = parts.join(result.output ? "\n" : "");
    if (result.error?.includes("ModuleNotFoundError")) {
      text +=
        "\n\nHint: this module couldn't be installed in the browser Python environment. Packages with compiled/OS-level code (pygame, tkinter...) can't run here.";
    }
    setOutput(text || "(program finished with no output)");
    setStatus("ready");
  };

  const stopCode = () => {
    pyRunner.stop();
  };

  const saveCode = async () => {
    if (!user) {
      await signInWithGoogle();
      return;
    }
    const title = saveTitle.trim() || "Untitled program";
    setSaveState("saving");
    try {
      await createSnippet(user.id, title, getCode());
      setSaveState("saved");
      setSaveOpen(false);
      setSaveTitle("");
      setTimeout(() => setSaveState("idle"), 2500);
    } catch {
      setSaveState("error");
    }
  };

  return (
    <div className="mx-auto w-full max-w-6xl px-4 py-10">

      {/* User-Provided CSS injected directly */}
      <style dangerouslySetInnerHTML={{__html: `
        .budget-wrap{ position:relative; }
        .rc-note{
          display:flex;
          align-items:center;gap:7px;
          position:absolute; left:0; top:100%;
          margin-top:6px;
          z-index:5;
          padding:8px 12px;
          font-size:13px;font-weight:600;letter-spacing:.2px;
          color:#b91c1c; background:#fff;
          border:1px solid #e11d1d; border-radius:6px;
          box-shadow:0 4px 12px rgba(0,0,0,.15);
        }
        .rc-note::before{
          content:"!";
          display:inline-flex;align-items:center;justify-content:center;
          width:18px;height:18px;flex-shrink:0;
          background:#e11d1d;color:#fff;
          font-weight:800;font-size:12px;border-radius:3px;
        }
      `}} />

      <h1 className="text-3xl font-bold">FREE AI Python Compiler</h1>
      <p className="mt-2">
        Write and run Python code directly in your browser. No installation needed.
      </p>

      {/* Desktop: compiler 60% | divider | search 40%. Mobile: stacked. */}
      <div className="mt-2 flex flex-col gap-8 lg:flex-row">
        <section className="min-w-0 lg:w-[60%] lg:border-r lg:border-border lg:pr-8">

          <div className="mt-5 flex items-center justify-between gap-3">
            <p className="flex items-center gap-2 text-sm" aria-live="polite">
              <span
                className={`h-2 w-2 rounded-full ${
                  status === "ready" || status === "running"
                    ? "bg-success"
                    : status === "failed"
                      ? "bg-red-500"
                      : "animate-pulse bg-warning"
                }`}
                aria-hidden="true"
              />
              {status === "loading" && "Loading Python environment..."}
              {status === "failed" && "Environment failed to load"}
              {(status === "ready" || status === "running") && "Environment Ready."}
            </p>

            {/* Copy Button */}
            <button
              type="button"
              onClick={handleCopyCode}
              className="shrink-0 text-sm font-semibold text-muted transition-colors hover:text-white"
            >
              {copied ? "✓ Copied" : "📋 Copy Code"}
            </button>
          </div>

          {/* Language Disclaimer Banner */}
          {detectedLang !== "Python 3" && (
            <div className="mt-4 rounded border border-warning/50 bg-warning/10 p-3 text-sm text-warning-content">
              <strong>Note:</strong> It looks like you pasted <strong>{detectedLang}</strong> code.
              This compiler only runs Python 3. Try asking the AI below to convert it to Python 3 for you!
            </div>
          )}

          {editorFailed && (
            <p className="mt-3 text-xs text-warning">
              Rich editor failed to load — using a plain text editor. Code still
              runs normally.
            </p>
          )}

          {/* Wrapped Editor for Warnings */}
          <div className="budget-wrap mt-3">
            <div
              ref={editorBoxRef}
              className="compiler-editor scroll-mt-20 overflow-hidden rounded-card border border-border"
            >
              <textarea
                ref={textareaRef}
                defaultValue={initialCode}
                onChange={(e) => analyzeCode(e.target.value)}
                aria-label="Python code editor"
                spellCheck={false}
                className="h-[350px] w-full resize-none bg-card p-4 font-mono text-sm text-heading focus:outline-none"
              />
            </div>

            {/* Trigger the custom CSS warning if unsupported modules are found */}
            {unsupportedWarnings.length > 0 && (
              <div className="rc-note">
                Web compilers cannot execute {unsupportedWarnings.join(" or ")}. Please remove them to run your code.
              </div>
            )}
          </div>

          {needsInput && (
            <div className="mt-10">
              <label
                htmlFor="stdin-box"
                className="text-sm font-semibold tracking-wide text-muted uppercase"
              >
                Input (one line per input() call)
              </label>
              <textarea
                id="stdin-box"
                value={stdin}
                onChange={(e) => setStdin(e.target.value)}
                placeholder={"Values your program reads with input(),\none per line."}
                spellCheck={false}
                rows={3}
                className="mt-1 w-full resize-y rounded-card border border-border bg-card p-3 font-mono text-sm text-heading focus:outline-none"
              />
            </div>
          )}

          <div className={`flex items-center gap-3 ${needsInput ? "mt-4" : "mt-10"}`}>
            <button
              type="button"
              onClick={runCode}
              disabled={status !== "ready"}
              className="rounded-btn bg-success px-6 py-3 font-semibold text-bg transition-colors hover:bg-success/85 disabled:cursor-not-allowed disabled:opacity-50"
            >
              {status === "running" ? "Running..." : "Run Code ▶"}
            </button>
            {status === "running" && (
              <button
                type="button"
                onClick={stopCode}
                className="rounded-btn border border-red-500/60 px-6 py-3 font-semibold text-red-400 transition-colors hover:bg-red-500/10"
              >
                Stop ■
              </button>
            )}
            {authEnabled && (
              <div className="relative">
                <button
                  type="button"
                  onClick={() => (user ? setSaveOpen((v) => !v) : signInWithGoogle())}
                  className="rounded-btn border border-accent/40 px-6 py-3 font-semibold text-accent transition-colors hover:border-accent hover:bg-accent/10"
                >
                  {saveState === "saved" ? "Saved ✓" : user ? "Save" : "Sign in to Save"}
                </button>
                {saveOpen && user && (
                  <div className="absolute bottom-full left-0 z-40 mb-2 w-72 max-w-[calc(100vw-2rem)] rounded-card border border-border bg-card p-3 shadow-xl shadow-black/40">
                    <label htmlFor="save-title" className="text-xs font-semibold text-muted">
                      Save to My Codes
                    </label>
                    <input
                      id="save-title"
                      autoFocus
                      value={saveTitle}
                      onChange={(e) => setSaveTitle(e.target.value)}
                      onKeyDown={(e) => {
                        if (e.key === "Enter") saveCode();
                        if (e.key === "Escape") setSaveOpen(false);
                      }}
                      maxLength={120}
                      placeholder="Give it a name... e.g. Snake game"
                      className="mt-1.5 h-9 w-full rounded-btn border border-border bg-bg px-2 text-sm text-heading focus:border-accent focus:outline-none"
                    />
                    {saveState === "error" && (
                      <p className="mt-1.5 text-xs text-red-400">Save failed. Try again.</p>
                    )}
                    <div className="mt-2.5 flex justify-end gap-2">
                      <button
                        type="button"
                        onClick={() => setSaveOpen(false)}
                        className="rounded-btn px-3 py-1.5 text-xs font-medium text-muted hover:text-heading"
                      >
                        Cancel
                      </button>
                      <button
                        type="button"
                        onClick={saveCode}
                        disabled={saveState === "saving"}
                        className="rounded-btn bg-accent px-3 py-1.5 text-xs font-bold text-bg hover:bg-accent/85 disabled:opacity-50"
                      >
                        {saveState === "saving" ? "Saving..." : "Save"}
                      </button>
                    </div>
                  </div>
                )}
              </div>
            )}
          </div>

          <h2 className="mt-6 text-sm font-semibold tracking-wide text-muted uppercase">
            Terminal Output
          </h2>
          <pre
            data-testid="terminal-output"
            className="mt-2 min-h-[120px] rounded-card border border-border bg-[#16161e] p-5 font-mono text-sm leading-relaxed whitespace-pre-wrap text-[#f1fa8c]"
          >
            {output}
          </pre>
        </section>

        <aside className="min-w-0 lg:w-[40%]">
          <GitHubSearch onImport={handleImport} />
        </aside>
      </div>

      <AskAI onInsert={handleImport} getCode={getCode} />
    </div>
  );
}