const css = `
.m-ev{font-family:var(--mono);padding:7px 0 7px 12px;border-bottom:1px solid var(--line-soft);position:relative;font-size:11.5px;color:var(--ink);animation:maestro-rise .25s ease both;list-style:none}
.m-ev::before{content:'';position:absolute;left:0;top:13px;width:5px;height:5px;background:var(--m-ev-c,var(--muted));border-radius:1.5px}
.m-ev-head{display:flex;gap:8px;align-items:baseline}
.m-ev-type{font-weight:600;color:var(--m-ev-c,var(--ink));letter-spacing:.04em}
.m-ev-time{color:var(--faint);font-size:10.5px;margin-left:auto;flex:none}
.m-ev-detail{color:var(--muted);margin-top:1px;word-break:break-word}
`;
function ensureCss() {
  if (typeof document === 'undefined' || document.getElementById('m-ev-css')) return;
  const s = document.createElement('style'); s.id = 'm-ev-css'; s.textContent = css;
  document.head.appendChild(s);
}
const TYPE_META = {
  'task.created': ['任务创建', 'var(--green)'],
  'task.updated': ['任务更新', 'var(--muted)'],
  'status.changed': ['状态变更', 'var(--cyan)'],
  'approval.requested': ['请求审批', 'var(--violet)'],
  'approval.granted': ['审批通过', 'var(--green)'],
  'approval.rejected': ['审批驳回', 'var(--red)'],
  'run.started': ['运行开始', 'var(--cyan)'],
  'run.finished': ['运行结束', 'var(--cyan)'],
  'project.synced': ['todo 同步', 'var(--green)'],
};

export function EventItem({ type = 'task.updated', time, detail, label }) {
  ensureCss();
  const [lab, color] = TYPE_META[type] || [type, 'var(--muted)'];
  return (
    <li className="m-ev" style={{ '--m-ev-c': color }}>
      <div className="m-ev-head">
        <span className="m-ev-type">{label || lab}</span>
        {time ? <span className="m-ev-time">{time}</span> : null}
      </div>
      {detail ? <div className="m-ev-detail">{detail}</div> : null}
    </li>
  );
}