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-scrubber", `
  .at-scrubber{position:relative;color:#fff;background:var(--bg-dark);border:1px solid rgba(255,255,255,0.07);
    border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:20px 24px 24px;font-family:var(--font-sans)}
  .at-scrubber__head{display:flex;align-items:flex-start;gap:12px;margin-bottom:22px}
  .at-scrubber__sliders{width:24px;height:24px;margin-top:7px;display:flex;flex-direction:column;justify-content:center;gap:6px;color:var(--at-flush-400)}
  .at-scrubber__sliders span{position:relative;width:20px;height:1.5px;border-radius:2px;background:currentColor}
  .at-scrubber__sliders span::after{content:"";position:absolute;top:-2.5px;width:5px;height:5px;border:1.5px solid currentColor;border-radius:50%;background:var(--bg-dark)}
  .at-scrubber__sliders span:nth-child(1)::after{left:11px}
  .at-scrubber__sliders span:nth-child(2)::after{left:3px}
  .at-scrubber__sliders span:nth-child(3)::after{left:14px}
  .at-scrubber__title{font-family:var(--font-display);font-size:28px;line-height:32px;font-weight:600;letter-spacing:-0.01em}
  .at-scrubber__sub{margin-top:4px;color:rgba(255,255,255,0.58);font-size:13px;line-height:18px}
  .at-scrubber__date{margin-left:auto;padding-top:3px;color:var(--at-flush-400);font-family:var(--font-display);font-size:24px;line-height:30px;font-weight:600;letter-spacing:-0.015em}
  .at-scrubber__axis{position:relative;height:86px;margin:0 3px 34px;border-radius:12px;background:rgba(255,255,255,0.05)}
  .at-scrubber__tick{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,0.12)}
  .at-scrubber__tick label{position:absolute;bottom:-22px;left:0;transform:translateX(-50%);color:rgba(255,255,255,0.56);font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;white-space:nowrap}
  .at-scrubber__event{position:absolute;top:28px;width:12px;height:12px;margin-left:-6px;border-radius:50%;box-shadow:0 0 0 2px var(--bg-dark)}
  .at-scrubber__dot{width:8px;height:8px;border-radius:50%}
  .at-scrubber .is-hire{background:var(--at-success-on-dark)}
  .at-scrubber .is-move{background:var(--at-flush-400)}
  .at-scrubber .is-role{background:var(--at-role)}
  .at-scrubber .is-end{background:var(--at-plum-500)}
  .at-scrubber .is-planned{background:var(--at-warning-on-dark)}
  .at-scrubber__today{position:absolute;top:-10px;bottom:-10px;width:6px;margin-left:-3px;border-radius:999px;background:var(--at-flush-400);box-shadow:0 0 0 7px rgba(224,58,99,0.16)}
  .at-scrubber__today span{position:absolute;top:-22px;left:50%;transform:translateX(-50%);color:var(--at-flush-400);font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase}
  .at-scrubber__foot{display:flex;align-items:center;gap:12px;margin-bottom:18px;color:rgba(255,255,255,0.75);font-size:12px;flex-wrap:wrap}
  .at-scrubber__legend{display:flex;align-items:center;gap:6px}
  .at-scrubber__spacer{flex:1}
  .at-scrubber__jump{height:28px;padding:0 10px;border:1px solid rgba(255,255,255,0.14);border-radius:var(--radius-md);background:rgba(255,255,255,0.065);color:#fff;font-size:12px;font-weight:600;cursor:pointer}
  .at-scrubber__events{border-top:1px solid rgba(255,255,255,0.1);padding-top:18px}
  .at-scrubber__events-label{margin-bottom:12px;color:rgba(255,255,255,0.48);font-size:10px;font-weight:600;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase}
  .at-scrubber__chips{display:flex;flex-wrap:wrap;gap:10px}
  .at-scrubber__chip{display:inline-flex;align-items:center;gap:12px;height:36px;min-width:168px;padding:0 12px;border:1px solid rgba(36,20,32,0.24);border-radius:var(--radius-md);background:#fff;color:var(--at-black);font-size:12px;font-weight:600}
  .at-scrubber__chip span{color:var(--at-flush-700);font-weight:500}
`);

const DEFAULT_LEGEND = [
  { kind: "hire", label: "Hire" },
  { kind: "move", label: "Move" },
  { kind: "role", label: "Role change" },
  { kind: "end", label: "End" },
  { kind: "planned", label: "Planned" },
];

/**
 * The dark time-machine scrubber shell: a header (title + serif view date), a
 * timeline axis with ticks, ledger-event dots colour-coded by kind, and a flush
 * today cursor, a legend and jump buttons, and an upcoming-events chip row. It is
 * presentational; the applied scrubber in ui_kits/app feeds it from the ledger
 * and recomputes viewDate across the app.
 */
export function Scrubber({
  title = "Time machine",
  subtitle,
  date,
  ticks = [],
  events = [],
  today,
  legend = DEFAULT_LEGEND,
  jumps = [],
  upcoming = [],
}) {
  return (
    <div className="at-scrubber" aria-label="Time machine scrubber">
      <header className="at-scrubber__head">
        <div className="at-scrubber__sliders" aria-hidden="true"><span /><span /><span /></div>
        <div>
          <div className="at-scrubber__title">{title}</div>
          {subtitle && <div className="at-scrubber__sub">{subtitle}</div>}
        </div>
        {date && <div className="at-scrubber__date">{date}</div>}
      </header>
      <div className="at-scrubber__axis">
        {ticks.map((tick, i) => (
          <div key={"t" + i} className="at-scrubber__tick" style={{ left: tick.at + "%" }}>
            {tick.label && <label>{tick.label}</label>}
          </div>
        ))}
        {events.map((ev, i) => (
          <span key={"e" + i} className={"at-scrubber__event is-" + ev.kind} style={{ left: ev.at + "%" }} />
        ))}
        {today && (
          <span className="at-scrubber__today" style={{ left: today.at + "%" }}>
            <span>{today.label || "Today"}</span>
          </span>
        )}
      </div>
      <footer className="at-scrubber__foot">
        {legend.map((item, i) => (
          <span key={"l" + i} className="at-scrubber__legend">
            <span className={"at-scrubber__dot is-" + item.kind} />{item.label}
          </span>
        ))}
        <span className="at-scrubber__spacer" />
        {jumps.map((jump, i) => (
          <button key={"j" + i} type="button" className="at-scrubber__jump" onClick={jump.onClick}>{jump.label}</button>
        ))}
      </footer>
      {upcoming.length > 0 && (
        <div className="at-scrubber__events">
          <div className="at-scrubber__events-label">Upcoming events · jump to</div>
          <div className="at-scrubber__chips">
            {upcoming.map((item, i) => (
              <div key={"u" + i} className="at-scrubber__chip"><span>{item.date}</span>{item.label}</div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}