/* ============================================================
   UI PRIMITIVES — icons, badges, buttons
   ============================================================ */
const { useState, useEffect, useRef, useMemo } = React;

// ---- Icon set (stroke) -------------------------------------
const ICONS = {
  forklift: 'M3 17h2m0 0a2 2 0 1 0 4 0 2 2 0 0 0-4 0Zm9 0a2 2 0 1 0 4 0 2 2 0 0 0-4 0Zm-3 0H8m6-4V4m0 0h4l2 5v4h-6m0-9-3 0M5 17V7h4l3 6M16 13H9',
  broom: 'M19 5 13 11m-2 2-1 1m-3 7 3-3m0 0 5-5 4 4-5 5-4-4Zm-3 3-3 1 1-3',
  lift: 'M7 21V7m10 14V7M5 7h14M9 7V4h6v3M9 21h6M12 7v14M10 11h4m-4 4h4',
  wrap: 'M5 4h14v16H5zM8 4v16M16 4v16M8 9h8M8 14h8',
  grid: 'M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z',
  boxes: 'M4 8 12 4l8 4-8 4-8-4Zm0 0v8l8 4 8-4V8M12 12v8',
  calendar: 'M5 5h14v15H5zM5 9h14M9 3v4M15 3v4M8 13h2m4 0h2m-8 4h2m4 0h2',
  bell: 'M6 16V11a6 6 0 0 1 12 0v5l2 2H4l2-2Zm4 4a2 2 0 0 0 4 0',
  search: 'M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14ZM16 16l4.5 4.5',
  plus: 'M12 5v14M5 12h14',
  settings: 'M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm8.5 3a8.5 8.5 0 0 0-.13-1.5l1.6-1.25-1.6-2.77-1.9.77a8 8 0 0 0-2.6-1.5L15 3h-3l-.37 2.48a8 8 0 0 0-2.6 1.5l-1.9-.77-1.6 2.77L6.13 10.5A8.5 8.5 0 0 0 6 12c0 .51.05 1.01.13 1.5l-1.6 1.25 1.6 2.77 1.9-.77a8 8 0 0 0 2.6 1.5L12 21h3l.37-2.48a8 8 0 0 0 2.6-1.5l1.9.77 1.6-2.77-1.6-1.25c.08-.49.13-.99.13-1.5Z',
  users: 'M9 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm0 0c-3 0-6 1.5-6 4.5V20h12v-4.5c0-3-3-4.5-6-4.5Zm8-7a3 3 0 0 1 0 6m1 3c2.2.4 3 1.8 3 3.5V20',
  log: 'M5 4h14v16H5zM8 8h8M8 12h8M8 16h5',
  chevDown: 'M6 9l6 6 6-6',
  chevRight: 'M9 6l6 6-6 6',
  chevLeft: 'M15 6l-6 6 6 6',
  lock: 'M6 11h12v9H6zM9 11V8a3 3 0 0 1 6 0v3M12 15v2',
  unlock: 'M6 11h12v9H6zM9 11V8a3 3 0 0 1 5.8-1M12 15v2',
  eye: 'M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Zm10 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z',
  eyeOff: 'M3 3l18 18M10.5 6.2A9.6 9.6 0 0 1 12 6c6.5 0 10 6 10 6a16 16 0 0 1-3.3 3.8M6.3 7.4A16 16 0 0 0 2 12s3.5 6 10 6a9.4 9.4 0 0 0 3.2-.55M9.9 9.9a3 3 0 0 0 4.2 4.2',
  pdf: 'M7 3h7l4 4v14H7zM14 3v4h4M9 13h1.5a1.5 1.5 0 0 1 0 3H9zm0 0v5m5-5v5m0-5h2m-2 2.5h1.5',
  download: 'M12 4v11m0 0 4-4m-4 4-4-4M5 19h14',
  battery: 'M3 8h15v8H3zM18 11h2v2h-2M6 11v2M9 11v2M12 11v2',
  clock: 'M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm0 4v4l3 2',
  sparkle: 'M12 4l1.6 4.4L18 10l-4.4 1.6L12 16l-1.6-4.4L6 10l4.4-1.6L12 4Z',
  refresh: 'M4 12a8 8 0 0 1 13.7-5.6L20 8m0 0V4m0 4h-4M20 12a8 8 0 0 1-13.7 5.6L4 16m0 0v4m0-4h4',
  filter: 'M4 5h16l-6 7v6l-4 2v-8L4 5Z',
  x: 'M6 6l12 12M18 6 6 18',
  check: 'M5 12l5 5 9-10',
  edit: 'M4 20h4L19 9l-4-4L4 16v4ZM14 6l4 4',
  trash: 'M5 7h14M9 7V5h6v2m-8 0v13h10V7M10 11v6M14 11v6',
  image: 'M4 5h16v14H4zM4 16l4-4 4 4 3-3 5 5M9 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z',
  pin: 'M12 21s7-6.4 7-11a7 7 0 1 0-14 0c0 4.6 7 11 7 11Zm0-8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z',
  arrowRight: 'M5 12h14m0 0-6-6m6 6-6 6',
  arrowUp: 'M12 19V5m0 0-6 6m6-6 6 6',
  logout: 'M15 4h4v16h-4M11 8l-4 4 4 4M7 12h9',
  tag: 'M4 4h7l9 9-7 7-9-9V4Zm3.5 3.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z',
  shield: 'M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3Z',
  watch: 'M12 5c-5 0-8.5 4.5-9.5 7 1 2.5 4.5 7 9.5 7s8.5-4.5 9.5-7C20.5 9.5 17 5 12 5Zm0 3a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z',
  copy: 'M9 9h10v10H9zM9 9V5a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1h-4M5 9v10a1 1 0 0 0 1 1h3',
  home: 'M4 11l8-7 8 7M6 9.5V20h12V9.5',
  chart: 'M4 20V4M4 20h16M8 16v-5M12 16V8M16 16v-8',
  sun: 'M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10ZM12 2v2M12 20v2M4 12H2M22 12h-2M5 5l1.5 1.5M17.5 17.5 19 19M19 5l-1.5 1.5M6.5 17.5 5 19',
  moon: 'M20 14.5A8 8 0 0 1 9.5 4 7 7 0 1 0 20 14.5Z',
  grip: 'M9 6h.01M9 12h.01M9 18h.01M15 6h.01M15 12h.01M15 18h.01',
  star: 'M12 4l2.3 5 5.4.5-4.1 3.6 1.3 5.3L12 20.7 7.1 18.4 8.4 13 4.3 9.5 9.7 9 12 4Z',
};

