/* global React, ReactDOM, ARCHIVE, queryClaude, renderBodyWithCitations, CITE_MAP, ProjectCard, ArchiveView */
const { useState, useEffect, useRef, useMemo } = React;

// ============================================================
// TWEAKS
// ============================================================
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "landing": "editorial",
  "showHints": true
}/*EDITMODE-END*/;

function getInitialTheme() {
  const stored = localStorage.getItem("portfolio-theme");
  if (stored === "light" || stored === "dark") return stored;
  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}

const SUGGESTED_PROMPTS = [
  "What measurable impact has Atishay driven?",
  "How does he design AI-native products?",
  "What has he built from scratch?",
  "How does he work with engineering teams?",
  "What kind of problems does he solve best?",
  "Why should I hire him over other designers?",
];

// ============================================================
// LANDING
// ============================================================
function Landing({ tweaks, onSearch }) {
  const [query, setQuery] = useState("");
  const inputRef = useRef(null);

  useEffect(() => { inputRef.current?.focus(); }, []);

  const submit = () => {
    const q = query.trim();
    if (q) onSearch(q);
  };

  return (
    <div style={{
      minHeight: "100vh",
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      justifyContent: "center",
      padding: "0 44px",
      position: "relative",
    }}>

      {/* --- MASTHEAD variant — newspaper-style, big and quiet --- */}
      {tweaks.landing === "masthead" && (
        <div className="fade-up" style={{ width: "100%", maxWidth: 960, marginBottom: 72, textAlign: "center" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "center", gap: 24, marginBottom: 10 }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: "0.3em", color: "var(--muted)", textTransform: "uppercase", textAlign: "right" }}>Est. MMXXII</div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: "0.3em", color: "var(--muted)", textTransform: "uppercase", border: "0.75px solid var(--rule)", padding: "4px 10px" }}>Edition N° 01</div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: "0.3em", color: "var(--muted)", textTransform: "uppercase", textAlign: "left" }}>Vol. IV · No. 04</div>
          </div>
          <div style={{ borderTop: "0.75px solid var(--rule)", borderBottom: "0.75px solid var(--rule)", padding: "8px 0" }}>
            <h1 style={{ fontSize: "clamp(48px, 10vw, 140px)", fontWeight: 300, letterSpacing: "-0.05em", lineHeight: 0.9, margin: 0 }}>
              Atishay Jain
            </h1>
          </div>
          <div className="mono" style={{ fontSize: 11, letterSpacing: "0.3em", color: "var(--muted)", textTransform: "uppercase", marginTop: 14 }}>
            A Portfolio, In Conversation — Senior Product Designer
          </div>
        </div>
      )}

      {/* --- EDITORIAL variant — the new default. Identity without shouting. --- */}
      {tweaks.landing === "editorial" && (
        <div className="fade-up" style={{ width: "100%", maxWidth: 720, marginBottom: 56 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 18 }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--muted)" }}>
              <span style={{ color: "var(--ink)", fontWeight: 500 }}>Atishay Jain</span>
              <span style={{ margin: "0 10px" }}>—</span>
              Senior Product Designer
            </div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--muted)" }}>
              The Archive · MMXXVI
            </div>
          </div>
          <div style={{ borderTop: "0.75px solid var(--rule)", paddingTop: 22 }}>
            <h1 style={{ fontSize: "clamp(28px, 4.2vw, 46px)", fontWeight: 300, letterSpacing: "-0.025em", lineHeight: 1.08, margin: 0, maxWidth: 620 }}>
              A portfolio you can <em style={{ fontStyle: "normal", borderBottom: "0.75px solid var(--rule)", paddingBottom: 2 }}>interview</em>.
            </h1>
            <div style={{ fontSize: 15, color: "var(--muted)", marginTop: 14, maxWidth: 560, lineHeight: 1.5 }}>
              Ask anything about my work, process, or side projects. Answers are generated live and cite the source.
            </div>
          </div>
        </div>
      )}

      {/* --- WORDMARK variant (kept) --- */}
      {tweaks.landing === "wordmark" && (
        <div className="fade-up" style={{ textAlign: "center", marginBottom: 72 }}>
          <div className="mono" style={{ fontSize: 11, letterSpacing: "0.3em", color: "var(--muted)", textTransform: "uppercase", marginBottom: 16 }}>
            Senior Product Designer — The Archive
          </div>
          <h1 style={{
            fontSize: "clamp(56px, 11vw, 160px)",
            fontWeight: 300,
            letterSpacing: "-0.05em",
            lineHeight: 0.88,
            margin: 0,
          }}>
            Atishay<br/>Jain<span style={{ fontWeight: 300 }}>.</span>
          </h1>
          <div className="mono reveal-line" style={{ borderTop: "0.75px solid var(--rule)", margin: "36px auto 0", width: 120 }} />
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.3em", color: "var(--muted)", textTransform: "uppercase", marginTop: 18 }}>
            — Portfolio, in Conversation —
          </div>
        </div>
      )}

      {/* --- MINIMAL variant — still ID'd, just quietly --- */}
      {tweaks.landing === "minimal" && (
        <div className="fade-up" style={{ width: "100%", maxWidth: 720, marginBottom: 48, textAlign: "center" }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.3em", color: "var(--muted)", textTransform: "uppercase" }}>
            <span style={{ color: "var(--ink)" }}>Atishay Jain</span>
            <span style={{ margin: "0 10px" }}>/</span>
            Senior Product Designer
          </div>
        </div>
      )}

      {/* Search bar */}
      <div className="search-shell fade-up" style={{ animationDelay: "0.15s" }}>
        <span className="search-caret">&gt;</span>
        <input
          ref={inputRef}
          className="search-input"
          placeholder="Ask the archive anything…"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          onKeyDown={(e) => { if (e.key === "Enter") submit(); }}
          autoComplete="off"
          spellCheck="false"
        />
        {query && (
          <span className="search-enter-hint">
            <span className="kbd">↵</span>
            <span>ENTER</span>
          </span>
        )}
      </div>

      {/* Disclaimer */}
      <div className="fade-up" style={{
        marginTop: 20,
        maxWidth: 720,
        width: "100%",
        fontFamily: "var(--font-mono)",
        fontSize: 10,
        letterSpacing: "0.14em",
        color: "var(--muted)",
        textTransform: "uppercase",
        animationDelay: "0.25s",
      }}>
        <span style={{ display: "inline-block", width: 6, height: 6, background: "var(--muted)", marginRight: 10, verticalAlign: 2 }} />
        Trained exclusively on this site. Sources shown inline — open the archive below.
      </div>

      {/* Prompts variant */}
      {(tweaks.landing === "prompts" || tweaks.showHints) && (
        <div className="fade-up" style={{
          marginTop: 48,
          maxWidth: 720,
          width: "100%",
          display: "flex",
          flexWrap: "wrap",
          gap: 8,
          animationDelay: "0.4s",
        }}>
          {SUGGESTED_PROMPTS.slice(0, tweaks.landing === "prompts" ? 6 : 4).map((p) => (
            <button key={p} className="chip" onClick={() => onSearch(p)}>
              {p}
            </button>
          ))}
        </div>
      )}

      {/* Bottom: archive link */}
      <div className="fade-up" style={{
        position: "absolute",
        bottom: 88,
        left: 0,
        right: 0,
        display: "flex",
        justifyContent: "center",
        animationDelay: "0.55s",
      }}>
        <button className="btn-ghost" onClick={() => onSearch("__open_archive__")}>
          Or browse the full archive ↓
        </button>
      </div>
    </div>
  );
}

