// views_steal.jsx — "Steal the citation".
// Opens from a Visibility query where an engine cites a COMPETITOR instead of
// you. Shows the exact passage the engine lifted, your current equivalent, and
// the structural moves that would flip the citation — then drops the matching
// fix straight into the pack. Glass box, applied to the competition.
(function () {
  const { useState, useEffect, useLayoutEffect, useRef } = React;
  const D = window.JS_DATA;
  const S = window.JS_SCORE;

  function StealDrawer({ query, onClose, onShip }) {
    const s = D.STEAL[query];
    if (!s) return null;
    const fix = (S.FIXES || []).find(f => f.id === s.fix);
    const absent = s.yourState === 'absent';
    const stateLabel = { uncited: 'Paraphrased, not cited', thin: 'Page too thin to ground', absent: 'No content to cite' }[s.yourState];

    return (
      <div className="lab-drawer-inner">
        <div className="lab-head">
          <div>
            <p className="eyebrow">Glass box · steal the citation</p>
            <h2 className="steal-q">“{query}”</h2>
            <p className="lab-sub">On <b>{s.engine}</b>, this answer cites <b>{s.competitor}</b> — not you. Here is the passage it lifted, and exactly what to copy.</p>
          </div>
          <button className="lab-close" onClick={onClose} aria-label="Close"><Icon name="x" size={18} /></button>
        </div>

        <div className="lab-body">
          {/* the two passages, head to head */}
          <div className="steal-compare">
            <div className="steal-col steal-col--them">
              <div className="steal-colhead">
                <span className="steal-badge steal-badge--cited"><span className="dot" />Cited</span>
                <span className="steal-who">{s.competitor}</span>
              </div>
              <blockquote className="steal-passage steal-passage--cited">{s.citedPassage}</blockquote>
              <p className="steal-why"><span className="js-tag">Why it won</span>{s.whyTheirs}</p>
            </div>

            <div className="steal-vs"><span>vs</span></div>

            <div className="steal-col steal-col--you">
              <div className="steal-colhead">
                <span className={'steal-badge steal-badge--' + (absent ? 'absent' : 'weak')}><span className="dot" />{stateLabel}</span>
                <span className="steal-who">Your page</span>
              </div>
              {absent
                ? <div className="steal-empty"><Icon name="search" size={20} /><span>No content on this topic yet — the citation is unclaimed.</span></div>
                : <blockquote className="steal-passage steal-passage--you">{s.yourPassage}</blockquote>}
              <p className="steal-why"><span className="js-tag">Why it lost</span>{s.whyYours}</p>
            </div>
          </div>

          {/* the moves */}
          <div className="lab-sect">
            <div className="lab-secthead"><span className="js-tag">What to copy</span><span className="js-tag">{s.moves.length} moves</span></div>
            <ol className="steal-moves">
              {s.moves.map((m, i) => (
                <li key={i} className="steal-move">
                  <span className="sm-num">{i + 1}</span>
                  <div className="sm-body">
                    <span className="sm-label">{m.label}</span>
                    <span className="sm-detail">{m.detail}</span>
                  </div>
                </li>
              ))}
            </ol>
          </div>
        </div>

        <div className="lab-foot">
          <div className="steal-foot-note">
            <span className="js-tag">Maps to fix</span>
            <span className="steal-fixname">{fix ? fix.label : 'Content fix'}</span>
            <span className="lf-deltabig">+{s.lift.toFixed(1)}</span>
          </div>
          <Btn kind="gold" icon="sparkles" onClick={() => onShip([s.fix])}>Add to fix pack</Btn>
        </div>
      </div>
    );
  }

  // wrapper — slide-in transition, mirrors ScoreLab so motion + a11y match
  function CitationSteal({ query, onClose, onShip }) {
    const open = query != null;
    const [active, setActive] = useState(false);
    const [mountQ, setMountQ] = useState(query);
    const elRef = useRef(null);

    useEffect(() => { if (query != null) setMountQ(query); }, [query]);
    useLayoutEffect(() => {
      const node = elRef.current;
      if (open) { if (node) void node.offsetWidth; setActive(true); }
      else setActive(false);
    }, [open]);

    const shipAndClose = ids => { onShip(ids); onClose(); };

    return (
      <>
        <div className={'lab-backdrop' + (active ? ' is-open' : '')} onClick={onClose} />
        <aside ref={elRef} className={'lab-drawer' + (active ? ' is-open' : '')} role="dialog" aria-label="Steal the citation" aria-hidden={!open}>
          {mountQ != null && <StealDrawer query={mountQ} onClose={onClose} onShip={shipAndClose} />}
        </aside>
      </>
    );
  }

  window.CitationSteal = CitationSteal;
  window.STEAL_HAS = q => !!(D.STEAL && D.STEAL[q]);
})();