import React from "react";
import { Avatar } from "../core/Avatar";

function ensureStyle(id, css) {
  if (typeof document === "undefined") return;
  if (document.getElementById(id)) return;
  const el = document.createElement("style");
  el.id = id; el.textContent = css;
  document.head.appendChild(el);
}

ensureStyle("at-eventlog", `
  .at-eventlog{font-family:var(--font-sans)}
  .at-eventlog__head{display:flex;align-items:baseline;gap:10px;margin-bottom:16px}
  .at-eventlog__heading{font-family:var(--font-display);font-size:24px;font-weight:600;color:var(--fg-1)}
  .at-eventlog__meta{font-size:13px;color:var(--fg-4)}
  .at-eventlog__note{margin-left:auto;font-size:13px;color:var(--fg-4)}
  .at-eventlog__list{position:relative;display:grid;gap:14px;padding-left:30px}
  .at-eventlog__list::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:var(--border-subtle)}
  .at-eventlog__item{position:relative}
  .at-eventlog__node{position:absolute;left:-30px;top:14px;width:22px;height:22px;border-radius:50%;
    background:var(--bg-page);border:2px solid var(--border-subtle);display:grid;place-items:center}
  .at-eventlog__node-dot{width:7px;height:7px;border-radius:50%;background:var(--at-plum-400)}
  .at-eventlog__node--planned{border-color:var(--at-warning-fg)}
  .at-eventlog__node--planned .at-eventlog__node-dot{background:var(--at-warning-fg)}
  .at-eventlog__card{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-page);padding:14px 16px}
  .at-eventlog__card-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
  .at-eventlog__kind{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
    letter-spacing:0.08em;text-transform:uppercase;color:var(--at-flush-700)}
  .at-eventlog__kind svg{width:15px;height:15px}
  .at-eventlog__id{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--fg-4);
    background:var(--at-plum-100);padding:1px 6px;border-radius:var(--radius-xs)}
  .at-eventlog__date{font-size:12px;color:var(--fg-3);font-variant-numeric:tabular-nums}
  .at-eventlog__title{font-size:15px;font-weight:600;color:var(--fg-1);margin-bottom:8px}
  .at-eventlog__badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
  .at-eventlog__badge{display:inline-flex;gap:6px;align-items:baseline;background:var(--at-plum-100);
    border-radius:var(--radius-sm);padding:3px 9px;font-size:12px}
  .at-eventlog__badge-k{color:var(--fg-4)}
  .at-eventlog__badge-v{color:var(--at-flush-700);font-weight:500}
  .at-eventlog__foot{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--fg-3)}
  .at-eventlog__by{color:var(--fg-2);font-weight:500}
`);

/**
 * Append-only event log shell: a vertical timeline of event cards (kind + icon,
 * event id, date, title, key/value badges, author + relative time). Content-
 * agnostic; the applied ledger event log in ui_kits/app feeds it real records.
 * Every change is a new record — the log never mutates in place.
 */
export function EventLog({ title = "Event log", meta, note, events = [] }) {
  return (
    <div className="at-eventlog">
      <div className="at-eventlog__head">
        <span className="at-eventlog__heading">{title}</span>
        {meta && <span className="at-eventlog__meta">{meta}</span>}
        {note && <span className="at-eventlog__note">{note}</span>}
      </div>
      <div className="at-eventlog__list">
        {events.map((ev, i) => (
          <div key={i} className="at-eventlog__item">
            <span className={"at-eventlog__node" + (ev.planned ? " at-eventlog__node--planned" : "")}>
              <span className="at-eventlog__node-dot" />
            </span>
            <div className="at-eventlog__card">
              <div className="at-eventlog__card-head">
                <span className="at-eventlog__kind">{ev.icon}{ev.kindLabel}</span>
                {ev.id != null && <span className="at-eventlog__id">{ev.id}</span>}
                {ev.date && <span className="at-eventlog__date">{ev.date}</span>}
              </div>
              {ev.title && <div className="at-eventlog__title">{ev.title}</div>}
              {ev.badges && ev.badges.length > 0 && (
                <div className="at-eventlog__badges">
                  {ev.badges.map((b, bi) => (
                    <span key={bi} className="at-eventlog__badge">
                      <span className="at-eventlog__badge-k">{b.label}</span>
                      <span className="at-eventlog__badge-v">{b.value}</span>
                    </span>
                  ))}
                </div>
              )}
              {ev.author && (
                <div className="at-eventlog__foot">
                  <Avatar name={ev.author.name} kind={ev.author.kind} size="sm" />
                  <span>by <span className="at-eventlog__by">{ev.author.name}</span></span>
                  {ev.when && <span>· {ev.when}</span>}
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}