// ============================================================
// COMPONENTI CONDIVISI + ICONE
// ============================================================
const { useState, useEffect, useRef, useMemo } = React;

// —— Icone (line icons, stroke currentColor) ——
function Icon({name, size=20, className=""}){
  const s = size, sw = 1.7;
  const common = { width:s, height:s, viewBox:"0 0 24 24", fill:"none", stroke:"currentColor",
    strokeWidth:sw, strokeLinecap:"round", strokeLinejoin:"round", className };
  const paths = {
    users:<><path d="M16 19v-1a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v1"/><circle cx="9" cy="7" r="3.2"/><path d="M22 19v-1a4 4 0 0 0-3-3.8"/><path d="M16 4.2A4 4 0 0 1 16 11"/></>,
    droplet:<path d="M12 3s6 5.7 6 10a6 6 0 0 1-12 0c0-4.3 6-10 6-10Z"/>,
    sliders:<><path d="M4 6h10"/><path d="M18 6h2"/><circle cx="16" cy="6" r="2"/><path d="M4 12h2"/><path d="M10 12h10"/><circle cx="8" cy="12" r="2"/><path d="M4 18h10"/><path d="M18 18h2"/><circle cx="16" cy="18" r="2"/></>,
    calendar:<><rect x="3" y="4.5" width="18" height="16" rx="2"/><path d="M3 9h18M8 2.5v4M16 2.5v4"/></>,
    plus:<><path d="M12 5v14M5 12h14"/></>,
    wand:<><path d="M15 4V2M15 10V8M11 6H9M21 6h-2"/><path d="M12.5 8.5 4 17l3 3 8.5-8.5"/><path d="m18 13 .8 1.8L20.5 16l-1.7.8L18 18.5 17.2 16.8 15.5 16l1.7-1.2.8-1.8Z"/></>,
    x:<path d="M6 6l12 12M18 6 6 18"/>,
    chevron:<path d="m9 6 6 6-6 6"/>,
    chevronDown:<path d="m6 9 6 6 6-6"/>,
    trash:<><path d="M4 7h16M9 7V5a1.5 1.5 0 0 1 1.5-1.5h3A1.5 1.5 0 0 1 15 5v2M6 7l1 12.5A1.5 1.5 0 0 0 8.5 21h7a1.5 1.5 0 0 0 1.5-1.5L18 7"/></>,
    edit:<><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5Z"/></>,
    refresh:<><path d="M21 12a9 9 0 1 1-2.6-6.3"/><path d="M21 4v5h-5"/></>,
    check:<path d="M20 6 9 17l-5-5"/>,
    alert:<><path d="M12 8v5M12 16.5v.5"/><path d="M10.3 3.3 2 18a2 2 0 0 0 1.7 3h16.6a2 2 0 0 0 1.7-3L13.7 3.3a2 2 0 0 0-3.4 0Z"/></>,
    arrowUp:<path d="M12 19V5M6 11l6-6 6 6"/>,
    arrowDown:<path d="M12 5v14M6 13l6 6 6-6"/>,
    send:<path d="M22 2 11 13M22 2l-7 20-4-9-9-4 20-7Z"/>,
    leaf:<><path d="M11 20A7 7 0 0 1 4 13c0-6 7-9 16-9 0 9-3 16-9 16Z"/><path d="M4 21c3-5 6-8 11-10"/></>,
    flame:<path d="M12 3c1 3 4 4 4 8a4 4 0 0 1-8 0c0-1.5.6-2.5 1.3-3.4C10 9 11 7 12 3Z"/>,
    search:<><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></>,
    back:<path d="m15 6-6 6 6 6"/>,
    dots:<><circle cx="5" cy="12" r="1.3"/><circle cx="12" cy="12" r="1.3"/><circle cx="19" cy="12" r="1.3"/></>,
    bowl:<><path d="M3 11h18a9 9 0 0 1-18 0Z"/><path d="M7 11c0-3 2-5 5-5s5 2 5 5"/><path d="M2 21h20"/></>,
  };
  return <svg {...common}>{paths[name]||null}</svg>;
}

// —— Iniziali + avatar colorato per hue ——
function Avatar({nome, cognome, hue=150, size=44}){
  const initials = (nome[0]||"")+(cognome[0]||"");
  const st = { width:size, height:size, fontSize:size*0.36,
    background:`oklch(0.93 0.04 ${hue})`, color:`oklch(0.42 0.09 ${hue})` };
  return <div className="avatar" style={st}>{initials.toUpperCase()}</div>;
}

// —— Stato semaforo ——
// Rosso appena oltre il limite prescritto (tetto invalicabile: l'ottimizzatore
// non lo supera), giallo in prossimità del limite.
function statusOfRatio(ratio){
  if(ratio>1.0) return "over";
  if(ratio>0.9) return "near";
  return "ok";
}
function bloodStatus(ref, val){
  if(val==null||isNaN(val)) return "na";
  if(val < ref.min) return ref.lowerWorse ? "over" : "low";
  if(val > ref.max) return "over";
  return "ok";
}
function Dot({status}){ return <span className={`dot dot-${status}`}></span>; }

// —— Barra nutriente con limite ——
function NutrientBar({value, limit, label, unit, compact}){
  const ratio = limit? value/limit : 0;
  const status = statusOfRatio(ratio);
  const pct = Math.min(100, ratio*100);
  return (
    <div className={`nbar ${compact?"nbar-compact":""}`}>
      <div className="nbar-head">
        <span className="nbar-label">{label}</span>
        <span className={`nbar-val v-${status}`}>{Math.round(value)}<span className="nbar-unit">/{limit}{unit}</span></span>
      </div>
      <div className="nbar-track">
        <div className={`nbar-fill f-${status}`} style={{width:pct+"%"}}></div>
        <div className="nbar-limit" style={{left:"100%"}}></div>
      </div>
    </div>
  );
}

// —— Chip / pill ——
function Chip({children, tone="default", onClick, active}){
  return <button className={`chip chip-${tone} ${active?"chip-active":""}`} onClick={onClick}>{children}</button>;
}

function Tag({children, tone="neutral"}){
  return <span className={`tag tag-${tone}`}>{children}</span>;
}

Object.assign(window, { Icon, Avatar, Dot, NutrientBar, Chip, Tag, statusOfRatio, bloodStatus,
  useState, useEffect, useRef, useMemo });