/* HOME page — slimmer than before, hero-forward like respire.my */
const { useState, useEffect } = React;

function Hero() {
  const { text, done } = useTypewriter([
    "Engineer. CTO. Open-source maintainer.",
    "Tampa, FL — building systems that are fast,",
    "reliable, and cost-efficient by design."
  ]);

  return (
    <section className="hero" id="top">
      <div>
        <div className="hero-meta">
          <div className="row">
            <span className="pill">AVAILABLE FOR 2026 ROLES</span>
            <span>FILE · 太宰 — 014</span>
          </div>
          <div className="row">
            <span>LAT 27.95° N · LON 82.46° W</span>
            <span>STATUS · OPERATIONAL</span>
          </div>
        </div>
        <h1>
          BAO<br/>
          <span className="it">Ngo.</span>
          <span className="jp">呉 ・ 宝 ・ ポートフォリオ</span>
        </h1>
        <div className="hero-tagline">
          {text.split("\n").map((l, i) => <div key={i}>{l}</div>)}
          {!done && <span className="cursor"></span>}
        </div>
      </div>
      <div className="portrait">
        <div className="stripes"></div>
        <div className="frame"></div>
        <div className="crosshair">
          [ PORTRAIT ]<br/>
          drop image here<br/>
          3:4 · b/w preferred
        </div>
        <div className="portrait-stamp">太宰</div>
        <div className="label">
          <span>SUBJECT · NGO, BAO</span>
          <span>2026</span>
        </div>
      </div>
    </section>
  );
}

function About() {
  return (
    <section id="about">
      <div className="section-head">
        <div className="left">
          <span className="section-num">01 / ABOUT</span>
          <h2 className="section-title">Profile<span className="jp">人物</span></h2>
        </div>
        <div className="section-meta">DOSSIER · NGO B.</div>
      </div>
      <div className="bandage-divider" style={{marginBottom:48}}></div>
      <div className="about reveal">
        <div>
          <p className="lede">Engineer with 3+ years shipping production systems at scale.</p>
          <p>Co-founded <strong>Electron Hub</strong>, an LLM gateway handling <em>30M+ requests</em> and <em>$120K ARR</em>. Maintain open-source libraries with <em>350K+ downloads</em>.</p>
          <p>Strong across backend (FastAPI, RAG pipelines, Redis, MongoDB) and frontend (React, Next.js), with a bias toward systems that are <strong>fast, reliable, and cost-efficient</strong>.</p>
          <p>Currently studying B.S. Computer Science at the University of South Florida — <strong>4.0 GPA</strong>, graduating May 2028.</p>
        </div>
        <div className="about-stats">
          <div className="about-stat"><div className="num">30M<span className="small">+</span></div><div className="label">Total Requests</div></div>
          <div className="about-stat"><div className="num">$120<span className="small">K ARR</span></div><div className="label">Electron Hub</div></div>
          <div className="about-stat"><div className="num">350<span className="small">K+</span></div><div className="label">PyPI Downloads</div></div>
          <div className="about-stat"><div className="num">4.0<span className="small">/4.0</span></div><div className="label">GPA · USF</div></div>
        </div>
      </div>
      <AbilityCard />
    </section>
  );
}

