import { useCollection, useIdentity } from '@deplixo/sdk';
import { Icon } from './components/icons.jsx';
import { TIPI_LAVORO, STATI, statusClass, formatDate, formatPrice, initials, MESI_SHORT } from './components/constants.js';
import WorkOrderDialog from './components/WorkOrderDialog.jsx';
import CustomerDialog from './components/CustomerDialog.jsx';

function App() {
  const { user } = useIdentity();
  const { items: allLavori, add: addLavoro, update: updateLavoro, remove: removeLavoro } = useCollection('lavori');
  const { items: allClienti, add: addCliente, update: updateCliente } = useCollection('clienti');

  const lavori = (allLavori || []).filter((x) => x.author?.id === user?.id);
  const clienti = (allClienti || []).filter((x) => x.author?.id === user?.id);

  const [view, setView] = useState('dashboard'); // dashboard | lavori | clienti | detail
  const [selectedId, setSelectedId] = useState(null);
  const [editingWO, setEditingWO] = useState(null);
  const [editingClient, setEditingClient] = useState(null);
  const [toast, setToast] = useState('');

  // filters for lavori list
  const [filterStato, setFilterStato] = useState('TUTTI');
  const [filterTipo, setFilterTipo] = useState('TUTTI');
  const [search, setSearch] = useState('');

  const woDialogRef = useRef(null);
  const custDialogRef = useRef(null);

  const showToast = (msg) => {
    setToast(msg);
    setTimeout(() => setToast(''), 2200);
  };

  const openNewWO = () => {
    setEditingWO(null);
    setTimeout(() => woDialogRef.current?.showModal(), 0);
  };
  const openEditWO = (l) => {
    setEditingWO({ id: l.id, ...(l.value || {}) });
    setTimeout(() => woDialogRef.current?.showModal(), 0);
  };
  const closeWODialog = () => {
    woDialogRef.current?.close();
    setEditingWO(null);
  };

  const openNewClient = () => {
    setEditingClient(null);
    setTimeout(() => custDialogRef.current?.showModal(), 0);
  };
  const openEditClient = (c) => {
    setEditingClient({ id: c.id, ...(c.value || {}) });
    setTimeout(() => custDialogRef.current?.showModal(), 0);
  };
  const closeCustDialog = () => {
    custDialogRef.current?.close();
    setEditingClient(null);
  };

  // Save work order — also upserts a customer entry
  const saveWO = async (data) => {
    // upsert customer
    const key = `${(data.nome||'').toLowerCase().trim()}|${(data.cognome||'').toLowerCase().trim()}|${(data.azienda||'').toLowerCase().trim()}`;
    const existing = clienti.find((c) => {
      const v = c.value || {};
      const k = `${(v.nome||'').toLowerCase().trim()}|${(v.cognome||'').toLowerCase().trim()}|${(v.azienda||'').toLowerCase().trim()}`;
      return k === key && key !== '||';
    });
    if (!existing && (data.nome || data.cognome || data.azienda)) {
      await addCliente({
        nome: data.nome, cognome: data.cognome, azienda: data.azienda,
        telefono: data.telefono, email: data.email, indirizzo: '', note: '',
      });
    }

    if (data.id) {
      const { id, ...payload } = data;
      await updateLavoro(id, payload);
      showToast('Lavoro aggiornato');
    } else {
      await addLavoro(data);
      showToast('Lavoro creato');
    }
    closeWODialog();
  };

  const saveClient = async (data) => {
    if (data.id) {
      const { id, ...payload } = data;
      await updateCliente(id, payload);
      showToast('Cliente aggiornato');
    } else {
      await addCliente(data);
      showToast('Cliente creato');
    }
    closeCustDialog();
  };

  const deleteWO = async (id) => {
    await removeLavoro(id);
    showToast('Lavoro eliminato');
    setView('lavori');
    setSelectedId(null);
  };

  const changeStato = async (l, s) => {
    await updateLavoro(l.id, { ...(l.value || {}), stato: s });
    showToast(`Stato: ${s}`);
  };

  // stats
  const inCorso = lavori.filter((l) => l.value?.stato === 'IN CORSO').length;
  const daFare = lavori.filter((l) => l.value?.stato === 'DA FARE').length;
  const completati = lavori.filter((l) => l.value?.stato === 'COMPLETATO' || l.value?.stato === 'CONSEGNATO').length;
  const inAttesa = lavori.filter((l) => l.value?.stato === 'IN ATTESA').length;

  const upcoming = lavori
    .filter((l) => l.value?.dataPrevista && !['COMPLETATO', 'CONSEGNATO'].includes(l.value?.stato))
    .sort((a, b) => new Date(a.value.dataPrevista) - new Date(b.value.dataPrevista))
    .slice(0, 5);

  // filtered work list
  const filtered = lavori
    .filter((l) => filterStato === 'TUTTI' ? true : l.value?.stato === filterStato)
    .filter((l) => filterTipo === 'TUTTI' ? true : l.value?.tipoLavoro === filterTipo)
    .filter((l) => {
      if (!search.trim()) return true;
      const s = search.toLowerCase();
      const v = l.value || {};
      return [v.nome, v.cognome, v.azienda, v.targa, v.marca, v.modello, v.veicolo]
        .filter(Boolean).some((f) => f.toLowerCase().includes(s));
    })
    .sort((a, b) => {
      const da = a.value?.dataPrevista || a.createdAt;
      const db = b.value?.dataPrevista || b.createdAt;
      return new Date(db) - new Date(da);
    });

  const selected = lavori.find((l) => l.id === selectedId);

  const goToDetail = (id) => {
    setSelectedId(id);
    setView('detail');
  };

  const customerLavori = (nome, cognome, azienda) => {
    const key = `${(nome||'').toLowerCase().trim()}|${(cognome||'').toLowerCase().trim()}|${(azienda||'').toLowerCase().trim()}`;
    return lavori.filter((l) => {
      const v = l.value || {};
      const k = `${(v.nome||'').toLowerCase().trim()}|${(v.cognome||'').toLowerCase().trim()}|${(v.azienda||'').toLowerCase().trim()}`;
      return k === key;
    });
  };

  return (
    <div className="app">
      <header className="app-header">
        <div style={{ display:'flex', alignItems:'center', gap:10 }}>
          <div className="logo-mark">LH</div>
          <div>
            <h1>LavoriHub</h1>
            <div className="user-name">{user?.name || 'Ospite'}</div>
          </div>
        </div>
      </header>

      {view === 'dashboard' && (
        <DashboardView
          inCorso={inCorso}
          daFare={daFare}
          completati={completati}
          inAttesa={inAttesa}
          upcoming={upcoming}
          onOpenLavoro={goToDetail}
          onNewLavoro={openNewWO}
        />
      )}

      {view === 'lavori' && (
        <LavoriView
          lavori={filtered}
          totalCount={lavori.length}
          filterStato={filterStato}
          setFilterStato={setFilterStato}
          filterTipo={filterTipo}
          setFilterTipo={setFilterTipo}
          search={search}
          setSearch={setSearch}
          onOpen={goToDetail}
          onNew={openNewWO}
        />
      )}

      {view === 'clienti' && (
        <ClientiView
          clienti={clienti}
          lavori={lavori}
          onNew={openNewClient}
          onEdit={openEditClient}
          customerLavori={customerLavori}
          onOpenLavoro={goToDetail}
        />
      )}

      {view === 'detail' && selected && (
        <DetailView
          lavoro={selected}
          onBack={() => setView('lavori')}
          onEdit={() => openEditWO(selected)}
          onDelete={() => deleteWO(selected.id)}
          onChangeStato={(s) => changeStato(selected, s)}
        />
      )}

      {view === 'detail' && !selected && (
        <div className="view">
          <div className="empty">
            <h3>Lavoro non trovato</h3>
            <button className="btn-primary" style={{ marginTop:16, maxWidth:200 }} onClick={() => setView('lavori')}>Torna ai lavori</button>
          </div>
        </div>
      )}

      <nav className="bottom-nav" aria-label="Navigazione principale">
        <button className="nav-btn" aria-current={view === 'dashboard' ? 'page' : undefined} onClick={() => setView('dashboard')} data-testid="nav-dashboard">
          <Icon.Home /> <span>Home</span>
        </button>
        <button className="nav-btn" aria-current={view === 'lavori' || view === 'detail' ? 'page' : undefined} onClick={() => setView('lavori')} data-testid="nav-lavori">
          <Icon.List /> <span>Lavori</span>
        </button>
        <button className="nav-btn" aria-current={view === 'clienti' ? 'page' : undefined} onClick={() => setView('clienti')} data-testid="nav-clienti">
          <Icon.Users /> <span>Clienti</span>
        </button>
      </nav>

      <WorkOrderDialog
        dialogRef={woDialogRef}
        initial={editingWO}
        clienti={clienti}
        onSave={saveWO}
        onClose={closeWODialog}
      />
      <CustomerDialog
        dialogRef={custDialogRef}
        initial={editingClient}
        onSave={saveClient}
        onClose={closeCustDialog}
      />

      {toast && <div className="toast" role="status" aria-live="polite">{toast}</div>}
    </div>
  );
}

