/* Record of Resistance: interactive demo
 * AI gives a suggestion. User rejects/revises/accepts.
 * Each rejection/revision is logged into a JSON-styled record.
 */
const { useState: useStateR } = React;

const SUGGESTIONS = [
  {
    id: 's1',
    context: 'Color palette',
    body: 'I suggest a muted pastel palette: dusty rose, sage, and soft cream. It will feel calm and approachable.',
  },
  {
    id: 's2',
    context: 'Hero copy',
    body: 'Hero headline: "Your creative journey, supercharged with AI." Friendly, broad appeal.',
  },
  {
    id: 's3',
    context: 'Project page structure',
    body: 'Use a standard case-study template: Problem → Process → Solution → Results. Familiar pattern, easy to scan.',
  },
];

function RecordOfResistance() {
  const [active, setActive] = useStateR(0);
  const [records, setRecords] = useStateR([]);
  const [draftReason, setDraftReason] = useStateR('');
  const [mode, setMode] = useStateR(null); // 'reject' | 'revise' | null

  const sug = SUGGESTIONS[active];

  function startMode(m) { setMode(m); setDraftReason(''); }
  function commit() {
    if (!mode || !draftReason.trim()) return;
    const rec = {
      id: 'ror-' + String(records.length + 1).padStart(3, '0'),
      ts: new Date().toLocaleString('en-US', { hour: '2-digit', minute: '2-digit' }),
      context: sug.context,
      ai_suggested: sug.body,
      action: mode === 'reject' ? 'rejected' : 'revised',
      reason: draftReason.trim(),
    };
    setRecords([rec, ...records]);
    setMode(null); setDraftReason('');
    setActive((active + 1) % SUGGESTIONS.length);
  }
  function accept() {
    setActive((active + 1) % SUGGESTIONS.length);
    setMode(null); setDraftReason('');
  }
  function reset() { setRecords([]); setActive(0); setMode(null); setDraftReason(''); }

  return (
    <div className="demo">
      <div className="demo__bar">
        <div className="demo__title"><span className="mark">R</span>Record of Resistance · capture editorial decisions</div>
        <span className="pill"><Icon.flag style={{width: 11, height: 11}}/> {records.length} captured</span>
      </div>
      <div className="demo__body">
        <div className="ror-grid">
          <div className="stack">
            <div className="ror-suggestion">
              <div className="ror-suggestion__head">
                <span className="pill pill--agent"><span className="dot"/>AI suggestion</span>
                <span className="muted mono" style={{fontSize: 11}}>{sug.context}</span>
              </div>
              <div className="ror-suggestion__body">{sug.body}</div>
              {!mode && (
                <div className="ror-suggestion__actions">
                  <button className="btn btn--outline" onClick={() => startMode('reject')}><Icon.reject style={{width: 13, height: 13}}/> Reject</button>
                  <button className="btn btn--outline" onClick={() => startMode('revise')}><Icon.edit style={{width: 13, height: 13}}/> Revise</button>
                  <button className="btn btn--ghost" onClick={accept}><Icon.check style={{width: 13, height: 13}}/> Accept</button>
                </div>
              )}
              {mode && (
                <div style={{marginTop: 14, display: 'grid', gap: 10}}>
                  <div className="pb-step__head" style={{marginBottom: 0}}>
                    <span className="num num--done">{records.length + 1}</span>
                    Why are you {mode === 'reject' ? 'rejecting' : 'revising'} this?
                  </div>
                  <textarea
                    className="pb-input"
                    placeholder={mode === 'reject'
                      ? "Those colors are too safe. My brand is high-contrast and saturated."
                      : "Same structure, but lead with Process. It's where my judgment shows."}
                    value={draftReason}
                    onChange={e => setDraftReason(e.target.value)} />
                  <div className="row">
                    <button className="btn" disabled={!draftReason.trim()} onClick={commit} style={!draftReason.trim() ? {opacity: 0.4, cursor: 'not-allowed'} : {}}>
                      Save record <Icon.arrow style={{width: 13, height: 13}}/>
                    </button>
                    <button className="btn btn--ghost" onClick={() => { setMode(null); setDraftReason(''); }}>Cancel</button>
                  </div>
                </div>
              )}
            </div>
            <div className="row" style={{justifyContent: 'space-between'}}>
              <span className="muted" style={{fontSize: 12}}>Suggestion {active + 1} of {SUGGESTIONS.length} · cycles after each decision</span>
              <button className="btn btn--ghost" onClick={reset}>Reset log</button>
            </div>
          </div>
          <div className="ror-log">
            <div className="ror-log__head">
              <Icon.flag style={{width: 13, height: 13}}/> records-of-resistance.jsonl
              <span className="ror-log__count">{records.length} entries</span>
            </div>
            {records.length === 0 ? (
              <div style={{color: 'color-mix(in oklch, white, transparent 55%)', fontFamily: 'var(--font-sans)', fontSize: 13, padding: '16px 0'}}>
                <span className="c">// reject or revise a suggestion to capture your first record</span>
              </div>
            ) : records.map((r, i) => (
              <div key={r.id} style={{paddingBottom: 10, marginBottom: 10, borderBottom: i < records.length - 1 ? '1px solid color-mix(in oklch, white, transparent 90%)' : 'none'}}>
                <div><span className="c">// {r.ts}</span></div>
                <div>{`{`}</div>
                <div style={{paddingLeft: 14}}><span className="key">id</span>: <span className="str">"{r.id}"</span>,</div>
                <div style={{paddingLeft: 14}}><span className="key">context</span>: <span className="str">"{r.context}"</span>,</div>
                <div style={{paddingLeft: 14}}><span className="key">action</span>: <span className="str">"{r.action}"</span>,</div>
                <div style={{paddingLeft: 14}}><span className="key">ai_suggested</span>: <span className="str">"{r.ai_suggested.length > 60 ? r.ai_suggested.slice(0, 60) + '…' : r.ai_suggested}"</span>,</div>
                <div style={{paddingLeft: 14}}><span className="key">reason</span>: <span className="str">"{r.reason}"</span></div>
                <div>{`}`}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

window.RecordOfResistance = RecordOfResistance;