/* global React */
const { useState, useRef, useEffect } = React;

/* ============================================================
   ICONS — Lucide-style outline (currentColor, 1.75 stroke)
   ============================================================ */
const ICON_PATHS = {
  calendar: '<rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>',
  clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
  pin: '<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/>',
  user: '<circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/>',
  users: '<circle cx="9" cy="8" r="3.5"/><path d="M2.5 21a6.5 6.5 0 0 1 13 0"/><path d="M16 5.5a3.5 3.5 0 0 1 0 7M22 21a6.5 6.5 0 0 0-5-6.3"/>',
  mail: '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/>',
  phone: '<path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z"/>',
  message: '<path d="M21 11.5a8.4 8.4 0 0 1-9 8.4 9 9 0 0 1-3.8-.8L3 21l1.9-5.2A8.4 8.4 0 0 1 12 3a8.4 8.4 0 0 1 9 8.5Z"/>',
  drumstick: '<path d="M15.4 15.6a6 6 0 1 0-7-7c-1.5 1.5-1.3 4-1.6 5.3-.3 1.3-1.2 2-1.9 2.7a2.4 2.4 0 1 0 3.4 3.4c.7-.7 1.4-1.6 2.7-1.9 1.3-.3 3.8-.1 5.3-1.6Z"/><path d="m6.9 16.5-2 2M8.5 18.1l-2 2"/>',
  child: '<circle cx="12" cy="5" r="2.5"/><path d="M12 8v7M8 11h8M9 21l3-4 3 4"/>',
  utensils: '<path d="M4 3v7a2 2 0 0 0 2 2 2 2 0 0 0 2-2V3M6 3v18M18 3c-1.7 0-3 2-3 5s1.3 4 3 4v9"/>',
  cup: '<path d="M5 8h13l-1 9a3 3 0 0 1-3 2.6H9A3 3 0 0 1 6 17L5 8Z"/><path d="M18 9h1.5a2.5 2.5 0 0 1 0 5H17M8 4c0-.8.6-1 1-1.5M11.5 4c0-.8.6-1 1-1.5"/>',
  ticket: '<path d="M3 9a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2 2 2 0 0 0 0 6 2 2 0 0 1-2 2H5a2 2 0 0 1-2-2 2 2 0 0 0 0-6Z"/><path d="M13 7v2M13 13v2M13 17v0" stroke-dasharray="0.1 4"/>',
  heart: '<path d="M19 5.4a4.6 4.6 0 0 0-6.5 0L12 6l-.5-.6a4.6 4.6 0 1 0-6.5 6.5L12 19l7-7a4.6 4.6 0 0 0 0-6.5Z"/>',
  hand: '<path d="M11 14V5.5a1.5 1.5 0 0 1 3 0V13M14 13v-1.5a1.5 1.5 0 0 1 3 0V13M17 13v-1a1.5 1.5 0 0 1 3 0v4a6 6 0 0 1-6 6h-2a6 6 0 0 1-5.2-3l-2.3-4a1.5 1.5 0 0 1 2.6-1.5L11 16"/><path d="M8 14V7.5a1.5 1.5 0 0 1 3 0V14"/>',
  plus: '<path d="M12 5v14M5 12h14"/>',
  minus: '<path d="M5 12h14"/>',
  trash: '<path d="M4 7h16M10 11v6M14 11v6M5 7l1 13a2 2 0 0 0 2 1.8h8a2 2 0 0 0 2-1.8L19 7M9 7V4.5A1.5 1.5 0 0 1 10.5 3h3A1.5 1.5 0 0 1 15 4.5V7"/>',
  check: '<path d="M20 6 9 17l-5-5"/>',
  checkBig: '<path d="M5 13l4 4L19 7"/>',
  right: '<path d="M5 12h14M13 6l6 6-6 6"/>',
  left: '<path d="M19 12H5M11 18l-6-6 6-6"/>',
  bag: '<path d="M6 8h12l1 12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L6 8Z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/>',
  sparkle: '<path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3Z"/>',
  gift: '<rect x="3" y="9" width="18" height="12" rx="1.5"/><path d="M3 13h18M12 9v12M12 9S10.5 4 8 4a2 2 0 0 0 0 4h4ZM12 9s1.5-5 4-5a2 2 0 0 1 0 4h-4Z"/>',
  leaf: '<path d="M11 20A7 7 0 0 1 4 13c0-5 4-9 16-9 0 9-4 13-9 13a7 7 0 0 1-3-.7Z"/><path d="M4 21c2-5 6-8 11-9"/>',
  x: '<path d="M18 6 6 18M6 6l12 12"/>',
  info: '<circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8v.01"/>',
  alert: '<circle cx="12" cy="12" r="9"/><path d="M12 8v4M12 16v.01"/>',
  edit: '<path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/>',
  bird: '<path d="M16 7h.01M3 14s2-8 9-8c5 0 8 3.5 8 6 0 1.5-1 2.5-2.5 2.5-1 0-1.5-.5-2.5-.5S12 16 9 16s-6-2-6-2Z"/><path d="M14 9c-1 3-4 5-9 6"/>',
  shield: '<path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3Z"/>',
};
function Icon({ name, size = 20, className = "", style }) {
  return (
    <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"
      style={style} dangerouslySetInnerHTML={{ __html: ICON_PATHS[name] || "" }} />
  );
}

