/* A.8 Case Readiness Checklist. Replaces v1's "Judge Optimization Layer" / case-strength score.
   Measures information-completeness only: what you have, what's missing.
   NOT case merit. NOT predictive. (Utah-only predictive scoring is shown as opt-in expansion.) */

const READINESS_BUCKETS = [
  {
    id: 'theory',
    label: 'Legal theory',
    detail: 'You\'ve selected at least one cause of action and reviewed its elements.',
    items: [
      { label: 'Cause of action selected', complete: true, note: 'Breach of contract' },
      { label: 'Element framework reviewed', complete: true },
      { label: 'Alternative theories considered', complete: true, note: 'Unjust enrichment as backup' },
    ],
  },
  {
    id: 'evidence',
    label: 'Evidence for each element',
    detail: 'Each element of your selected cause has at least one evidence item you\'ve associated with it.',
    items: [
      { label: 'Valid contract existed', complete: true, note: 'Signed agreement, deposit receipt' },
      { label: 'You performed your obligations', complete: true, note: 'Bank records, text confirmations' },
      { label: 'Other party breached', complete: true, note: 'Photos, message logs, second-bid quote' },
      { label: 'You suffered measurable damages', complete: false, note: 'Add receipts for repairs you paid' },
    ],
  },
  {
    id: 'procedural',
    label: 'Procedural completeness',
    detail: 'Court forms, fees, parties, and service of process steps are accounted for.',
    items: [
      { label: 'Filing court identified', complete: true, note: 'Brooklyn Civil Court' },
      { label: 'Filing fee or fee waiver ready', complete: true, note: '$20 small claims fee' },
      { label: 'All parties identified with addresses', complete: true },
      { label: 'Service of process method chosen', complete: false, note: 'Decide: certified mail vs. process server' },
    ],
  },
  {
    id: 'documents',
    label: 'Documents',
    detail: 'Generated documents are reviewed and ready for export.',
    items: [
      { label: 'Statement of Claim drafted', complete: true },
      { label: 'Exhibit Index complete', complete: true, note: '14 exhibits' },
      { label: 'Damages calculation', complete: true, note: '$8,420 total' },
      { label: 'You have read and affirmed each document', complete: false },
    ],
  },
  {
    id: 'tone',
    label: 'Areas to think about',
    detail: 'Soft prompts only. Never auto-rewritten.',
    items: [
      { label: 'Statement of Claim has 2 emotional phrases flagged for review', complete: false, note: '"…ripped me off" · "…disgusting behavior"', soft: true },
      { label: 'Damages narrative is clear and itemized', complete: true, soft: true },
    ],
  },
];

