/* global React, DCCart, DCIcons */
/* ─────────────────────────────────────────────
   Cart Drawer + Add-to-cart toast
   ───────────────────────────────────────────── */

const { useEffect, useState, useRef, useCallback } = React;

/* small inline icons (so we don't depend on whether icons.jsx is loaded) */
const ICX = (path, size = 18) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
    strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">{path}</svg>
);
const IcClose = () => ICX(<><path d="M6 6l12 12"/><path d="M18 6L6 18"/></>);
const IcPlus  = () => ICX(<><path d="M12 5v14"/><path d="M5 12h14"/></>, 14);
const IcMinus = () => ICX(<path d="M5 12h14"/>, 14);
const IcTrash = () => ICX(<><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></>, 16);
const IcArrow = () => ICX(<><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></>, 16);
const IcShield = () => ICX(<path d="M12 2 4 6v6c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V6l-8-4Z"/>, 16);
const IcTruck = () => ICX(<><rect x="2" y="7" width="11" height="9" rx="1"/><path d="M13 10h4l3 3v3h-7"/><circle cx="6.5" cy="17.5" r="1.6"/><circle cx="16.5" cy="17.5" r="1.6"/></>, 16);
const IcCheck = () => ICX(<path d="M5 12.5l4.5 4.5L19 7"/>, 16);
const IcSpark = () => ICX(<path d="M12 3l1.8 5.5L19 10l-5.2 1.5L12 17l-1.8-5.5L5 10l5.2-1.5L12 3Z"/>, 16);

/* ── Tiny inline tire/wheel preview, color-aware ── */
function TirePreview({ kind, finish }) {
  const isWheel = kind === "wheel";
  const tread = "#1a1a1a";
  const rim = isWheel ? (finish?.swatch || "#9aa0a6") : "#222";
  return (
    <svg viewBox="0 0 60 60" width="56" height="56" aria-hidden="true">
      <defs>
        <radialGradient id="tireShadow" cx="50%" cy="50%" r="50%">
          <stop offset="60%" stopColor={tread} stopOpacity="1"/>
          <stop offset="100%" stopColor="#000" stopOpacity=".9"/>
        </radialGradient>
      </defs>
      <circle cx="30" cy="30" r="28" fill="url(#tireShadow)"/>
      <circle cx="30" cy="30" r="22" fill="none" stroke="#0e0e0e" strokeWidth=".8"/>
      <circle cx="30" cy="30" r="18" fill={rim}/>
      {/* spokes */}
      {Array.from({length: 5}).map((_, i) => {
        const a = (i / 5) * Math.PI * 2;
        const x2 = 30 + Math.cos(a) * 16;
        const y2 = 30 + Math.sin(a) * 16;
        return <line key={i} x1="30" y1="30" x2={x2} y2={y2} stroke={isWheel ? "#0a0a0a" : "#111"} strokeWidth={isWheel ? "2.4" : "1.6"}/>;
      })}
      <circle cx="30" cy="30" r="4.5" fill={isWheel ? "#0a0a0a" : "#1a1a1a"}/>
      <circle cx="30" cy="30" r="1.8" fill="#666"/>
    </svg>
  );
}

/* ── Add-to-cart toast (auto-shows briefly when an item is added) ── */
function CartToast() {
  const [item, setItem] = useState(null);
  const tRef = useRef(null);
  useEffect(() => {
    const onAdd = (e) => {
      setItem(e.detail.item);
      clearTimeout(tRef.current);
      tRef.current = setTimeout(() => setItem(null), 2400);
    };
    window.addEventListener("dc:cart:added", onAdd);
    return () => { window.removeEventListener("dc:cart:added", onAdd); clearTimeout(tRef.current); };
  }, []);
  if (!item) return null;
  return (
    <div className="dc-toast" role="status" aria-live="polite">
      <div className="dc-toast-icon"><IcCheck/></div>
      <div className="dc-toast-body">
        <div className="dc-toast-title">Tillagd i varukorgen</div>
        <div className="dc-toast-sub">{item.title}{item.qty > 1 ? ` · ${item.qty} st` : ""}</div>
      </div>
      <button className="dc-toast-cta" onClick={() => DCCart.open()}>Visa <IcArrow/></button>
    </div>
  );
}

