/* ===== Rubrica ditte ===== */

// ── Modal wrapper ─────────────────────────────────────────────────────────────
const ModalOverlay = ({onClose, width=720, children}) => (
  <div
    style={{position:'fixed',inset:0,background:'rgba(0,0,0,.4)',zIndex:200,
      display:'flex',alignItems:'center',justifyContent:'center',padding:20}}
    onClick={e=>{if(e.target===e.currentTarget)onClose();}}
  >
    <div style={{background:'var(--bg)',borderRadius:16,width:'100%',maxWidth:width,
      maxHeight:'88vh',display:'flex',flexDirection:'column',
      boxShadow:'0 24px 64px rgba(0,0,0,.22)'}}>
      {children}
    </div>
  </div>
);

const MHead = ({title, right, onClose}) => (
  <div style={{display:'flex',alignItems:'center',padding:'18px 24px',
    borderBottom:'1px solid var(--line)',flexShrink:0}}>
    <span style={{fontWeight:700,fontSize:16,flex:1,fontFamily:'var(--ff)',color:'var(--ink)'}}>{title}</span>
    {right}
    <button className="btn ghost" onClick={onClose}
      style={{padding:'4px 10px',color:'var(--ink3)',fontSize:18,lineHeight:1,marginLeft:8}}>✕</button>
  </div>
);

// ── LavBadge ─────────────────────────────────────────────────────────────────
const LavBadge = ({nome, onRemove}) => (
  <span className="badge" style={{fontSize:11,display:'inline-flex',alignItems:'center',gap:3}}>
    {nome}
    {onRemove && <span onClick={onRemove} style={{cursor:'pointer',opacity:.5,fontSize:13,lineHeight:1}}>×</span>}
  </span>
);

// ── InlineLavSelect ───────────────────────────────────────────────────────────
const InlineLavSelect = ({lavorazioni, used=[], onSelect, onAddNew, onClose}) => {
  const avail = lavorazioni.filter(l => !used.includes(l.nome));
  const [newVal, setNewVal] = React.useState('');
  const [adding, setAdding] = React.useState(false);

  if(adding) return (
    <div style={{display:'inline-flex',gap:4,alignItems:'center'}}>
      <input autoFocus value={newVal} onChange={e=>setNewVal(e.target.value)}
        placeholder="Nuova lavorazione…"
        onKeyDown={e=>{
          if(e.key==='Enter'&&newVal.trim()) onAddNew(newVal.trim());
          if(e.key==='Escape'){setAdding(false);onClose();}
        }}
        style={{fontSize:12,border:'1px solid var(--primary)',borderRadius:6,padding:'3px 8px',
          width:160,outline:'none',fontFamily:'var(--ff)'}}/>
      <button className="btn sm ghost" onClick={()=>{setAdding(false);onClose();}}
        style={{fontSize:12,padding:'4px 8px'}}>✕</button>
    </div>
  );

  return (
    <select autoFocus size={1}
      onChange={e=>{
        const v=e.target.value;
        if(!v) return;
        if(v==='__new__') { setAdding(true); return; }
        onSelect(v);
      }}
      onBlur={()=>{ if(!adding) onClose(); }}
      style={{fontSize:12,border:'1px solid var(--line)',borderRadius:6,padding:'4px 8px',
        fontFamily:'var(--ff)',background:'var(--bg)',outline:'none',minWidth:170,
        color:'var(--ink)'}}>
      <option value="">— scegli lavorazione —</option>
      {avail.map(l=><option key={l.id} value={l.nome}>{l.nome}</option>)}
      <option value="__new__">+ Nuova lavorazione…</option>
    </select>
  );
};

