// Settings: Re-KYC Cadence + Questionnaire Authoring.

/* ──────────────────────────────────────────────────────────────────────── *
 * Re-KYC Cadence
 *
 * Three per-tier policies (Low/Medium/High). Each has:
 *   - Re-verification interval (months)
 *   - Reminder schedule (T-N days before expiry, multiple reminders)
 *   - Escalation: what happens at expiry (grace period → soft-lock → hard-lock)
 *   - Per-jurisdiction overrides (Bahamas, BVI, Cayman special-cased)
 *
 * Also includes a live preview of the next 24 months of re-KYC volume so
 * compliance can see whether they're about to inundate themselves.
 * ──────────────────────────────────────────────────────────────────────── */

function SettingsReKycCadence({ auditorMode }) {
  const [policies, setPolicies] = React.useState({
    low:    { interval: 36, reminders: [30, 7],      grace: 14, softLock: 7,  hardLock: 30 },
    medium: { interval: 24, reminders: [60, 14, 1],  grace: 7,  softLock: 14, hardLock: 14 },
    high:   { interval: 12, reminders: [90, 30, 14, 1], grace: 0,  softLock: 7, hardLock: 7 },
  });
  const [overrides, setOverrides] = React.useState([
    { country: "VG", tier: "any",    intervalDelta: -6, reason: "BVI FSC quarterly attestation", termKey: "BVI FSC" },
    { country: "KY", tier: "high",   intervalDelta: -6, reason: "CIMA enhanced cadence", termKey: "CIMA" },
    { country: "BS", tier: "any",    intervalDelta:  0, reason: "Home jurisdiction" },
  ]);
  const [dirty, setDirty] = React.useState(false);

  const setPolicy = (tier, key, value) => {
    setPolicies(p => ({ ...p, [tier]: { ...p[tier], [key]: value } }));
    setDirty(true);
  };

  // Mocked forecast: how many users hit re-KYC per month for next 24
  const forecast = React.useMemo(() => {
    return Array.from({ length: 24 }, (_, i) => {
      const seed = (i + 3) * 41 + policies.low.interval + policies.medium.interval * 2 + policies.high.interval * 3;
      return {
        low:    8  + ((seed * 7)  % 18),
        medium: 14 + ((seed * 11) % 26),
        high:   3  + ((seed * 13) % 9),
      };
    });
  }, [policies]);
  const fmax = Math.max(...forecast.map(f => f.low + f.medium + f.high));
  const today = new Date(2026, 4, 19);

  return (
    <>
      <div className="app-subheader">
        <div className="subheader-title">Re-KYC Cadence</div>
        <div className="subheader-meta">Periodic re-verification policy · per tier · per jurisdiction</div>
        <div className="subheader-spacer" />
        <Btn variant="outlined" disabled={!dirty}>Discard</Btn>
        <Btn variant="filled" tone="accent" disabled={!dirty || auditorMode}>Save changes</Btn>
      </div>

      <div className="page-scroll">
        <div className="settings-wrap">
          <div className="settings-grid-two">
            {/* Policies (3 cards) */}
            <div className="col" style={{gap:14}}>
              <Card title="Tier policies" hint="Re-verification cadence by KYC tier"
                actions={<Btn variant="ghost" size="xs" icon={ICopy}>Copy from template</Btn>}>
                <div className="rekyc-tiers">
                  {["low","medium","high"].map(t => (
                    <PolicyBlock key={t} tier={t} p={policies[t]} setPolicy={setPolicy} auditorMode={auditorMode} />
                  ))}
                </div>
              </Card>

              <Card title="Jurisdictional overrides"
                hint="Adjust interval relative to the tier baseline for specific countries"
                actions={<Btn variant="outlined" size="xs" icon={IUpload} disabled={auditorMode}>Add override</Btn>}>
                <table className="tbl" style={{fontSize:12}}>
                  <thead>
                    <tr>
                      <th style={{paddingLeft:12}}>Country</th>
                      <th>Tier</th>
                      <th className="numeric">Interval Δ</th>
                      <th>Reason</th>
                      <th className="col-narrow" style={{paddingRight:12}}></th>
                    </tr>
                  </thead>
                  <tbody>
                    {overrides.map((o, i) => (
                      <tr key={i}>
                        <td style={{paddingLeft:12}}><Flag code={o.country} showName /></td>
                        <td style={{textTransform:"capitalize"}} className="fg-2">{o.tier}</td>
                        <td className="numeric mono" style={{color: o.intervalDelta < 0 ? "var(--red-fg)" : "var(--fg-3)"}}>
                          {o.intervalDelta > 0 ? "+" : ""}{o.intervalDelta} mo
                        </td>
                        <td className="fg-3">{o.termKey ? <><Term id={o.termKey}>{o.reason.split(' ').slice(0,2).join(' ')}</Term>{' ' + o.reason.split(' ').slice(2).join(' ')}</> : o.reason}</td>
                        <td className="col-narrow" style={{paddingRight:12}}>
                          <div className="row-actions" style={{opacity:1}}>
                            <ActionIcon icon={IPencil} label="Edit" />
                            <ActionIcon icon={IX} label="Remove" danger />
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </Card>
            </div>

            {/* Forecast + summary */}
            <div className="col" style={{gap:14, position:"sticky", top:0, alignSelf:"start"}}>
              <Card title="24-month re-KYC forecast"
                hint="Users hitting re-verification per month, by tier">
                <ReKycForecast forecast={forecast} max={fmax} today={today} />
                <div className="row" style={{gap:14, marginTop:12, fontSize:11.5, color:"var(--fg-3)"}}>
                  <span className="row" style={{gap:6}}><span style={{width:10, height:10, background:"var(--green-bg)", border:"1px solid var(--green)"}} /> Low</span>
                  <span className="row" style={{gap:6}}><span style={{width:10, height:10, background:"var(--amber-bg)", border:"1px solid var(--amber)"}} /> Medium</span>
                  <span className="row" style={{gap:6}}><span style={{width:10, height:10, background:"var(--red-bg)", border:"1px solid var(--red)"}} /> High</span>
                </div>
              </Card>

              <Card title="Capacity impact" hint="Estimated reviewer hours · per month">
                <div style={{display:"grid", gridTemplateColumns:"1fr auto", rowGap:6, columnGap:14, fontSize:12.5}}>
                  <span className="fg-3">Peak month volume</span>
                  <span className="mono fg-1" style={{fontWeight:600}}>{fmax} users</span>
                  <span className="fg-3">Avg. reviewer-min / case</span>
                  <span className="mono fg-1">14</span>
                  <span className="fg-3">Estimated peak hours</span>
                  <span className="mono fg-1" style={{fontWeight:600, color:"var(--amber-fg)"}}>{Math.round((fmax * 14) / 60)}h</span>
                  <span className="fg-3">Reviewer FTE @ 120h/mo</span>
                  <span className="mono fg-1">{((fmax * 14) / 60 / 120).toFixed(2)}</span>
                </div>
                <div style={{marginTop:12, padding:10, background:"var(--amber-bg)", color:"var(--amber-fg)", borderRadius:6, fontSize:11.5, display:"flex", gap:8, alignItems:"flex-start"}}>
                  <IAlertT size={14} style={{flexShrink:0, marginTop:1}} />
                  <span><b>Heads up.</b> If High-tier cadence drops below 12mo without adding reviewers, p95 SLA is projected to breach 7d by month 4.</span>
                </div>
              </Card>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

function PolicyBlock({ tier, p, setPolicy, auditorMode }) {
  const tone = tier === "high" ? "red" : tier === "medium" ? "amber" : "green";
  return (
    <div className="rekyc-tier">
      <div className="rekyc-tier-hd">
        <span className={`pill pill-${tone}`}>
          <span className={`pill-dot pill-dot-${tone}`} /> {tier === "low" ? "Low" : tier === "medium" ? "Medium" : "High"} tier
        </span>
        <span className="fg-4" style={{fontSize:11.5, marginLeft:8}}>
          {tier === "low" ? "< $5,000 monthly activity" : tier === "medium" ? "$5,000 – $25,000" : "> $25,000"}
        </span>
      </div>
      <div className="rekyc-tier-grid">
        <div className="rekyc-field">
          <label>Re-verification every</label>
          <div className="rekyc-stepper">
            <button onClick={() => setPolicy(tier, "interval", Math.max(3, p.interval - 3))} disabled={auditorMode}>−</button>
            <span className="mono">{p.interval}</span>
            <span className="fg-4">months</span>
            <button onClick={() => setPolicy(tier, "interval", Math.min(60, p.interval + 3))} disabled={auditorMode}>+</button>
          </div>
        </div>
        <div className="rekyc-field">
          <label>Reminder schedule (days before expiry)</label>
          <div className="row" style={{gap:6, flexWrap:"wrap"}}>
            {p.reminders.map((d, i) => (
              <span key={i} className="cell-kind-pill" style={{padding:"2px 8px"}}>T-{d}d</span>
            ))}
            <Btn variant="ghost" size="xs" disabled={auditorMode}>+ Add reminder</Btn>
          </div>
        </div>
        <div className="rekyc-field">
          <label>At expiry → grace period</label>
          <div className="rekyc-stepper">
            <span className="mono">{p.grace}</span>
            <span className="fg-4">days, then</span>
          </div>
        </div>
        <div className="rekyc-field">
          <label>→ Soft lock (read-only)</label>
          <div className="rekyc-stepper">
            <span className="mono">{p.softLock}</span>
            <span className="fg-4">days, then</span>
          </div>
        </div>
        <div className="rekyc-field" style={{gridColumn:"1 / -1"}}>
          <label>→ Hard lock (account frozen)</label>
          <div className="rekyc-stepper">
            <span className="mono">{p.hardLock}</span>
            <span className="fg-4">days · withdrawals blocked, subscriptions blocked</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function ReKycForecast({ forecast, max, today }) {
  const W = 520, H = 180, P = 20;
  const colW = (W - P*2) / forecast.length;
  const barW = colW * 0.7;

  return (
    <svg width="100%" viewBox={`0 0 ${W} ${H}`} style={{display:"block"}}>
      {/* horizontal grid */}
      {[0.25, 0.5, 0.75, 1].map((f, i) => (
        <line key={i} x1={P} x2={W-P} y1={H-P - f*(H-P*2)} y2={H-P - f*(H-P*2)}
          stroke="var(--line-soft)" strokeWidth={1} strokeDasharray="2 3" />
      ))}
      {forecast.map((b, i) => {
        const x = P + i * colW + (colW - barW) / 2;
        const h = (n) => (n / max) * (H - P*2);
        const yLow  = H - P - h(b.low);
        const yMed  = yLow - h(b.medium);
        const yHigh = yMed - h(b.high);
        return (
          <g key={i}>
            <rect x={x} y={yLow}  width={barW} height={h(b.low)}    fill="var(--green-bg)" stroke="var(--green)" strokeWidth={0.5}/>
            <rect x={x} y={yMed}  width={barW} height={h(b.medium)} fill="var(--amber-bg)" stroke="var(--amber)" strokeWidth={0.5}/>
            <rect x={x} y={yHigh} width={barW} height={h(b.high)}   fill="var(--red-bg)"   stroke="var(--red)"   strokeWidth={0.5}/>
            {i % 3 === 0 && (
              <text x={x + barW/2} y={H - 4} textAnchor="middle" fontSize="9.5" fill="var(--fg-4)" fontFamily="var(--font-mono)">
                {new Date(today.getFullYear(), today.getMonth() + i, 1).toISOString().slice(2, 7)}
              </text>
            )}
          </g>
        );
      })}
      {/* Today indicator */}
      <line x1={P} y1={H - P} x2={P} y2={P} stroke="var(--accent)" strokeWidth={1} strokeDasharray="3 3"/>
      <text x={P + 4} y={P + 10} fontSize="9.5" fill="var(--accent-fg)" fontFamily="var(--font-mono)">now</text>
    </svg>
  );
}

/* ──────────────────────────────────────────────────────────────────────── *
 * Questionnaire Authoring  (WS5)
 *
 * List of questionnaires on the left. Selected questionnaire shows:
 *   - Header: name, version, status (Draft / Published / Archived), audience
 *   - Section/question editor — drag handles, type pickers (text, single-select,
 *     multi-select, number, date, file, attestation), required flag, conditional logic
 *   - Preview pane on the right
 * ──────────────────────────────────────────────────────────────────────── */

const QUESTIONNAIRES = [
  {
    id: "Q-RISK-DECL",
    name: "Risk Declaration",
    version: "v3.2",
    status: "published",
    audience: "Individuals · Tier 2+",
    lastEdited: "2026-04-12",
    editor: "alva.brennan@agio",
    sections: [
      {
        id: "s1", title: "Personal exposure", questions: [
          { id: "q1", type: "single",   label: "Are you a Politically Exposed Person (PEP)?",
            required: true, options: ["No", "Yes — domestic", "Yes — foreign", "Family member of PEP"] },
          { id: "q2", type: "single",   label: "Have you ever been subject to sanctions enforcement?",
            required: true, options: ["No", "Yes — currently", "Yes — historically (cleared)"] },
          { id: "q3", type: "text",     label: "If yes to either above, provide context.",
            required: false, conditional: "q1 != 'No' OR q2 != 'No'" },
        ],
      },
      {
        id: "s2", title: "Source of wealth", questions: [
          { id: "q4", type: "multi",    label: "Primary source(s) of wealth",
            required: true, options: ["Salary / employment", "Business income", "Investment returns",
              "Inheritance / family gift", "Sale of property", "Other"] },
          { id: "q5", type: "number",   label: "Approximate annual income (USD)", required: true, unit: "USD" },
          { id: "q6", type: "file",     label: "Source-of-wealth supporting document",
            required: true, accept: "PDF · ≤ 10 MB · within 90 days" },
        ],
      },
      {
        id: "s3", title: "Attestation", questions: [
          { id: "q7", type: "attest",   label: "I attest the above is true and complete to the best of my knowledge, and acknowledge that knowingly false declarations are a regulatory offence under Bahamas SCB-DARE §27.",
            required: true },
        ],
      },
    ],
  },
  { id: "Q-SOF-EDD",   name: "Source of Funds (EDD)",     version: "v2.0", status: "published", audience: "High-tier withdrawals", lastEdited: "2026-03-04", editor: "carlos.gomes@agio", sections: [] },
  { id: "Q-TAX-RES",   name: "Tax Residency (CRS / FATCA)", version: "v1.4", status: "published", audience: "All applicants",       lastEdited: "2026-02-18", editor: "elena.thomas@agio", sections: [], termHint: "CRS" },
  { id: "Q-KYB-STRUCT",name: "KYB · Beneficial Ownership", version: "v4.1", status: "published", audience: "Organizations",         lastEdited: "2026-04-29", editor: "alva.brennan@agio", sections: [], termHint: "UBO" },
  { id: "Q-RISK-V4",   name: "Risk Declaration (v4 draft)", version: "v4.0", status: "draft",    audience: "Individuals · Tier 2+",  lastEdited: "2026-05-18", editor: "alva.brennan@agio", sections: [] },
  { id: "Q-LEGACY",    name: "Legacy KYC Questionnaire",   version: "v1.0", status: "archived",  audience: "—",                      lastEdited: "2024-09-01", editor: "system",            sections: [] },
];

function SettingsQuestionnaire({ auditorMode }) {
  const [selectedId, setSelectedId] = React.useState("Q-RISK-DECL");
  const [previewOpen, setPreviewOpen] = React.useState(true);
  const q = QUESTIONNAIRES.find(x => x.id === selectedId);

  return (
    <>
      <div className="app-subheader">
        <div className="subheader-title">Questionnaire Authoring</div>
        <div className="subheader-meta">WS5 · {QUESTIONNAIRES.filter(q => q.status === "published").length} published · {QUESTIONNAIRES.filter(q => q.status === "draft").length} draft</div>
        <div className="subheader-spacer" />
        <Btn variant="outlined" icon={IEye} onClick={() => setPreviewOpen(p => !p)}>{previewOpen ? "Hide preview" : "Show preview"}</Btn>
        <Btn variant="outlined" disabled={auditorMode}>Discard</Btn>
        <Btn variant="filled" tone="accent" disabled={auditorMode}>Save draft</Btn>
        <Btn variant="filled" disabled={auditorMode || q.status === "published"}>Publish v{(parseFloat(q.version.replace("v","")) + 0.1).toFixed(1)}</Btn>
      </div>

      <div className="qa-layout" data-preview={previewOpen ? "open" : "closed"}>
        {/* Left: questionnaire list */}
        <aside className="qa-list">
          <div className="qa-list-hd">
            <span className="fg-4" style={{fontSize:11, textTransform:"uppercase", letterSpacing:"0.06em", fontWeight:600}}>Questionnaires</span>
            <Btn variant="ghost" size="xs" disabled={auditorMode}>+ New</Btn>
          </div>
          <div className="qa-list-body">
            {QUESTIONNAIRES.map(q => (
              <button key={q.id}
                className={`qa-list-item ${selectedId === q.id ? "is-active" : ""}`}
                onClick={() => setSelectedId(q.id)}>
                <div className="qa-list-name">{q.name}</div>
                <div className="qa-list-meta">
                  <span className="mono">{q.version}</span>
                  <span style={{margin:"0 6px"}}>·</span>
                  <span>{q.audience}</span>
                </div>
                <div className="qa-list-foot">
                  {q.status === "published" && <StatusPill status="approved" label="Published" />}
                  {q.status === "draft"     && <StatusPill status="pending"  label="Draft" />}
                  {q.status === "archived"  && <StatusPill status="abandoned" label="Archived" />}
                  <span className="fg-4 mono" style={{fontSize:10.5, marginLeft:"auto"}}>{q.lastEdited}</span>
                </div>
              </button>
            ))}
          </div>
        </aside>

        {/* Middle: editor */}
        <main className="qa-editor">
          <div className="qa-editor-hd">
            <div>
              <div className="row" style={{gap:8}}>
                <h2 style={{margin:0, fontSize:15, fontWeight:600}}>{q.name}</h2>
                <span className="mono fg-4" style={{fontSize:11}}>{q.id}</span>
                <span className="mono fg-3" style={{fontSize:11}}>{q.version}</span>
                {q.status === "published" && <StatusPill status="approved" label="Published" />}
                {q.status === "draft" && <StatusPill status="pending" label="Draft" />}
                {q.status === "archived" && <StatusPill status="abandoned" label="Archived" />}
              </div>
              <div className="fg-3" style={{fontSize:12, marginTop:4}}>
                Audience: <span className="fg-2">{q.audience}</span>
                <span style={{margin:"0 8px"}}>·</span>
                Last edited <span className="mono">{q.lastEdited}</span> by <span className="mono">{q.editor}</span>
              </div>
            </div>
            <span className="right" style={{marginLeft:"auto", display:"flex", gap:6}}>
              <Btn variant="outlined" size="xs" icon={ICopy}>Duplicate</Btn>
              <Btn variant="outlined" size="xs" icon={IDownload}>Export JSON</Btn>
              <Btn variant="outlined" size="xs" icon={ILock}>Version history</Btn>
            </span>
          </div>

          <div className="qa-editor-body">
            {q.sections.length === 0 ? (
              <Empty title="No content yet" hint={`${q.name} (${q.version}) hasn't been authored yet. Start with a template or duplicate from another questionnaire.`}
                cta={<div style={{display:"flex", gap:6}}>
                  <Btn variant="outlined">Start blank</Btn>
                  <Btn variant="filled" tone="accent" disabled={auditorMode}>Duplicate from v3.2</Btn>
                </div>} />
            ) : q.sections.map((s, si) => (
              <section key={s.id} className="qa-section">
                <header className="qa-section-hd">
                  <span className="qa-section-num mono">{si + 1}</span>
                  <input className="qa-section-title" defaultValue={s.title} disabled={auditorMode} />
                  <span className="right fg-4" style={{marginLeft:"auto", fontSize:11.5}}>
                    {s.questions.length} question{s.questions.length === 1 ? "" : "s"}
                  </span>
                  <ActionIcon icon={IDotsV} label="More" />
                </header>
                <div className="qa-questions">
                  {s.questions.map((qq, qi) => <QuestionRow key={qq.id} q={qq} si={si} qi={qi} auditorMode={auditorMode} />)}
                  <button className="qa-add-q" disabled={auditorMode}>+ Add question</button>
                </div>
              </section>
            ))}
            {q.sections.length > 0 && (
              <button className="qa-add-section" disabled={auditorMode}>+ Add section</button>
            )}
          </div>
        </main>

        {/* Right: live preview */}
        {previewOpen && (
          <aside className="qa-preview">
            <div className="qa-preview-hd">
              <span className="fg-4" style={{fontSize:11, textTransform:"uppercase", letterSpacing:"0.06em", fontWeight:600}}>Applicant Preview</span>
              <span className="mono fg-4" style={{fontSize:10.5, marginLeft:"auto"}}>render · {q.version}</span>
            </div>
            <div className="qa-preview-body">
              <QuestionnairePreview q={q} />
            </div>
          </aside>
        )}
      </div>
    </>
  );
}

const TYPE_LABEL = {
  text: "Short text", textarea: "Long text", single: "Single select", multi: "Multi select",
  number: "Number", date: "Date", file: "File upload", attest: "Attestation",
};
const TYPE_ICON = {
  text: "T", textarea: "¶", single: "○", multi: "☐", number: "#", date: "📅", file: "↑", attest: "✓",
};

function QuestionRow({ q, si, qi, auditorMode }) {
  return (
    <div className="qa-question">
      <div className="qa-q-drag">⋮⋮</div>
      <div className="qa-q-num mono">{si + 1}.{qi + 1}</div>
      <div className="qa-q-body">
        <div className="qa-q-row">
          <span className="qa-q-type">
            <span className="qa-q-type-icon">{TYPE_ICON[q.type]}</span>
            <span>{TYPE_LABEL[q.type]}</span>
          </span>
          {q.required && <span className="qa-q-required">required</span>}
          {q.conditional && (
            <span className="qa-q-condition" title="Conditional logic">
              <ILink size={11} /> shows if <span className="mono">{q.conditional}</span>
            </span>
          )}
        </div>
        <input className="qa-q-label" defaultValue={q.label} disabled={auditorMode} />
        {q.options && (
          <div className="qa-q-options">
            {q.options.map((o, i) => (
              <span key={i} className="qa-q-opt">
                <span className="qa-q-opt-dot" />
                <span>{o}</span>
              </span>
            ))}
            <button className="qa-q-add-opt" disabled={auditorMode}>+ option</button>
          </div>
        )}
        {q.unit && <div className="fg-4" style={{fontSize:11, marginTop:4}}>Unit: <span className="mono fg-2">{q.unit}</span></div>}
        {q.accept && <div className="fg-4" style={{fontSize:11, marginTop:4}}>Accept: <span className="mono fg-2">{q.accept}</span></div>}
      </div>
      <div className="qa-q-actions">
        <ActionIcon icon={ICopy} label="Duplicate" />
        <ActionIcon icon={ILink} label="Add condition" />
        <ActionIcon icon={IX} label="Remove" danger />
      </div>
    </div>
  );
}

function QuestionnairePreview({ q }) {
  if (!q.sections.length) {
    return <div className="fg-4" style={{padding:20, textAlign:"center", fontSize:12}}>
      Authoring this questionnaire will render an applicant-facing form here.
    </div>;
  }
  return (
    <form className="qa-prev-form" onSubmit={e => e.preventDefault()}>
      <h3 style={{margin:"0 0 4px", fontSize:14, fontWeight:600}}>{q.name}</h3>
      <p className="fg-3" style={{margin:"0 0 16px", fontSize:12}}>{q.audience} · {q.version}</p>
      {q.sections.map((s) => (
        <div key={s.id} style={{marginBottom:18}}>
          <h4 style={{margin:"0 0 8px", fontSize:11, textTransform:"uppercase", letterSpacing:"0.06em", color:"var(--fg-4)", fontWeight:600}}>{s.title}</h4>
          <div style={{display:"flex", flexDirection:"column", gap:12}}>
            {s.questions.map(qq => <PreviewQuestion key={qq.id} q={qq} />)}
          </div>
        </div>
      ))}
      <button type="submit" className="btn btn-filled btn-sm btn-tone-accent" style={{width:"100%", marginTop:6}}>
        Submit
      </button>
    </form>
  );
}

function PreviewQuestion({ q }) {
  return (
    <div className="qa-prev-q">
      <label className="qa-prev-label">
        {q.label}
        {q.required && <span style={{color:"var(--red-fg)", marginLeft:4}}>*</span>}
      </label>
      {q.type === "text" && <input className="qa-prev-input" placeholder="—" />}
      {q.type === "number" && (
        <div className="row" style={{gap:6}}>
          <input className="qa-prev-input" placeholder="—" style={{flex:1}} />
          <span className="fg-4" style={{fontSize:11}}>{q.unit}</span>
        </div>
      )}
      {q.type === "single" && q.options && (
        <div className="qa-prev-radios">
          {q.options.map((o, i) => (
            <label key={i} className="qa-prev-radio">
              <span className="qa-prev-radio-dot" />
              <span>{o}</span>
            </label>
          ))}
        </div>
      )}
      {q.type === "multi" && q.options && (
        <div className="qa-prev-radios">
          {q.options.map((o, i) => (
            <label key={i} className="qa-prev-radio">
              <span className="qa-prev-radio-dot is-sq" />
              <span>{o}</span>
            </label>
          ))}
        </div>
      )}
      {q.type === "file" && (
        <div className="qa-prev-file">
          <IUpload size={14} />
          <span>Drag or click to upload</span>
          {q.accept && <span className="fg-4" style={{fontSize:11}}>· {q.accept}</span>}
        </div>
      )}
      {q.type === "attest" && (
        <label className="qa-prev-radio" style={{alignItems:"flex-start"}}>
          <span className="qa-prev-radio-dot is-sq" style={{marginTop:2}} />
          <span style={{fontSize:11.5, color:"var(--fg-3)"}}>{q.label}</span>
        </label>
      )}
    </div>
  );
}

Object.assign(window, { SettingsReKycCadence, SettingsQuestionnaire });