/* global React */
const { useState: useT, useEffect: useTE, useRef: useTR } = React;

/* =====================================================
   Global Toast host + showToast()
   usage: window.showToast({ type: 'success', msg: '奏折已呈' })
===================================================== */
const ToastIcons = {
  success: (
    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ color: 'var(--bronze)' }}>
      <rect x="4" y="4" width="16" height="16" rx="1" fill="currentColor"/>
      <g stroke="#FAF7F2" strokeWidth="1.5"><path d="M9 8 L9 16"/><path d="M9 10 L12 10"/><path d="M9 13 L12 13"/><path d="M14 8 L16 8 L16 16 L14 16"/></g>
    </svg>
  ),
  error: (
    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" style={{ color: 'var(--danger)' }}>
      <circle cx="12" cy="12" r="9"/><path d="M12 7 L12 13"/><circle cx="12" cy="16.5" r="0.8" fill="currentColor"/>
    </svg>
  ),
  info: (
    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" style={{ color: 'var(--info)' }}>
      <circle cx="12" cy="12" r="9"/><path d="M12 10 L12 17"/><circle cx="12" cy="7.5" r="0.8" fill="currentColor"/>
    </svg>
  ),
  warning: (
    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ color: 'var(--warning)' }}>
      <path d="M12 3 L22 20 L2 20 Z"/><path d="M12 10 L12 15"/><circle cx="12" cy="17.5" r="0.8" fill="currentColor"/>
    </svg>
  ),
};

function ToastHost() {
  const [items, setItems] = useT([]);
  useTE(() => {
    window.showToast = ({ type = 'success', msg = '', duration = 3000 } = {}) => {
      const id = Date.now() + Math.random();
      setItems(x => [...x, { id, type, msg }]);
      setTimeout(() => setItems(x => x.map(i => i.id === id ? { ...i, leaving: true } : i)), duration);
      setTimeout(() => setItems(x => x.filter(i => i.id !== id)), duration + 220);
    };
  }, []);
  return (
    <div className="bx-toast-host">
      {items.map(t => (
        <div key={t.id} className={`bx-toast bx-toast--${t.type} ${t.leaving ? 'is-leaving' : ''}`}>
          <span className="bx-toast__icon">{ToastIcons[t.type]}</span>
          <span className="bx-toast__msg">{t.msg}</span>
          <button className="bx-toast__close" onClick={() => setItems(x => x.filter(i => i.id !== t.id))}>×</button>
        </div>
      ))}
    </div>
  );
}

/* =====================================================
   Confirm Modal (controlled)
===================================================== */
function ConfirmModal({ open, title = '朕问你', message, confirmText = '确认', cancelText = '朕再想想', danger = false, requireTyping, onConfirm, onCancel }) {
  const [typed, setTyped] = useT('');
  useTE(() => { if (open) setTyped(''); }, [open]);
  if (!open) return null;
  const canConfirm = !requireTyping || typed.trim() === requireTyping;
  return (
    <div className="bx-modal" onClick={onCancel}>
      <div className="bx-modal__card bx-confirm" onClick={e => e.stopPropagation()}>
        {danger && (
          <div style={{ color: 'var(--danger)', display: 'flex', justifyContent: 'center', marginBottom: 12 }}>
            <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M12 3 L22 20 L2 20 Z"/><path d="M12 10 L12 15"/><circle cx="12" cy="17.5" r="0.8" fill="currentColor"/>
            </svg>
          </div>
        )}
        <span className="eyebrow">{danger ? 'DANGER · 慎之' : 'CONFIRM · 请示'}</span>
        <h2 className="h2" style={{ margin: '8px 0 12px' }}>{title}</h2>
        <p className="serif-body">{message}</p>
        {requireTyping && (
          <div style={{ margin: '0 auto 24px', maxWidth: 320 }}>
            <input
              className="bx-search"
              style={{ width: '100%', textAlign: 'center' }}
              placeholder={`请输入 ${requireTyping} 以示决心`}
              value={typed}
              onChange={e => setTyped(e.target.value)}/>
          </div>
        )}
        <div className="bx-confirm__acts">
          <button className="bx-btn bx-btn--tertiary" onClick={onCancel}>{cancelText}</button>
          <button
            className={`bx-btn ${danger ? 'bx-btn--danger' : 'bx-btn--primary'}`}
            style={{ opacity: canConfirm ? 1 : 0.5, pointerEvents: canConfirm ? 'auto' : 'none' }}
            onClick={canConfirm ? onConfirm : null}>{confirmText}</button>
        </div>
      </div>
    </div>
  );
}

/* =====================================================
   Info Modal — "朕曰"
===================================================== */
function InfoModal({ open, title = '朕曰', children, onClose }) {
  if (!open) return null;
  return (
    <div className="bx-modal" onClick={onClose}>
      <div className="bx-modal__card" style={{ maxWidth: 560 }} onClick={e => e.stopPropagation()}>
        <button className="bx-modal__close" onClick={onClose}>×</button>
        <h2 className="h2 bx-modal__title">{title}</h2>
        <div style={{ maxHeight: '60vh', overflowY: 'auto', margin: '24px 0', padding: '0 4px', textAlign: 'left' }}>
          {children}
        </div>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <button className="bx-btn bx-btn--primary" onClick={onClose}>知道了</button>
        </div>
      </div>
    </div>
  );
}