// ── EditDittaModal — modal separato per aggiungere/modificare una ditta ────────
const EditDittaModal = ({ditta, lavorazioni, onSave, onAddLavorazione, onClose}) => {
  const isNew = !ditta.id;
  const [f, setF] = React.useState({
    nome: ditta.nome||'', ref: ditta.ref||'', tel: ditta.tel||'',
    email: ditta.email||'', lavorazioni_tipiche: [...(ditta.lavorazioni_tipiche||[])],
  });
  const [saving, setSaving] = React.useState(false);
  const [addingLav, setAddingLav] = React.useState(false);

  const iStyle = {border:'1px solid var(--line)',borderRadius:8,padding:'8px 11px',fontFamily:'var(--ff)',
    fontSize:13,background:'var(--bg)',color:'var(--ink)',outline:'none',width:'100%',boxSizing:'border-box'};

  const save = async () => {
    if(!f.nome.trim()) return;
    setSaving(true);
    try { await onSave({...ditta, ...f}); onClose(); }
    catch(e){ alert('Errore: '+e.message); } finally { setSaving(false); }
  };

  return (
    <ModalOverlay onClose={onClose} width={520}>
      <MHead title={isNew ? 'Nuova ditta' : 'Modifica ditta'} onClose={onClose}/>
      <div style={{padding:'20px 24px',display:'flex',flexDirection:'column',gap:14}}>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
          <div style={{gridColumn:'1/-1',display:'flex',flexDirection:'column',gap:4}}>
            <label style={{fontSize:11,fontWeight:600,color:'var(--ink2)'}}>Nome ditta *</label>
            <input autoFocus value={f.nome} onChange={e=>setF(x=>({...x,nome:e.target.value}))}
              onKeyDown={e=>e.key==='Enter'&&save()} style={iStyle}/>
          </div>
          <div style={{display:'flex',flexDirection:'column',gap:4}}>
            <label style={{fontSize:11,fontWeight:600,color:'var(--ink2)'}}>Referente</label>
            <input value={f.ref} onChange={e=>setF(x=>({...x,ref:e.target.value}))} style={iStyle}/>
          </div>
          <div style={{display:'flex',flexDirection:'column',gap:4}}>
            <label style={{fontSize:11,fontWeight:600,color:'var(--ink2)'}}>Telefono</label>
            <input value={f.tel} onChange={e=>setF(x=>({...x,tel:e.target.value}))} style={iStyle}/>
          </div>
          <div style={{gridColumn:'1/-1',display:'flex',flexDirection:'column',gap:4}}>
            <label style={{fontSize:11,fontWeight:600,color:'var(--ink2)'}}>Email</label>
            <input value={f.email} onChange={e=>setF(x=>({...x,email:e.target.value}))} style={iStyle}/>
          </div>
        </div>

        <div style={{display:'flex',flexDirection:'column',gap:6}}>
          <label style={{fontSize:11,fontWeight:600,color:'var(--ink2)'}}>Lavorazioni tipiche</label>
          <div style={{display:'flex',flexWrap:'wrap',gap:6,alignItems:'center',
            border:'1px solid var(--line)',borderRadius:8,padding:'8px 10px',background:'var(--card)',minHeight:40}}>
            {f.lavorazioni_tipiche.map(l=>(
              <LavBadge key={l} nome={l}
                onRemove={()=>setF(x=>({...x,lavorazioni_tipiche:x.lavorazioni_tipiche.filter(v=>v!==l)}))}/>
            ))}
            {addingLav
              ? <InlineLavSelect
                  lavorazioni={lavorazioni||[]}
                  used={f.lavorazioni_tipiche}
                  onSelect={v=>{ setF(x=>({...x,lavorazioni_tipiche:[...x.lavorazioni_tipiche,v]})); setAddingLav(false); }}
                  onAddNew={async nome=>{ const l=await onAddLavorazione(nome); setF(x=>({...x,lavorazioni_tipiche:[...x.lavorazioni_tipiche,l.nome]})); setAddingLav(false); }}
                  onClose={()=>setAddingLav(false)}
                />
              : <button className="btn sm ghost" onClick={()=>setAddingLav(true)} style={{fontSize:11}}>+ aggiungi</button>
            }
          </div>
        </div>

        <div style={{display:'flex',gap:8,justifyContent:'flex-end',marginTop:4}}>
          <button className="btn ghost sm" onClick={onClose}>Annulla</button>
          <button className="btn primary" onClick={save} disabled={saving||!f.nome.trim()}>
            {saving ? 'Salvataggio…' : isNew ? 'Aggiungi ditta' : 'Salva modifiche'}
          </button>
        </div>
      </div>
    </ModalOverlay>
  );
};

