import React from "react";

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-timeline", `
  .at-timeline{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-page);
    padding:20px 24px 22px;font-family:var(--font-sans);--at-tl-label:140px}
  .at-timeline__head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
  .at-timeline__eyebrow{font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-2)}
  .at-timeline__range{font-size:13px;color:var(--fg-4)}
  .at-timeline__axis{display:grid;grid-template-columns:var(--at-tl-label) 1fr;margin-bottom:10px}
  .at-timeline__axis-track{display:flex;border-bottom:1px solid var(--border-subtle)}
  .at-timeline__month{flex:1;padding:0 0 8px 8px;font-size:12px;font-weight:600;letter-spacing:0.08em;
    text-transform:uppercase;color:var(--fg-4);border-left:1px dotted var(--border-subtle)}
  .at-timeline__row{display:grid;grid-template-columns:var(--at-tl-label) 1fr;align-items:center;padding:7px 0}
  .at-timeline__label{font-size:13px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--fg-2)}
  .at-timeline__track{position:relative;height:30px;border-radius:var(--radius-sm);background:var(--at-plum-100)}
  .at-timeline__bar{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0 12px;
    border-radius:var(--radius-sm);background:var(--at-plum-900);color:#fff;font-size:13px;font-weight:500;
    white-space:nowrap;overflow:hidden}
  .at-timeline__today{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;border-radius:2px;
    background:var(--at-flush-600);box-shadow:0 0 0 4px rgba(224,58,99,0.14)}
`);

/**
 * Assignment timeline (Gantt) layout shell: a month axis, labelled lanes, and
 * bars positioned by date range with a flush today marker. Content-agnostic —
 * the applied person/team timelines in ui_kits/app feed it from the ledger.
 * Positions (`from`/`to`/`today`) are 0-100 along the axis.
 */
export function Timeline({ title = "Timeline", meta, range, months = [], rows = [], today }) {
  return (
    <div className="at-timeline">
      <div className="at-timeline__head">
        <span className="at-timeline__eyebrow">{title}{meta ? " · " + meta : ""}</span>
        {range && <span className="at-timeline__range">{range}</span>}
      </div>
      <div className="at-timeline__axis">
        <div />
        <div className="at-timeline__axis-track">
          {months.map((m, i) => <span key={i} className="at-timeline__month">{m}</span>)}
        </div>
      </div>
      {rows.map((row, ri) => (
        <div key={ri} className="at-timeline__row">
          <div className="at-timeline__label">{row.label}</div>
          <div className="at-timeline__track">
            {(row.bars || []).map((bar, bi) => (
              <div
                key={bi}
                className="at-timeline__bar"
                style={{ left: bar.from + "%", width: (bar.to - bar.from) + "%", background: bar.color || undefined }}
              >
                {bar.label}
              </div>
            ))}
            {today != null && <span className="at-timeline__today" style={{ left: today + "%" }} />}
          </div>
        </div>
      ))}
    </div>
  );
}