/**
 * [INPUT]: 依赖 ./Tag 的 StatusPill
 * [OUTPUT]: 对外提供 VerifyShell（第三方人机验证的常驻外围壳）与 VERIFY_STATES（通过/冷却/限流三态文案）
 * [POS]: src/extracted 的安全模式，1:1 提炼自 edu AdmDesign「06」样张（.08/.12 细线与 9px/54px 为样张原值）。
 *   真实 iframe 由 Cloudflare Turnstile / 阿里云验证码渲染在 children 位置；外壳负责「始终可见 + 三种反馈态」，
 *   不让第三方控件的出现/消失把表单顶得跳动
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */
import { StatusPill } from './Tag'

const MONO = "ui-monospace,'SF Mono',Menlo,monospace"

export const VERIFY_STATES = {
  ok: { tone: 'ok', text: '验证通过 · 可发送' },
  cooldown: { tone: 'neutral', text: '冷却中 · 60s' },
  limited: { tone: 'danger', text: '请求过多 · 暂时拦截' },
}

export function VerifyShell({ title = '第三方安全验证 · 始终可见外围壳', provider = 'CLOUDFLARE\nTURNSTILE', states = ['ok', 'cooldown', 'limited'], children }) {
  return (
    <div style={{ padding: 12, borderRadius: 12, background: 'rgba(0,0,0,.035)', border: '1px solid rgba(0,0,0,.08)' }}>
      <div style={{ fontSize: 11.5, color: '#54544F', lineHeight: 1.6 }}>{title}</div>
      <div style={{
        marginTop: 8, minHeight: 54, padding: '9px 12px', borderRadius: 8, background: '#FFFFFF',
        border: '1px solid rgba(0,0,0,.12)', display: 'flex', alignItems: 'center', gap: 10,
      }}>
        {children ?? (
          <>
            <span style={{ width: 18, height: 18, borderRadius: 4, border: '1.5px solid rgba(0,0,0,.28)', background: '#FAFAF8', flex: 'none' }} />
            <span style={{ fontSize: 12, color: '#3F3F3B' }}>正在进行人机验证…</span>
            <span style={{ flex: 1 }} />
            <span style={{ fontFamily: MONO, fontSize: 8.5, color: '#A2A29C', textAlign: 'right', whiteSpace: 'pre-line' }}>{provider}</span>
          </>
        )}
      </div>
      {states.length ? (
        <div style={{ display: 'flex', gap: 6, marginTop: 8, flexWrap: 'wrap' }}>
          {states.map((k) => <StatusPill key={k} tone={VERIFY_STATES[k].tone}>{VERIFY_STATES[k].text}</StatusPill>)}
        </div>
      ) : null}
    </div>
  )
}