// User Guide
const { useState: useStateG, useEffect: useEffectG, useRef: useRefG } = React;

const GUIDE_SECTIONS = [
  { id: 'welcome', label: 'Welcome' },
  { id: 'pipeline', label: 'How it works' },
  { id: 'states', label: 'Handle states' },
  { id: 'verify', label: 'Verifying a person' },
  { id: 'qc', label: 'QC review' },
  { id: 'flagged', label: 'Flagged & rework' },
  { id: 'dashboards', label: 'Dashboards' },
  { id: 'export', label: 'Export' },
  { id: 'rules', label: 'Rules of thumb' },
  { id: 'shortcuts', label: 'Shortcuts' },
  { id: 'faq', label: 'FAQ' },
];

function GuideView() {
  const [active, setActive] = useStateG('welcome');
  const wrapRef = useRefG(null);

  useEffectG(() => {
    const wrap = wrapRef.current;
    if (!wrap) return;
    const onScroll = () => {
      const sections = GUIDE_SECTIONS.map(s => document.getElementById('g-' + s.id)).filter(Boolean);
      const top = wrap.scrollTop + 80;
      let cur = sections[0]?.id;
      for (const s of sections) {
        if (s.offsetTop <= top) cur = s.id;
      }
      if (cur) setActive(cur.replace('g-', ''));
    };
    wrap.addEventListener('scroll', onScroll);
    return () => wrap.removeEventListener('scroll', onScroll);
  }, []);

  const go = (id) => {
    const el = document.getElementById('g-' + id);
    if (el && wrapRef.current) {
      wrapRef.current.scrollTo({ top: el.offsetTop - 20, behavior: 'smooth' });
    }
  };

  return (
    <div className="guide-wrap" ref={wrapRef}>
      <nav className="guide-toc">
        {GUIDE_SECTIONS.map(s => (
          <button key={s.id} className={active === s.id ? 'on' : ''} onClick={() => go(s.id)}>
            {s.label}
          </button>
        ))}
      </nav>

      <div className="guide-body">
        <section id="g-welcome">
          <h1 className="guide-h1">User Guide</h1>
          <p className="guide-lead">
            This tool is where you reconcile social-media handles between <b>SportsTool</b> and
            <b> CultureTool</b>, verify them against the actual platforms, and push clean data back.
          </p>
          <p>
            It replaces the old Excel → platform tab → back-to-Excel loop. Everything you need to
            decide if a handle is correct lives on one row: the two source values, an editable
            merged field, and a live link out to the profile.
          </p>
          <div className="guide-callout">
            Your goal on any given person: walk their 5 platforms top-to-bottom until every row has
            a <b>green check</b> or <b>confirmed absent</b>.
          </div>
        </section>

        <section id="g-pipeline">
          <h2 className="guide-h2">How it works</h2>
          <p>Data moves through four stages. You operate mostly in stages 2 and 3.</p>
          <div className="pipeline">
            <div className="step">
              <div className="step-num">1</div>
              <div>
                <div className="step-title">Ingest</div>
                <div className="step-sub">Automated</div>
                <div className="step-body">SportsTool and CultureTool push their handle rosters nightly.</div>
              </div>
            </div>
            <div className="step">
              <div className="step-num">2</div>
              <div>
                <div className="step-title">Verify</div>
                <div className="step-sub">You</div>
                <div className="step-body">Open the platform, confirm the handle is real and correct, save.</div>
              </div>
            </div>
            <div className="step">
              <div className="step-num">3</div>
              <div>
                <div className="step-title">QC</div>
                <div className="step-sub">Another reviewer</div>
                <div className="step-body">A second pair of eyes confirms. Requires a different user.</div>
              </div>
            </div>
            <div className="step">
              <div className="step-num">4</div>
              <div>
                <div className="step-title">Report back</div>
                <div className="step-sub">Automated</div>
                <div className="step-body">Confirmed handles flow back to SportsTool and CultureTool.</div>
              </div>
            </div>
          </div>
        </section>

        <section id="g-states">
          <h2 className="guide-h2">Handle states</h2>
          <p>Every person × platform cell is in exactly one of these five states.</p>
          <div className="state-grid">
            <div className="state-card"><span className="chip miss">Missing</span>
              <div><div className="state-name">Missing</div><div className="state-body">No handle from either source. Needs manual research or mark absent.</div></div></div>
            <div className="state-card"><span className="chip unv">Unverified</span>
              <div><div className="state-name">Unverified</div><div className="state-body">A handle exists but no one has confirmed it against the platform yet.</div></div></div>
            <div className="state-card"><span className="chip ver">Verified</span>
              <div><div className="state-name">Verified</div><div className="state-body">One reviewer has opened the profile and confirmed. Awaiting QC.</div></div></div>
            <div className="state-card"><span className="chip qc">In QC</span>
              <div><div className="state-name">In QC</div><div className="state-body">Sits in the QC queue waiting for a second reviewer.</div></div></div>
            <div className="state-card"><span className="chip abs">Confirmed absent</span>
              <div><div className="state-name">Confirmed absent</div><div className="state-body">This person genuinely has no presence on this platform. Counts as done.</div></div></div>
          </div>
        </section>

        <section id="g-verify">
          <h2 className="guide-h2">Verifying a person</h2>
          <ol className="numlist">
            <li>Open a person from the dashboard or pick the top of the review queue.</li>
            <li>For each platform row, look at the SportsTool and Panel values. If they agree, the merged handle pre-fills.</li>
            <li>Click <b>Open</b>. It opens the platform in a new tab with the current handle baked in.</li>
            <li>Confirm it's the right account. Check the display name, verification badge, and bio match the person.</li>
            <li>Back in the tool, press <span className="kbd">V</span> (or the <b>Verify</b> button) to stamp it.</li>
            <li>If the handle is wrong, edit the input, then verify. If the person genuinely isn't on this platform, press <span className="kbd">N</span> to mark absent.</li>
          </ol>
          <div className="guide-callout warn">
            Never verify a handle you didn't actually open. QC exists to catch this but it costs everyone time downstream.
          </div>
        </section>

        <section id="g-qc">
          <h2 className="guide-h2">QC review</h2>
          <p>QC is a second sign-off on handles someone else verified. The queue only shows rows that:</p>
          <ul className="bullets">
            <li>Have a verified handle, and</li>
            <li>Were verified by a different user than you.</li>
          </ul>
          <p>You can't QC your own work. Open the profile, spot-check the same signals, and press <span className="kbd">Q</span> to confirm. If something looks off, push it back to Flagged with a note.</p>
        </section>

        <section id="g-flagged">
          <h2 className="guide-h2">Flagged & rework</h2>
          <p>Handles return to the flagged queue when:</p>
          <ul className="bullets">
            <li>A source system pushes a <b>different value</b> for a previously-confirmed handle.</li>
            <li>The account becomes <b>inactive</b>, private, or deleted.</li>
            <li>A reviewer manually flags it during QC.</li>
          </ul>
          <p>Flagged rows don't count toward your quality score until they're re-verified.</p>
        </section>

        <section id="g-dashboards">
          <h2 className="guide-h2">Dashboards</h2>
          <p>Two views, same data, different lens:</p>
          <ul className="bullets">
            <li><b>Workflow</b> — how much is left. Use at the start of a shift to pick up where the team left off.</li>
            <li><b>Quality</b> — how good the dataset is right now. Use when reporting up or back to source systems.</li>
          </ul>
        </section>

        <section id="g-export">
          <h2 className="guide-h2">Export</h2>
          <p>Exports pull current state into CSV. Pick the scope (all people, one source, one platform, just-verified) and the columns you want. Large exports email a link when ready.</p>
        </section>

        <section id="g-rules">
          <h2 className="guide-h2">Rules of thumb</h2>
          <div className="rules-grid">
            <div className="rule ok">
              <div className="rule-head">✓ Do</div>
              <ul>
                <li>Open every profile before verifying.</li>
                <li>Prefer the handle that matches verified display name + bio.</li>
                <li>Mark absent aggressively — an empty cell is worse than a confirmed-no.</li>
                <li>Add a note when mismatched sources disagree.</li>
              </ul>
            </div>
            <div className="rule warn">
              <div className="rule-head">✗ Don't</div>
              <ul>
                <li>Verify based on handle-matching alone.</li>
                <li>QC your own verifications.</li>
                <li>Leave mismatches unresolved — pick one and note why.</li>
                <li>Guess when a person has a common name. Flag instead.</li>
              </ul>
            </div>
          </div>
        </section>

        <section id="g-shortcuts">
          <h2 className="guide-h2">Keyboard shortcuts</h2>
          <div className="shortcut-grid">
            <div className="sc-group">
              <div className="sc-title">Navigate</div>
              <div className="sc"><span className="kbd">/</span> Focus search</div>
              <div className="sc"><span className="kbd">[</span> / <span className="kbd">]</span> Previous / next person</div>
              <div className="sc"><span className="kbd">J</span> / <span className="kbd">K</span> Platform down / up</div>
              <div className="sc"><span className="kbd">Esc</span> Back to dashboard</div>
            </div>
            <div className="sc-group">
              <div className="sc-title">Act on a row</div>
              <div className="sc"><span className="kbd">V</span> Verify current platform</div>
              <div className="sc"><span className="kbd">Q</span> Send to QC</div>
              <div className="sc"><span className="kbd">N</span> Mark absent</div>
              <div className="sc"><span className="kbd">O</span> Open profile in new tab</div>
            </div>
          </div>
        </section>

        <section id="g-faq">
          <h2 className="guide-h2">FAQ</h2>
          <div className="faq">
            <div>
              <b>SportsTool and CultureTool disagree — which one wins?</b>
              <p>Neither by default. Open both profiles, pick the correct one, edit the merged field, and verify. The decision flows back to both sources.</p>
            </div>
            <div>
              <b>Can I edit after verifying?</b>
              <p>Yes. Editing the handle drops the row back to unverified and requires re-confirmation.</p>
            </div>
            <div>
              <b>What counts as "confirmed absent"?</b>
              <p>You searched the platform thoroughly and the person genuinely isn't there. It's a real answer, not a skip.</p>
            </div>
            <div>
              <b>Why can't I QC my own work?</b>
              <p>QC is a second opinion. If you verified and QC'd the same row, it's not a second opinion.</p>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}

window.GuideView = GuideView;