/* ------------ Dashboard ------------ */
function DashboardView({ inCorso, daFare, completati, inAttesa, upcoming, onOpenLavoro, onNewLavoro }) {
  return (
    <div className="view">
      <h2>Dashboard</h2>

      <div className="stats-grid">
        <div className="stat-card">
          <div className="stat-icon"><Icon.Clock style={{ width:18, height:18 }} /></div>
          <div className="stat-label">In corso</div>
          <div className="stat-value">{inCorso}</div>
        </div>
        <div className="stat-card warn">
          <div className="stat-icon"><Icon.List style={{ width:18, height:18 }} /></div>
          <div className="stat-label">Da iniziare</div>
          <div className="stat-value">{daFare}</div>
        </div>
        <div className="stat-card success">
          <div className="stat-icon"><Icon.Check style={{ width:18, height:18 }} /></div>
          <div className="stat-label">Completati</div>
          <div className="stat-value">{completati}</div>
        </div>
        <div className="stat-card accent">
          <div className="stat-icon"><Icon.Pause style={{ width:18, height:18 }} /></div>
          <div className="stat-label">In attesa</div>
          <div className="stat-value">{inAttesa}</div>
        </div>
      </div>

      <button className="cta-primary" data-testid="new-work-btn" onClick={onNewLavoro}>
        <Icon.Plus style={{ width:20, height:20 }} />
        NUOVO LAVORO
      </button>

      <div className="subhead">Prossimi lavori</div>
      {upcoming.length === 0 ? (
        <div className="empty" style={{ padding:'32px 12px' }}>
          <div className="empty-icon"><Icon.Calendar /></div>
          <h3>Nessun lavoro programmato</h3>
          <p>Crea un nuovo lavoro per iniziare</p>
        </div>
      ) : (
        <div className="upcoming-list">
          {upcoming.map((l) => {
            const v = l.value || {};
            const d = v.dataPrevista ? new Date(v.dataPrevista) : null;
            return (
              <button
                key={l.id}
                className="upcoming-card"
                onClick={() => onOpenLavoro(l.id)}
                data-testid={`upcoming-${l.id}`}
              >
                <div className="date-block">
                  <div className="day">{d ? String(d.getDate()).padStart(2,'0') : '—'}</div>
                  <div className="mo">{d ? MESI_SHORT[d.getMonth()] : ''}</div>
                </div>
                <div className="main-info">
                  <div className="cust">
                    {[v.nome, v.cognome].filter(Boolean).join(' ') || v.azienda || 'Cliente'}
                  </div>
                  <div className="veh">
                    {[v.marca, v.modello, v.targa].filter(Boolean).join(' · ') || v.veicolo || v.tipoLavoro}
                  </div>
                </div>
                <span className={`status-pill ${statusClass(v.stato)}`}>{v.stato || 'DA FARE'}</span>
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}

/* ------------ Lavori list ------------ */
function LavoriView({ lavori, totalCount, filterStato, setFilterStato, filterTipo, setFilterTipo, search, setSearch, onOpen, onNew }) {
  return (
    <div className="view">
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
        <h2 style={{ marginBottom: 8 }}>Lavori</h2>
        <button className="icon-btn primary" aria-label="Nuovo lavoro" onClick={onNew} data-testid="lavori-new-btn">
          <Icon.Plus style={{ width:20, height:20 }} />
        </button>
      </div>

      <div className="search-wrap">
        <Icon.Search style={{ width:16, height:16 }} />
        <input
          className="search-input"
          placeholder="Cerca cliente, targa, veicolo…"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          data-testid="lavori-search-input"
          aria-label="Cerca lavori"
        />
      </div>

      <div className="filters-bar" role="group" aria-label="Filtro stato">
        {['TUTTI', ...STATI].map((s) => (
          <button
            key={s}
            className="filter-chip"
            aria-pressed={filterStato === s}
            onClick={() => setFilterStato(s)}
            data-testid={`filter-stato-${s.replace(/\s+/g,'-').toLowerCase()}`}
          >{s}</button>
        ))}
      </div>
      <div className="filters-bar" role="group" aria-label="Filtro tipo">
        {['TUTTI', ...TIPI_LAVORO].map((t) => (
          <button
            key={t}
            className="filter-chip"
            aria-pressed={filterTipo === t}
            onClick={() => setFilterTipo(t)}
            data-testid={`filter-tipo-${t.replace(/\s+/g,'-').toLowerCase()}`}
          >{t}</button>
        ))}
      </div>

      {lavori.length === 0 ? (
        <div className="empty">
          <div className="empty-icon"><Icon.List /></div>
          <h3>{totalCount === 0 ? 'Nessun lavoro' : 'Nessun risultato'}</h3>
          <p>{totalCount === 0 ? 'Tocca + per crearne uno' : 'Prova a modificare i filtri'}</p>
        </div>
      ) : (
        <div className="work-list">
          {lavori.map((l) => {
            const v = l.value || {};
            return (
              <button
                key={l.id}
                className="work-card"
                onClick={() => onOpen(l.id)}
                data-testid={`work-card-${l.id}`}
              >
                <div className="top-row">
                  <div>
                    <div className="customer">
                      {[v.nome, v.cognome].filter(Boolean).join(' ') || v.azienda || 'Cliente'}
                    </div>
                    <div className="vehicle">
                      {[v.marca, v.modello].filter(Boolean).join(' ')}
                      {v.targa ? ` · ${v.targa}` : ''}
                      {!v.marca && !v.modello && !v.targa ? (v.veicolo || '—') : ''}
                    </div>
                  </div>
                  <span className={`status-pill ${statusClass(v.stato)}`}>{v.stato || 'DA FARE'}</span>
                </div>
                <div className="mid-row">
                  <span className="type-badge">{v.tipoLavoro || 'SERVIZIO'}</span>
                  <span className="date-line">
                    <Icon.Calendar style={{ width:12, height:12 }} />
                    {formatDate(v.dataPrevista)}
                  </span>
                  {v.prezzo && (
                    <span className="date-line" style={{ marginLeft:'auto', fontWeight:600, color:'var(--text)' }}>
                      {formatPrice(v.prezzo)}
                    </span>
                  )}
                </div>
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}

/* ------------ Clienti ------------ */
function ClientiView({ clienti, onNew, onEdit, customerLavori, onOpenLavoro }) {
  const [expandedId, setExpandedId] = useState(null);
  const [q, setQ] = useState('');
  const filtered = clienti.filter((c) => {
    if (!q.trim()) return true;
    const v = c.value || {};
    const s = q.toLowerCase();
    return [v.nome, v.cognome, v.azienda, v.telefono, v.email].filter(Boolean).some((f) => f.toLowerCase().includes(s));
  });

  return (
    <div className="view">
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
        <h2 style={{ marginBottom: 8 }}>Clienti</h2>
        <button className="icon-btn primary" aria-label="Nuovo cliente" onClick={onNew} data-testid="clienti-new-btn">
          <Icon.Plus style={{ width:20, height:20 }} />
        </button>
      </div>

      <div className="search-wrap">
        <Icon.Search style={{ width:16, height:16 }} />
        <input
          className="search-input"
          placeholder="Cerca cliente…"
          value={q}
          onChange={(e) => setQ(e.target.value)}
          data-testid="clienti-search-input"
          aria-label="Cerca clienti"
        />
      </div>

      {filtered.length === 0 ? (
        <div className="empty">
          <div className="empty-icon"><Icon.Users /></div>
          <h3>{clienti.length === 0 ? 'Nessun cliente' : 'Nessun risultato'}</h3>
          <p>{clienti.length === 0 ? 'Tocca + per aggiungere un cliente' : ''}</p>
        </div>
      ) : (
        <div className="work-list">
          {filtered.map((c) => {
            const v = c.value || {};
            const woList = customerLavori(v.nome, v.cognome, v.azienda);
            const isOpen = expandedId === c.id;
            return (
              <div key={c.id}>
                <button
                  className="customer-card"
                  onClick={() => setExpandedId(isOpen ? null : c.id)}
                  data-testid={`customer-card-${c.id}`}
                  aria-expanded={isOpen}
                >
                  <div className="avatar">{initials(v.nome, v.cognome) || (v.azienda?.[0] || '?').toUpperCase()}</div>
                  <div className="info">
                    <div className="name">
                      {[v.nome, v.cognome].filter(Boolean).join(' ') || v.azienda || 'Cliente'}
                    </div>
                    <div className="meta">
                      {v.azienda && [v.nome, v.cognome].filter(Boolean).length ? `${v.azienda} · ` : ''}
                      {v.telefono || v.email || '—'}
                    </div>
                  </div>
                  <span className="count">{woList.length}</span>
                </button>
                {isOpen && (
                  <div className="detail-section" style={{ marginTop: 8 }}>
                    {v.telefono && <div className="detail-row"><span className="label">Telefono</span><span className="value">{v.telefono}</span></div>}
                    {v.email && <div className="detail-row"><span className="label">Email</span><span className="value">{v.email}</span></div>}
                    {v.indirizzo && <div className="detail-row"><span className="label">Indirizzo</span><span className="value">{v.indirizzo}</span></div>}
                    {v.azienda && <div className="detail-row"><span className="label">Azienda</span><span className="value">{v.azienda}</span></div>}
                    {v.note && (
                      <>
                        <div style={{ fontSize:11, fontWeight:700, color:'var(--text-muted)', textTransform:'uppercase', letterSpacing:'0.5px', margin:'10px 0 6px' }}>Note</div>
                        <div className="detail-note">{v.note}</div>
                      </>
                    )}
                    <div style={{ display:'flex', gap:8, marginTop:12 }}>
                      <button className="btn-secondary" onClick={() => onEdit(c)} data-testid={`edit-customer-${c.id}`}>
                        <Icon.Edit style={{ width:14, height:14, verticalAlign:'middle', marginRight:6 }} />
                        Modifica
                      </button>
                    </div>

                    <div style={{ fontSize:11, fontWeight:700, color:'var(--text-muted)', textTransform:'uppercase', letterSpacing:'0.5px', margin:'16px 0 8px' }}>
                      Lavori ({woList.length})
                    </div>
                    {woList.length === 0 ? (
                      <div style={{ fontSize:13, color:'var(--text-muted)', padding:'8px 0' }}>Nessun lavoro registrato</div>
                    ) : (
                      <div className="work-list">
                        {woList.map((l) => {
                          const lv = l.value || {};
                          return (
                            <button key={l.id} className="work-card" onClick={() => onOpenLavoro(l.id)} data-testid={`cust-lavoro-${l.id}`}>
                              <div className="top-row">
                                <div>
                                  <div className="customer" style={{ fontSize:14 }}>
                                    {[lv.marca, lv.modello].filter(Boolean).join(' ') || lv.veicolo || lv.tipoLavoro}
                                  </div>
                                  <div className="vehicle">{lv.targa || ''} · {formatDate(lv.dataPrevista)}</div>
                                </div>
                                <span className={`status-pill ${statusClass(lv.stato)}`}>{lv.stato || 'DA FARE'}</span>
                              </div>
                              <div className="mid-row">
                                <span className="type-badge">{lv.tipoLavoro || 'SERVIZIO'}</span>
                              </div>
                            </button>
                          );
                        })}
                      </div>
                    )}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

/* ------------ Detail ------------ */
function DetailView({ lavoro, onBack, onEdit, onDelete, onChangeStato }) {
  const v = lavoro.value || {};
  const [confirmDel, setConfirmDel] = useState(false);
  const margine = (v.prezzo && v.costoMateriale)
    ? (Number(v.prezzo) - Number(v.costoMateriale))
    : null;

  return (
    <>
      <div className="detail-header">
        <button className="icon-btn" aria-label="Indietro" onClick={onBack} data-testid="detail-back-btn">
          <Icon.ArrowLeft style={{ width:18, height:18 }} />
        </button>
        <div style={{ flex:1, fontSize:16, fontWeight:700 }}>
          {[v.nome, v.cognome].filter(Boolean).join(' ') || v.azienda || 'Lavoro'}
        </div>
        <button className="icon-btn primary" aria-label="Modifica" onClick={onEdit} data-testid="detail-edit-btn">
          <Icon.Edit style={{ width:16, height:16 }} />
        </button>
      </div>
      <div className="view" style={{ paddingTop: 0 }}>
        <div className="detail-section">
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:12 }}>
            <span className="type-badge">{v.tipoLavoro || 'SERVIZIO'}</span>
            <span className={`status-pill ${statusClass(v.stato)}`}>{v.stato || 'DA FARE'}</span>
          </div>
          <h3 style={{ margin: '0 0 8px' }}>Cambia stato</h3>
          <div className="status-selector">
            {STATI.map((s) => (
              <button
                key={s}
                className="status-option"
                aria-pressed={v.stato === s}
                onClick={() => onChangeStato(s)}
                data-testid={`detail-stato-${s.replace(/\s+/g,'-').toLowerCase()}`}
              >{s}</button>
            ))}
          </div>
        </div>

        <div className="detail-section">
          <h3>Cliente</h3>
          <div className="detail-row"><span className="label">Nome</span><span className="value">{[v.nome, v.cognome].filter(Boolean).join(' ') || '—'}</span></div>
          {v.azienda && <div className="detail-row"><span className="label">Azienda</span><span className="value">{v.azienda}</span></div>}
          {v.telefono && (
            <div className="detail-row">
              <span className="label">Telefono</span>
              <span className="value">
                <a href={`tel:${v.telefono}`} style={{ color:'var(--primary)', textDecoration:'none' }}>{v.telefono}</a>
              </span>
            </div>
          )}
          {v.email && (
            <div className="detail-row">
              <span className="label">Email</span>
              <span className="value">
                <a href={`mailto:${v.email}`} style={{ color:'var(--primary)', textDecoration:'none' }}>{v.email}</a>
              </span>
            </div>
          )}
        </div>

        <div className="detail-section">
          <h3>Veicolo</h3>
          {v.veicolo && <div className="detail-row"><span className="label">Tipo</span><span className="value">{v.veicolo}</span></div>}
          <div className="detail-row"><span className="label">Marca</span><span className="value">{v.marca || '—'}</span></div>
          <div className="detail-row"><span className="label">Modello</span><span className="value">{v.modello || '—'}</span></div>
          <div className="detail-row"><span className="label">Targa</span><span className="value" style={{ textTransform:'uppercase', fontFamily:'var(--font-mono)' }}>{v.targa || '—'}</span></div>
        </div>

        <div className="detail-section">
          <h3>Date</h3>
          <div className="detail-row"><span className="label">Data prevista</span><span className="value">{formatDate(v.dataPrevista)}</span></div>
          <div className="detail-row"><span className="label">Data consegna</span><span className="value">{formatDate(v.dataConsegna)}</span></div>
        </div>

        <div className="detail-section">
          <h3>Prezzo & Costi</h3>
          <div className="detail-row"><span className="label">Prezzo</span><span className="value">{formatPrice(v.prezzo)}</span></div>
          <div className="detail-row"><span className="label">Costo materiale</span><span className="value">{formatPrice(v.costoMateriale)}</span></div>
          {margine !== null && (
            <div className="detail-row">
              <span className="label">Margine</span>
              <span className="value" style={{ color: margine >= 0 ? 'var(--success)' : 'var(--danger)' }}>{formatPrice(margine)}</span>
            </div>
          )}
        </div>

        {v.note && (
          <div className="detail-section">
            <h3>Note</h3>
            <div className="detail-note">{v.note}</div>
          </div>
        )}

        {(v.foto || []).length > 0 && (
          <div className="detail-section">
            <h3>Foto ({v.foto.length})</h3>
            <div className="photo-grid">
              {v.foto.map((p) => (
                <div key={p.id} className="photo-tile">
                  <img src={p.dataUrl} alt={p.name} />
                </div>
              ))}
            </div>
          </div>
        )}

        {(v.allegati || []).length > 0 && (
          <div className="detail-section">
            <h3>Allegati ({v.allegati.length})</h3>
            <div className="attach-list">
              {v.allegati.map((a) => (
                <div key={a.id} className="attach-item">
                  <Icon.Paperclip style={{ width:14, height:14, color:'var(--text-muted)' }} />
                  <span className="aname">{a.name}</span>
                  <a href={a.dataUrl} download={a.name}>Apri</a>
                </div>
              ))}
            </div>
          </div>
        )}

        {!confirmDel ? (
          <button className="btn-danger" onClick={() => setConfirmDel(true)} data-testid="detail-delete-btn">
            <Icon.Trash style={{ width:14, height:14, verticalAlign:'middle', marginRight:6 }} />
            Elimina lavoro
          </button>
        ) : (
          <div style={{ display:'flex', gap:8, marginTop:16 }}>
            <button className="btn-secondary" onClick={() => setConfirmDel(false)} data-testid="detail-cancel-delete">Annulla</button>
            <button className="btn-primary" style={{ background:'var(--danger)' }} onClick={onDelete} data-testid="detail-confirm-delete">Conferma eliminazione</button>
          </div>
        )}
      </div>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);