/* ============================================================
   ATTRIBUTI — tabella admin (CRUD) + filtri catalogo
   ============================================================ */

function TipoCheck({ on, color, onClick }) {
  return (
    <button onClick={onClick} style={{ width:'100%', display:'flex', justifyContent:'center' }}>
      <span style={{ width:22, height:22, borderRadius:6, flexShrink:0,
        border:'1.5px solid '+(on?color:'var(--line)'), background:on?color:'var(--surface)',
        display:'flex', alignItems:'center', justifyContent:'center', transition:'.13s', cursor:'pointer' }}>
        {on && <Icon name="check" size={14} stroke={3} style={{ color:'#fff' }} />}
      </span>
    </button>
  );
}

const ATTR_GRID = '26px minmax(132px,1.3fr) minmax(160px,2fr) repeat(4, 68px) 64px';

function AdminAttributi({ attributi, setAttributi, toast }) {
  const vp = useViewport();
  const [hover, setHover] = useState(null);
  const [editing, setEditing] = useState(undefined);
  const [confirm, setConfirm] = useState(null);
  const [q, setQ] = useState('');
  const [dragId, setDragId] = useState(null);
  const [overId, setOverId] = useState(null);
  const dragRef = useRef(null);

  const list = q ? attributi.filter(a => a.nome.toLowerCase().includes(q.toLowerCase())) : attributi;
  const canSort = !q;

  // Riordina mantenendo i "rilievo" in cima — il drop in una posizione di un'altra
  // sezione non viene applicato (non si può mescolare rilievo/non-rilievo).
  const reorder = async (targetId) => {
    const fromId = dragRef.current;
    dragRef.current = null; setDragId(null); setOverId(null);

    const fromAttr = attributi.find(a => a.id === fromId);
    const toAttr   = attributi.find(a => a.id === targetId);
    if (!fromAttr || !toAttr || fromId === targetId) return;
    // Blocca drop tra sezioni diverse (rilievo ≠ non-rilievo)
    if (!!fromAttr.rilievo !== !!toAttr.rilievo) {
      toast && toast('Non puoi mescolare attributi in rilievo con quelli normali');
      return;
    }

    // Calcola nuovo array
    let newList = [];
    setAttributi(prev => {
      const from = prev.findIndex(x => x.id === fromId);
      const to   = prev.findIndex(x => x.id === targetId);
      const copy = [...prev];
      const [m] = copy.splice(from, 1);
      copy.splice(to, 0, m);
      // Ri-applica ordering: rilievo prima, poi nell'ordine corrente
      copy.sort((a, b) => {
        if (!!a.rilievo !== !!b.rilievo) return a.rilievo ? -1 : 1;
        return 0; // stabile
      });
      newList = copy;
      return copy;
    });

    // Persisti l'ordine su DB (colonna `ordine`)
    if (window.SF_CONFIG.useSupabase) {
      try {
        await Promise.all(newList.map((a, i) =>
          window.DataAPI.update('attributes', a.id, { ordine: i })
        ));
      } catch (e) {
        console.error('reorder error', e);
        toast && toast('Errore salvataggio ordine');
      }
    }
  };

  // Toggle tipo macchina — aggiorna attribute_categories su Supabase
  const toggleTipo = async (id, tipo) => {
    const attr = attributi.find(a => a.id === id);
    if (!attr) return;
    const has = (attr.tipi || []).includes(tipo);
    const nuoviTipi = has ? (attr.tipi||[]).filter(t=>t!==tipo) : [...(attr.tipi||[]), tipo];

    // Aggiorna UI subito
    setAttributi(prev => prev.map(a => a.id!==id ? a : { ...a, tipi: nuoviTipi }));

    if (window.SF_CONFIG.useSupabase) {
      try {
        if (has) {
          await window.DataAPI.rawDelete('attribute_categories', {
            attribute_id: id,
            category_id: tipo
          });
        } else {
          // Upsert: se la riga c'è già (per qualsiasi motivo), non fallire
          const sb = window.DataAPI.client();
          if (sb) {
            const { error } = await sb.from('attribute_categories')
              .upsert({ attribute_id: id, category_id: tipo },
                      { onConflict: 'attribute_id,category_id', ignoreDuplicates: true });
            if (error && error.code !== '23505') throw error;
          }
        }
      } catch(e) {
        console.error('toggleTipo error', e);
        toast('Errore aggiornamento categoria');
        setAttributi(prev => prev.map(a => a.id!==id ? a : { ...a, tipi: attr.tipi }));
      }
    }
  };

  // Salva attributo nuovo o modificato
  const save = async (attr) => {
    if (window.SF_CONFIG.useSupabase) {
      try {
        const exists = attributi.some(a => a.id === attr.id);
        if (exists) {
          // Aggiorna dati base attributo
          await window.DataAPI.update('attributes', attr.id, {
            nome: attr.nome,
            rilievo: !!attr.rilievo,
            locked: !!attr.locked,
            multiplo: !!attr.multiplo,
            sede: !!attr.sede,
            termini: attr.termini || [],
          });
          // Aggiorna categorie: elimina tutte e reinserisce
          await window.DataAPI.rawDelete('attribute_categories', { attribute_id: attr.id });
          for (const tipo of (attr.tipi || [])) {
            await window.DataAPI.rawInsert('attribute_categories', {
              attribute_id: attr.id,
              category_id: tipo
            });
          }
        } else {
          // Inserisci nuovo attributo
          await window.DataAPI.insert('attributes', {
            id: attr.id,
            nome: attr.nome,
            rilievo: !!attr.rilievo,
            locked: !!attr.locked,
            multiplo: !!attr.multiplo,
            sede: !!attr.sede,
            termini: attr.termini || [],
            ordine: attributi.length,
          });
          // Inserisci categorie associate
          for (const tipo of (attr.tipi || [])) {
            await window.DataAPI.rawInsert('attribute_categories', {
              attribute_id: attr.id,
              category_id: tipo
            });
          }
        }
      } catch(e) {
        console.error('save attr error', e);
        toast('Errore salvataggio attributo');
        return;
      }
    }

    setAttributi(prev => {
      const exists = prev.some(a=>a.id===attr.id);
      const next = exists ? prev.map(a=>a.id===attr.id?attr:a) : [...prev, attr];
      // Re-ordino: rilievo prima, poi nell'ordine attuale
      next.sort((a, b) => {
        if (!!a.rilievo !== !!b.rilievo) return a.rilievo ? -1 : 1;
        return 0;
      });
      return next;
    });
    setEditing(undefined);
    toast(editing===null ? 'Attributo aggiunto' : 'Attributo aggiornato');
  };

  // Elimina attributo
  const remove = async (attr) => {
    if (window.SF_CONFIG.useSupabase) {
      try {
        await window.DataAPI.remove('attributes', attr.id);
      } catch(e) {
        console.error('remove attr error', e);
        toast('Errore eliminazione attributo');
        return;
      }
    }
    setAttributi(prev => prev.filter(a=>a.id!==attr.id));
    setConfirm(null);
    toast(`Attributo "${attr.nome}" eliminato`);
  };

  return (
    <>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:14, gap:12, flexWrap:'wrap' }}>
        <div style={{ minWidth:0, flex: vp.isMobile?'1 1 100%':'0 1 auto' }}>
          <h2 style={{ margin:0, fontFamily:'var(--font-display)', fontSize: vp.isMobile?17:19, fontWeight:800 }}>Attributi</h2>
          <div style={{ fontSize:12.5, color:'var(--ink-3)', marginTop:2 }}>
            {attributi.length} attributi {!vp.isMobile && '· spunta i tipi di macchina · trascina per riordinare'}
          </div>
        </div>
        <div style={{ display:'flex', gap:8, width: vp.isMobile?'100%':'auto' }}>
          <div style={{ position:'relative', flex: vp.isMobile?1:'none' }}>
            <Icon name="search" size={17} style={{ position:'absolute', left:12, top:'50%', transform:'translateY(-50%)', color:'var(--ink-4)' }} />
            <input value={q} onChange={e=>setQ(e.target.value)} placeholder="Cerca…"
              style={{ width: vp.isMobile?'100%':230, padding:'9px 12px 9px 36px', fontSize:13.5, borderRadius:'var(--r-md)', border:'1.5px solid var(--line)', background:'var(--surface-2)', outline:'none' }} />
          </div>
          <Btn icon="plus" size={vp.isMobile?'sm':'md'} onClick={()=>setEditing(null)}>{vp.isMobile?'Nuovo':'Nuovo attributo'}</Btn>
        </div>
      </div>

      <div style={{ background:'var(--surface)', border:'1px solid var(--line)', borderRadius:'var(--r-lg)', overflow:'hidden', boxShadow:'var(--sh-1)' }}>
       <div className="scroll" style={{ overflowX:'auto' }}>
        <div style={{ minWidth:760 }}>
        <div style={{ display:'grid', gridTemplateColumns:ATTR_GRID, gap:12, padding:'13px 18px', background:'var(--surface-2)',
          borderBottom:'1px solid var(--line)', fontSize:11, fontWeight:800, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'.04em', alignItems:'center' }}>
          <span></span><span>Nome</span><span>Termini</span>
          {MTIPI.map(t => (
            <span key={t.key} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:3, color:'var(--role-'+(t.key==='carrelli'?'admin':t.key==='pulizia'?'commerciale':t.key==='piattaforme'?'backoffice':'cliente')+')' }} title={t.full}>
              <Icon name={t.icon} size={18} stroke={1.7} />
              <span style={{ fontSize:9.5 }}>{t.label}</span>
            </span>
          ))}
          <span style={{ textAlign:'right' }}>Azioni</span>
        </div>

        <div>
          {list.map((a,i) => {
            const isLastRilievo = a.rilievo && (i === list.length - 1 || !list[i+1].rilievo);
            return (
            <React.Fragment key={a.id}>
            <div onMouseEnter={()=>setHover(a.id)} onMouseLeave={()=>setHover(null)}
              onClick={vp.isMobile ? ()=>setEditing(a) : undefined}
              className={vp.isMobile ? 'admin-hide-actions-mobile-row' : ''}
              draggable={canSort}
              onDragStart={e=>{ dragRef.current=a.id; setDragId(a.id); try{ e.dataTransfer.effectAllowed='move'; e.dataTransfer.setData('text/plain', a.id); }catch(_){} }}
              onDragEnter={e=>{ if(canSort){ e.preventDefault(); setOverId(a.id); } }}
              onDragOver={e=>{ if(canSort) e.preventDefault(); }}
              onDrop={()=>canSort && reorder(a.id)}
              onDragEnd={()=>{ dragRef.current=null; setDragId(null); setOverId(null); }}
              style={{ display:'grid', gridTemplateColumns:ATTR_GRID, gap:12, padding:'12px 18px', alignItems:'center',
                borderBottom: (i<list.length-1 && !isLastRilievo)?'1px solid var(--line-2)':'none',
                background: dragId===a.id ? 'var(--surface-2)' : (hover===a.id ? 'var(--surface-2)' : (a.rilievo ? 'var(--red-tint)' : 'transparent')),
                opacity: dragId===a.id ? .4 : 1,
                cursor: vp.isMobile ? 'pointer' : 'default',
                boxShadow: (overId===a.id && dragId && dragId!==a.id) ? 'inset 0 2px 0 var(--red)' : 'none',
                transition:'background .1s' }}>
              <span style={{ display:'flex', justifyContent:'center', color:'var(--ink-4)', cursor: canSort?'grab':'default', opacity: hover===a.id?1:.35 }} title={canSort?'Trascina per riordinare':'Azzera la ricerca per riordinare'}>
                <Icon name="grip" size={16} />
              </span>
              <div style={{ display:'flex', alignItems:'center', gap:7, minWidth:0 }}>
                {a.rilievo && <Icon name="star" size={14} stroke={1.5} style={{ color:'var(--red)', flexShrink:0 }} />}
                <span style={{ fontSize:13.5, fontWeight:700, color: a.rilievo?'var(--red)':'var(--ink)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{a.nome}</span>
              </div>
              <TermPreview termini={a.termini||[]} />
              {MTIPI.map(t => {
                const color = { carrelli:'var(--red)', pulizia:'var(--role-commerciale)', piattaforme:'var(--role-backoffice)', avvolgitrici:'var(--role-cliente)' }[t.key];
                return <TipoCheck key={t.key} on={(a.tipi||[]).includes(t.key)} color={color} onClick={()=>toggleTipo(a.id, t.key)} />;
              })}
              <div style={{ display:'flex', gap:6, justifyContent:'flex-end', opacity: hover===a.id?1:0, transition:'opacity .12s' }}>
                <button onClick={()=>setEditing(a)} title="Modifica" style={iconBtn}><Icon name="edit" size={15} /></button>
                {a.locked ? (
                  <span title="Attributo di sistema — non eliminabile" style={{ ...iconBtn, color:'var(--ink-4)', cursor:'default', borderStyle:'dashed' }}><Icon name="lock" size={14} /></span>
                ) : (
                  <button onClick={()=>setConfirm(a)} title="Elimina" style={{ ...iconBtn, color:'var(--red)', borderColor:'var(--red-tint-2)' }}><Icon name="x" size={15} /></button>
                )}
              </div>
            </div>
            {isLastRilievo && i < list.length-1 && (
              <div style={{ padding:'8px 18px', background:'var(--surface-2)', borderTop:'1px solid var(--line-2)', borderBottom:'1px solid var(--line-2)',
                fontSize:11, fontWeight:800, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'.05em' }}>
                Altri attributi
              </div>
            )}
            </React.Fragment>
          );
          })}
          <button onClick={()=>setEditing(null)} style={{ width:'100%', display:'flex', alignItems:'center', gap:10, padding:'14px 18px',
            color:'var(--ink-3)', fontSize:13.5, fontWeight:700, borderTop:'1px dashed var(--line)', background:'var(--surface-2)' }}
            onMouseEnter={e=>e.currentTarget.style.color='var(--red)'} onMouseLeave={e=>e.currentTarget.style.color='var(--ink-3)'}>
            <Icon name="plus" size={17} /> Aggiungi attributo
          </button>
        </div>
        </div>
       </div>
      </div>

      {editing!==undefined && <AttrEditModal attr={editing} onClose={()=>setEditing(undefined)} onSave={save} existing={attributi} />}
      {confirm && <ConfirmDialog
        title="Eliminare l'attributo?"
        message={<>Stai per eliminare <b>{confirm.nome}</b>. L'attributo verrà rimosso da tutte le categorie. L'azione non è reversibile.</>}
        confirmLabel="Elimina attributo" onConfirm={()=>remove(confirm)} onClose={()=>setConfirm(null)} />}
    </>
  );
}