function Icon({ name, size=20, stroke=1.7, className, style }) {
  const d = ICONS[name];
  const filled = name === 'sparkle' || name === 'shield' || name === 'star';
  return (
    <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
      style={{ display:'block', flexShrink:0, ...style }}>
      <path d={d} />
    </svg>
  );
}

const CAT_ICON = { carrelli:'forklift', pulizia:'broom', piattaforme:'lift', avvolgitrici:'wrap' };

// ---- Status badge ------------------------------------------
function StatoBadge({ stato, size="md" }) {
  const s = STATI[stato]; if(!s) return null;
  const pad = size==="sm" ? "3px 8px" : "5px 11px";
  const fs = size==="sm" ? 11.5 : 12.5;
  return (
    <span style={{ display:'inline-flex', alignItems:'center', gap:6, padding:pad, borderRadius:99,
      background:s.bg, color:s.color, fontWeight:700, fontSize:fs, letterSpacing:'.01em', whiteSpace:'nowrap' }}>
      <span style={{ width:6, height:6, borderRadius:99, background:s.color }} />
      {s.label}
    </span>
  );
}

// ---- Role pill ---------------------------------------------
function RolePill({ ruolo, style }) {
  const r = RUOLI[ruolo]; if(!r) return null;
  return (
    <span style={{ display:'inline-flex', alignItems:'center', gap:7, padding:'5px 11px 5px 8px', borderRadius:99,
      background:'color-mix(in srgb, '+r.color+' 12%, var(--surface))', color:r.color, fontWeight:700, fontSize:12.5, ...style }}>
      <span style={{ width:7, height:7, borderRadius:99, background:r.color }} />
      {r.label}
    </span>
  );
}

// ---- Button ------------------------------------------------
function Btn({ children, variant="primary", size="md", icon, iconRight, onClick, style, disabled, full }) {
  const sizes = { sm:{p:'7px 12px',fs:13,gap:6}, md:{p:'10px 16px',fs:14,gap:8}, lg:{p:'13px 22px',fs:15,gap:9} };
  const z = sizes[size];
  const variants = {
    primary:{ background:'var(--red)', color:'#fff', boxShadow:'0 1px 2px rgba(200,16,46,.3)' },
    dark:{ background:'var(--ink)', color:'#fff' },
    ghost:{ background:'transparent', color:'var(--ink-2)', boxShadow:'inset 0 0 0 1px var(--line)' },
    soft:{ background:'var(--red-tint)', color:'var(--red)' },
    subtle:{ background:'var(--line-2)', color:'var(--ink-2)' },
  };
  return (
    <button onClick={onClick} disabled={disabled} style={{
      display:'inline-flex', alignItems:'center', justifyContent:'center', gap:z.gap, padding:z.p,
      fontSize:z.fs, fontWeight:700, borderRadius:'var(--r-md)', transition:'transform .12s, filter .15s, box-shadow .15s',
      width:full?'100%':'auto', opacity:disabled?.5:1, pointerEvents:disabled?'none':'auto', ...variants[variant], ...style }}
      onMouseDown={e=>e.currentTarget.style.transform='scale(.97)'}
      onMouseUp={e=>e.currentTarget.style.transform=''}
      onMouseLeave={e=>e.currentTarget.style.transform=''}>
      {icon && <Icon name={icon} size={z.fs+3} />}
      {children}
      {iconRight && <Icon name={iconRight} size={z.fs+3} />}
    </button>
  );
}

// ---- Avatar ------------------------------------------------
function Avatar({ name, size=34, color="var(--red)" }) {
  const initials = name.split(' ').map(w=>w[0]).slice(0,2).join('').toUpperCase();
  return (
    <span style={{ width:size, height:size, borderRadius:99, background:'color-mix(in srgb, '+color+' 14%, var(--surface))',
      color:color, display:'inline-flex', alignItems:'center', justifyContent:'center', fontWeight:800,
      fontSize:size*0.38, flexShrink:0, letterSpacing:'.02em' }}>{initials}</span>
  );
}

// ---- Empty image slot (non-interactive look used in cards) --
function ImgPlaceholder({ height=180, radius=10, label="Nessuna immagine", small=false }) {
  return (
    <div style={{ height, borderRadius:radius, display:'flex', flexDirection:'column', alignItems:'center',
      justifyContent:'center', gap:small?5:8, color:'var(--ink-4)',
      background:'repeating-linear-gradient(135deg, #f3f5f8 0 12px, #eef1f5 12px 24px)',
      border:'1.5px dashed #cfd5de' }}>
      <Icon name="image" size={small?20:26} stroke={1.5} />
      <span style={{ fontSize:small?11:12.5, fontWeight:600 }}>{label}</span>
    </div>
  );
}

Object.assign(window, { Icon, ICONS, CAT_ICON, StatoBadge, RolePill, Btn, Avatar, ImgPlaceholder,
  useState, useEffect, useRef, useMemo });