// =========================================================
// FBIF 资讯订阅 · Overlays
// Toaster (success/info/warn), Placeholder
// =========================================================

const Toaster = ({ toasts }) => {
  useLucide();
  const iconFor = { success: 'check-circle-2', info: 'info', warning: 'alert-triangle', error: 'x-circle' };
  const colorFor = { success: '#00A870', info: '#1456F0', warning: '#FF8800', error: '#F54A45' };
  return (
    <div style={{ position: 'fixed', top: 16, left: '50%', transform: 'translateX(-50%)', zIndex: 200, display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'center', pointerEvents: 'none' }}>
      {toasts.map(t => (
        <div key={t.id} style={{
          display: 'flex', alignItems: 'center', gap: 10, height: 40, padding: '0 16px',
          background: '#fff', borderRadius: 6, boxShadow: '0 4px 12px rgba(31,35,41,.12), 0 0 1px rgba(31,35,41,.16)',
          border: '1px solid #EDEFF2', fontSize: 14, color: '#1F2329',
          animation: 'toastIn .2s ease', maxWidth: 460, pointerEvents: 'auto',
        }}>
          <Icon name={iconFor[t.kind] || 'info'} size={16} color={colorFor[t.kind] || '#1456F0'} style={{ fill: 'none' }} />
          <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t.msg}</span>
          {t.action && (
            <button onClick={t.action.onClick} style={{ border: 'none', background: 'transparent', color: '#1456F0', fontWeight: 500, fontSize: 13, cursor: 'pointer', fontFamily: 'inherit', padding: '2px 4px', flexShrink: 0 }}>
              {t.action.label}
            </button>
          )}
        </div>
      ))}
    </div>
  );
};

const Placeholder = ({ icon, title, hint }) => {
  useLucide();
  return (
    <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 48, textAlign: 'center', background: '#fff' }}>
      <div style={{ width: 72, height: 72, borderRadius: 16, background: '#F2F3F5', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <Icon name={icon} size={32} color="#8F959E" />
      </div>
      <div style={{ fontSize: 16, color: '#1F2329', marginTop: 16, fontWeight: 500 }}>{title}</div>
      <div style={{ fontSize: 13, color: '#8F959E', marginTop: 6, maxWidth: 320, lineHeight: '20px' }}>{hint}</div>
      <div style={{ marginTop: 16 }}><Tag tone="info" dot>V1 / V2 路线图</Tag></div>
    </div>
  );
};

// Generic centered modal (scrim + card). Esc / scrim / ✕ to close.
const Modal = ({ title, subtitle, icon, width = 520, onClose, children, footer }) => {
  useLucide();
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose && onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);
  const modal = (
    <div style={{ position: 'fixed', inset: 0, zIndex: 400, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(31,35,41,.45)', animation: 'rdFade .2s ease' }} />
      <div role="dialog" style={{ position: 'relative', width, maxWidth: '100%', maxHeight: '86vh', display: 'flex', flexDirection: 'column',
        background: '#fff', borderRadius: 10, boxShadow: '0 8px 24px rgba(31,35,41,.10), 0 0 1px rgba(31,35,41,.12)', animation: 'rdSlide .24s ease' }}>
        <header style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '16px 16px 14px', borderBottom: '1px solid #EDEFF2' }}>
          {icon && <span style={{ width: 28, height: 28, borderRadius: 7, background: '#EBF1FE', color: '#1456F0', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name={icon} size={16} /></span>}
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 16, fontWeight: 500, color: '#1F2329' }}>{title}</div>
            {subtitle && <div style={{ fontSize: 12, color: '#8F959E', marginTop: 1 }}>{subtitle}</div>}
          </div>
          <button onClick={onClose} title="关闭" aria-label="关闭" style={{ border: 'none', background: 'transparent', cursor: 'pointer', color: '#8F959E', padding: 4, display: 'inline-flex', borderRadius: 6 }}>
            <Icon name="x" size={18} />
          </button>
        </header>
        <div style={{ padding: 16, overflowY: 'auto', minHeight: 0 }}>{children}</div>
        {footer && <footer style={{ padding: '12px 16px', borderTop: '1px solid #EDEFF2', display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 8 }}>{footer}</footer>}
      </div>
    </div>
  );
  return ReactDOM.createPortal(modal, document.body);
};