function TermPreview({ termini }) {
  if (!termini || !termini.length) return <span style={{ fontSize:12.5, color:'var(--ink-4)', fontStyle:'italic' }}>valore libero</span>;
  const show = termini.slice(0,4);
  const rest = termini.length - show.length;
  return (
    <div style={{ display:'flex', flexWrap:'wrap', gap:5, alignItems:'center' }}>
      {show.map((t,i)=>(
        <span key={i} style={{ fontSize:11.5, fontWeight:600, color:'var(--ink-2)', background:'var(--line-2)', padding:'3px 8px', borderRadius:6, whiteSpace:'nowrap', maxWidth:130, overflow:'hidden', textOverflow:'ellipsis' }}>{t}</span>
      ))}
      {rest>0 && <span style={{ fontSize:11.5, fontWeight:700, color:'var(--ink-4)' }}>+{rest}</span>}
    </div>
  );
}

function ConfirmDialog({ title, message, confirmLabel, onConfirm, onClose }) {
  return (
    <div className="no-print" style={{ position:'fixed', inset:0, zIndex:120, display:'flex', alignItems:'center', justifyContent:'center', padding:24,
      background:'rgba(15,17,21,.5)', backdropFilter:'blur(3px)', animation:'fadeIn .14s ease' }} onClick={onClose}>
      <div onClick={e=>e.stopPropagation()} style={{ width:'100%', maxWidth:420, background:'var(--surface)', borderRadius:'var(--r-xl)', boxShadow:'var(--sh-3)', padding:'26px 26px 22px', animation:'scaleIn .18s ease' }}>
        <div style={{ width:48, height:48, borderRadius:12, background:'var(--red-tint)', color:'var(--red)', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:16 }}>
          <Icon name="trash" size={24} />
        </div>
        <h2 style={{ margin:'0 0 8px', fontFamily:'var(--font-display)', fontSize:19, fontWeight:800 }}>{title}</h2>
        <p style={{ margin:'0 0 22px', fontSize:14, color:'var(--ink-2)', lineHeight:1.55 }}>{message}</p>
        <div style={{ display:'flex', gap:11 }}>
          <Btn variant="ghost" full onClick={onClose}>Annulla</Btn>
          <Btn full icon="trash" onClick={onConfirm} style={{ background:'var(--red)' }}>{confirmLabel}</Btn>
        </div>
      </div>
    </div>
  );
}

