import React from "react";
import { AllocationBar } from "../data/AllocationBar";

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-allocdiff", `
  .at-allocdiff{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-sm);align-items:stretch;
    padding:12px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-tint);font-family:var(--font-sans)}
  .at-allocdiff__side{display:grid;gap:6px;min-width:0;align-content:start}
  .at-allocdiff__h{font-size:9px;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--fg-4);font-weight:700}
  .at-allocdiff__arrow{align-self:center;color:var(--fg-3);display:inline-flex}
  .at-allocdiff__list{display:grid;gap:3px}
  .at-allocdiff__row{display:flex;align-items:center;gap:6px;font-size:11px}
  .at-allocdiff__sw{width:8px;height:8px;border-radius:2px;flex:0 0 8px}
  .at-allocdiff__name{flex:1;min-width:0;color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .at-allocdiff__pct{font-variant-numeric:tabular-nums;color:var(--fg-1);font-weight:500;display:inline-flex;gap:4px;align-items:center}
  .at-alloc-delta{font-size:10px;padding:0 4px;border-radius:var(--radius-xs);font-weight:600}
  .at-alloc-delta--pos{background:var(--at-success-bg);color:var(--at-success-fg)}
  .at-alloc-delta--neg{background:var(--at-flush-100);color:var(--at-flush-700)}
`);

const ARROW = (
  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M5 12h14M13 6l6 6-6 6" />
  </svg>
);

function Side({ heading, items }) {
  return (
    <div className="at-allocdiff__side">
      <div className="at-allocdiff__h">{heading}</div>
      <AllocationBar allocations={items} height={8} />
      <div className="at-allocdiff__list">
        {items.map((it, i) => (
          <div key={i} className="at-allocdiff__row">
            <span className="at-allocdiff__sw" style={{ background: it.color }} />
            <span className="at-allocdiff__name">{it.label}</span>
            <span className="at-allocdiff__pct">
              {it.pct}%
              {it.delta != null && it.delta !== 0 && (
                <span className={"at-alloc-delta at-alloc-delta--" + (it.delta > 0 ? "pos" : "neg")}>
                  {it.delta > 0 ? "+" : ""}{it.delta}
                </span>
              )}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

/**
 * Before/after allocation for a ledger entry: two AllocationBars with
 * per-dimension rows and a signed delta on each changed group. The impact-preview
 * surface shown before committing a re-allocation event.
 */
export function AllocationDiff({ before = [], after = [], beforeLabel = "Before", afterLabel = "After" }) {
  return (
    <div className="at-allocdiff">
      <Side heading={beforeLabel} items={before} />
      <span className="at-allocdiff__arrow" aria-hidden="true">{ARROW}</span>
      <Side heading={afterLabel} items={after} />
    </div>
  );
}