// src/features/instructor/ui/instructor-verify-helpers.jsx
//
// Style consts + small reusable components for the instructor
// verification flow. Loaded BEFORE instructor-verify.jsx (which
// renders the main page) and instructor-verify-steps.jsx (which
// renders the per-section forms). Split off so both consumers stay
// under the 400 LOC budget.
//
// Publishes to window:
//   IV_FIELD_META, IV_NAVY, IV_GOLD, IV_PAPER, IV_BORDER, IV_MUTED,
//   IV_INK, IV_INPUT_STYLE,
//   formatSSN, ssnDigits,
//   IVLabel, IVHelper, IVError, IVDetails, IVTrustStrip,
//   IVFooterButtons, IVStepRail.

const IV_FIELD_META = {
  identity: { key:'identity', label:'Identity',         icon:'🧾' },
  gov_id:   { key:'gov_id',   label:'Government ID',    icon:'🪪' },
  address:  { key:'address',  label:'Mailing address',  icon:'✉️' },
  bank:     { key:'bank',     label:'Bank for payouts', icon:'🏦' },
};

const IV_NAVY  = 'oklch(22% 0.06 265)';
const IV_GOLD  = 'oklch(72% 0.17 80)';
const IV_PAPER = 'oklch(98% 0.008 60)';
const IV_BORDER = 'oklch(88% 0.02 265)';
const IV_MUTED = 'oklch(58% 0.03 265)';
const IV_INK   = 'oklch(18% 0.03 265)';

const IV_INPUT_STYLE = {
  width:'100%', padding:'12px 14px',
  border:`1.5px solid ${IV_BORDER}`, borderRadius:10,
  fontSize:16, fontFamily:"'Plus Jakarta Sans', sans-serif",
  outline:'none', background:'#fff', minHeight:48,
  color:IV_INK,
};

// ── SSN formatter — 123-45-6789 as user types.
const formatSSN = (raw) => {
  const d = String(raw || '').replace(/\D/g, '').slice(0, 9);
  if (d.length <= 3) return d;
  if (d.length <= 5) return d.slice(0,3) + '-' + d.slice(3);
  return d.slice(0,3) + '-' + d.slice(3,5) + '-' + d.slice(5);
};
const ssnDigits = (raw) => String(raw || '').replace(/\D/g, '');

// ── Tiny reusable bits ──────────────────────────────────────────────────────
const IVLabel = ({ children, hint }) => (
  <label style={{ display:'block', fontSize:13, fontWeight:600, color:'oklch(38% 0.04 265)', marginBottom:6 }}>
    {children}
    {hint && <span style={{ fontWeight:400, color:IV_MUTED, marginLeft:6 }}>· {hint}</span>}
  </label>
);

const IVHelper = ({ children }) => (
  <div style={{ fontSize:12, color:IV_MUTED, marginTop:6, lineHeight:1.5 }}>{children}</div>
);

const IVError = ({ children }) => children ? (
  <div style={{ background:'oklch(96% 0.04 25)', color:'oklch(40% 0.15 25)', padding:'10px 14px', borderRadius:8, fontSize:13, marginTop:12, border:'1px solid oklch(88% 0.06 25)' }}>{children}</div>
) : null;

const IVDetails = ({ summary, children }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ marginTop:14, border:`1px solid ${IV_BORDER}`, borderRadius:10, background:'#fff' }}>
      <button type="button" onClick={() => setOpen(o => !o)}
        style={{ width:'100%', textAlign:'left', background:'none', border:'none', padding:'12px 14px', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'space-between', fontFamily:"'Plus Jakarta Sans', sans-serif", fontSize:13, fontWeight:600, color:IV_INK }}>
        <span>{summary}</span>
        <span style={{ fontSize:11, color:IV_MUTED, transform: open ? 'rotate(90deg)' : 'none', transition:'transform 0.15s' }}>▶</span>
      </button>
      {open && <div style={{ padding:'0 14px 14px', fontSize:13, color:'oklch(34% 0.04 265)', lineHeight:1.65 }}>{children}</div>}
    </div>
  );
};

// Trust-signal strip. Used at the bottom of every step.
const IVTrustStrip = ({ chips }) => (
  <div style={{ display:'flex', flexWrap:'wrap', gap:8, marginTop:18, padding:'10px 12px', background:'oklch(96% 0.012 265)', border:`1px solid ${IV_BORDER}`, borderRadius:10 }}>
    {chips.map((c,i) => (
      <span key={i} style={{ fontSize:11, fontWeight:600, color:'oklch(32% 0.05 265)', padding:'3px 9px', background:'#fff', border:`1px solid ${IV_BORDER}`, borderRadius:20, whiteSpace:'nowrap' }}>
        {c}
      </span>
    ))}
  </div>
);