function AbilityCard() {
  return (
    <div className="ability-card reveal">
      <div className="ability-portrait">
        <div className="crosshair">[ FIGURE ]<br/>full-body · 3:4</div>
        <div className="tag">FILE-014 · CLASSIFIED</div>
      </div>
      <div className="ability-info">
        <div className="head">
          <div>
            <div className="codename">Codename — The Engineer</div>
            <h3>No Longer Slow<span className="jp">速度こそ最善</span></h3>
          </div>
          <div className="codename" style={{textAlign:'right'}}>ABILITY USER<br/>REGISTERED · 2024</div>
        </div>
        <p className="ability-desc">Negates latency on contact. Routes any request through the lowest-cost path across 32+ providers. When fully active, reduces operational overhead by 60% and inference cost by 40%.</p>
        <div className="ability-stats">
          <div className="stat"><span className="stat-label">Backend</span><div className="bar"><div className="bar-fill" style={{"--v":"95%"}}></div></div><span className="stat-value">95</span></div>
          <div className="stat"><span className="stat-label">Frontend</span><div className="bar"><div className="bar-fill" style={{"--v":"82%"}}></div></div><span className="stat-value">82</span></div>
          <div className="stat"><span className="stat-label">LLMOps</span><div className="bar"><div className="bar-fill" style={{"--v":"92%"}}></div></div><span className="stat-value">92</span></div>
          <div className="stat"><span className="stat-label">DevOps</span><div className="bar"><div className="bar-fill" style={{"--v":"78%"}}></div></div><span className="stat-value">78</span></div>
          <div className="stat"><span className="stat-label">Caffeine</span><div className="bar"><div className="bar-fill" style={{"--v":"99%"}}></div></div><span className="stat-value">99</span></div>
          <div className="stat"><span className="stat-label">Sleep</span><div className="bar"><div className="bar-fill" style={{"--v":"24%"}}></div></div><span className="stat-value">24</span></div>
        </div>
      </div>
    </div>
  );
}

/* DOSSIER — merged Field Notes (work) + Casework (projects) into one timeline-style section.
   Tabs let you toggle "Field" (jobs) / "Cases" (projects) / "Live" (GitHub feed). */
function Dossier() {
  const [tab, setTab] = useState('field');
  return (
    <section id="dossier">
      <div className="section-head">
        <div className="left">
          <span className="section-num">02 / DOSSIER</span>
          <h2 className="section-title">Field Notes &amp; Casework<span className="jp">事件簿</span></h2>
        </div>
        <div className="dossier-tabs" role="tablist">
          <button role="tab" className={"dossier-tab " + (tab==='field'?'active':'')} onClick={() => setTab('field')}>
            <span className="num">01</span> FIELD <span className="count">{window.EXPERIENCE.length}</span>
          </button>
          <button role="tab" className={"dossier-tab " + (tab==='cases'?'active':'')} onClick={() => setTab('cases')}>
            <span className="num">02</span> CASES <span className="count">{window.PROJECTS.length}</span>
          </button>
          <button role="tab" className={"dossier-tab " + (tab==='live'?'active':'')} onClick={() => setTab('live')}>
            <span className="num">03</span> LIVE <span className="dot"></span>
          </button>
        </div>
      </div>
      <div className="bandage-divider" style={{marginBottom: 24}}></div>

      {tab === 'field' && (
        <div className="experience-list">
          {window.EXPERIENCE.map((e, i) => (
            <article key={i} className="exp reveal">
              <div className="exp-date">{e.date}</div>
              <div className="exp-role">
                <h3>{e.role}</h3>
                <div className="org">{e.org}</div>
                <div className="loc">{e.loc}</div>
              </div>
              <ul className="exp-bullets">
                {e.bullets.map((b, j) => <li key={j}>{b}</li>)}
              </ul>
            </article>
          ))}
        </div>
      )}

      {tab === 'cases' && (
        <>
          <div className="project-grid reveal">
            {window.PROJECTS.slice(0, 4).map((p, i) => <ProjectCard key={i} p={p} />)}
          </div>
          <div className="dossier-foot">
            <a href="projects.html">→ See all {window.PROJECTS.length} cases · Open the case file index</a>
          </div>
        </>
      )}

      {tab === 'live' && <GithubFeed />}
    </section>
  );
}

