/* Components — Topbar, Statusbar, Hero, About, Projects, CaseStudy */
const { useState, useEffect, useRef, useMemo, useCallback } = React;

/* ---------- utilities ---------- */

function useScramble(text, trigger = true, delay = 0) {
  const [out, setOut] = useState(text);
  const raf = useRef(null);
  useEffect(() => {
    if (!trigger) { setOut(text); return; }
    const chars = "!<>-_\\/[]{}—=+*^?#01_$%&";
    let frame = 0;
    let queue = [];
    const oldText = out;
    const newText = text;
    const length = Math.max(oldText.length, newText.length);
    for (let i = 0; i < length; i++) {
      const from = oldText[i] || "";
      const to = newText[i] || "";
      const start = Math.floor(Math.random() * 8) + delay;
      const end = start + Math.floor(Math.random() * 18) + 8;
      queue.push({ from, to, start, end, char: "" });
    }
    const tick = () => {
      let output = "";
      let complete = 0;
      for (let i = 0; i < queue.length; i++) {
        const { from, to, start, end } = queue[i];
        let { char } = queue[i];
        if (frame >= end) { complete++; output += to; }
        else if (frame >= start) {
          if (!char || Math.random() < 0.28) {
            char = chars[Math.floor(Math.random() * chars.length)];
            queue[i].char = char;
          }
          output += `<span style="color:var(--accent);opacity:.85">${char}</span>`;
        } else {
          output += from;
        }
      }
      setOut(output);
      if (complete < queue.length) {
        raf.current = requestAnimationFrame(tick);
        frame++;
      }
    };
    raf.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf.current);
    // eslint-disable-next-line
  }, [text, trigger]);
  return out;
}

function ScrambleText({ text, trigger = true, delay = 0, as: Tag = "span", ...props }) {
  const out = useScramble(text, trigger, delay);
  return <Tag {...props} dangerouslySetInnerHTML={{ __html: out }} />;
}

/* ---------- Topbar ---------- */

function Topbar({ theme, onToggleTheme, onToggleLang, onOpenCmdK, lang }) {
  const T = window.I18N[lang];
  return (
    <div className="topbar">
      <div className="topbar-left">
        <a className="logo" href="#">
          <span className="logo-mark">&lt;/&gt;</span>
          <span className="logo-text">hireadev<span className="logo-tld">.tech</span></span>
        </a>
        <span className="hide-md" style={{ color: "var(--fg-dim)" }}>/ {T.role}</span>
      </div>
      <div className="topbar-center">
        <span style={{ color: "var(--fg-dim)" }}>~/</span>
        <span>portfolio</span>
        <span style={{ color: "var(--fg-mute)" }}>·</span>
        <span style={{ color: "var(--fg-dim)" }}>main</span>
      </div>
      <div className="topbar-right">
        <button className="tb-link" onClick={onOpenCmdK}>
          ⌘K <span className="kbd" style={{ marginLeft: 6 }}>SEARCH</span>
        </button>
        <button className="tb-link tb-lang" onClick={onToggleLang} title={lang === "en" ? "Auf Deutsch wechseln" : "Switch to English"}>
          {T.lang_toggle}
        </button>
        <button className="tb-link tb-theme" onClick={onToggleTheme}>
          {theme === "dark" ? T.theme_dark : T.theme_light}
        </button>
        <a className="tb-link hide-md" href="https://github.com/mayur-champaneria" target="_blank" rel="noopener">GITHUB ↗</a>
      </div>
    </div>
  );
}

/* ---------- Statusbar ---------- */

