// ScanYourRepo — the converting section. Invitation → live progress → findings + email gate.
function ScanYourRepo() {
  const { React, ScanProgress, FindingCard, EmailGate, useLiveScan } = window;
  const { useState, useEffect, useRef } = React;
  const [url, setUrl] = useState('github.com/saleor/saleor');
  const [emailSubmitted, setEmailSubmitted] = useState(false);
  const [emailValue, setEmailValue] = useState(null);
  const [urlError, setUrlError] = useState(null);
  const { scan, run, cancel } = useLiveScan();
  const logEndRef = useRef(null);

  useEffect(() => {
    if (logEndRef.current) logEndRef.current.scrollTop = logEndRef.current.scrollHeight;
  }, [scan.log.length]);

  const onSubmit = (e) => {
    e.preventDefault();
    setUrlError(null);
    const v = window.githubLib.validate(url);
    if (!v.ok) { setUrlError(v.error); return; }
    setEmailSubmitted(false);
    run(url);
  };

  const isRunning = scan.status === 'running';
  const isDone    = scan.status === 'done';

  // Group findings by severity; high always visible, others gated until email.
  const grouped = { high: [], medium: [], low: [] };
  scan.findings.forEach(f => grouped[f.severity].push(f));
  const highCount = grouped.high.length;
  const gatedCount = emailSubmitted ? 0 : grouped.medium.length + grouped.low.length;

  return (
    <section className="syr-section" data-screen-label="04 Scan Your Repo" id="scan">
      <div className="syr-inner">
        <header className="syr-header">
          <div className="syr-eyebrow">
            <span className="ph-line" /> run it on your code · free, phase 1 only
          </div>
          <h2 className="syr-h2">
            stop reading. start scanning.
          </h2>
          <p className="syr-sub">
            paste a public github repo. we'll run phase 1 — whitebox + sast, seven engines,
            zero traffic to your target — and stream findings as they land.
          </p>
        </header>

        <form className={`syr-form ${isRunning ? 'is-running' : ''}`} onSubmit={onSubmit}>
          <span className="syr-form-prefix">https://</span>
          <input
            type="text" className="syr-input"
            value={url} onChange={(e) => setUrl(e.target.value)}
            disabled={isRunning}
            placeholder="github.com/your/repo"
            spellCheck={false} autoCorrect="off" autoCapitalize="off" />
          {!isRunning ? (
            <button type="submit" className="syr-button">
              scan it <span className="cta-arrow">→</span>
            </button>
          ) : (
            <button type="button" className="syr-button syr-button--cancel" onClick={cancel}>
              cancel
            </button>
          )}
        </form>

        <div className="syr-fineprint">
          {urlError ? (
            <span className="syr-error">⚠ {urlError}</span>
          ) : (
            <span>
              public repos only · phase 1 scan (whitebox + sast) ·
              full report via email · rate-limit 10/hr/ip
            </span>
          )}
        </div>

        {(isRunning || isDone) && (
          <div className="syr-stage">
            <ScanProgress scan={scan} onCancel={cancel} />

            {(scan.findings.length > 0 || isDone) && (
              <div className="syr-results">
                <div className="syr-results-head">
                  <div>
                    <div className="srh-eyebrow">preliminary findings</div>
                    <div className="srh-count">
                      <span className="srh-num">{scan.findings.length}</span>
                      <span className="srh-lbl">findings in phase 1 ·</span>
                      <span className="srh-hi">{highCount} high</span>
                    </div>
                  </div>
                  {isDone && (
                    <div className="srh-done">
                      ✓ scan complete · 2m {Math.floor(scan.elapsedMs/1000) % 60}s
                    </div>
                  )}
                </div>

                <div className="syr-findings">
                  {grouped.high.map(f => <FindingCard key={f.id} f={f} gated={false} />)}
                  {grouped.medium.map(f =>
                    <FindingCard key={f.id} f={f} gated={!emailSubmitted} />)}
                  {grouped.low.map(f =>
                    <FindingCard key={f.id} f={f} gated={!emailSubmitted} />)}
                </div>

                {isDone && gatedCount > 0 && (
                  <EmailGate
                    hiddenCount={gatedCount}
                    submitted={emailSubmitted}
                    onSubmit={(e) => { setEmailSubmitted(true); setEmailValue(e); }}
                  />
                )}

                {isDone && emailSubmitted && (
                  <div className="syr-post">
                    <div className="syr-post-title">
                      ✓ report sent to <span className="syr-post-email">{emailValue}</span>
                    </div>
                    <div className="syr-post-copy">
                      that was phase 1. phases 2–6 (recon, crypto, vuln agents, exploit, chain analysis)
                      need an engagement. we run those for you.
                    </div>
                    <div className="syr-post-ctas">
                      <a href="#managed" className="cta cta--primary">
                        schedule a managed scan <span className="cta-arrow">→</span>
                      </a>
                      <a href="#sample" className="cta cta--ghost">view sample full report</a>
                    </div>
                  </div>
                )}
              </div>
            )}
          </div>
        )}
      </div>
    </section>
  );
}
window.ScanYourRepo = ScanYourRepo;