// HistorySidebar — slide-in right rail of recently opened policy files.
// Default closed; toggled by the History button in the Header.

function HistorySidebar({ open, onClose, items, onOpen, onClear }) {
  // Render dimmed when closed so transitions still work
  return (
    <>
      {open && <div className="pv-history-scrim" onClick={onClose} />}
      <aside className={cx("pv-history", open && "is-open")} data-screen-label="History sidebar">
        <div className="pv-history-head">
          <span className="pv-history-title">History</span>
          <span className="pv-history-count">{items.length} item{items.length === 1 ? "" : "s"}</span>
          <button className="pv-history-close" onClick={onClose} aria-label="Close history">
            <Icon name="x" size={14} />
          </button>
        </div>
        {items.length === 0 ? (
          <div className="pv-history-empty">
            <div>No history yet.</div>
            <div className="hint">Opened files will appear here.</div>
          </div>
        ) : (
          <>
            <ul className="pv-history-list">
              {items.map((it) => (
                <li key={it.openedAt} className="pv-history-item" onClick={() => onOpen(it)}>
                  <div className="pv-history-item-head">
                    <span className="pv-history-id">{it.id}</span>
                    <span className="pv-history-when">{relativeTime(it.openedAt)}</span>
                  </div>
                  <div className="pv-history-name">{it.name}</div>
                  <div className="pv-history-meta">
                    <span className={cx("pv-repo-pill", it.repo === "common" && "is-common")}>{it.repo || it.source.toLowerCase()}</span>
                    <span className="pv-history-source">{it.source}</span>
                  </div>
                </li>
              ))}
            </ul>
            <div className="pv-history-foot">
              <button className="pv-mini-btn" onClick={onClear}>Clear history</button>
            </div>
          </>
        )}
      </aside>
    </>
  );
}

function relativeTime(ts) {
  const s = Math.round((Date.now() - ts) / 1000);
  if (s < 60) return `${s}s ago`;
  const m = Math.round(s / 60);
  if (m < 60) return `${m}m ago`;
  const h = Math.round(m / 60);
  if (h < 24) return `${h}h ago`;
  const d = Math.round(h / 24);
  return `${d}d ago`;
}

Object.assign(window, { HistorySidebar });