/* sections-b.jsx — Portfolio (interactive selector) + Skills (CLI meters) */

function useInView(ref, opts) {
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current || seen) return;
    const io = new IntersectionObserver((e) => {
      if (e[0].isIntersecting) { window.__ioOK = true; setSeen(true); io.disconnect(); }
    }, opts || { threshold: 0.4 });
    io.observe(ref.current);
    // Fallback: if IO is unavailable in this context, don't leave bars empty.
    const t = setTimeout(() => { if (!window.__ioOK) setSeen(true); }, 1300);
    return () => { io.disconnect(); clearTimeout(t); };
  }, [seen]);
  return seen;
}

function Portfolio() {
  const projects = window.PROJECTS;
  const [sel, setSel] = React.useState(0);
  const p = projects[sel];
  return (
    <section id="portfolio" className="section">
      <div className="wrap">
        <SectionHead prompt="ls projects/ --featured" title="Selected" dim="work" sub="A decade of long-running builds — picked for depth, not volume." />
        <div className="pf reveal">
          <div className="pf-list">
            {projects.map((pr, i) => (
              <button className={"pf-item" + (i === sel ? " on" : "")} key={pr.id} onClick={() => setSel(i)}>
                <div className="pf-i-top"><span className="dot">{i === sel ? "▸" : "·"}</span> {String(i + 1).padStart(2, "0")} — {pr.year}</div>
                <h4>{pr.name}</h4>
                <div className="pf-i-sub">{pr.kind}</div>
              </button>
            ))}
          </div>
          <div className="pf-detail" key={p.id}>
            <a className="pf-shot" href={"https://" + p.url} target="_blank" rel="noopener" title={"Visit " + p.url}>
              <span className="pf-url">{p.url} ↗</span>
              <img src={p.img} alt={p.name} />
            </a>
            <div className="pf-body">
              <h3>{p.kind}</h3>
              <p>{p.blurb}</p>
              <div className="pf-stack-label">// stack</div>
              <div className="pf-stack">{p.stack.map(s => <span key={s}>{s}</span>)}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const CELLS = 18;
function AsciiMeter({ pct, active }) {
  const target = Math.round(pct / 100 * CELLS);
  const [n, setN] = React.useState(0);
  React.useEffect(() => {
    if (!active) return;
    let cur = 0; let raf;
    const step = () => { cur++; setN(cur); if (cur < target) raf = setTimeout(step, 34); };
    raf = setTimeout(step, 80);
    return () => clearTimeout(raf);
  }, [active, target]);
  return (
    <span className="sk-meter"><span className="fill">{"█".repeat(n)}</span>{"░".repeat(CELLS - n)}</span>
  );
}

function SkillPanel({ name, file, rows }) {
  const ref = React.useRef(null);
  const seen = useInView(ref, { threshold: 0.35 });
  return (
    <div className="sk-panel reveal" ref={ref}>
      <div className="sk-bar"><i></i><i></i><i></i><span className="t">{file}</span></div>
      <div className="sk-body">
        <div className="sk-cmd">$ skills --{name} <b>--format=bar</b></div>
        {rows.map(([n, p]) => (
          <div className="sk-row" key={n}>
            <span className="lbl">{n}</span>
            <AsciiMeter pct={p} active={seen} />
            <span className="pct">{p}%</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function Skills() {
  return (
    <section id="skills" className="section">
      <div className="wrap">
        <SectionHead prompt="skills --all --format=bar" title="Skills" dim="& stack" sub="Proficiency piped straight from a decade of production work." />
        <div className="sk-grid">
          <SkillPanel name="frontend" file="frontend.sh" rows={window.SKILLS_FE} />
          <SkillPanel name="backend" file="backend.sh" rows={window.SKILLS_BE} />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Portfolio, Skills, useInView });