/* ============================================================
   HELPERS
   ============================================================ */
const euro = (n) => "€\u00A0" + (n || 0).toLocaleString("nl-NL", { minimumFractionDigits: 2, maximumFractionDigits: 2 });

function Logo({ size = 38 }) {
  return (
    <button className="brand" onClick={() => window.__goHome && window.__goHome()}>
      <img src="assets/logo-mark.png" alt="De Schovenhorst" width={size} height={size} />
      <span style={{ display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
        <span className="name">De Schovenhorst</span>
        <span className="sub">Eindfeest · zomer 2026</span>
      </span>
    </button>
  );
}

/* ============================================================
   BUTTON
   ============================================================ */
function Button({ variant = "primary", size, block, icon, iconRight, children, ...rest }) {
  const cls = ["btn", `btn--${variant}`, size && `btn--${size}`, block && "btn--block"].filter(Boolean).join(" ");
  return (
    <button className={cls} {...rest}>
      {icon && <Icon name={icon} size={18} />}
      {children}
      {iconRight && <Icon name={iconRight} size={18} />}
    </button>
  );
}

/* ============================================================
   FIELD (label + input/select/textarea + error/hint)
   ============================================================ */
function Field({ label, required, optional, hint, error, children }) {
  return (
    <div className="field">
      {label && (
        <label>{label}{required && <span className="req"> *</span>}{optional && <span className="opt"> (optioneel)</span>}</label>
      )}
      {children}
      {error ? <span className="err"><Icon name="alert" size={14} />{error}</span>
        : hint ? <span className="hint">{hint}</span> : null}
    </div>
  );
}

function TextInput({ error, ...rest }) {
  return <input className={"inp" + (error ? " is-error" : "")} {...rest} />;
}
function Select({ children, ...rest }) {
  return <select className="sel" {...rest}>{children}</select>;
}

/* ============================================================
   QUANTITY STEPPER
   ============================================================ */
function Qty({ value, onChange, min = 0, max = 99, solid }) {
  return (
    <div className={"qty" + (solid ? " qty--solid" : "")}>
      <button onClick={() => onChange(Math.max(min, value - 1))} disabled={value <= min} aria-label="Eén minder">
        <Icon name="minus" size={16} />
      </button>
      <span className="n tnum">{value}</span>
      <button onClick={() => onChange(Math.min(max, value + 1))} disabled={value >= max} aria-label="Eén meer">
        <Icon name="plus" size={16} />
      </button>
    </div>
  );
}

/* ============================================================
   DISH CARD
   ============================================================ */
const DISH_ICON = { hamburger: "drumstick", vegaburger: "leaf", kipsate: "drumstick", patat: "utensils", kids1: "child", kids2: "child", kids3: "child" };

function DishCard({ item, qty, onChange, min = 0 }) {
  return (
    <div className={"dish" + (qty > 0 ? " is-in" : "")}>
      <div className={"dish-thumb acc-" + item.accent}>
        {item.tag && <span className="dish-tag">{item.tag}</span>}
        {item.img ? (
          <img className="dish-photo" src={item.img} alt={item.name} loading="lazy" />
        ) : (
          <div className="ph">
            <Icon name={DISH_ICON[item.id] || "utensils"} size={32} />
            <small>foto volgt</small>
          </div>
        )}
      </div>
      <div className="dish-body">
        <h3>{item.name}</h3>
        <p>{item.desc}</p>
        <div className="dish-foot">
          <span className="dish-price tnum">{euro(item.price)}</span>
          {qty > 0
            ? <Qty value={qty} onChange={onChange} min={min} max={50} />
            : <button className="addbtn" onClick={() => onChange(1)}><Icon name="plus" size={16} />Toevoegen</button>}
        </div>
        {min > 0 && <small className="dish-min">reeds besteld: {min} · verminderen kan niet</small>}
      </div>
    </div>
  );
}

Object.assign(window, { Icon, euro, Logo, Button, Field, TextInput, Select, Qty, DishCard });