// ─── 跨屏复用组件 ───
const { useState: useStateC } = React;

// AI 建议卡：渐变描边 + sparkle，整个产品的招牌元素
function AICard({ tag, title, body, tone = 'accent', priority, action, onAction, compact }) {
  const T = useT();
  const app = useApp();
  const aiName = (app && app.aiName) || '老 A';
  const sw = (s) => typeof s === 'string' ? s.split('Janus').join(aiName) : s;
  tag = sw(tag); title = sw(title); body = sw(body);
  const toneColor = tone === 'good' ? T.good : tone === 'warn' ? T.warn : tone === 'bad' ? T.bad : T.accent;
  return (
    <div style={{ position: 'relative', borderRadius: 16, padding: 1.2, background: `linear-gradient(135deg, ${hexA(toneColor, 0.55)}, ${hexA(T.acc2, 0.30)} 60%, ${hexA(toneColor, 0.10)})` }}>
      <div style={{
        background: T.dark ? 'linear-gradient(180deg,#141A26,#11161F)' : 'linear-gradient(180deg,#FFFFFF,#FBFCFE)',
        borderRadius: 15, padding: compact ? '12px 14px' : '14px 15px',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 7 }}>
          <Sparkle size={13} color={toneColor} />
          <span style={{ fontSize: 10.5, fontWeight: 800, letterSpacing: 0.7, color: toneColor, textTransform: 'uppercase' }}>{tag}</span>
          {priority != null && (
            <span style={{ marginLeft: 'auto', fontSize: 10, fontWeight: 700, color: T.faint }}>优先级 {priority}</span>
          )}
        </div>
        <div style={{ fontSize: 14.5, fontWeight: 700, color: T.text, lineHeight: 1.4, marginBottom: body ? 5 : 0, letterSpacing: -0.2 }}>{title}</div>
        {body && <div style={{ fontSize: 12.8, color: T.sub, lineHeight: 1.6 }}>{body}</div>}
        {action && (
          <button onClick={onAction} style={{
            marginTop: 11, width: '100%', border: 'none', cursor: 'pointer',
            background: hexA(toneColor, T.dark ? 0.16 : 0.10), color: toneColor,
            fontSize: 12.5, fontWeight: 700, fontFamily: FONT, padding: '9px 0', borderRadius: 10,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
          }}>
            {action} <Icon name="arrowRight" size={15} color={toneColor} />
          </button>
        )}
      </div>
    </div>
  );
}

function PrimaryButton({ children, onClick, icon, tone = 'accent', style = {} }) {
  const T = useT();
  const c = tone === 'good' ? T.good : tone === 'bad' ? T.bad : T.accent;
  return (
    <button onClick={onClick} style={{
      width: '100%', border: 'none', cursor: 'pointer', fontFamily: FONT,
      background: `linear-gradient(135deg, ${c}, ${hexA(T.acc2, 0.92)})`,
      color: '#fff', fontSize: 15, fontWeight: 700, padding: '14px 0', borderRadius: 14,
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      boxShadow: `0 6px 18px ${hexA(c, 0.35)}`, letterSpacing: 0.2, ...style,
    }}>
      {icon && <Icon name={icon} size={18} color="#fff" />}{children}
    </button>
  );
}

function GhostButton({ children, onClick, icon, style = {} }) {
  const T = useT();
  return (
    <button onClick={onClick} style={{
      border: `1px solid ${T.line2}`, cursor: 'pointer', fontFamily: FONT,
      background: T.surface2, color: T.text, fontSize: 13.5, fontWeight: 600,
      padding: '11px 14px', borderRadius: 12,
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7, ...style,
    }}>
      {icon && <Icon name={icon} size={16} color={T.sub} />}{children}
    </button>
  );
}

