// Extraction card - product mockup, new visual language
// ────────────────────────────────────────────────────────────────

const EXTRACT_POINTS = [
  { label: 'Causation', value: 'Industrial - work-related', conf: 'high', page: 'p. 142' },
  { label: 'Whole-person impairment', value: '14% (AMA Guides 5th)', conf: 'high', page: 'p. 148' },
  { label: 'Work restrictions', value: 'No lifting >15 lbs · 6 weeks', conf: 'high', page: 'p. 151' },
  { label: 'Treatment plan', value: 'Physical therapy 3×/wk · 8 wks', conf: 'high', page: 'p. 153' },
  { label: 'Authorization requested', value: 'MRI - lumbar spine', conf: 'review', page: 'p. 154' },
  { label: 'Diagnosis', value: 'L5–S1 disc herniation (M51.26)', conf: 'high', page: 'p. 144' },
  { label: 'Return-to-work date', value: '2026-07-14 (modified duty)', conf: 'high', page: 'p. 151' },
];

function ExtractionCard({ size = 'md', animated = true, showHeader = true }) {
  const { isMobile } = useViewport();
  const scale = size === 'sm' ? 0.88 : size === 'lg' ? 1.04 : 1;

  const [highlightedIdx, setHighlightedIdx] = React.useState(0);
  React.useEffect(() => {
    if (!animated) return;
    const t = setInterval(() => {
      setHighlightedIdx((i) => (i + 1) % EXTRACT_POINTS.length);
    }, 1800);
    return () => clearInterval(t);
  }, [animated]);

  return (
    <div style={{
      background: BASEN.paperRaised,
      border: `1px solid ${BASEN.rule}`,
      borderRadius: 6,
      overflow: 'hidden',
      boxShadow: '0 1px 0 rgba(15,18,22,0.02), 0 20px 48px -24px rgba(15,18,22,0.22)',
      fontSize: 12 * scale,
    }}>
      {/* Window chrome */}
      {showHeader && (
        <div style={{
          padding: '11px 16px',
          borderBottom: `1px solid ${BASEN.ruleSoft}`,
          background: BASEN.paper,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
            <BasenLogo size={13} />
          </div>
          <div style={{ width: 1, height: 12, background: BASEN.rule }}></div>
          <div style={{
            flex: 1, fontFamily: FONTS.mono, fontSize: 10.5 * scale,
            color: BASEN.muted, letterSpacing: 0.4,
            overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
          }}>
            {isMobile ? 'WC-2026-04812 · Velasquez' : 'claim WC-2026-04812 · Velasquez, Maria · QME report'}
          </div>
          <div style={{
            fontFamily: FONTS.mono, fontSize: 10 * scale, color: BASEN.positive,
            letterSpacing: 0.6, textTransform: 'uppercase', display: 'flex', alignItems: 'center', gap: 6,
          }}>
            <span style={{ width: 7, height: 7, background: BASEN.positive, display: 'inline-block' }}></span>
            Live
          </div>
        </div>
      )}

      {/* Two-column body */}
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '0.95fr 1.05fr', minHeight: isMobile ? 0 : 340 * scale }}>
        {/* PDF preview */}
        <div style={{
          padding: 18 * scale,
          background: BASEN.paperDeep,
          borderRight: isMobile ? 'none' : `1px solid ${BASEN.rule}`,
          borderBottom: isMobile ? `1px solid ${BASEN.rule}` : 'none',
          display: 'flex', flexDirection: 'column', gap: 8 * scale,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
            <div style={{
              fontFamily: FONTS.mono, fontSize: 10 * scale, color: BASEN.muted,
              letterSpacing: 0.9, textTransform: 'uppercase',
            }}>
              Source · Dr. R. Chen, MD
            </div>
            <div style={{ fontFamily: FONTS.mono, fontSize: 10 * scale, color: BASEN.muted }}>p. 148 / 187</div>
          </div>

          <div style={{
            background: BASEN.paperRaised, border: `1px solid ${BASEN.rule}`, borderRadius: 4,
            padding: 16 * scale, flex: 1, display: 'flex', flexDirection: 'column', gap: 8 * scale,
            fontFamily: FONTS.sans, fontSize: 10 * scale, color: BASEN.ink, lineHeight: 1.55,
            letterSpacing: -0.05,
          }}>
            <div style={{
              fontWeight: 600, fontSize: 11 * scale, marginBottom: 4,
              letterSpacing: 0.2, textTransform: 'uppercase',
            }}>
              VI. Impairment Rating
            </div>
            <div style={{ color: '#3a3d44' }}>
              Pursuant to the AMA Guides to the Evaluation of Permanent Impairment, Fifth Edition,
              the examinee's whole-person impairment is calculated based on the DRE Lumbar
              Category III findings, including:
            </div>
            <div style={{ color: '#3a3d44', paddingLeft: 10 }}>
              · Documented disc herniation at L5–S1 with radiculopathy
              <br />· Loss of reflexes in the right lower extremity
              <br />· Positive straight-leg raise at 35 degrees
            </div>
            <div style={{ color: '#3a3d44' }}>
              Based on these findings, the examinee qualifies for a whole-person impairment rating of <mark style={{
                background: BASEN.accent, color: '#fff', padding: '1px 5px', borderRadius: 2,
                fontWeight: 500,
              }}>fourteen percent (14%)</mark>, with apportionment of approximately 10% to the industrial injury of
              March 14, 2025, and 4% to pre-existing degenerative changes per the prior imaging studies.
            </div>
            <div style={{ flex: 1 }}></div>
            <div style={{
              fontFamily: FONTS.mono, fontSize: 8.5 * scale, color: BASEN.muted, paddingTop: 8,
              borderTop: `1px dashed ${BASEN.ruleSoft}`, letterSpacing: 0.4,
            }}>
              ↓ p. 151 - work restrictions · modified duty · RTW
            </div>
          </div>
        </div>

        {/* Extracted data points */}
        <div style={{
          padding: 18 * scale, background: BASEN.paperRaised,
          display: 'flex', flexDirection: 'column',
        }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 * scale,
          }}>
            <div style={{
              fontFamily: FONTS.mono, fontSize: 10 * scale, color: BASEN.muted,
              letterSpacing: 0.9, textTransform: 'uppercase',
            }}>
              Extracted · 7 of 10 fields
            </div>
            <div style={{
              fontFamily: FONTS.mono, fontSize: 9.5 * scale, color: BASEN.accent, letterSpacing: 0.6,
              background: BASEN.accentBg, padding: '3px 8px', borderRadius: 2,
              textTransform: 'uppercase', fontWeight: 500,
            }}>
              Ready for review
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
            {EXTRACT_POINTS.map((p, i) => {
              const active = animated && i === highlightedIdx;
              return (
                <div key={p.label} style={{
                  display: 'grid', gridTemplateColumns: '1fr auto',
                  padding: `${8 * scale}px ${active ? 10 * scale : 0}px`,
                  borderBottom: i < EXTRACT_POINTS.length - 1 ? `1px solid ${BASEN.ruleSoft}` : 'none',
                  transition: 'background 200ms ease, padding 200ms ease',
                  background: active ? BASEN.accentBg : 'transparent',
                  marginLeft: active ? -10 : 0, marginRight: active ? -10 : 0,
                  borderRadius: active ? 3 : 0,
                  borderLeft: active ? `3px solid ${BASEN.accent}` : '3px solid transparent',
                  paddingLeft: active ? 12 * scale : 0,
                }}>
                  <div>
                    <div style={{
                      fontFamily: FONTS.mono, fontSize: 9.5 * scale,
                      color: active ? BASEN.accent : BASEN.muted,
                      letterSpacing: 0.7, textTransform: 'uppercase', marginBottom: 3, fontWeight: 500,
                    }}>{p.label}</div>
                    <div style={{
                      fontFamily: FONTS.sans, fontSize: 13 * scale, color: BASEN.ink, fontWeight: 500,
                      letterSpacing: -0.1,
                    }}>
                      {p.value}
                    </div>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    {p.conf === 'review' ? (
                      <span style={{
                        fontFamily: FONTS.mono, fontSize: 9 * scale, color: BASEN.signal,
                        background: BASEN.signalBg, padding: '2px 7px', borderRadius: 2, letterSpacing: 0.5,
                        textTransform: 'uppercase', fontWeight: 500,
                      }}>Review</span>
                    ) : (
                      <span style={{
                        fontFamily: FONTS.mono, fontSize: 9.5 * scale, color: BASEN.muted, letterSpacing: 0.4,
                      }}>{p.page}</span>
                    )}
                  </div>
                </div>
              );
            })}
          </div>

          {/* Action bar */}
          <div style={{
            marginTop: 14 * scale, paddingTop: 14 * scale, borderTop: `1px solid ${BASEN.ruleSoft}`,
            display: 'flex', gap: 8, alignItems: 'center', justifyContent: 'space-between',
          }}>
            <div style={{
              fontFamily: FONTS.mono, fontSize: 10.5 * scale, color: BASEN.muted,
              letterSpacing: 0.4,
            }}>
              <span style={{ color: BASEN.ink, fontWeight: 500 }}>3m</span> · 187pp
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              <button style={{
                fontFamily: FONTS.sans, fontSize: 11 * scale, fontWeight: 500,
                padding: `${6 * scale}px ${11 * scale}px`, borderRadius: 3,
                border: `1px solid ${BASEN.rule}`, background: 'transparent', color: BASEN.ink, cursor: 'pointer',
                letterSpacing: -0.1,
              }}>Open report</button>
              <button style={{
                fontFamily: FONTS.sans, fontSize: 11 * scale, fontWeight: 500,
                padding: `${6 * scale}px ${11 * scale}px`, borderRadius: 3,
                border: 'none', background: BASEN.accent, color: BASEN.accentInk, cursor: 'pointer',
                letterSpacing: -0.1,
              }}>Accept claim →</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

const TEN_POINTS_LIST = [
  'Causation',
  'Whole-person impairment',
  'Work restrictions',
  'Treatment plan',
  'Authorization requests',
  'Diagnosis',
  'Prognosis',
  'Return-to-work date',
  'Billed codes & amounts',
  'Provider & dates of service',
];

Object.assign(window, { ExtractionCard, EXTRACT_POINTS, TEN_POINTS_LIST });