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-conflict-banner", `
  .at-conflict{min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    gap:var(--space-sm);padding:var(--space-xl);font-family:var(--font-sans);color:var(--fg-2)}
  .at-conflict__icon{width:44px;height:44px;border-radius:var(--radius-pill);display:grid;place-items:center;
    background:var(--at-warning-bg);color:var(--at-warning-fg);font-size:22px;font-weight:700}
  .at-conflict__title{font-family:var(--font-display);font-size:22px;line-height:28px;font-weight:600;color:var(--fg-1)}
  .at-conflict__message{max-width:360px;font-size:13px;line-height:18px;color:var(--fg-3)}
  .at-conflict__actions{display:flex;gap:var(--space-xs);margin-top:var(--space-xs)}
  .at-conflict__button{height:28px;padding:0 11px;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);
    background:var(--at-white);color:var(--fg-1);font-family:var(--font-sans);font-size:12px;font-weight:700;cursor:pointer}
  .at-conflict__button:focus-visible{outline:none;box-shadow:var(--ring-accent);border-color:var(--at-flush-600)}
  .at-conflict__button--primary{background:var(--at-flush-600);border-color:var(--at-flush-600);color:var(--at-white)}
  .at-conflict__button--ghost{background:transparent;border-color:transparent;color:var(--fg-3)}
  .at-conflict__button--ghost:hover{background:var(--at-plum-100);color:var(--fg-1)}
`);

/**
 * Drawer-body replacement for concurrency conflicts.
 */
export function ConflictBanner({ message, onReload, onDiscard }) {
  return (
    <div className="at-conflict" role="alert">
      <div className="at-conflict__icon" aria-hidden="true">!</div>
      <div className="at-conflict__title">This drawer is out of date</div>
      <p className="at-conflict__message">{message}</p>
      <div className="at-conflict__actions">
        <button type="button" className="at-conflict__button at-conflict__button--primary" onClick={onReload}>Reload</button>
        <button type="button" className="at-conflict__button at-conflict__button--ghost" onClick={onDiscard}>Discard</button>
      </div>
    </div>
  );
}