const ReadinessChecklist = ({ jx, predictiveOptIn, onTogglePredictive, onConsult }) => {
  const isUtah = jx === 'utah';
  const total = READINESS_BUCKETS.reduce((s, b) => s + b.items.length, 0);
  const done = READINESS_BUCKETS.reduce((s, b) => s + b.items.filter(i => i.complete).length, 0);
  const pct = Math.round((done / total) * 100);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      {/* Header card */}
      <div style={{
        padding: '20px 22px', borderRadius: 16,
        background: THEME.surface, border: `1px solid ${THEME.line}`,
      }}>
        <div style={{ fontSize: 11, color: THEME.textMute, letterSpacing: 1.4, textTransform: 'uppercase', fontWeight: 600, marginBottom: 6 }}>
          A.8 · Are you ready to file?
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 16, marginBottom: 14 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'Fraunces', fontSize: 28, color: THEME.text, fontWeight: 500, letterSpacing: -0.5, lineHeight: 1.1 }}>
              You've completed {done} of {total} readiness items.
            </div>
            <div style={{ fontSize: 13, color: THEME.textDim, marginTop: 6, lineHeight: 1.5, maxWidth: 600 }}>
              This is an information-completeness check. It measures whether you've provided what's typically needed.
              <span style={{ color: THEME.warning, fontWeight: 500 }}> It is not a prediction of whether you will win.</span>
            </div>
          </div>
          <div style={{
            fontFamily: 'Fraunces', fontSize: 56, color: THEME.text, fontWeight: 500, letterSpacing: -1.5, lineHeight: 1,
          }}>{pct}%</div>
        </div>
        {/* Bar */}
        <div style={{
          height: 8, borderRadius: 4, background: THEME.mode === 'dark' ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.05)',
          overflow: 'hidden',
        }}>
          <div style={{
            height: '100%', width: pct + '%', borderRadius: 4,
            background: `linear-gradient(90deg, ${THEME.success}, ${THEME.blue})`,
          }}/>
        </div>
      </div>

      {/* Utah opt-in: predictive scoring */}
      {isUtah && (
        <div style={{
          padding: '14px 16px', borderRadius: 12,
          background: predictiveOptIn ? 'rgba(91,167,115,0.10)' : THEME.surface,
          border: `1.5px ${predictiveOptIn ? 'solid' : 'dashed'} ${predictiveOptIn ? 'rgba(91,167,115,0.4)' : THEME.line}`,
          display: 'flex', alignItems: 'flex-start', gap: 14,
        }}>
          <div style={{
            width: 38, height: 38, borderRadius: 19, flexShrink: 0,
            background: 'rgba(91,167,115,0.18)', border: `1px solid rgba(91,167,115,0.3)`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon d={Icons.sparkle} size={17} stroke={THEME.success} fill={THEME.success}/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
              <div style={{ fontSize: 13.5, color: THEME.text, fontWeight: 600 }}>Predictive case strength (Utah-only beta)</div>
              <div style={{
                fontSize: 9.5, padding: '2px 6px', borderRadius: 4,
                background: 'rgba(91,167,115,0.20)', color: THEME.success,
                fontWeight: 700, letterSpacing: 0.6,
              }}>SANDBOX</div>
            </div>
            <div style={{ fontSize: 12, color: THEME.textDim, lineHeight: 1.5, marginBottom: 8 }}>
              Authorized under Utah sandbox terms with consumer-protection conditions: methodology disclosure, accuracy reporting,
              and Innovation Office authority to suspend if accuracy falls below benchmarks.{' '}
              <span style={{ color: THEME.success, textDecoration: 'underline', cursor: 'pointer' }}>View methodology →</span>
            </div>
            <div onClick={onTogglePredictive} style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '6px 12px', borderRadius: 7, cursor: 'pointer', fontSize: 12, fontWeight: 600,
              background: predictiveOptIn ? THEME.success : 'transparent',
              color: predictiveOptIn ? '#fff' : THEME.success,
              border: `1px solid ${THEME.success}`,
            }}>
              <div style={{
                width: 14, height: 14, borderRadius: 4, border: `1.2px solid ${predictiveOptIn ? '#fff' : THEME.success}`,
                background: predictiveOptIn ? '#fff' : 'transparent',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                {predictiveOptIn && <Icon d={Icons.check} size={9} stroke={THEME.success} sw={3}/>}
              </div>
              {predictiveOptIn ? 'Opted in · 78/100 likely to prevail' : 'I want to opt in to predictive scoring'}
            </div>
          </div>
        </div>
      )}

      {/* Buckets */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {READINESS_BUCKETS.map(bucket => {
          const completeCount = bucket.items.filter(i => i.complete).length;
          const allComplete = completeCount === bucket.items.length;
          return (
            <div key={bucket.id} style={{
              padding: '14px 16px', borderRadius: 12,
              background: THEME.surface, border: `1px solid ${THEME.line}`,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
                <div style={{
                  width: 22, height: 22, borderRadius: 11,
                  background: allComplete ? 'rgba(91,167,115,0.18)' : THEME.mode === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.04)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  {allComplete
                    ? <Icon d={Icons.check} size={11} stroke={THEME.success} sw={3}/>
                    : <span style={{ fontSize: 10, color: THEME.textMute, fontWeight: 700 }}>{completeCount}/{bucket.items.length}</span>}
                </div>
                <div style={{ fontFamily: 'Fraunces', fontSize: 16, color: THEME.text, fontWeight: 500, letterSpacing: -0.2 }}>
                  {bucket.label}
                </div>
              </div>
              <div style={{ fontSize: 11.5, color: THEME.textMute, marginLeft: 32, marginBottom: 10, lineHeight: 1.45 }}>
                {bucket.detail}
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 3, marginLeft: 32 }}>
                {bucket.items.map((item, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 9, padding: '5px 0', fontSize: 12.5, color: THEME.text }}>
                    <div style={{
                      width: 14, height: 14, borderRadius: 4, flexShrink: 0, marginTop: 2,
                      background: item.complete ? 'rgba(91,167,115,0.20)' : item.soft ? 'rgba(242,197,61,0.14)' : THEME.mode === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.04)',
                      border: `1px solid ${item.complete ? 'rgba(91,167,115,0.4)' : item.soft ? 'rgba(242,197,61,0.35)' : THEME.lineSoft}`,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                    }}>
                      {item.complete && <Icon d={Icons.check} size={9} stroke={THEME.success} sw={3}/>}
                      {!item.complete && item.soft && <span style={{ fontSize: 10, color: THEME.warning, fontWeight: 700 }}>!</span>}
                    </div>
                    <div style={{ flex: 1, color: item.complete ? THEME.text : THEME.textDim }}>
                      {item.label}
                      {item.note && (
                        <span style={{ color: THEME.textMute, fontSize: 11.5, marginLeft: 6 }}>· {item.note}</span>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          );
        })}
      </div>

      {/* Attorney review prompt */}
      <div onClick={onConsult} style={{
        padding: '16px 18px', borderRadius: 12, cursor: 'pointer',
        background: `linear-gradient(135deg, ${THEME.blueSoft}, transparent)`,
        border: `1px solid ${THEME.blue}40`,
        display: 'flex', alignItems: 'center', gap: 14,
      }}>
        <Icon d={Icons.shield} size={18} stroke={THEME.blue}/>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, color: THEME.text, fontWeight: 600 }}>Have an attorney review your packet before you file</div>
          <div style={{ fontSize: 12, color: THEME.textDim, marginTop: 2 }}>
            Flat fee, 24-hour turnaround. Reviewing attorney provides written feedback. You decide what to incorporate.
          </div>
        </div>
        <div style={{
          padding: '7px 14px', borderRadius: 7,
          background: THEME.blue, color: '#fff', fontSize: 12, fontWeight: 600,
        }}>From $99</div>
      </div>
    </div>
  );
};

window.READINESS_BUCKETS = READINESS_BUCKETS;
window.ReadinessChecklist = ReadinessChecklist;