/* =====================================================
   Loading helpers
===================================================== */
function SealSpinner({ size = 48, text }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
      <span className="bx-spinner-seal">
        <svg viewBox="0 0 48 48" width={size} height={size} fill="none" style={{ color: 'var(--bronze)' }}>
          <rect x="6" y="6" width="36" height="36" rx="2" fill="currentColor"/>
          <g stroke="#FAF7F2" strokeWidth="2" strokeLinecap="round">
            <path d="M16 14 L16 34"/><path d="M16 18 L22 18"/><path d="M16 26 L22 26"/>
            <path d="M28 14 L34 14 L34 34 L28 34"/><path d="M28 24 L34 24"/>
          </g>
        </svg>
      </span>
      {text && <span style={{ fontFamily: 'var(--font-serif)', fontSize: 15, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>{text}</span>}
    </div>
  );
}

function FullscreenLoading({ text = '稍候,待朕过目……' }) {
  return (
    <div className="bx-loading-overlay">
      <SealSpinner size={56} text={text}/>
    </div>
  );
}

function PageTopBar() {
  return <div className="bx-topbar"><div className="bx-topbar__bar"/></div>;
}

function LetterSkeleton() {
  return (
    <div className="bx-letter" style={{ cursor: 'default' }}>
      <div className="bx-letter__head">
        <div className="bx-skel bx-skel--line" style={{ width: 80 }}/>
        <div className="bx-skel bx-skel--tag"/>
      </div>
      <div className="bx-skel bx-skel--title" style={{ width: '90%' }}/>
      <div className="bx-skel bx-skel--line" style={{ width: '100%' }}/>
      <div className="bx-skel bx-skel--line" style={{ width: '92%' }}/>
      <div className="bx-skel bx-skel--line" style={{ width: '70%' }}/>
      <div className="bx-letter__foot">
        <div className="bx-skel bx-skel--line" style={{ width: 70 }}/>
        <div className="bx-skel bx-skel--line" style={{ width: 50 }}/>
      </div>
    </div>
  );
}

/* =====================================================
   Empty State
===================================================== */
function EmptyState({ icon, title, subtitle, cta, onCta }) {
  return (
    <div className="bx-empty bx-empty--full">
      <div className="bx-empty__icon">{icon}</div>
      <h2>{title}</h2>
      <p className="body">{subtitle}</p>
      {cta && <button className="bx-btn bx-btn--primary" onClick={onCta}>{cta}</button>}
    </div>
  );
}

/* =====================================================
   Form Field (with states)
===================================================== */
function TextField({ label, required, state = 'default', hint, error, ...rest }) {
  const cls = `bx-field ${state === 'success' ? 'bx-field--success' : ''} ${state === 'error' ? 'bx-field--error' : ''}`;
  return (
    <label className={cls}>
      <span className="bx-field__lbl">{label}{required && <span className="bx-req-dot" style={{ marginLeft: 6 }}/>}</span>
      <input {...rest}/>
      {error && <span className="bx-field__error">{error}</span>}
      {!error && hint && <span className="small" style={{ fontSize: 12 }}>{hint}</span>}
    </label>
  );
}

/* =====================================================
   违规词提示条 · 写信 / 评论共用
   blocked: 必须修改才能提交的违规词 [{word,category}]
   warnings: 仅提醒、不阻止提交的敏感词 [{word,category}]
===================================================== */
function SensitiveNotice({ blocked = [], warnings = [] }) {
  if (blocked.length === 0 && warnings.length === 0) return null;
  return (
    <div className="bx-sensitive" role="alert">
      {blocked.length > 0 && (
        <div className="bx-sensitive__block">
          <div className="bx-sensitive__head">
            <span className="bx-sensitive__dot" aria-hidden>!</span>
            <strong>检测到 {blocked.length} 个违规词,须修改后方可呈递</strong>
          </div>
          <div className="bx-sensitive__chips">
            {blocked.map((b, i) => (
              <span key={'b' + i} className="bx-sensitive__chip bx-sensitive__chip--block" title={b.category}>{b.word}</span>
            ))}
          </div>
          <p className="bx-sensitive__hint">这些词可能触发抖音限流/封禁,请删去或换种说法。如要留联系方式,可在被陛下选中后私下沟通。</p>
        </div>
      )}
      {warnings.length > 0 && (
        <div className="bx-sensitive__warn">
          <div className="bx-sensitive__head">
            <span className="bx-sensitive__dot bx-sensitive__dot--warn" aria-hidden>·</span>
            <span>另有 {warnings.length} 个敏感词,建议斟酌(不影响呈递)</span>
          </div>
          <div className="bx-sensitive__chips">
            {warnings.map((w, i) => (
              <span key={'w' + i} className="bx-sensitive__chip bx-sensitive__chip--warn" title={w.category}>{w.word}</span>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ToastHost, ConfirmModal, InfoModal, SealSpinner, FullscreenLoading, PageTopBar, LetterSkeleton, EmptyState, TextField, SensitiveNotice });