// ============================================================
// RESPONSE
// ============================================================
function Response({ query, onBack, onArchive, onCite }) {
  const [state, setState] = useState({ loading: true, data: null });

  useEffect(() => {
    let cancelled = false;
    setState({ loading: true, data: null });
    queryClaude(query).then((data) => {
      if (!cancelled) setState({ loading: false, data });
    });
    return () => { cancelled = true; };
  }, [query]);

  const data = state.data;

  // collect projects referenced
  const allWork = useMemo(() => [...ARCHIVE.work, ...ARCHIVE.side], []);
  const shownProjects = useMemo(() => {
    if (!data?.projects) return [];
    return data.projects
      .map((id) => allWork.find((w) => w.id === id))
      .filter(Boolean);
  }, [data, allWork]);

  // unique citations order
  const citeOrder = useMemo(() => {
    if (!data?.body) return [];
    const order = [];
    const re = /\[\[cite:([a-z0-9-]+)\]\]/g;
    let m;
    while ((m = re.exec(data.body)) !== null) {
      if (!order.includes(m[1])) order.push(m[1]);
    }
    return order;
  }, [data]);

  return (
    <div className="response">
      {/* query display */}
      <div className="fade-up" style={{ marginBottom: 40 }}>
        <div className="label" style={{ marginBottom: 12 }}>Query</div>
        <div style={{
          display: "flex",
          alignItems: "center",
          gap: 14,
          fontSize: 22,
          fontWeight: 400,
          letterSpacing: "-0.01em",
          borderBottom: "0.75px solid var(--rule)",
          paddingBottom: 20,
        }}>
          <span className="mono" style={{ color: "var(--muted)" }}>&gt;</span>
          <span style={{ flex: 1 }}>{query}</span>
          <button className="btn-ghost" onClick={onBack}>New search</button>
        </div>
      </div>

      {/* loading */}
      {state.loading && (
        <div className="fade-up" style={{ padding: "40px 0" }}>
          <div className="label" style={{ marginBottom: 16 }}>Searching the archive</div>
          <div>
            <span className="dot" /><span className="dot" /><span className="dot" />
          </div>
        </div>
      )}

      {/* answer */}
      {!state.loading && data && (
        <>
          <div className="label fade-up" style={{ marginBottom: 16 }}>Answer</div>
          <h1 className="fade-up" style={{ animationDelay: "0.05s" }}>{data.title}</h1>
          <div className="fade-up" style={{ animationDelay: "0.1s" }}>
            {renderBodyWithCitations(data.body, onCite)}
          </div>

          {data.offArchive && (
            <div className="fade-up" style={{
              marginTop: 24,
              padding: 16,
              border: "0.75px solid var(--rule)",
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              letterSpacing: "0.12em",
              textTransform: "uppercase",
              color: "var(--muted)",
            }}>
              ⚠ This question falls outside the archive. The above is flagged; nothing fabricated.
            </div>
          )}

          {/* citations legend */}
          {citeOrder.length > 0 && (
            <div className="fade-up" style={{ marginTop: 56, animationDelay: "0.2s" }}>
              <div className="label" style={{ marginBottom: 16 }}>Sources</div>
              <div style={{ borderTop: "0.75px solid var(--rule)" }}>
                {citeOrder.map((id, i) => {
                  const meta = CITE_MAP[id];
                  if (!meta) return null;
                  return (
                    <button
                      key={id}
                      onClick={() => onCite(id)}
                      style={{
                        width: "100%",
                        display: "grid",
                        gridTemplateColumns: "60px 1fr 100px 40px",
                        alignItems: "baseline",
                        borderBottom: "0.75px solid var(--rule)",
                        padding: "14px 0",
                        textAlign: "left",
                        background: "transparent",
                        border: 0,
                        borderBottom: "0.75px solid var(--rule)",
                        cursor: "pointer",
                        color: "var(--ink)",
                        fontFamily: "var(--font-sans)",
                      }}
                    >
                      <span className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: "0.12em" }}>
                        [{String(i + 1).padStart(2, "0")}]
                      </span>
                      <span style={{ fontSize: 15 }}>{meta.label}</span>
                      <span className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: "0.12em", textTransform: "uppercase" }}>
                        p.{String(meta.page).padStart(2, "0")}
                      </span>
                      <span className="mono" style={{ fontSize: 11, color: "var(--muted)", textAlign: "right" }}>↗</span>
                    </button>
                  );
                })}
              </div>
            </div>
          )}

          {/* project cards */}
          {shownProjects.length > 0 && (
            <div style={{ marginTop: 72 }}>
              <div className="label fade-up" style={{ marginBottom: 8 }}>Referenced Work</div>
              {shownProjects.map((p) => (
                <ProjectCard
                  key={p.id}
                  project={p}
                  isSide={ARCHIVE.side.some((s) => s.id === p.id)}
                  onOpen={() => onCite(p.id)}
                />
              ))}
            </div>
          )}
        </>
      )}
    </div>
  );
}