// Footer button row.
const IVFooterButtons = ({ onBack, onContinue, continueLabel, busy, disableContinue }) => (
  <div style={{ display:'flex', gap:10, marginTop:24, justifyContent:'space-between', alignItems:'center', flexWrap:'wrap' }}>
    {onBack ? (
      <button type="button" onClick={onBack} disabled={busy}
        style={{ background:'transparent', border:`1.5px solid ${IV_BORDER}`, borderRadius:10, padding:'12px 22px', fontWeight:600, fontSize:14, cursor:busy?'wait':'pointer', color:IV_INK, fontFamily:"'Plus Jakarta Sans', sans-serif" }}>
        ← Back
      </button>
    ) : <span />}
    <button type="button" onClick={onContinue} disabled={busy || disableContinue}
      style={{ background:IV_NAVY, color:'#fff', border:'none', borderRadius:10, padding:'13px 26px', fontWeight:700, fontSize:14, cursor:(busy||disableContinue)?'not-allowed':'pointer', fontFamily:"'Plus Jakarta Sans', sans-serif", opacity:(busy||disableContinue)?0.6:1 }}>
      {busy ? 'Saving…' : (continueLabel || 'Continue →')}
    </button>
  </div>
);

// Step list / progress sidebar (desktop) / top bar (mobile).
const IVStepRail = ({ sections, currentIdx, completed }) => {
  const isMobile = window.useIsMobile();
  if (isMobile) {
    const total = sections.length;
    const pct = Math.round(((currentIdx + 1) / total) * 100);
    return (
      <div style={{ padding:'14px 18px', background:'#fff', borderBottom:`1px solid ${IV_BORDER}`, position:'sticky', top:0, zIndex:5 }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:8 }}>
          <span style={{ fontSize:12, fontWeight:700, color:IV_MUTED, letterSpacing:'0.04em', textTransform:'uppercase' }}>
            Step {currentIdx + 1} of {total}
          </span>
          <span style={{ fontSize:12, fontWeight:700, color:IV_INK }}>
            {sections[currentIdx]?.label}
          </span>
        </div>
        <div style={{ height:6, borderRadius:3, background:'oklch(94% 0.01 265)', overflow:'hidden' }}>
          <div style={{ width:pct+'%', height:'100%', background:IV_GOLD, transition:'width 0.25s' }} />
        </div>
      </div>
    );
  }
  return (
    <div style={{ width:220, padding:'40px 24px', flexShrink:0, background:'transparent', borderRight:`1px solid ${IV_BORDER}` }}>
      <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.1em', color:IV_GOLD, textTransform:'uppercase', marginBottom:18 }}>
        Verification
      </div>
      {sections.map((s, i) => {
        const isDone   = completed[s.key];
        const isActive = i === currentIdx;
        const dotBg  = isDone ? IV_GOLD : (isActive ? IV_NAVY : '#fff');
        const dotFg  = isDone ? '#fff' : (isActive ? '#fff' : IV_MUTED);
        const dotBd  = isDone ? IV_GOLD : (isActive ? IV_NAVY : IV_BORDER);
        return (
          <div key={s.key} style={{ display:'flex', alignItems:'center', gap:10, padding:'8px 0' }}>
            <span style={{ width:22, height:22, borderRadius:'50%', background:dotBg, color:dotFg, border:`1.5px solid ${dotBd}`, display:'flex', alignItems:'center', justifyContent:'center', fontSize:11, fontWeight:700 }}>
              {isDone ? '✓' : (i+1)}
            </span>
            <span style={{ fontSize:13, fontWeight: isActive ? 700 : 500, color: isActive ? IV_INK : IV_MUTED }}>
              {s.label}
            </span>
          </div>
        );
      })}
    </div>
  );
};

Object.assign(window, {
  IV_FIELD_META, IV_NAVY, IV_GOLD, IV_PAPER, IV_BORDER, IV_MUTED, IV_INK,
  IV_INPUT_STYLE,
  formatSSN, ssnDigits,
  IVLabel, IVHelper, IVError, IVDetails, IVTrustStrip, IVFooterButtons,
  IVStepRail,
});