// 推屏头部
function ScreenHeader({ title, sub, onBack, right, accent }) {
  const T = useT();
  const app = useApp();
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10, padding: '6px 4px 14px',
    }}>
      {onBack && (
        <button onClick={onBack} style={{
          width: 38, height: 38, borderRadius: 12, border: `1px solid ${T.line}`,
          background: T.surface, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <Icon name="back" size={19} color={T.text} />
        </button>
      )}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 19, fontWeight: 800, color: T.text, letterSpacing: -0.4, lineHeight: 1.2 }}>{title}</div>
        {sub && <div style={{ fontSize: 12, color: T.sub, marginTop: 2 }}>{sub}</div>}
      </div>
      {right}
      {app && app.home && (
        <button onClick={app.home} title="回主页" style={{
          width: 38, height: 38, borderRadius: 12, border: `1px solid ${T.line}`,
          background: T.surface, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <Icon name="home" size={18} color={T.sub} />
        </button>
      )}
    </div>
  );
}

// BANT 小卡
function BantChip({ k, label, value, done, hint, isNew }) {
  const T = useT();
  return (
    <div style={{
      background: isNew ? T.accSoft : T.surface2, borderRadius: 13, padding: '11px 12px',
      border: `1px solid ${isNew ? T.accLine : T.line}`, position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
        <span style={{
          width: 20, height: 20, borderRadius: 7, fontSize: 11, fontWeight: 800,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: done ? T.goodBg : isNew ? T.accSoft : T.line2,
          color: done ? T.good : isNew ? T.accent : T.faint,
        }}>{k}</span>
        <span style={{ fontSize: 11.5, color: T.sub, fontWeight: 600 }}>{label}</span>
        {done && <Icon name="check" size={14} color={T.good} style={{ marginLeft: 'auto' }} />}
        {isNew && !done && <Tag tone="accent" style={{ marginLeft: 'auto', fontSize: 9.5, padding: '2px 7px' }}>更新</Tag>}
      </div>
      <div style={{ fontSize: 13, fontWeight: 700, color: T.text, lineHeight: 1.35 }}>{value}</div>
      {hint && <div style={{ fontSize: 10.5, color: T.warn, marginTop: 4, fontWeight: 600 }}>{hint}</div>}
    </div>
  );
}

Object.assign(window, { AICard, PrimaryButton, GhostButton, ScreenHeader, BantChip, NoteCard });

// 笔记卡（在档案中浮现）
function NoteCard({ note, onClick }) {
  const T = useT();
  const when = new Date(note.ts);
  const stamp = `${when.getMonth() + 1}/${when.getDate()} ${String(when.getHours()).padStart(2, '0')}:${String(when.getMinutes()).padStart(2, '0')}`;
  return (
    <div data-testid="note-card" onClick={onClick} style={{ background: T.surface2, border: `1px solid ${T.line}`, borderLeft: `3px solid ${T.accent}`, borderRadius: 12, padding: '11px 13px', marginBottom: 8, cursor: onClick ? 'pointer' : 'default' }}>
      {note.text && note.text.trim()
        ? <div style={{ fontSize: 12.8, color: T.text, lineHeight: 1.55, whiteSpace: 'pre-wrap' }}>{note.text}</div>
        : <div style={{ fontSize: 12.5, color: T.faint, fontStyle: 'normal' }}>（仅附件，无文字）</div>}
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 8, flexWrap: 'wrap' }}>
        {(note.links || []).map((l, i) => (
          <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 10, fontWeight: 600, color: T.accent, background: T.accSoft, padding: '2px 7px', borderRadius: 999 }}>@{l.name}</span>
        ))}
        {(note.files || []).length > 0 && (
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 10, fontWeight: 600, color: T.sub, background: T.surface, border: `1px solid ${T.line}`, padding: '2px 7px', borderRadius: 999 }}>
            <Icon name="paperclip" size={10} color={T.sub} />{note.files.length}
          </span>
        )}
        <span style={{ marginLeft: 'auto', fontSize: 10, color: T.faint, fontFamily: NUMF }}>{stamp}</span>
      </div>
    </div>
  );
}