// ============================================================
// TWEAKS PANEL
// ============================================================
function TweaksPanel({ visible, tweaks, setTweaks }) {
  if (!visible) return null;
  const set = (k, v) => {
    setTweaks({ ...tweaks, [k]: v });
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [k]: v } }, "*");
  };
  return (
    <div className="tweaks">
      <div className="tweaks__head">
        <span>Tweaks</span>
        <span style={{ color: "var(--muted)" }}>N° 01</span>
      </div>
      <div className="tweaks__row">
        <span>Theme</span>
        <div className="tweaks__opts">
          {["light", "dark"].map((t) => (
            <button key={t} data-active={tweaks.theme === t} onClick={() => set("theme", t)}>{t}</button>
          ))}
        </div>
      </div>
      <div className="tweaks__row">
        <span>Landing</span>
        <div className="tweaks__opts">
          {["editorial", "masthead", "wordmark", "minimal"].map((t) => (
            <button key={t} data-active={tweaks.landing === t} onClick={() => set("landing", t)}>{t}</button>
          ))}
        </div>
      </div>
      <div className="tweaks__row">
        <span>Prompt hints</span>
        <div className="tweaks__opts">
          {[["on", true], ["off", false]].map(([l, v]) => (
            <button key={l} data-active={tweaks.showHints === v} onClick={() => set("showHints", v)}>{l}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

// ============================================================
// APP
// ============================================================
function App() {
  const [tweaks, setTweaks] = useState(() => ({ ...TWEAK_DEFAULTS, theme: getInitialTheme() }));
  const [tweaksVisible, setTweaksVisible] = useState(false);

  const [view, setView] = useState({ kind: "landing" });

  // apply theme
  useEffect(() => {
    document.documentElement.dataset.theme = tweaks.theme;
    localStorage.setItem("portfolio-theme", tweaks.theme);
  }, [tweaks.theme]);

  const toggleTheme = () => setTweaks((t) => ({ ...t, theme: t.theme === "light" ? "dark" : "light" }));

  // tweaks message bus
  useEffect(() => {
    const onMsg = (e) => {
      if (e.data?.type === "__activate_edit_mode") setTweaksVisible(true);
      else if (e.data?.type === "__deactivate_edit_mode") setTweaksVisible(false);
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  // actions
  const onSearch = (q) => {
    if (q === "__open_archive__") {
      setView({ kind: "archive", jumpTo: null });
      window.scrollTo({ top: 0 });
      return;
    }
    setView({ kind: "response", query: q });
    window.scrollTo({ top: 0 });
  };
  const onCite = (id) => {
    setView({ kind: "archive", jumpTo: `archive-${id}` });
  };
  const backToSearch = () => {
    setView({ kind: "landing" });
    window.scrollTo({ top: 0 });
  };

  // chrome label shows page number when in archive
  const [archivePage, setArchivePage] = useState(1);

  return (
    <>
      {/* frame */}
      <div className="frame">
        <span className="corner-tick tl" />
        <span className="corner-tick tr" />
        <span className="corner-tick bl" />
        <span className="corner-tick br" />
      </div>

      {/* top chrome */}
      <div className="chrome chrome--top">
        <div style={{ display: "flex", gap: 24, alignItems: "center" }}>
          <button onClick={backToSearch} style={{ background: "transparent", border: 0, color: "inherit", cursor: "pointer", font: "inherit", letterSpacing: "inherit", padding: 0, textTransform: "uppercase" }}>
            <span style={{ fontWeight: 500 }}>A.J</span>
            <span style={{ marginLeft: 8, color: "var(--muted)" }}>— The Archive</span>
          </button>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
          <div style={{ color: "var(--muted)" }}>
            {view.kind === "landing" && "N° 01 / MMXXVI"}
            {view.kind === "response" && "N° 01 / Response"}
            {view.kind === "archive" && "N° 01 / Archive"}
          </div>
          <button
            onClick={toggleTheme}
            title={tweaks.theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
            style={{
              background: "transparent",
              border: "0.75px solid var(--rule)",
              color: "var(--ink)",
              cursor: "pointer",
              fontFamily: "var(--font-mono)",
              fontSize: 10,
              letterSpacing: "0.18em",
              textTransform: "uppercase",
              padding: "3px 8px",
              lineHeight: 1.6,
            }}
          >
            {tweaks.theme === "light" ? "Dark" : "Light"}
          </button>
        </div>
      </div>

      {/* bottom chrome — hidden in archive view (page-no takes its place) */}
      {view.kind !== "archive" && (
        <div className="chrome chrome--bot">
          <div style={{ color: "var(--muted)" }}>
            {view.kind === "landing" && "Ask · Cite · Verify"}
            {view.kind === "response" && "AI response — sources linked"}
          </div>
          <div style={{ color: "var(--muted)" }}>Bengaluru · IN</div>
        </div>
      )}

      {/* main view */}
      {view.kind === "landing" && <Landing tweaks={tweaks} onSearch={onSearch} />}
      {view.kind === "response" && (
        <Response
          key={view.query}
          query={view.query}
          onBack={backToSearch}
          onArchive={() => setView({ kind: "archive", jumpTo: null })}
          onCite={onCite}
        />
      )}
      {view.kind === "archive" && (
        <ArchiveView jumpTo={view.jumpTo} onBack={backToSearch} />
      )}

      {/* tweaks */}
      <TweaksPanel visible={tweaksVisible} tweaks={tweaks} setTweaks={setTweaks} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);