/* 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 hide-md" onClick={onToggleLang} title={lang === "en" ? "Auf Deutsch wechseln" : "Switch to English"}>
          {T.lang_toggle}
        </button>
        <button className="tb-link hide-md" 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 }) {
  const T = window.I18N[lang];
  const lines = T.boot;
  const [bootLines, setBootLines] = 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]);

  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>
              <span>· {T.index_label}</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 — bash — 80×24</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 && (
                <div className="term-line"><span className="pp">$ </span><span className="cursor"></span></div>
              )}
            </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>{idx} </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>SECTION <b>{idx}</b></div>
        <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="arch-diagram">
              {/* Engineer */}
              <div className="arch-node">
                <div className="arch-nd-tag">INPUT</div>
                <div className="arch-nd-name">On-Call Engineer</div>
                <div className="arch-nd-tech">Angular · TypeScript</div>
                <div className="arch-nd-note">"service-x p99 spiked at 14:02"</div>
              </div>

              <div className="arch-vconn">
                <span className="arch-vconn-line"></span>
                <span className="arch-vconn-lbl">POST /investigate</span>
                <span className="arch-vconn-arr">▼</span>
              </div>

              {/* Orchestrator */}
              <div className="arch-node arch-node--core">
                <div className="arch-nd-tag">CORE · PHP 8 · SYMFONY</div>
                <div className="arch-nd-name">Copilot Orchestrator</div>
                <div className="arch-nd-tech">OpenAI API · context builder · evidence-first prompts</div>
              </div>

              {/* Fan out */}
              <div className="arch-fanout">
                {[0,1,2,3].map(i => <div key={i} className="arch-fanout-leg"></div>)}
              </div>

              {/* 4 data sources */}
              <div className="arch-sources">
                <div className="arch-source">
                  <span className="arch-src-icon">📋</span>
                  <span className="arch-src-label">LOGS</span>
                  <span className="arch-src-tech">Elasticsearch</span>
                </div>
                <div className="arch-source">
                  <span className="arch-src-icon">📈</span>
                  <span className="arch-src-label">METRICS</span>
                  <span className="arch-src-tech">Prometheus</span>
                </div>
                <div className="arch-source">
                  <span className="arch-src-icon">🚀</span>
                  <span className="arch-src-label">DEPLOYS</span>
                  <span className="arch-src-tech">GitLab CI</span>
                </div>
                <div className="arch-source">
                  <span className="arch-src-icon">📖</span>
                  <span className="arch-src-label">RUNBOOKS</span>
                  <span className="arch-src-tech">Markdown</span>
                </div>
              </div>

              {/* Fan in */}
              <div className="arch-fanin">
                {[0,1,2,3].map(i => <div key={i} className="arch-fanin-leg"></div>)}
              </div>

              <div className="arch-vconn">
                <span className="arch-vconn-line"></span>
                <span className="arch-vconn-lbl">embed + rank</span>
                <span className="arch-vconn-arr">▼</span>
              </div>

              {/* Ranked output */}
              <div className="arch-node arch-node--output">
                <div className="arch-nd-tag">OUTPUT · DOCKER · REDIS</div>
                <div className="arch-nd-name">Ranked Hypotheses</div>
                <div className="arch-hypo-list">
                  <div className="arch-hypo">
                    <span className="arch-hypo-rank">①</span>
                    <span className="arch-hypo-score">0.84</span>
                    <span className="arch-hypo-label">deploy change</span>
                  </div>
                  <div className="arch-hypo">
                    <span className="arch-hypo-rank">②</span>
                    <span className="arch-hypo-score">0.61</span>
                    <span className="arch-hypo-label">index saturation</span>
                  </div>
                  <div className="arch-hypo">
                    <span className="arch-hypo-rank">③</span>
                    <span className="arch-hypo-score">0.42</span>
                    <span className="arch-hypo-label">cache eviction</span>
                  </div>
                </div>
                <div className="arch-report-row">
                  <span className="dot" style={{flexShrink:0}}></span>
                  <span>auto-generates post-incident report · Symfony Mailer</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

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