function ProjectCard({ p }) {
  const [flipped, setFlipped] = useState(false);
  return (
    <div className={"project-card " + (flipped ? "flipped" : "")} onClick={() => setFlipped(f => !f)}>
      <div className="inner">
        <div className="project-face project-front">
          <div className="stripes"></div>
          <div className="num">CASE {p.num}</div>
          <div className="corner">{p.jp}</div>
          <h4>{p.title}</h4>
          <div className="meta">{p.meta}</div>
        </div>
        <div className="project-face project-back">
          <h4>{p.title}</h4>
          <p>{p.blurb}</p>
          <ul>{p.bullets.map((b, i) => <li key={i}>{b}</li>)}</ul>
          <div className="tags">{p.tags.map((t, i) => <span key={i}>{t}</span>)}</div>
        </div>
      </div>
    </div>
  );
}

/* GithubFeed — pulls live data from api.github.com (no auth, public, 60req/hr/IP) */
function GithubFeed() {
  const [state, setState] = useState({ loading: true, repos: [], user: null, err: null });
  useEffect(() => {
    const u = 'snowby666';
    Promise.all([
      fetch(`https://api.github.com/users/${u}`).then(r => r.json()),
      fetch(`https://api.github.com/users/${u}/repos?sort=updated&per_page=8&type=owner`).then(r => r.json())
    ]).then(([user, repos]) => {
      if (Array.isArray(repos)) {
        setState({ loading: false, repos: repos.filter(r => !r.fork), user, err: null });
      } else {
        setState({ loading: false, repos: [], user: null, err: 'rate-limited' });
      }
    }).catch(e => setState({ loading: false, repos: [], user: null, err: String(e) }));
  }, []);

  if (state.loading) {
    return (
      <div className="gh-feed reveal">
        <div className="gh-loading">
          <span className="gh-pulse"></span>
          ESTABLISHING UPLINK · github.com/snowby666 …
        </div>
      </div>
    );
  }
  if (state.err) {
    return (
      <div className="gh-feed reveal">
        <div className="gh-loading">
          ✗ TRANSMISSION FAILED — {state.err}. Try again later, or visit{' '}
          <a href="https://github.com/snowby666" target="_blank" rel="noopener">github.com/snowby666</a>.
        </div>
      </div>
    );
  }

  const u = state.user;
  const sumStars = state.repos.reduce((s, r) => s + (r.stargazers_count || 0), 0);

  const fmtDate = (iso) => {
    const d = new Date(iso);
    const days = Math.floor((Date.now() - d.getTime()) / 86400000);
    if (days === 0) return 'today';
    if (days === 1) return 'yesterday';
    if (days < 30) return days + 'd ago';
    if (days < 365) return Math.floor(days/30) + 'mo ago';
    return Math.floor(days/365) + 'y ago';
  };

  return (
    <div className="gh-feed reveal">
      <div className="gh-head">
        <img className="gh-avatar" src={u.avatar_url} alt="" />
        <div className="gh-meta">
          <div className="gh-handle">@{u.login}<span className="gh-name">{u.name}</span></div>
          <div className="gh-bio">{u.bio || '—'}</div>
        </div>
        <div className="gh-stats">
          <div><span className="num">{u.public_repos}</span><span className="lbl">REPOS</span></div>
          <div><span className="num">{u.followers}</span><span className="lbl">FOLLOWERS</span></div>
          <div><span className="num">{sumStars}</span><span className="lbl">★ RECENT</span></div>
        </div>
      </div>
      <div className="gh-grid">
        {state.repos.slice(0, 6).map((r, i) => (
          <a key={r.id} className="gh-card" href={r.html_url} target="_blank" rel="noopener">
            <div className="gh-card-head">
              <span className="gh-num">{String(i + 1).padStart(2, '0')}</span>
              <span className="gh-name-row">{r.name}</span>
              {r.archived && <span className="gh-badge dim">ARCHIVED</span>}
              {r.fork && <span className="gh-badge dim">FORK</span>}
            </div>
            <div className="gh-desc">{r.description || '— no description —'}</div>
            <div className="gh-card-foot">
              {r.language && <span className="gh-lang"><span className="dot" data-lang={r.language}></span>{r.language}</span>}
              <span className="gh-stat">★ {r.stargazers_count}</span>
              <span className="gh-stat">⑂ {r.forks_count}</span>
              <span className="gh-stat right">{fmtDate(r.pushed_at)}</span>
            </div>
          </a>
        ))}
      </div>
      <div className="gh-foot">
        <a href={u.html_url} target="_blank" rel="noopener">→ Continue to github.com/{u.login} for the full ledger</a>
      </div>
    </div>
  );
}

