/* Brand Lens — the calibration panel: AI's call (shown first) + your reaction.
   Your comment is the star; one Agree/Disagree tap tracks convergence. */
function ReactPanel({ ai, aiState, category, setCategory, agree, setAgree, comment, setComment, submit, submitting, pos, total, retry, skip }) {
  const last = pos + 1 >= total;
  return (
    <div style={{ background: 'var(--ps-white)', border: '1px solid var(--ps-line)', borderRadius: 16, boxShadow: 'var(--sh-1)', overflow: 'hidden' }}>

      {/* category control */}
      <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--ps-line)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap' }}>
          <span style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--fg-2)' }}>Judge it as</span>
          <CategoryControl value={category} onChange={setCategory} />
        </div>
      </div>

      {/* the AI's call, shown first */}
      {aiState === 'loading' || aiState === 'idle' ? (
        <div style={{ padding: '36px 22px', display: 'flex', alignItems: 'center', gap: 12, color: 'var(--fg-2)', fontSize: 14.5 }}>
          <Spinner size={18} /> Reading the image and forming a call…
        </div>
      ) : aiState === 'error' || !ai ? (
        <div style={{ padding: '22px' }}>
          <div style={{ fontSize: 14.5, color: 'var(--ps-flag-ink)', marginBottom: 4 }}>Couldn't analyze this image right now.</div>
          <div style={{ fontSize: 13, color: 'var(--fg-3)', marginBottom: 16 }}>A momentary hiccup — try again, or skip it and come back.</div>
          <div style={{ display: 'flex', gap: 10 }}>
            <Btn kind="primary" icon="refresh" onClick={retry} style={{ flex: 1, justifyContent: 'center' }}>Try again</Btn>
            <Btn kind="dark" onClick={skip} style={{ flex: '0 0 auto', justifyContent: 'center' }}>Skip</Btn>
          </div>
        </div>
      ) : (
        <>
          <div style={{ padding: '20px 22px', background: 'var(--ps-cloud-gray)', borderBottom: '1px solid var(--ps-line)',
            animation: 'lensreveal .3s var(--ease-out)' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, marginBottom: 14 }}>
              <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--ps-primary-blue)' }}>The AI's call</span>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <CategoryBadge category={ai.category} small />
                <VerdictPill verdict={ai.verdict} />
              </div>
            </div>
            <div style={{ display: 'flex', gap: 16, alignItems: 'center', marginBottom: 14 }}>
              <ScoreRing score={ai.score} size={78} />
              <div>
                <div style={{ fontSize: 15.5, fontWeight: 500, color: 'var(--ps-navy)', lineHeight: 1.3, marginBottom: 5 }}>{ai.headline}</div>
                <div style={{ fontSize: 13.5, color: 'var(--fg-2)', lineHeight: 1.55 }}>{ai.rationale}</div>
              </div>
            </div>
            {ai.reasons && ai.reasons.length > 0 && (
              <div style={{ background: 'var(--ps-white)', borderRadius: 10, padding: '4px 14px', border: '1px solid var(--ps-line)' }}>
                {ai.reasons.map((r, i) => <ReasonRow key={i} r={r} />)}
              </div>
            )}
            {ai.verdict === 'keep' && ai.suggestedUse && ai.suggestedUse.length > 0 && (
              <div style={{ marginTop: 12 }}>
                <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 7 }}>AI suggests using for</div>
                <UseChips uses={ai.suggestedUse} />
              </div>
            )}
            {ai.calibratedFrom > 0 && (
              <div style={{ marginTop: 12, fontSize: 11.5, color: 'var(--ps-aqua-700)', display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="sparkle" size={12} /> This call is calibrated from {ai.calibratedFrom} of your past reviews.
              </div>
            )}
          </div>

          {/* your reaction — comment-led */}
          <div style={{ padding: 22 }}>
            <div style={{ fontSize: 19, fontWeight: 500, color: 'var(--ps-navy)', marginBottom: 4 }}>Did the AI get it right?</div>
            <div style={{ fontSize: 13, color: 'var(--fg-3)', marginBottom: 14 }}>One tap, then tell it why — the “why” is what trains the judge.</div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 18 }}>
              <ReactBtn active={agree === true} onClick={() => setAgree(true)} kind="agree" />
              <ReactBtn active={agree === false} onClick={() => setAgree(false)} kind="disagree" />
            </div>

            <label style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--fg-1)', display: 'block', marginBottom: 7 }}>
              Why? <span style={{ color: 'var(--ps-flag-ink)', fontWeight: 600 }}>— the most important part</span>
            </label>
            <textarea value={comment} onChange={(e) => setComment(e.target.value)} rows={5} autoFocus
              placeholder={agree === false
                ? "e.g. You scored this too low — the dark side is the headline safe-area, not underexposure. Keep it."
                : "e.g. Right call. Natural light, a real person mid-task, server racks as backdrop — exactly us."}
              style={{ width: '100%', resize: 'vertical', fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.55,
                padding: '12px 14px', borderRadius: 10, border: '1px solid var(--ps-line)', color: 'var(--fg-1)',
                background: 'var(--ps-cloud-gray)', boxSizing: 'border-box' }} />

            <Btn kind="primary" disabled={agree === null || submitting} onClick={submit}
              style={{ width: '100%', justifyContent: 'center', marginTop: 16, padding: '13px',
                opacity: agree === null || submitting ? .5 : 1, cursor: agree === null ? 'not-allowed' : 'pointer' }}>
              {submitting ? <><Spinner size={15} color="#fff" /> Saving…</> : <>{last ? 'Save & finish round' : 'Save & next image'} <Icon name="arrow" size={16} /></>}
            </Btn>
          </div>
        </>
      )}
    </div>
  );
}

function ReactBtn({ active, onClick, kind }) {
  const agree = kind === 'agree';
  const col = agree ? 'var(--st-success)' : 'var(--ps-flag)';
  const soft = agree ? '#EAF6F0' : 'var(--ps-flag-soft)';
  return (
    <button onClick={onClick} style={{
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9, cursor: 'pointer',
      padding: '14px 12px', borderRadius: 12, fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 15,
      border: `1.5px solid ${active ? col : 'var(--ps-line)'}`,
      background: active ? soft : 'var(--ps-white)', color: active ? col : 'var(--fg-2)',
      transition: 'all .14s var(--ease-standard)' }}>
      <Icon name={agree ? 'check' : 'x'} size={19} stroke={2.4} />
      {agree ? 'Agree' : 'Disagree'}
    </button>
  );
}

window.ReactPanel = ReactPanel;