// 数据看板 — coming soon, previews planned modules so it isn't a dead icon
const DashboardComingSoon = ({ onClose }) => {
  useLucide();
  const bars = [62, 78, 45, 88, 70, 53];
  return (
    <div style={{ flex: 1, minWidth: 0, height: '100%', overflowY: 'auto', background: '#F5F6F7' }}>
      <div style={{ background: '#fff', borderBottom: '1px solid #DEE0E3' }}>
        <div style={{ maxWidth: 960, margin: '0 auto', width: '100%', padding: '20px 32px' }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <h1 style={{ fontSize: 24, lineHeight: '32px', fontWeight: 600, color: '#1F2329', margin: 0 }}>数据看板</h1>
                <Tag tone="info" dot>即将上线</Tag>
              </div>
              <p style={{ fontSize: 13, color: '#646A73', margin: '6px 0 0' }}>验证「精选时间线」的核心假设：精选流点击率是否高于全量流。以下为规划中的看板模块预览。</p>
            </div>
            <Button variant="text" icon="arrow-left" onClick={onClose}>返回时间线</Button>
          </div>
        </div>
      </div>
      <div style={{ maxWidth: 960, margin: '0 auto', width: '100%', padding: '20px 32px 40px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 }}>
        {/* 点击率对比 */}
        <div style={{ border: '1px solid #DEE0E3', borderRadius: 8, background: '#fff', padding: 16 }}>
          <div style={{ fontSize: 14, fontWeight: 500, color: '#1F2329', marginBottom: 4 }}>精选 vs 全量 点击率</div>
          <div style={{ fontSize: 12, color: '#8F959E', marginBottom: 14 }}>核心假设验证指标</div>
          <svg width="100%" height="110" viewBox="0 0 240 110" preserveAspectRatio="none" style={{ display: 'block' }}>
            <polyline points="0,80 48,66 96,58 144,40 192,30 240,22" fill="none" stroke="#1456F0" strokeWidth="2" />
            <polyline points="0,92 48,88 96,84 144,82 192,78 240,76" fill="none" stroke="#C9CDD4" strokeWidth="2" strokeDasharray="4 4" />
          </svg>
          <div style={{ display: 'flex', gap: 16, marginTop: 10, fontSize: 12 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: '#1456F0' }}><span style={{ width: 10, height: 2, background: '#1456F0' }} />精选流</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: '#8F959E' }}><span style={{ width: 10, height: 2, background: '#C9CDD4' }} />全量流</span>
          </div>
        </div>
        {/* 来源质量分布 */}
        <div style={{ border: '1px solid #DEE0E3', borderRadius: 8, background: '#fff', padding: 16 }}>
          <div style={{ fontSize: 14, fontWeight: 500, color: '#1F2329', marginBottom: 4 }}>来源质量分布</div>
          <div style={{ fontSize: 12, color: '#8F959E', marginBottom: 14 }}>各来源平均质量分</div>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 10, height: 110 }}>
            {bars.map((b, i) => (
              <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', height: '100%' }}>
                <div style={{ height: `${b}%`, background: i % 2 ? '#A8C3FB' : '#1456F0', borderRadius: '4px 4px 0 0' }} />
              </div>
            ))}
          </div>
        </div>
        {/* 标签热度 */}
        <div style={{ border: '1px solid #DEE0E3', borderRadius: 8, background: '#fff', padding: 16 }}>
          <div style={{ fontSize: 14, fontWeight: 500, color: '#1F2329', marginBottom: 4 }}>标签热度</div>
          <div style={{ fontSize: 12, color: '#8F959E', marginBottom: 14 }}>近 7 天各标签资讯量</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {[['新茶饮', 22], ['无糖代糖', 18], ['咖啡', 15], ['植物基', 12], ['并购融资', 9], ['功能性', 7]].map(([n, v]) => (
              <span key={n} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, height: 28, padding: '0 10px', borderRadius: 9999, background: '#F2F3F5', fontSize: 12 + Math.min(4, Math.floor(v / 6)), color: '#646A73' }}>
                {n}<span style={{ fontFamily: 'var(--font-mono)', color: '#8F959E' }}>{v}</span>
              </span>
            ))}
          </div>
        </div>
      </div>
      <div style={{ maxWidth: 960, margin: '0 auto', width: '100%', padding: '0 32px 40px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '14px 16px', background: '#EBF1FE', borderRadius: 8, color: '#0F4DD1', fontSize: 13 }}>
          <Icon name="info" size={16} />数据看板将在 V1 接入真实埋点后开放（精选/全量点击率、来源质量分布、标签热度）。
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Toaster, Placeholder, Modal, DashboardComingSoon });