function Statusbar({ lang }) {
  const T = window.I18N[lang];
  const [time, setTime] = useState(new Date());
  useEffect(() => {
    const id = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const t = time.toISOString().slice(11, 19);
  return (
    <div className="statusbar">
      <div className="seg"><span className="dot"></span> <b>{T.online}</b></div>
      <div className="sb-mid">
        <span className="seg">UTC <b>{t}</b></span>
        <span className="seg">LAT <b>23.0225° N</b></span>
        <span className="seg">LNG <b>72.5714° E</b></span>
        <span className="seg">{T.uptime} <b>{Math.floor((Date.now() - START_T) / 1000)}s</b></span>
      </div>
      <div className="sb-right">
        <span className="seg">v <b>3.0.1</b></span>
        <span className="seg">© 2026</span>
      </div>
    </div>
  );
}
const START_T = Date.now();

/* ---------- Hero ---------- */

function Hero({ lang, onOpenCmdK }) {
  const T = window.I18N[lang];
  const lines = T.boot;
  const [bootLines, setBootLines] = useState([]);
  const [termValue, setTermValue] = useState("");

  useEffect(() => {
    setBootLines([]);
    let i = 0;
    const id = setInterval(() => {
      i++;
      setBootLines(lines.slice(0, i));
      if (i >= lines.length) clearInterval(id);
    }, 140);
    return () => clearInterval(id);
  }, [lang]);

  const onTerminalSubmit = (e) => {
    e.preventDefault();
    if (termValue.trim().toLowerCase() === "help") {
      onOpenCmdK();
      setTermValue("");
    }
  };

  return (
    <section className="hero">
      <div className="shell">
        <div className="hero-grid">
          <div>
            <div className="hero-eyebrow">
              <span className="tag"><span className="dot"></span> {T.available}</span>
            </div>
            <h1 className="hero-name">
              MAYUR<span className="slash"> / </span><span className="accent">champaneria</span>
            </h1>
            <p className="hero-role">
              {lang === "de" ? (
                <>Ich baue <span className="hl">{T.hero_role_hl}</span> {T.hero_role_rest}</>
              ) : (
                <>I build <span className="hl">{T.hero_role_hl}</span> {T.hero_role_rest}</>
              )}
              <br />
              <span className="dim">{T.hero_role_dim}</span>
            </p>

            <div className="hero-meta">
              <div className="cell">
                <div className="label">{T.meta_location}</div>
                <div className="value">{T.meta_location_val}</div>
              </div>
              <div className="cell">
                <div className="label">{T.meta_status}</div>
                <div className="value"><span className="dot" style={{display:"inline-block", marginRight: 6}}></span> {T.meta_status_val}</div>
              </div>
              <div className="cell">
                <div className="label">{T.meta_repos}</div>
                <div className="value">{T.meta_repos_val}</div>
              </div>
              <div className="cell">
                <div className="label">{T.meta_years}</div>
                <div className="value">{T.meta_years_val}</div>
              </div>
            </div>
          </div>

          <div className="hero-term">
            <div className="term-head">
              <div className="tdots"><span className="tdot"></span><span className="tdot"></span><span className="tdot"></span></div>
              <span style={{ marginLeft: 4 }}>session</span>
            </div>
            <div className="term-body">
              {bootLines.map((l, i) => (
                <div className="term-line" key={i}>
                  {l.c === "pp" && <span><span className="pp">{l.t}</span></span>}
                  {l.c === "ar" && <span className="ar">{l.t}</span>}
                  {l.c === "ok" && <span className="ok">{l.t}</span>}
                  {l.c === "kv" && (() => {
                    const m = l.t.match(/^(\S+)\s+(.+)$/);
                    if (!m) return <span>{l.t}</span>;
                    return <span><span className="key">{m[1]}</span>  <span className="val">{m[2]}</span></span>;
                  })()}
                  {l.c === "" && <span>&nbsp;</span>}
                </div>
              ))}
              {bootLines.length === lines.length && (
                <form className="term-input" onSubmit={onTerminalSubmit}>
                  <span className="pp">$</span>
                  <span className="term-cursor-wrap">
                    <input
                      aria-label="terminal input"
                      autoComplete="off"
                      spellCheck="false"
                      value={termValue}
                      onChange={(e) => setTermValue(e.target.value)}
                    />
                    {termValue === "" && <span className="term-cursor" aria-hidden="true">▋</span>}
                  </span>
                </form>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Section header ---------- */

function SectionHead({ cmd, title, idx, count }) {
  return (
    <div className="section-head">
      <div>
        <div className="prompt">
          <span className="p-tilde">~/</span>
          <span className="p-tilde">$</span> <span className="p-cmd">{cmd}</span>
        </div>
        <h2 className="section-title">{title}</h2>
      </div>
      <div className="section-meta">
        <div>{count}</div>
      </div>
    </div>
  );
}

/* ---------- About ---------- */

function renderAboutPara(str) {
  return str
    .replace(/<em>(.*?)<\/em>/g, '<span class="em">$1</span>')
    .replace(/<dim>(.*?)<\/dim>/g, '<span class="dim">$1</span>');
}

function About({ lang }) {
  const T = window.I18N[lang];
  return (
    <section className="section" id="about">
      <div className="shell">
        <SectionHead idx="00" cmd={T.about_cmd} title={T.about_title} count="01 / 09" />
        <div className="about-grid">
          <div className="about-prose">
            <p dangerouslySetInnerHTML={{ __html: renderAboutPara(T.about_p1) }} />
            <p dangerouslySetInnerHTML={{ __html: renderAboutPara(T.about_p2) }} />
            <p dangerouslySetInnerHTML={{ __html: renderAboutPara(T.about_p3) }} />
            <p className="dim" dangerouslySetInnerHTML={{ __html: renderAboutPara(T.about_p4) }} />
          </div>

          <div className="about-stats">
            <div className="cell">
              <div className="num"><span className="accent">12</span>+</div>
              <div className="lbl">{T.stat_years_lbl}</div>
            </div>
            <div className="cell">
              <div className="num">42</div>
              <div className="lbl">{T.stat_repos_lbl}</div>
            </div>
            <div className="cell">
              <div className="num"><span className="accent">∞</span></div>
              <div className="lbl">{T.stat_prs_lbl}</div>
            </div>
            <div className="cell">
              <div className="num"><span className="accent">1k</span>+</div>
              <div className="lbl">{T.stat_deploys_lbl}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Projects ---------- */

function Projects({ lang }) {
  const T = window.I18N[lang];
  const data = window.PORTFOLIO_DATA.projects;
  return (
    <section className="section" id="work">
      <div className="shell">
        <SectionHead idx="01" cmd={T.work_cmd} title={T.work_title} count={T.work_count(data.length)} />
        <div className="proj-list">
          {data.map((p) => (
            <a key={p.idx} className={"proj" + (p.featured ? " featured" : "")} href={p.href} target="_blank" rel="noopener">
              <span className="proj-idx">{p.idx}</span>
              <span className="proj-name">{p.name}</span>
              <span className="proj-desc">{lang === "de" && p.desc_de ? p.desc_de : p.desc}</span>
              <span className="proj-tags">{p.tags}</span>
              <span className="proj-arr">→</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Case Study ---------- */

function CaseStudy({ lang }) {
  const T = window.I18N[lang];
  return (
    <section className="section" id="case">
      <div className="shell">
        <SectionHead idx="02" cmd={T.case_cmd} title={T.case_title} count={T.case_deep} />
        <div className="case">
          <div className="case-side">
            <span className="case-tag">{T.case_tag}</span>
            <h3 className="case-name">{T.case_name}</h3>
            <p className="case-pitch">{T.case_pitch}</p>
            <ul className="case-bullets">
              {T.case_bullets.map((b, i) => (
                <li key={i}><span>{b}</span></li>
              ))}
            </ul>

            <div className="case-metrics">
              <div className="m"><div className="m-v accent">60%</div><div className="m-l">↓ MTTI</div></div>
              <div className="m"><div className="m-v">12s</div><div className="m-l">P50 RESPONSE</div></div>
              <div className="m"><div className="m-v accent">100%</div><div className="m-l">EVIDENCE LINKED</div></div>
              <div className="m"><div className="m-v">PHP</div><div className="m-l">SYMFONY · OPENAI</div></div>
            </div>
          </div>

          <div className="case-side">
            <div className="case-tag">{T.case_arch_label}</div>
            <div className="simple-arch">
              <div className="simple-arch-row">
                <div className="simple-arch-node">
                  <span>01</span>
                  <strong>Incident signal</strong>
                  <p>Logs, metrics, deploys, and runbooks arrive with timestamps.</p>
                </div>
                <div className="simple-arch-arrow">→</div>
                <div className="simple-arch-node primary">
                  <span>02</span>
                  <strong>Evidence builder</strong>
                  <p>Symfony service gathers context, filters noise, and prepares a compact prompt.</p>
                </div>
              </div>
              <div className="simple-arch-row">
                <div className="simple-arch-node primary">
                  <span>03</span>
                  <strong>AI ranking</strong>
                  <p>LLM proposes likely causes. Scores stay tied to real source evidence.</p>
                </div>
                <div className="simple-arch-arrow">→</div>
                <div className="simple-arch-node">
                  <span>04</span>
                  <strong>Engineer review</strong>
                  <p>On-call gets ranked hypotheses, links, and a draft incident report.</p>
                </div>
              </div>
              <p className="simple-arch-note">{T.case_arch_note}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* Export to window for cross-script access */
Object.assign(window, {
  Topbar, Statusbar, Hero, SectionHead, About, Projects, CaseStudy, ScrambleText
});