function slugify(s){ return s.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,'').replace(/[^a-z0-9]+/g,'-').replace(/^-+|-+$/g,'').slice(0,40) || 'attr-'+Date.now(); }

function AttrEditModal({ attr, onClose, onSave, existing }) {
  const isNew = attr===null;
  const [nome, setNome] = useState(attr?.nome || '');
  const [tipi, setTipi] = useState(new Set(attr?.tipi || []));
  const [termini, setTermini] = useState(attr?.termini ? [...attr.termini] : []);
  const [rilievo, setRilievo] = useState(!!attr?.rilievo);
  const [multiplo, setMultiplo] = useState(!!attr?.multiplo);
  const [sede, setSede] = useState(!!attr?.sede);
  const [draft, setDraft] = useState('');

  const addTerm = () => {
    const parts = draft.split(',').map(s=>s.trim()).filter(Boolean);
    if (!parts.length) return;
    setTermini(prev => [...prev, ...parts.filter(p=>!prev.includes(p))]);
    setDraft('');
  };
  const toggleTipo = (k) => setTipi(prev => { const n=new Set(prev); n.has(k)?n.delete(k):n.add(k); return n; });

  const submit = () => {
    if (!nome.trim()) return;
    const id = attr?.id || slugify(nome);
    onSave({ id, nome:nome.trim(), tipi:[...tipi], termini, rilievo, multiplo, sede, ...(attr?.locked?{locked:true}:{}) });
  };

  return (
    <ModalShell onClose={onClose} width={560} title={isNew?'Nuovo attributo':'Modifica attributo'}
      subtitle={isNew?'Definisci nome, tipi macchina e termini':attr.nome}>
      <div style={{ display:'flex', flexDirection:'column', gap:18 }}>
        <Field label="Nome attributo" required>
          <input value={nome} onChange={e=>setNome(e.target.value)} placeholder="es. Portata (kg)" style={inputStyle} autoFocus />
        </Field>

        <button onClick={()=>setRilievo(v=>!v)} style={{ display:'flex', alignItems:'center', gap:11, padding:'11px 13px', borderRadius:'var(--r-md)', textAlign:'left',
          border:'1.5px solid '+(rilievo?'var(--red)':'var(--line)'), background:rilievo?'var(--red-tint)':'var(--surface)', transition:'.13s' }}>
          <span style={{ width:38, height:22, borderRadius:99, background:rilievo?'var(--red)':'var(--line)', position:'relative', transition:'.2s', flexShrink:0 }}>
            <span style={{ position:'absolute', top:3, left:rilievo?19:3, width:16, height:16, borderRadius:99, background:'#fff', transition:'.2s' }} />
          </span>
          <Icon name="star" size={16} style={{ color:rilievo?'var(--red)':'var(--ink-4)' }} />
          <span style={{ minWidth:0 }}>
            <span style={{ display:'block', fontSize:13, fontWeight:700, color:rilievo?'var(--red)':'var(--ink-2)' }}>Attributo in rilievo</span>
            <span style={{ display:'block', fontSize:11.5, color:'var(--ink-4)' }}>Mostrato per primo ed evidenziato nei filtri del catalogo</span>
          </span>
        </button>

        <button onClick={()=>setMultiplo(v=>!v)} style={{ display:'flex', alignItems:'center', gap:11, padding:'11px 13px', borderRadius:'var(--r-md)', textAlign:'left',
          border:'1.5px solid '+(multiplo?'var(--red)':'var(--line)'), background:multiplo?'var(--red-tint)':'var(--surface)', transition:'.13s' }}>
          <span style={{ width:38, height:22, borderRadius:99, background:multiplo?'var(--red)':'var(--line)', position:'relative', transition:'.2s', flexShrink:0 }}>
            <span style={{ position:'absolute', top:3, left:multiplo?19:3, width:16, height:16, borderRadius:99, background:'#fff', transition:'.2s' }} />
          </span>
          <Icon name="check" size={16} style={{ color:multiplo?'var(--red)':'var(--ink-4)' }} />
          <span style={{ minWidth:0 }}>
            <span style={{ display:'block', fontSize:13, fontWeight:700, color:multiplo?'var(--red)':'var(--ink-2)' }}>Selezione multipla</span>
            <span style={{ display:'block', fontSize:11.5, color:'var(--ink-4)' }}>Permette di scegliere più valori contemporaneamente (es. Segnalatori)</span>
          </span>
        </button>

        <button onClick={()=>setSede(v=>!v)} style={{ display:'flex', alignItems:'center', gap:11, padding:'11px 13px', borderRadius:'var(--r-md)', textAlign:'left',
          border:'1.5px solid '+(sede?'var(--red)':'var(--line)'), background:sede?'var(--red-tint)':'var(--surface)', transition:'.13s' }}>
          <span style={{ width:38, height:22, borderRadius:99, background:sede?'var(--red)':'var(--line)', position:'relative', transition:'.2s', flexShrink:0 }}>
            <span style={{ position:'absolute', top:3, left:sede?19:3, width:16, height:16, borderRadius:99, background:'#fff', transition:'.2s' }} />
          </span>
          <Icon name="pin" size={16} style={{ color:sede?'var(--red)':'var(--ink-4)' }} />
          <span style={{ minWidth:0 }}>
            <span style={{ display:'block', fontSize:13, fontWeight:700, color:sede?'var(--red)':'var(--ink-2)' }}>Campo ubicazione / sede</span>
            <span style={{ display:'block', fontSize:11.5, color:'var(--ink-4)' }}>Indica dove si trova la macchina. Mostrato in una sezione dedicata, non nella scheda tecnica</span>
          </span>
        </button>

        <div>
          <span style={{ display:'block', fontSize:12.5, fontWeight:700, color:'var(--ink-2)', marginBottom:8 }}>Tipi di macchina</span>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:9 }}>
            {MTIPI.map(t => {
              const on = tipi.has(t.key);
              return (
                <button key={t.key} onClick={()=>toggleTipo(t.key)} style={{ display:'flex', alignItems:'center', gap:10, padding:'10px 12px', borderRadius:'var(--r-md)',
                  border:'1.5px solid '+(on?'var(--red)':'var(--line)'), background:on?'var(--red-tint)':'var(--surface)', textAlign:'left', transition:'.13s' }}>
                  <span style={{ width:18, height:18, borderRadius:5, flexShrink:0, border:'1.5px solid '+(on?'var(--red)':'var(--line)'), background:on?'var(--red)':'var(--surface)', display:'flex', alignItems:'center', justifyContent:'center' }}>
                    {on && <Icon name="check" size={12} stroke={3} style={{ color:'#fff' }} />}
                  </span>
                  <Icon name={t.icon} size={17} style={{ color:on?'var(--red)':'var(--ink-4)' }} />
                  <span style={{ fontSize:13, fontWeight:600, color:on?'var(--red)':'var(--ink-2)' }}>{t.full}</span>
                </button>
              );
            })}
          </div>
        </div>

        <div>
          <span style={{ display:'block', fontSize:12.5, fontWeight:700, color:'var(--ink-2)', marginBottom:8 }}>
            Termini <span style={{ color:'var(--ink-4)', fontWeight:500 }}>· {termini.length} valori · invio o virgola per aggiungere</span>
          </span>
          <div style={{ border:'1.5px solid var(--line)', borderRadius:'var(--r-md)', background:'var(--surface-2)', padding:'9px 10px' }}>
            {termini.length>0 && (
              <div className="scroll" style={{ display:'flex', flexWrap:'wrap', gap:6, maxHeight:130, overflowY:'auto', marginBottom:9 }}>
                {termini.map((t,i)=>(
                  <span key={i} style={{ display:'inline-flex', alignItems:'center', gap:6, fontSize:12.5, fontWeight:600, color:'var(--ink)', background:'var(--surface)', border:'1px solid var(--line)', padding:'4px 6px 4px 9px', borderRadius:7 }}>
                    {t}
                    <button onClick={()=>setTermini(prev=>prev.filter((_,j)=>j!==i))} style={{ display:'flex', color:'var(--ink-4)' }}><Icon name="x" size={13} /></button>
                  </span>
                ))}
              </div>
            )}
            <input value={draft} onChange={e=>setDraft(e.target.value)}
              onKeyDown={e=>{ if(e.key==='Enter'||e.key===','){ e.preventDefault(); addTerm(); } }}
              onBlur={addTerm} placeholder="Aggiungi un valore…"
              style={{ width:'100%', border:'none', outline:'none', background:'transparent', fontSize:13.5, padding:'4px 4px' }} />
          </div>
        </div>
      </div>

      <div style={{ display:'flex', gap:12, marginTop:24 }}>
        <Btn variant="ghost" full onClick={onClose}>Annulla</Btn>
        <Btn full icon="check" onClick={submit} disabled={!nome.trim()}>{isNew?'Crea attributo':'Salva modifiche'}</Btn>
      </div>
    </ModalShell>
  );
}

