// src/features/instructor/ui/instructor-verify-review.jsx
//
// Final review screen + post-submit end-states for the instructor
// verification flow. Split off from instructor-verify-steps.jsx so
// both halves stay under the 400 LOC budget.
//
// Public on window: IVReviewStep, ReviewBlock, IVEndState.
//
// Reads helpers + style consts from window (published by
// instructor-verify.jsx).

const {
  IVError, IVFooterButtons,
  IV_NAVY, IV_GOLD, IV_BORDER, IV_MUTED, IV_INK,
} = window;

const IVReviewStep = ({ iv, requestedFields, onSubmit, onBack, onEdit, busy, error }) => {
  const [confirmed, setConfirmed] = React.useState(false);
  const fmtDate = (d) => d ? new Date(d).toLocaleDateString(undefined, { month:'short', day:'numeric', year:'numeric' }) : '—';
  return (
    <div>
      <h2 style={{ fontFamily:"'Cormorant Garamond', serif", fontSize:26, fontWeight:600, color:IV_INK, marginBottom:6 }}>
        Review and submit
      </h2>
      <p style={{ fontSize:14, color:'oklch(45% 0.03 265)', lineHeight:1.6, marginBottom:22, maxWidth:520 }}>
        Take a moment to confirm everything looks right.
      </p>

      {requestedFields.includes('identity') && (
        <ReviewBlock title="Identity" onEdit={() => onEdit('identity')}>
          <div>{[iv.legal_first_name, iv.legal_middle_name, iv.legal_last_name].filter(Boolean).join(' ') || '—'}</div>
          <div style={{ color:IV_MUTED }}>SSN ending in ••• {iv.ssn_last_four || '????'}</div>
        </ReviewBlock>
      )}
      {requestedFields.includes('gov_id') && (
        <ReviewBlock title="Government ID" onEdit={() => onEdit('gov_id')}>
          <div>✓ {iv.gov_id_type === 'drivers_license' ? "Driver's license" : iv.gov_id_type === 'state_id' ? 'State ID' : 'US passport'} uploaded</div>
          <div style={{ color:IV_MUTED, fontSize:12 }}>Uploaded {fmtDate(iv.gov_id_completed_at)}</div>
        </ReviewBlock>
      )}
      {requestedFields.includes('address') && (
        <ReviewBlock title="Mailing address" onEdit={() => onEdit('address')}>
          <div>{iv.address_line1}{iv.address_line2 ? ', ' + iv.address_line2 : ''}</div>
          <div>{iv.address_city}, {iv.address_state} {iv.address_zip}</div>
        </ReviewBlock>
      )}
      {requestedFields.includes('bank') && (
        <ReviewBlock title="Bank account" onEdit={() => onEdit('bank')}>
          <div>{iv.bank_account_holder_name}</div>
          <div style={{ color:IV_MUTED }}>{iv.bank_account_type === 'checking' ? 'Checking' : 'Savings'} ending in ••• {iv.bank_account_last_four || '????'}</div>
        </ReviewBlock>
      )}

      <label style={{ display:'flex', alignItems:'flex-start', gap:10, padding:'14px', background:'#fff', border:`1px solid ${IV_BORDER}`, borderRadius:10, cursor:'pointer', marginTop:6 }}>
        <input type="checkbox" checked={confirmed} onChange={e => setConfirmed(e.target.checked)} style={{ marginTop:3, width:18, height:18, cursor:'pointer' }} />
        <span style={{ fontSize:13, color:IV_INK, lineHeight:1.55 }}>
          I confirm the information above is accurate. I understand Coaching will use it to verify my identity, file my IRS 1099-NEC, and process my payouts.
        </span>
      </label>

      <IVError>{error}</IVError>
      <IVFooterButtons onBack={onBack} onContinue={onSubmit} busy={busy} disableContinue={!confirmed}
        continueLabel="Submit verification →" />
    </div>
  );
};

const ReviewBlock = ({ title, children, onEdit }) => (
  <div style={{ background:'#fff', border:`1px solid ${IV_BORDER}`, borderRadius:10, padding:'14px 16px', marginBottom:12 }}>
    <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:6 }}>
      <span style={{ fontSize:11, fontWeight:700, letterSpacing:'0.08em', color:IV_MUTED, textTransform:'uppercase' }}>{title}</span>
      <button type="button" onClick={onEdit} style={{ background:'none', border:'none', color:IV_NAVY, fontSize:12, fontWeight:700, cursor:'pointer', fontFamily:"'Plus Jakarta Sans', sans-serif" }}>
        Edit
      </button>
    </div>
    <div style={{ fontSize:14, color:IV_INK, lineHeight:1.6 }}>{children}</div>
  </div>
);

// ── Submitted / Approved / Rejected end-states ──────────────────────────────

const IVEndState = ({ icon, title, subtitle, body, ctaLabel, onCta }) => (
  <div style={{ maxWidth:520, margin:'0 auto', textAlign:'center', padding:'40px 20px' }}>
    <div style={{ fontSize:54, marginBottom:14 }}>{icon}</div>
    <h1 style={{ fontFamily:"'Cormorant Garamond', serif", fontSize:30, fontWeight:600, color:IV_INK, marginBottom:10 }}>
      {title}
    </h1>
    {subtitle && <p style={{ fontSize:15, color:'oklch(40% 0.04 265)', lineHeight:1.65, marginBottom:18 }}>{subtitle}</p>}
    {body}
    {ctaLabel && (
      <button type="button" onClick={onCta}
        style={{ marginTop:22, background:IV_NAVY, color:'#fff', border:'none', borderRadius:10, padding:'13px 26px', fontWeight:700, fontSize:14, cursor:'pointer', fontFamily:"'Plus Jakarta Sans', sans-serif" }}>
        {ctaLabel}
      </button>
    )}
  </div>
);

Object.assign(window, { IVReviewStep, ReviewBlock, IVEndState });