/* ── Drawer ── */
function CartDrawer() {
  const [open, setOpen] = useState(() => !!window.__dc_cart_open_pending);
  const [items, setItems] = useState(() => DCCart.items());
  const [justAdded, setJustAdded] = useState(null);

  useEffect(() => {
    // Drain pending-open flag now that the listener is bound.
    if (window.__dc_cart_open_pending) {
      window.__dc_cart_open_pending = false;
    }
    const off = DCCart.onChange(setItems);
    const onOpen = () => setOpen(true);
    const onClose = () => setOpen(false);
    const onAdd = (e) => {
      // show the drawer briefly highlighting the new item
      setJustAdded(e.detail.item.id);
      setTimeout(() => setJustAdded(null), 1400);
    };
    window.addEventListener("dc:cart:open", onOpen);
    window.addEventListener("dc:cart:close", onClose);
    window.addEventListener("dc:cart:added", onAdd);
    return () => {
      off();
      window.removeEventListener("dc:cart:open", onOpen);
      window.removeEventListener("dc:cart:close", onClose);
      window.removeEventListener("dc:cart:added", onAdd);
    };
  }, []);

  // lock body scroll when open
  useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => { document.body.style.overflow = prev; window.removeEventListener("keydown", onKey); };
  }, [open]);

  const subtotal = items.reduce((s, it) => s + (it.price||0)*(it.qty||0), 0);
  const FREE_SHIP = 8999;
  const remaining = Math.max(0, FREE_SHIP - subtotal);
  const pct = Math.min(100, Math.round((subtotal / FREE_SHIP) * 100));

  return (
    <>
      <div className={"dc-drawer-scrim" + (open ? " on" : "")} onClick={() => setOpen(false)} aria-hidden="true"/>
      <aside className={"dc-drawer" + (open ? " on" : "")} aria-hidden={!open} aria-label="Varukorg">
        <header className="dc-drawer-head">
          <div className="dc-drawer-title">
            <span className="eyebrow">Din varukorg</span>
            <h3>{items.length === 0 ? "Tom varukorg" : `${DCCart.count()} ${DCCart.count() === 1 ? "vara" : "varor"}`}</h3>
          </div>
          <button className="dc-drawer-close" onClick={() => setOpen(false)} aria-label="Stäng"><IcClose/></button>
        </header>

        {items.length > 0 && (
          <div className="dc-ship-progress">
            {remaining > 0 ? (
              <div className="dc-ship-text">
                <IcTruck/> <span>Lägg till <b>{remaining.toLocaleString("sv-SE")} kr</b> för fri frakt</span>
              </div>
            ) : (
              <div className="dc-ship-text dc-ship-done">
                <IcSpark/> <span><b>Du har fri frakt!</b> Snabb leverans</span>
              </div>
            )}
            <div className="dc-ship-bar">
              <div className="dc-ship-fill" style={{width: pct + "%"}}/>
            </div>
          </div>
        )}

        <div className="dc-drawer-body">
          {items.length === 0 ? (
            <CartEmpty onClose={() => setOpen(false)}/>
          ) : (
            <ul className="dc-cart-list">
              {items.map(it => (
                <CartLine key={it.id} item={it} flash={justAdded === it.id}/>
              ))}
            </ul>
          )}
        </div>

        {items.length > 0 && (
          <footer className="dc-drawer-foot">
            <div className="dc-totals">
              <div className="dc-total-row">
                <span>Delsumma</span><span>{subtotal.toLocaleString("sv-SE")} kr</span>
              </div>
              <div className="dc-total-row dc-total-mute">
                <span>Frakt</span>
                <span>{remaining > 0 ? "Beräknas i kassan" : "0 kr"}</span>
              </div>
              <div className="dc-total-row dc-total-grand">
                <span>Totalt</span>
                <span>{subtotal.toLocaleString("sv-SE")} kr</span>
              </div>
              <div className="dc-vat">inkl. moms</div>
            </div>
            <a href="checkout.html" className="dc-checkout-btn">
              Till kassan
              <span className="arrow"><IcArrow/></span>
            </a>
            <div className="dc-trust-row">
              <span><IcShield/> Säker betalning</span>
              <span><IcTruck/> Snabb leverans</span>
              <span><IcCheck/> 14 dagars öppet köp</span>
            </div>
          </footer>
        )}
      </aside>
    </>
  );
}

