// AlertCard — collapsible severity card. Every alert answers three questions:
// what happened, who is affected, what to do now (Brief §2.3).
// Severity glyphs are plain text geometry (● ▲ ■), never icons or emoji.
const SEV = {
  breaking: { label: 'BREAKING', color: 'var(--sev-breaking)', glyph: '●' },
  advisory: { label: 'ADVISORY', color: 'var(--sev-advisory)', glyph: '▲' },
  info:     { label: 'INFO',     color: 'var(--sev-info)',     glyph: '■' },
};
window.SEV = SEV;

function AlertCard({ t, alert, stackName }) {
  // Breaking starts expanded: it needs immediate attention.
  const [open, setOpen] = React.useState(alert.severity === 'breaking');
  const s = SEV[alert.severity];

  return (
    <div className="ew-card" style={{
      padding: 0, overflow: 'hidden', borderRadius: 12,
      borderLeftWidth: alert.severity === 'breaking' ? 3 : 1,
      borderLeftColor: alert.severity === 'breaking' ? 'var(--sev-breaking)' : 'var(--border-color)',
    }}>
      <button onClick={() => setOpen(o => !o)} aria-expanded={open} style={{
        width: '100%', display: 'flex', alignItems: 'flex-start', gap: 14, padding: '18px 20px',
        background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left', color: 'inherit',
      }}>
        <span aria-hidden="true" style={{ color: s.color, fontSize: 12, marginTop: 3, flex: 'none' }}>{s.glyph}</span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', marginBottom: 6 }}>
            <span style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.15em', color: s.color }}>{s.label}</span>
            <span style={{ fontSize: 9, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-secondary)', opacity: 0.6 }}>{stackName}</span>
            <span style={{ fontSize: 9, letterSpacing: '0.1em', color: 'var(--text-secondary)', opacity: 0.6 }}>{alert.publishedAt.slice(0, 10)}</span>
          </div>
          <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)', lineHeight: 1.4 }}>{alert.title}</div>
          {!open && <p style={{ margin: '6px 0 0', fontSize: 12, color: 'var(--text-secondary)', lineHeight: 1.5 }}>{alert.summary}</p>}
        </div>
        <span aria-hidden="true" style={{ color: 'var(--text-secondary)', fontSize: 11, marginTop: 3,
          transform: open ? 'rotate(180deg)' : 'none', transition: 'transform var(--dur-fast)', flex: 'none' }}>▾</span>
      </button>

      {open && (
        <div style={{ padding: '0 20px 20px 46px' }}>
          <p style={{ margin: '0 0 14px', fontSize: 12, color: 'var(--text-secondary)', lineHeight: 1.6 }}>{alert.summary}</p>

          <div className="label-tech" style={{ marginBottom: 8 }}>{t('card.whatToDo')}</div>
          <ul style={{ margin: '0 0 16px', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>
            {alert.action.map((a, i) => (
              <li key={i} style={{ display: 'flex', gap: 10, fontSize: 12, color: 'var(--text-primary)', lineHeight: 1.5 }}>
                <span aria-hidden="true" style={{ color: 'var(--text-secondary)', flex: 'none' }}>→</span>{a}
              </li>
            ))}
          </ul>

          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 10,
            paddingTop: 14, borderTop: '1px solid var(--border-color)' }}>
            <div>
              <div className="label-tech">{t('card.affected')}</div>
              <div className="value-tech" style={{ marginTop: 3 }}>{alert.versions}</div>
            </div>
            <a href={alert.link} target="_blank" rel="noopener noreferrer" style={{
              fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase',
              color: 'var(--text-primary)', textDecoration: 'none', border: '1px solid var(--border-color)',
              borderRadius: 6, padding: '8px 14px', whiteSpace: 'nowrap',
            }}>{t('card.changelog')} ↗</a>
          </div>
        </div>
      )}
    </div>
  );
}
window.AlertCard = AlertCard;