// ============================================================
// Benchmark.jsx
// ============================================================
function Benchmark() {
  const { seed, user, pushToast, seedCustom } = useStore();
  // FASE 2 RBAC (sessione 102) — gating "+ Aggiungi offerta" (rda.edit alimenta benchmark).
  const canAddOffer = window.can('rda.edit', user, seedCustom);
  const [showNew, setShowNew] = React.useState(false);
  const [selectedCategory, setSelectedCategory] = React.useState(null);
  const [refreshTick, setRefreshTick] = React.useState(0);
  const benchmarks = seed.BENCHMARKS || [];
  // MVP gap #3: KPI calcolati dai deltas reali invece che hardcoded.
  const avgDelta = benchmarks.length > 0
    ? benchmarks.reduce((a, b) => a + (b.delta || 0), 0) / benchmarks.length
    : 0;
  const inBand = benchmarks.filter(b => Math.abs(b.delta || 0) <= 10).length;
  const totalSamples = benchmarks.reduce((a, b) => a + (b.samples || 0), 0);
  // Trovo la categoria con scarto positivo massimo per insight box.
  const mostDeviating = benchmarks.length > 0
    ? [...benchmarks].sort((a, b) => Math.abs(b.delta || 0) - Math.abs(a.delta || 0))[0]
    : null;

  // FASE A (realizzazione) — insight AI REALE: la raccomandazione è generata
  // dall'LLM (window.aiAsk → /api/ai/invoke) sul contesto benchmark, non più
  // da una regola locale ternaria. I bullet fattuali restano dati reali.
  const aiSystem = 'Sei un analista procurement CAPEX di una piattaforma di governance degli investimenti industriali. Ricevi il confronto tra offerte correnti e mediane storiche per categoria di spesa. Inizia con un grafico a barre del confronto per categoria, inserito come blocco ```chart con JSON {"type":"bar","title":"Offerta vs mediana per categoria","legend":["Offerta","Mediana"],"data":[{"label":"<categoria>","value":<offerta>,"value2":<mediana>}]} (valori numerici puri, senza simboli). Poi una raccomandazione operativa per la categoria con lo scostamento maggiore: massimo 3 frasi, italiano professionale, indica se procedere, negoziare una riduzione o richiedere ulteriori offerte, e perché.';
  const aiPrompt = React.useMemo(() => {
    if (!benchmarks.length) return '';
    const rows = benchmarks
      .map((b) => `- ${b.category}: offerta ${Math.round(b.currentOffer)} €, mediana storica ${Math.round(b.historicalMedian)} €, scarto ${(b.delta ?? 0).toFixed(1)}%, ${b.samples} campioni`)
      .join('\n');
    const md = mostDeviating
      ? `\n\nCategoria con scostamento maggiore: ${mostDeviating.category} (${(mostDeviating.delta ?? 0).toFixed(1)}% sulla mediana, banda di tolleranza ±10%).`
      : '';
    return `Confronto offerte correnti vs mediana storica su ${benchmarks.length} categorie CAPEX (${totalSamples} campioni indicizzati):\n${rows}${md}\n\nFornisci la valutazione del portafoglio e la raccomandazione operativa.`;
  }, [benchmarks, mostDeviating, totalSamples]);

  return (
    <div className="page fade-in">
      <div className="page-header">
        <div>
          <div className="eyebrow">Procurement</div>
          <h1 className="page-title">Benchmark offerte vs storico</h1>
          <div className="page-sub">Confronto automatico tra offerta corrente e mediana storica su progetti comparabili. {totalSamples} campioni indicizzati su {benchmarks.length} categori{benchmarks.length === 1 ? 'a' : 'e'} CAPEX principali.</div>
        </div>
        <div className="actions">
          <Btn
            variant={canAddOffer ? 'primary' : 'ghost'}
            size="sm"
            disabled={!canAddOffer}
            onClick={() => { if (canAddOffer) setShowNew(true); }}
            title={canAddOffer ? undefined : window.whyDisabled('rda.edit')}
          ><Icon name="plus" size={11}/> Aggiungi offerta</Btn>
        </div>
      </div>

      <div className="grid grid-3" style={{ marginBottom: 14 }}>
        <div className="card"><Stat label="Categorie monitorate" value={benchmarks.length} /></div>
        <div className="card"><Stat label="Scarto medio vs mediana" value={fmtPct(avgDelta, 1)} delta={inBand === benchmarks.length ? 'tutte entro ±10%' : `${inBand}/${benchmarks.length} entro ±10%`} tone={Math.abs(avgDelta) <= 5 ? 'up' : 'down'} /></div>
        <div className="card"><Stat label="Campioni storici" value={totalSamples} delta={`mediana ${benchmarks.length} categorie`} tone="" /></div>
      </div>

      <div className="card" style={{ marginBottom: 14 }}>
        <div className="card-header"><div className="title">Confronto per categoria</div></div>
        <table className="tbl">
          <thead><tr><th>Categoria</th><th className="num">Offerta corrente</th><th className="num">Mediana storica</th><th style={{width:200}}>Scostamento</th><th className="num">Campioni</th><th>Valutazione</th></tr></thead>
          <tbody>
            {seed.BENCHMARKS.map((b) => {
              const isHigh = b.delta > 5;
              const isLow = b.delta < -5;
              const absPct = Math.min(100, Math.abs(b.delta) * 5);
              return (
                <tr key={b.category} className="clickable" onClick={() => setSelectedCategory(b.category)}>
                  <td style={{ fontWeight: 500 }}>{b.category}</td>
                  <td className="num">{fmtEUR(b.currentOffer, true)}</td>
                  <td className="num">{fmtEUR(b.historicalMedian, true)}</td>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', height: 20, position: 'relative', background: 'var(--bg-2)', borderRadius: 4, border: '1px solid var(--line)' }}>
                      <div style={{ position: 'absolute', left: '50%', top: 0, bottom: 0, width: 1, background: 'var(--text-3)' }} />
                      <div style={{ position: 'absolute', left: b.delta > 0 ? '50%' : (50 - absPct) + '%', width: absPct + '%', top: 2, bottom: 2, background: isHigh ? 'var(--err)' : isLow ? 'var(--ok)' : 'var(--warn)', borderRadius: 2 }} />
                      <span className="num" style={{ position: 'absolute', right: 6, top: 2, fontSize: 10, color: 'var(--text-0)', fontWeight: 600 }}>{fmtPct(b.delta, 1)}</span>
                    </div>
                  </td>
                  <td className="num" style={{ color: 'var(--text-2)' }}>{b.samples}</td>
                  <td><Chip kind={isHigh ? 'err' : isLow ? 'ok' : 'warn'} dot>{isHigh ? 'sopra mediana' : isLow ? 'vantaggioso' : 'in linea'}</Chip></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      <div className="grid grid-2" style={{ gap: 14 }}>
        <div className="card">
          <div className="card-header"><div className="title"><Icon name="sparkle" size={12}/> Insight AI · {mostDeviating?.category || 'Nessun outlier'}</div></div>
          <div className="card-body" style={{ fontSize: 12.5, lineHeight: 1.6 }}>
            {mostDeviating ? (
              <>
                <p style={{ margin: 0 }}>La categoria <strong>{mostDeviating.category}</strong> è a <strong>{fmtPct(mostDeviating.delta, 1)}</strong> sulla mediana storica ({fmtEUR(mostDeviating.historicalMedian, true)}). Offerta corrente: <strong>{fmtEUR(mostDeviating.currentOffer, true)}</strong>.</p>
                <ul style={{ margin: '6px 0', paddingLeft: 18 }}>
                  <li>Campioni storici: {mostDeviating.samples}</li>
                  <li>Scarto in valore assoluto: {fmtEUR(Math.abs(mostDeviating.currentOffer - mostDeviating.historicalMedian), true)}</li>
                  <li>Banda di tolleranza: {Math.abs(mostDeviating.delta) > 10 ? '⚠️ FUORI banda ±10%' : '✓ entro banda ±10%'}</li>
                </ul>
                <div className="sep" style={{ margin: '10px 0 8px' }} />
                <AiInsightPanel
                  system={aiSystem}
                  prompt={aiPrompt}
                  idleLabel="Genera raccomandazione AI"
                  emptyHint="L'agente analizza scostamenti e campioni storici per suggerire l'azione di procurement."
                  compact
                />
              </>
            ) : (
              <p style={{ margin: 0 }}>Tutte le categorie sono in linea con la mediana storica. Nessuna deviazione critica rilevata.</p>
            )}
          </div>
        </div>
        <div className="card">
          <div className="card-header"><div className="title">Trend prezzi per categoria (2019-2025)</div></div>
          <div className="card-body">
            <div style={{ display: 'grid', gap: 10 }}>
              {seed.BENCHMARKS.slice(0, 4).map((b, i) => (
                <div key={i}>
                  <div className="row" style={{ justifyContent: 'space-between', fontSize: 11, marginBottom: 3 }}>
                    <span>{b.category}</span>
                    <span className="mono" style={{ color: 'var(--text-2)' }}>mediana {fmtEUR(b.historicalMedian, true)}</span>
                  </div>
                  <Spark data={[b.historicalMedian*0.88, b.historicalMedian*0.92, b.historicalMedian*0.95, b.historicalMedian, b.historicalMedian*1.02, b.historicalMedian*1.05, b.currentOffer]} width={420} height={32} tone={b.delta > 5 ? 'warn' : 'ok'} />
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {showNew && <NewOfferModal onClose={() => setShowNew(false)} onCreated={() => { setShowNew(false); setRefreshTick(t => t+1); pushToast({ title: 'Offerta registrata', desc: 'Benchmark ricomputato', tone: 'ok' }); }} user={user} pushToast={pushToast} categories={benchmarks.map(b => b.category)}/>}
      {selectedCategory && <BenchmarkAnalyticsModal category={selectedCategory} refreshTick={refreshTick} onClose={() => setSelectedCategory(null)}/>}
    </div>
  );
}

// FASE 13 — Modal "Aggiungi offerta": form (category, vendor, amount, qty, unit, date, source, notes)
// → POST /api/vendor-offers → benchmark ricomputato lato BE.
function NewOfferModal({ onClose, onCreated, user, pushToast, categories }) {
  const [category, setCategory] = React.useState(categories[0] || '');
  const [customCategory, setCustomCategory] = React.useState('');
  const [vendor, setVendor] = React.useState('');
  const [amount, setAmount] = React.useState('');
  const [quantity, setQuantity] = React.useState('1');
  const [unit, setUnit] = React.useState('');
  const today = new Date().toISOString().slice(0, 10);
  const [offerDate, setOfferDate] = React.useState(today);
  const [source, setSource] = React.useState('manual');
  const [notes, setNotes] = React.useState('');
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState(null);

  async function handleCreate() {
    setSubmitting(true); setError(null);
    try {
      const cat = category === '__custom' ? customCategory.trim() : category;
      if (!cat) { setError('Categoria obbligatoria'); return; }
      if (!vendor.trim()) { setError('Vendor obbligatorio'); return; }
      const amountNum = parseInt(amount, 10);
      if (!Number.isFinite(amountNum) || amountNum < 0) { setError('Amount non valido'); return; }
      const res = await fetch('/api/vendor-offers', {
        method: 'POST',
        headers: { 'content-type': 'application/json', ...(user?.id ? { 'X-Actor-Persona-Id': user.id } : {}) },
        body: JSON.stringify({
          category: cat,
          vendor: vendor.trim(),
          amountEur: amountNum,
          quantity: parseInt(quantity, 10) || 1,
          unit: unit.trim() || null,
          offerDate,
          source,
          notes: notes.trim() || null,
        }),
      });
      const json = await res.json().catch(() => ({}));
      if (!res.ok) {
        setError(json.error === 'validation_error'
          ? `Validazione: ${(json.issues || []).map(i => i.message).join(', ')}`
          : json.error || `HTTP ${res.status}`);
        return;
      }
      pushToast({ title: 'Offerta registrata', desc: `${cat} · ${json.benchmark?.samples || 1} campioni`, tone: 'ok' });
      onCreated();
    } catch (err) {
      setError(String(err?.message || err));
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <Modal open onClose={onClose} title="Nuova offerta vendor" size="md" footer={<>
      <Btn variant="ghost" size="sm" onClick={onClose} disabled={submitting}>Annulla</Btn>
      <Btn variant="primary" size="sm" onClick={handleCreate} disabled={submitting}>{submitting ? 'Salvataggio…' : 'Registra offerta'}</Btn>
    </>}>
      <div className="col" style={{gap: 12}}>
        {error && <div style={{padding:'8px 10px', border:'1px solid var(--err)', borderRadius:4, background:'rgba(192,57,43,0.08)', color:'var(--err)', fontSize:12}}>{error}</div>}
        <div className="field"><label>Categoria</label>
          <select value={category} onChange={e => setCategory(e.target.value)}>
            {categories.map(c => <option key={c} value={c}>{c}</option>)}
            <option value="__custom">+ Nuova categoria…</option>
          </select>
          {category === '__custom' && <input style={{marginTop: 6}} placeholder="es. Macchine utensili speciali" value={customCategory} onChange={e => setCustomCategory(e.target.value)}/>}
        </div>
        <div className="field"><label>Vendor</label><input value={vendor} onChange={e => setVendor(e.target.value)} placeholder="es. Siemens Italia"/></div>
        <div className="grid grid-3" style={{gap: 10}}>
          <div className="field"><label>Importo (€)</label><input type="number" min="0" value={amount} onChange={e => setAmount(e.target.value)} className="num"/></div>
          <div className="field"><label>Quantità</label><input type="number" min="1" value={quantity} onChange={e => setQuantity(e.target.value)} className="num"/></div>
          <div className="field"><label>Unità</label><input value={unit} onChange={e => setUnit(e.target.value)} placeholder="piece"/></div>
        </div>
        <div className="grid grid-2" style={{gap: 10}}>
          <div className="field"><label>Data offerta</label><input type="date" value={offerDate} onChange={e => setOfferDate(e.target.value)}/></div>
          <div className="field"><label>Origine</label>
            <select value={source} onChange={e => setSource(e.target.value)}>
              <option value="manual">Manuale</option>
              <option value="pdf_extracted">Estrazione PDF</option>
              <option value="ai_suggested">AI suggested</option>
            </select>
          </div>
        </div>
        <div className="field"><label>Note (opzionale, max 500)</label><textarea rows="2" maxLength="500" value={notes} onChange={e => setNotes(e.target.value)}/></div>
      </div>
    </Modal>
  );
}

// FASE 13 — Modal analytics dettagliate per categoria.
// Carica /api/benchmarks/[category]/analytics → stats + currentOffer + monthly trend + recentOffers.
function BenchmarkAnalyticsModal({ category, refreshTick, onClose }) {
  const [data, setData] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    setData(null); setError(null);
    fetch(`/api/benchmarks/${encodeURIComponent(category)}/analytics`, { credentials: 'same-origin' })
      .then(r => r.json())
      .then(j => setData(j))
      .catch(e => setError(String(e)));
  }, [category, refreshTick]);

  return (
    <Modal open onClose={onClose} title={`Benchmark · ${category}`} size="lg" footer={<Btn variant="ghost" size="sm" onClick={onClose}>Chiudi</Btn>}>
      {error && <div style={{padding:14, color:'var(--err)'}}>{error}</div>}
      {!data && !error && <div style={{padding:14, color:'var(--text-3)', textAlign:'center'}}>Caricamento…</div>}
      {data && data.samples === 0 && (
        <div style={{padding:14, color:'var(--text-3)', fontSize: 12}}>
          Nessuna offerta registrata in DB per questa categoria. Aggiungine alcune dal bottone "Aggiungi offerta" per popolare le statistiche.
        </div>
      )}
      {data && data.samples > 0 && (
        <div className="col" style={{gap: 14}}>
          <div className="grid grid-4" style={{gap: 8}}>
            <div className="card"><Stat label="Campioni" value={data.samples}/></div>
            <div className="card"><Stat label="Mediana" value={fmtEUR(Math.round(data.stats.median), true)}/></div>
            <div className="card"><Stat label="P25 / P75" value={`${fmtEUR(Math.round(data.stats.p25), true)} / ${fmtEUR(Math.round(data.stats.p75), true)}`}/></div>
            <div className="card"><Stat label="Range" value={`${fmtEUR(Math.round(data.stats.min), true)} ÷ ${fmtEUR(Math.round(data.stats.max), true)}`}/></div>
          </div>

          {data.currentOffer && (
            <div className="card">
              <div className="card-header"><div className="title">Offerta corrente</div></div>
              <div className="card-body">
                <div className="row" style={{gap: 12, alignItems: 'center'}}>
                  <div>
                    <div className="eyebrow">{data.currentOffer.vendor} · {data.currentOffer.offerDate}</div>
                    <div style={{fontSize: 22, fontWeight: 600}}>{fmtEUR(data.currentOffer.amountEur, true)}</div>
                  </div>
                  <span className="spacer"/>
                  {data.currentOffer.anomaly?.isAnomaly ? (
                    <Chip kind={data.currentOffer.anomaly.direction === 'over' ? 'err' : 'ok'} dot>
                      ⚠ anomaly · {data.currentOffer.anomaly.direction === 'over' ? '+' : ''}{data.currentOffer.anomaly.deltaPercent.toFixed(1)}%
                    </Chip>
                  ) : (
                    <Chip kind="info" dot>in linea · {data.currentOffer.anomaly.deltaPercent.toFixed(1)}%</Chip>
                  )}
                </div>
                <div style={{fontSize: 11, color: 'var(--text-3)', marginTop: 8}}>
                  IQR deviation: {data.currentOffer.anomaly.iqrDeviation.toFixed(2)} · z-score: {data.currentOffer.anomaly.zScore.toFixed(2)}
                </div>
              </div>
            </div>
          )}

          <div className="card">
            <div className="card-header"><div className="title">Trend mensile</div></div>
            <div className="card-body">
              {data.monthlyTrend.length === 0 ? (
                <div style={{fontSize: 11, color: 'var(--text-3)'}}>Nessun trend disponibile.</div>
              ) : (
                <table className="tbl">
                  <thead><tr><th>Mese</th><th className="num">Mediana</th><th className="num">Min ÷ Max</th><th className="num">Campioni</th></tr></thead>
                  <tbody>
                    {data.monthlyTrend.slice(-12).map(b => (
                      <tr key={b.month}>
                        <td className="mono" style={{fontSize: 11}}>{b.month}</td>
                        <td className="num">{fmtEUR(Math.round(b.median), true)}</td>
                        <td className="num" style={{fontSize: 11, color: 'var(--text-3)'}}>{fmtEUR(Math.round(b.min), true)} ÷ {fmtEUR(Math.round(b.max), true)}</td>
                        <td className="num">{b.count}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              )}
            </div>
          </div>

          {data.recentOffers.length > 0 && (
            <div className="card">
              <div className="card-header"><div className="title">Offerte recenti ({data.recentOffers.length})</div></div>
              <div className="card-body">
                <table className="tbl">
                  <thead><tr><th>Data</th><th>Vendor</th><th className="num">Importo</th><th className="num">Qty</th><th>Origine</th></tr></thead>
                  <tbody>
                    {data.recentOffers.map(o => (
                      <tr key={o.id}>
                        <td className="mono" style={{fontSize: 11}}>{o.offerDate}</td>
                        <td>{o.vendor}</td>
                        <td className="num">{fmtEUR(o.amountEur, true)}</td>
                        <td className="num">{o.quantity}</td>
                        <td><Chip kind={o.source === 'manual' ? '' : 'info'}>{o.source}</Chip></td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}
        </div>
      )}
    </Modal>
  );
}

Object.assign(window, { Benchmark });