/* Skills — full toolkit (restored) */
function Skills() {
  return (
    <section id="skills">
      <div className="section-head">
        <div className="left">
          <span className="section-num">03 / TOOLKIT</span>
          <h2 className="section-title">Toolkit<span className="jp">道具</span></h2>
        </div>
        <div className="section-meta">06 CATEGORIES</div>
      </div>
      <div className="skills-grid reveal">
        {Object.entries(window.SKILLS).map(([cat, data], i) => (
          <div key={cat} className="skill-group">
            <div className="head">
              <h4>{cat}<span className="jp">{data.jp}</span></h4>
              <span className="count">{String(i+1).padStart(2,'0')} / 06</span>
            </div>
            <div className="skill-tags">
              {data.primary.map(s => <span key={s} className="skill-tag primary">{s}</span>)}
              {data.rest.map(s => <span key={s} className="skill-tag">{s}</span>)}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Contact() {
  return (
    <section id="contact" className="contact">
      <h2 className="contact-title">Get in <span className="it">touch.</span><span className="jp">便りを待つ</span></h2>
      <p className="contact-sub">For collaborations, interesting problems, or to compare notes on 2 a.m. uptime alerts. I read every message.</p>
      <div className="contact-links">
        <a className="contact-link" href="mailto:giabao070206@gmail.com"><span className="label">Email</span><span className="value">giabao070206@gmail.com</span></a>
        <a className="contact-link" href="https://github.com/snowby666" target="_blank"><span className="label">GitHub</span><span className="value">@snowby666</span></a>
        <a className="contact-link" href="https://linkedin.com/in/ngodinhgiabao" target="_blank"><span className="label">LinkedIn</span><span className="value">/ngodinhgiabao</span></a>
      </div>
    </section>
  );
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "era": "agency",
  "density": "comfortable",
  "showInkTrail": true,
  "marqueeText": "WE ARE NOT FINISHED"
}/*EDITMODE-END*/;

function HomeTweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Era">
        <TweakRadio value={tweaks.era} onChange={(v) => setTweak('era', v)}
          options={[
            { value: 'agency', label: 'Agency' },
            { value: 'mafia', label: 'Mafia' },
            { value: 'nolonger', label: 'No Longer' }
          ]} />
      </TweakSection>
      <TweakSection label="Density">
        <TweakRadio value={tweaks.density} onChange={(v) => setTweak('density', v)}
          options={[
            { value: 'compact', label: 'Compact' },
            { value: 'comfortable', label: 'Comfortable' },
            { value: 'airy', label: 'Airy' }
          ]} />
      </TweakSection>
      <TweakSection label="Effects">
        <TweakToggle label="Cursor ink trail" value={tweaks.showInkTrail} onChange={(v) => setTweak('showInkTrail', v)} />
      </TweakSection>
      <TweakSection label="Marquee">
        <TweakText value={tweaks.marqueeText} onChange={(v) => setTweak('marqueeText', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useReveal();
  useInkTrail(tweaks.showInkTrail);

  useEffect(() => {
    window.saveEra(tweaks.era, tweaks.density);
  }, [tweaks.era, tweaks.density]);

  return (
    <>
      <PaperLayer />
      <Nav active="home" />
      <Hero />
      <Marquee text={tweaks.marqueeText} count={10} />
      <About />
      <Dossier />
      <Skills />
      <Contact />
      <Footer page="home" />
      <MusicPopup />
      <HomeTweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
requestAnimationFrame(() => document.body.classList.add('app-ready'));