function CartLine({ item, flash }) {
  const [removing, setRemoving] = useState(false);
  const handleRemove = () => {
    setRemoving(true);
    setTimeout(() => DCCart.remove(item.id), 220);
  };
  return (
    <li className={"dc-cart-line" + (flash ? " flash" : "") + (removing ? " removing" : "")}>
      <div className="dc-cart-img">
        <TirePreview kind={item.kind} finish={item.finish}/>
      </div>
      <div className="dc-cart-meta">
        <div className="dc-cart-brand">{item.brand || ""}</div>
        <div className="dc-cart-title">{item.title}</div>
        {item.specs && <div className="dc-cart-specs">{item.specs}</div>}
        <div className="dc-cart-bottom">
          <div className="dc-qty">
            <button onClick={() => DCCart.setQty(item.id, item.qty - 1)} aria-label="Minska" disabled={item.qty <= 1}><IcMinus/></button>
            <span className="dc-qty-val">{item.qty}</span>
            <button onClick={() => DCCart.setQty(item.id, item.qty + 1)} aria-label="Öka"><IcPlus/></button>
          </div>
          <div className="dc-cart-price">{(item.price * item.qty).toLocaleString("sv-SE")} kr</div>
        </div>
      </div>
      <button className="dc-cart-remove" onClick={handleRemove} aria-label="Ta bort">
        <IcTrash/>
      </button>
    </li>
  );
}

function CartEmpty({ onClose }) {
  return (
    <div className="dc-cart-empty">
      <div className="dc-cart-empty-art" aria-hidden="true">
        <TirePreview kind="tire"/>
      </div>
      <h4>Din varukorg är tom</h4>
      <p>Hitta däck eller fälgar — vi monterar och balanserar.</p>
      <div className="dc-cart-empty-actions">
        <a href="dack.html" className="btn btn-accent" onClick={onClose}>Bläddra däck <span className="arrow"><IcArrow/></span></a>
        <a href="dc-wheels.html" className="btn btn-ghost" onClick={onClose}>DC Wheels</a>
      </div>
    </div>
  );
}

/* ── Header pill — exported for header.jsx to render ── */
function CartPillButton() {
  const [count, setCount] = useState(() => DCCart.count());
  const [pulse, setPulse] = useState(false);
  useEffect(() => {
    const off = DCCart.onChange((items) => {
      setCount(items.reduce((s, it) => s + (it.qty || 0), 0));
    });
    const onAdd = () => {
      setPulse(true);
      setTimeout(() => setPulse(false), 700);
    };
    window.addEventListener("dc:cart:added", onAdd);
    return () => { off(); window.removeEventListener("dc:cart:added", onAdd); };
  }, []);
  const Cart = window.DCIcons?.IconCart;
  return (
    <button className={"cart-pill" + (pulse ? " pulse" : "")}
            onClick={() => DCCart.open()}
            aria-label={`Varukorg, ${count} varor`}>
      {Cart ? <Cart size={18}/> :
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 4h2l2.5 12h11L21 7H6"/>
          <circle cx="9" cy="20" r="1.5"/><circle cx="17" cy="20" r="1.5"/>
        </svg>
      }
      <span className={"count" + (count === 0 ? " zero" : "")}>{count}</span>
    </button>
  );
}

/* ── Mount the drawer + toast once, no matter what page is loaded ── */
function CartLayer() {
  return (<><CartDrawer/><CartToast/></>);
}

window.DCCart = window.DCCart || {};
window.DCCartUI = { CartLayer, CartPillButton, CartDrawer, CartToast };

/* Auto-mount the layer in a hidden host so any page that loads cart.jsx
   gets the drawer + toast without extra wiring. */
(function() {
  if (document.getElementById("__dc_cart_layer")) return;
  const host = document.createElement("div");
  host.id = "__dc_cart_layer";
  document.body.appendChild(host);
  // Wait until React + this script are both ready — they are by definition
  // when this IIFE runs as a babel-transpiled <script>.
  ReactDOM.createRoot(host).render(<CartLayer/>);
})();