// ── RubricaModal ──────────────────────────────────────────────────────────────
const RubricaModal = ({rubrica, onSaveDitta, onDeleteDitta, onAddLavorazione, onClose}) => {
  const [search, setSearch] = React.useState('');
  const [editDitta, setEditDitta] = React.useState(null); // null = nessun edit aperto

  const filtered = (rubrica.ditte||[]).filter(d =>
    !search || d.nome.toLowerCase().includes(search.toLowerCase())
  );

  const handleDelete = async id => {
    if(!window.confirm('Eliminare questa ditta dalla rubrica?')) return;
    try { await onDeleteDitta(id); } catch(e){ alert('Errore: '+e.message); }
  };

  const iStyle = {border:'1px solid var(--line)',borderRadius:8,padding:'7px 10px',fontFamily:'var(--ff)',
    fontSize:13,background:'var(--bg)',color:'var(--ink)',outline:'none'};

  return (
    <ModalOverlay onClose={onClose} width={720}>
      <MHead
        title="Rubrica ditte"
        right={<button className="btn primary" onClick={()=>setEditDitta({})} style={{marginRight:8}}>
          <Icon name="plus" size={14}/>Nuova ditta
        </button>}
        onClose={onClose}
      />
      <div style={{flex:1,overflow:'auto',padding:'20px 24px',display:'flex',flexDirection:'column',gap:12}}>
        <input placeholder="Cerca ditta…" value={search} onChange={e=>setSearch(e.target.value)}
          style={{...iStyle,width:'100%',fontSize:14,padding:'9px 12px',boxSizing:'border-box'}}/>

        {filtered.length===0
          ? <div className="empty">Nessuna ditta in rubrica. Aggiungine una.</div>
          : filtered.map(d=>(
            <div key={d.id} style={{border:'1px solid var(--line)',borderRadius:12,padding:'13px 16px',
              background:'var(--card)',display:'flex',alignItems:'flex-start',gap:12}}>
              <div style={{flex:1}}>
                <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:5}}>
                  <span style={{fontWeight:700,fontSize:14,color:'var(--ink)'}}>{d.nome}</span>
                  {d.ref&&<span style={{fontSize:13,color:'var(--ink2)'}}>· {d.ref}</span>}
                  {d.tel&&<span style={{fontSize:12,color:'var(--ink3)'}}>· {d.tel}</span>}
                  {d.email&&<span style={{fontSize:12,color:'var(--ink3)'}}>· {d.email}</span>}
                </div>
                {(d.lavorazioni_tipiche||[]).length>0&&(
                  <div style={{display:'flex',flexWrap:'wrap',gap:4}}>
                    {(d.lavorazioni_tipiche||[]).map(l=><LavBadge key={l} nome={l}/>)}
                  </div>
                )}
              </div>
              <div style={{display:'flex',gap:6,flexShrink:0}}>
                <button className="btn sm ghost" onClick={()=>setEditDitta(d)}>Modifica</button>
                <button className="btn sm ghost" onClick={()=>handleDelete(d.id)}
                  style={{color:'var(--red)'}}>Elimina</button>
              </div>
            </div>
          ))
        }
      </div>

      {editDitta!==null && (
        <EditDittaModal
          ditta={editDitta}
          lavorazioni={rubrica.lavorazioni||[]}
          onSave={onSaveDitta}
          onAddLavorazione={onAddLavorazione}
          onClose={()=>setEditDitta(null)}
        />
      )}
    </ModalOverlay>
  );
};