function CatalogAttrFilters({ attributi, cat, values, setValues }) {
  const [open, setOpen] = useState(true);
  const applicable = attributi.filter(a => (a.tipi||[]).includes(cat) && (a.termini||[]).length>0)
    .sort((a,b) => (b.rilievo?1:0) - (a.rilievo?1:0));
  if (cat==='all' || applicable.length===0) return null;
  const active = Object.values(values).filter(v=>v && v!=='all').length;
  const tipo = MTIPI.find(t=>t.key===cat);

  return (
    <div style={{ marginTop:12, borderTop:'1px solid var(--line-2)', paddingTop:12 }}>
      <div style={{ display:'flex', alignItems:'center', gap:10 }}>
        <button onClick={()=>setOpen(o=>!o)} style={{ display:'flex', alignItems:'center', gap:8, fontSize:13, fontWeight:700, color:'var(--ink-2)' }}>
          <Icon name="filter" size={16} style={{ color:'var(--red)' }} />
          Attributi {tipo?.full}
          <span style={{ fontSize:11.5, color:'var(--ink-4)', fontWeight:600 }}>· {applicable.length} disponibili</span>
          <Icon name={open?'chevDown':'chevRight'} size={16} style={{ color:'var(--ink-4)' }} />
        </button>
        {active>0 && (
          <button onClick={()=>setValues({})} style={{ fontSize:12.5, fontWeight:700, color:'var(--red)', display:'flex', alignItems:'center', gap:5 }}>
            <Icon name="x" size={13} /> Azzera {active} filtri
          </button>
        )}
      </div>
      {open && (
        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(186px, 1fr))', gap:10, marginTop:12 }}>
          {applicable.map(a => {
            const val = values[a.id] || 'all';
            const on = val!=='all';
            const hi = a.rilievo;
            return (
              <div key={a.id} style={{ position:'relative', gridColumn: hi?'1 / -1':'auto' }}>
                <span style={{ position:'absolute', top:7, left: hi?30:12, fontSize:10.5, fontWeight:700, color: (on||hi)?'var(--red)':'var(--ink-4)', textTransform:'uppercase', letterSpacing:'.03em', pointerEvents:'none', whiteSpace:'nowrap', display:'flex', alignItems:'center', gap:5 }}>
                  {a.nome}{hi && <span style={{ fontWeight:800 }}>· in rilievo</span>}
                </span>
                {hi && <Icon name="star" size={14} style={{ position:'absolute', top:9, left:11, color:'var(--red)', pointerEvents:'none' }} />}
                <select value={val} onChange={e=>setValues({...values, [a.id]: e.target.value})}
                  style={{ width:'100%', appearance:'none', padding:'22px 30px 8px '+(hi?'30px':'12px'), fontSize:13.5, fontWeight:600, borderRadius:'var(--r-md)',
                    border:'1.5px solid '+(on?'var(--red)':(hi?'var(--red-tint-2)':'var(--line)')), background: on?'var(--red-tint)':(hi?'color-mix(in srgb, var(--red) 5%, var(--surface))':'var(--surface)'), color: on?'var(--red)':'var(--ink)', cursor:'pointer' }}>
                  <option value="all">{hi?'Tutte le sottocategorie':'Tutti'}</option>
                  {(a.termini||[]).map(t => <option key={t} value={t}>{t}</option>)}
                </select>
                <Icon name="chevDown" size={15} style={{ position:'absolute', right:10, top:'58%', color:'var(--ink-3)', pointerEvents:'none' }} />
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { AdminAttributi, AttrEditModal, ConfirmDialog, CatalogAttrFilters, TermPreview });