// ── DittaPickerModal ──────────────────────────────────────────────────────────
const DittaPickerModal = ({rubrica, onSaveDitta, onAddLavorazione, onPick, onClose}) => {
  const [search, setSearch] = React.useState('');
  const [selectedId, setSelectedId] = React.useState(null);
  const [selLav, setSelLav] = React.useState([]);
  const [showNew, setShowNew] = React.useState(false);
  const [newF, setNewF] = React.useState({nome:'',ref:'',tel:'',email:'',lavorazioni_tipiche:[]});
  const [addingLav, setAddingLav] = React.useState(false);
  const [saving, setSaving] = React.useState(false);

  const filtered = (rubrica.ditte||[]).filter(d =>
    !search || d.nome.toLowerCase().includes(search.toLowerCase())
  );
  const selected = (rubrica.ditte||[]).find(d=>d.id===selectedId);

  const pickDitta = d => {
    setSelectedId(d.id);
    setSelLav([...(d.lavorazioni_tipiche||[])]);
    setShowNew(false);
  };

  const toggleLav = nome => setSelLav(ls =>
    ls.includes(nome) ? ls.filter(l=>l!==nome) : [...ls, nome]
  );

  const confirm = () => {
    if(!selected) return;
    onPick({ditta:selected, lavorazioni:selLav});
  };

  const saveAndPickNew = async () => {
    if(!newF.nome.trim()) return;
    setSaving(true);
    try {
      const saved = await onSaveDitta(newF);
      setSelectedId(saved.id);
      setSelLav([...(newF.lavorazioni_tipiche||[])]);
      setShowNew(false);
    } catch(e){ alert('Errore: '+e.message); } finally { setSaving(false); }
  };

  const iStyle = {border:'1px solid var(--line)',borderRadius:8,padding:'7px 10px',fontFamily:'var(--ff)',
    fontSize:13,background:'var(--bg)',color:'var(--ink)',outline:'none',width:'100%',boxSizing:'border-box'};

  return (
    <ModalOverlay onClose={onClose} width={700}>
      <MHead title="Aggiungi ditta al cantiere" onClose={onClose}/>
      <div style={{flex:1,overflow:'hidden',display:'flex',minHeight:0}}>
        {/* Left panel: search + list */}
        <div style={{width:260,borderRight:'1px solid var(--line)',display:'flex',flexDirection:'column',flexShrink:0}}>
          <div style={{padding:'14px 16px',borderBottom:'1px solid var(--line)'}}>
            <input
              autoFocus placeholder="Cerca ditta…" value={search}
              onChange={e=>setSearch(e.target.value)}
              style={{...iStyle,padding:'8px 12px',fontSize:13}}
            />
          </div>
          <div style={{flex:1,overflow:'auto',padding:'8px'}}>
            {filtered.map(d=>(
              <div key={d.id} onClick={()=>pickDitta(d)}
                style={{padding:'10px 12px',borderRadius:9,cursor:'pointer',marginBottom:2,
                  background:selectedId===d.id?'var(--primary-soft)':'transparent',
                  border:'1.5px solid '+(selectedId===d.id?'var(--primary)':'transparent'),
                  transition:'.12s'}}>
                <div style={{fontWeight:600,fontSize:13.5,color:selectedId===d.id?'var(--primary)':'var(--ink)'}}>{d.nome}</div>
                {d.ref&&<div style={{fontSize:12,color:'var(--ink3)',marginTop:1}}>{d.ref}</div>}
              </div>
            ))}
            {filtered.length===0&&<div className="empty" style={{fontSize:13}}>Nessun risultato</div>}
          </div>
          <div style={{padding:'12px 16px',borderTop:'1px solid var(--line)'}}>
            <button className="btn ghost sm" onClick={()=>{setShowNew(true);setSelectedId(null);}}
              style={{width:'100%',justifyContent:'center',fontSize:13}}>
              <Icon name="plus" size={13}/>Nuova ditta
            </button>
          </div>
        </div>

        {/* Right panel */}
        <div style={{flex:1,overflow:'auto',padding:'20px',display:'flex',flexDirection:'column',gap:14}}>
          {showNew ? (
            <>
              <div style={{fontWeight:700,fontSize:14}}>Nuova ditta</div>
              <div style={{display:'flex',flexDirection:'column',gap:10}}>
                <div><label style={{fontSize:11,fontWeight:600,color:'var(--ink2)',display:'block',marginBottom:3}}>Nome *</label>
                  <input autoFocus value={newF.nome} onChange={e=>setNewF(f=>({...f,nome:e.target.value}))} style={iStyle}/></div>
                <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
                  <div><label style={{fontSize:11,fontWeight:600,color:'var(--ink2)',display:'block',marginBottom:3}}>Referente</label>
                    <input value={newF.ref} onChange={e=>setNewF(f=>({...f,ref:e.target.value}))} style={iStyle}/></div>
                  <div><label style={{fontSize:11,fontWeight:600,color:'var(--ink2)',display:'block',marginBottom:3}}>Telefono</label>
                    <input value={newF.tel} onChange={e=>setNewF(f=>({...f,tel:e.target.value}))} style={iStyle}/></div>
                </div>
                <div><label style={{fontSize:11,fontWeight:600,color:'var(--ink2)',display:'block',marginBottom:3}}>Lavorazioni tipiche</label>
                  <div style={{display:'flex',flexWrap:'wrap',gap:4,alignItems:'center'}}>
                    {(newF.lavorazioni_tipiche||[]).map(l=>(
                      <LavBadge key={l} nome={l} onRemove={()=>setNewF(f=>({...f,lavorazioni_tipiche:f.lavorazioni_tipiche.filter(x=>x!==l)}))}/>
                    ))}
                    {addingLav
                      ? <InlineLavSelect
                          lavorazioni={rubrica.lavorazioni||[]}
                          used={newF.lavorazioni_tipiche}
                          onSelect={v=>{ setNewF(f=>({...f,lavorazioni_tipiche:[...f.lavorazioni_tipiche,v]})); setAddingLav(false); }}
                          onAddNew={async nome=>{ const l=await onAddLavorazione(nome); setNewF(f=>({...f,lavorazioni_tipiche:[...f.lavorazioni_tipiche,l.nome]})); setAddingLav(false); }}
                          onClose={()=>setAddingLav(false)}
                        />
                      : <button className="btn sm ghost" onClick={()=>setAddingLav(true)} style={{fontSize:11}}>+ aggiungi</button>
                    }
                  </div>
                </div>
              </div>
              <div style={{display:'flex',gap:8,marginTop:'auto'}}>
                <button className="btn ghost sm" onClick={()=>setShowNew(false)}>Annulla</button>
                <button className="btn primary" onClick={saveAndPickNew} disabled={saving||!newF.nome.trim()}>
                  {saving?'Salvataggio…':'Salva e seleziona'}
                </button>
              </div>
            </>
          ) : selected ? (
            <>
              <div>
                <div style={{fontWeight:700,fontSize:16,color:'var(--ink)',marginBottom:4}}>{selected.nome}</div>
                {selected.ref&&<div style={{fontSize:13,color:'var(--ink2)'}}>{selected.ref}</div>}
                {selected.tel&&<div style={{fontSize:13,color:'var(--ink3)'}}>{selected.tel}</div>}
                {selected.email&&<div style={{fontSize:13,color:'var(--ink3)'}}>{selected.email}</div>}
              </div>
              <div>
                <div style={{fontWeight:600,fontSize:13,marginBottom:8,color:'var(--ink)'}}>
                  Lavorazioni su questo cantiere:
                </div>
                <div style={{display:'flex',flexDirection:'column',gap:6}}>
                  {(rubrica.lavorazioni||[]).map(l=>(
                    <label key={l.id} style={{display:'flex',alignItems:'center',gap:9,cursor:'pointer',
                      padding:'8px 10px',borderRadius:8,
                      background:selLav.includes(l.nome)?'var(--primary-soft)':'transparent',
                      border:'1px solid '+(selLav.includes(l.nome)?'var(--primary)':'var(--line)'),
                      transition:'.1s'}}>
                      <input type="checkbox" checked={selLav.includes(l.nome)} onChange={()=>toggleLav(l.nome)}
                        style={{accentColor:'var(--primary)',width:15,height:15,cursor:'pointer'}}/>
                      <span style={{fontSize:13,fontWeight:selLav.includes(l.nome)?600:400,
                        color:selLav.includes(l.nome)?'var(--primary)':'var(--ink)'}}>{l.nome}</span>
                    </label>
                  ))}
                </div>
              </div>
              <div style={{marginTop:'auto',paddingTop:8}}>
                <button className="btn primary" onClick={confirm} disabled={selLav.length===0}
                  style={{width:'100%',justifyContent:'center'}}>
                  <Icon name="check" size={14}/>
                  Aggiungi al cantiere{selLav.length>0?` (${selLav.length} lavorazion${selLav.length===1?'e':'i'})`:''}
                </button>
                {selLav.length===0&&<div style={{fontSize:12,color:'var(--ink3)',textAlign:'center',marginTop:6}}>
                  Seleziona almeno una lavorazione
                </div>}
              </div>
            </>
          ) : (
            <div style={{display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',
              flex:1,color:'var(--ink3)',gap:8}}>
              <Icon name="list" size={28} style={{opacity:.3}}/>
              <span style={{fontSize:14}}>Seleziona una ditta dalla lista</span>
            </div>
          )}
        </div>
      </div>
    </ModalOverlay>
  );
};