/* Resultaten screen */

function ReviewTooltip({ r }) {
  const [zichtbaar, setZichtbaar] = React.useState(false);
  const ref = React.useRef(null);
  const [links, setLinks] = React.useState(false);

  function toonTooltip() {
    if (ref.current) {
      const rect = ref.current.getBoundingClientRect();
      setLinks(rect.right > window.innerWidth - 260);
    }
    setZichtbaar(true);
  }

  if (!r.heeft_review) return <span style={{color:'var(--color-border)'}}>—</span>;

  const ikoon = r.beoordeling === 'correct' ? '✅' : r.beoordeling === 'onzeker' ? '❓' : '❌';
  const kleur = r.beoordeling === 'correct' ? 'var(--color-success)' : r.beoordeling === 'onzeker' ? 'var(--color-warning)' : 'var(--color-danger)';
  const label = r.beoordeling === 'correct' ? 'Correct' : r.beoordeling === 'onzeker' ? 'Onzeker' : 'Incorrect';

  return (
    <div ref={ref} style={{position:'relative', display:'inline-block'}}
      onMouseEnter={toonTooltip} onMouseLeave={() => setZichtbaar(false)}>
      <span style={{cursor:'default', fontSize:'var(--font-size-md)'}}>{ikoon}</span>
      {zichtbaar && (
        <div style={{
          position:'absolute', bottom:'calc(100% + 6px)',
          [links ? 'right' : 'left']: 0,
          background:'var(--color-surface-raised)',
          border:'1px solid var(--color-border)',
          borderRadius:8, padding:'12px 14px', width:240,
          fontSize:'var(--font-size-xs)', zIndex:99,
          boxShadow:'0 4px 20px rgba(0,0,0,0.3)', whiteSpace:'normal',
          lineHeight:1.6,
        }}>
          <div style={{fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em',
            fontSize:'var(--font-size-xs)', color:'var(--text-muted)', marginBottom:8}}>
            Medewerkersbeoordeling
          </div>
          <div style={{display:'flex', justifyContent:'space-between', marginBottom:4}}>
            <span style={{color:'var(--text-muted)'}}>Uitkomst</span>
            <span style={{color:kleur, fontWeight:600}}>{ikoon} {label}</span>
          </div>
          <div style={{height:1, background:'var(--color-border)', margin:'6px 0'}} />
          <div style={{display:'flex', justifyContent:'space-between', marginBottom:2}}>
            <span style={{color:'var(--text-muted)'}}>Luchtfoto</span>
            <span>{r.brondocument || '—'}</span>
          </div>
          <div style={{display:'flex', justifyContent:'space-between', marginBottom:2}}>
            <span style={{color:'var(--text-muted)'}}>AI-model</span>
            <span style={{fontFamily:'monospace'}}>{r.ai_model || '—'}</span>
          </div>
          <div style={{display:'flex', justifyContent:'space-between', marginBottom:2}}>
            <span style={{color:'var(--text-muted)'}}>Pipeline datum</span>
            <span>{fmtDateTime(r.geanalyseerd_op)}</span>
          </div>
          <div style={{height:1, background:'var(--color-border)', margin:'6px 0'}} />
          <div style={{display:'flex', justifyContent:'space-between'}}>
            <span style={{color:'var(--text-muted)'}}>Beoordeeld op</span>
            <span>{fmtDateTime(r.beoordeeld_op)}</span>
          </div>
        </div>
      )}
    </div>
  );
}

function AanwezigBadge({ r }) {
  if (r.aanwezig === true) return <Badge kind="success">Ja</Badge>;
  if (r.aanwezig === false) return <Badge kind="neutral">Nee</Badge>;
  return <Badge kind={r.analyse_status && r.analyse_status !== 'ok' ? 'warning' : 'neutral'}>Onbekend</Badge>;
}

function AnalyseStatusBadge({ r }) {
  const status = r.analyse_status || 'ok';
  if (status === 'ok') return <Badge kind="success">ok</Badge>;
  const label = r.fout_code || status;
  return <Badge kind="warning">{label}</Badge>;
}

function SchermResultaten({ gemeenten, defaultGemeente, onNaarPand }) {
  const [gemeente, setGemeente] = useState(() => defaultGemeente || '');
  const [detectieType, setDetectieType] = useState('contour');
  const [resultaten, setResultaten] = useState([]);
  const [stats, setStats] = useState(null);
  const [laden, setLaden] = useState(false);

  // Kolomfilters (client-side)
  const [fPandId, setFPandId] = useState('');
  const [fTaak, setFTaak] = useState('');
  const [fAanwezig, setFAanwezig] = useState('alle');
  const [fZekerheid, setFZekerheid] = useState('alle');
  const [fToelichting, setFToelichting] = useState('');
  const [fLuchtfoto, setFLuchtfoto] = useState('alle');
  const [fModel, setFModel] = useState('alle');
  const [fDatumVan, setFDatumVan] = useState('');
  const [fDatumTot, setFDatumTot] = useState('');
  const [fReview, setFReview] = useState('alle');

  const eersteGemeente = gemeenten.find(g => g.status === 'klaar');
  const actieveGemeente = gemeente || defaultGemeente || (eersteGemeente ? eersteGemeente.code : '');
  const isPerceelObjecten = detectieType === 'perceel_objecten';

  useEffect(() => {
    if (!gemeente && actieveGemeente) setGemeente(actieveGemeente);
  }, [gemeente, actieveGemeente]);

  async function laad() {
    if (!actieveGemeente) return;
    setLaden(true);
    if (isPerceelObjecten) {
      const params = new URLSearchParams({ gemeente_code: actieveGemeente });
      const objecten = await fetch(`${API}/perceel-objecten?${params}`).then(r => r.json()).catch(() => []);
      const lijst = Array.isArray(objecten) ? objecten : [];
      setResultaten(lijst);
      setStats({
        totaal: lijst.length,
        aanwezig: lijst.filter(o => o.object_type === 'contourafwijking').length,
        hoog: lijst.filter(o => o.object_type === 'zonnepanelen').length,
        laag: lijst.filter(o => o.object_type === 'natuurlijk').length,
      });
    } else {
      const params = new URLSearchParams({ gemeente_code: actieveGemeente, detectie_type: detectieType });
      const rijen = await fetch(`${API}/resultaten?${params}`).then(r => r.json()).catch(() => []);
      setResultaten(Array.isArray(rijen) ? rijen : []);
      const statsLijst = await fetch(`${API}/resultaten/stats?gemeente_code=${actieveGemeente}`).then(r => r.json()).catch(() => []);
      const s = Array.isArray(statsLijst) ? statsLijst.find(x => x.detectie_type === detectieType) : null;
      setStats(s ? { totaal: s.totaal, aanwezig: s.aanwezig_count, hoog: s.hoog_count, laag: s.laag_count } : null);
    }
    setLaden(false);
  }
  useEffect(() => { laad(); }, [actieveGemeente, detectieType]);

  async function verwijderResultaat(r) {
    if (!confirm(`Detectieresultaat #${r.id} (pand ${r.pand_identificatie}) verwijderen? Bijbehorende vlakken, review en afbeelding gaan ook weg.`)) return;
    const resp = await fetch(`${API}/resultaten/${r.id}`, { method: 'DELETE' });
    if (resp.ok) laad();
    else alert('Verwijderen mislukt.');
  }

  const exportCSV = async () => {
    if (!actieveGemeente || isPerceelObjecten) return;
    window.location = `${API}/resultaten/export?gemeente_code=${actieveGemeente}&detectie_type=${detectieType}`;
  };

  function resetFilters() {
    setFPandId(''); setFTaak(''); setFAanwezig('alle'); setFZekerheid('alle');
    setFToelichting(''); setFLuchtfoto('alle'); setFModel('alle');
    setFDatumVan(''); setFDatumTot(''); setFReview('alle');
  }

  const uniekeModellen = [...new Set(resultaten.map(r => r.ai_model).filter(Boolean))].sort();
  const uniekeLuchtfotos = [...new Set(resultaten.map(r => r.kaartmateriaal_naam).filter(Boolean))].sort();

  const actieveFilters = fPandId || fTaak || fAanwezig !== 'alle' || fZekerheid !== 'alle' ||
    fToelichting || fLuchtfoto !== 'alle' || fModel !== 'alle' ||
    fDatumVan || fDatumTot || fReview !== 'alle';

  const gefilterd = resultaten.filter(r => {
    const idVeld = isPerceelObjecten ? `${r.gekoppeld_pand_id || ''} ${r.perceel_id || ''}` : (r.pand_identificatie || '');
    if (fPandId && !idVeld.toLowerCase().includes(fPandId.toLowerCase())) return false;
    if (fTaak && !String(r.taak_id || '').includes(fTaak.replace(/^#/, ''))) return false;
    if (isPerceelObjecten && fAanwezig === 'ja' && r.object_type !== 'contourafwijking') return false;
    if (isPerceelObjecten && fAanwezig === 'nee' && r.object_type === 'contourafwijking') return false;
    if (!isPerceelObjecten && fAanwezig === 'ja' && r.aanwezig !== true) return false;
    if (!isPerceelObjecten && fAanwezig === 'nee' && r.aanwezig !== false) return false;
    if (fZekerheid !== 'alle' && r.zekerheid !== fZekerheid) return false;
    if (fToelichting && !r.toelichting?.toLowerCase().includes(fToelichting.toLowerCase())) return false;
    if (fLuchtfoto !== 'alle' && r.kaartmateriaal_naam !== fLuchtfoto) return false;
    if (fModel !== 'alle' && r.ai_model !== fModel) return false;
    if (fDatumVan && r.geanalyseerd_op && r.geanalyseerd_op < fDatumVan) return false;
    if (fDatumTot && r.geanalyseerd_op && r.geanalyseerd_op.slice(0, 10) > fDatumTot) return false;
    if (fReview === 'geen' && r.heeft_review) return false;
    if (fReview !== 'alle' && fReview !== 'geen' && r.beoordeling !== fReview) return false;
    return true;
  });

  const thFilterStyle = {
    padding: '4px 8px',
    background: 'var(--color-primary-light)',
    borderBottom: '2px solid var(--color-primary)',
  };
  const filterInputStyle = {
    width: '100%',
    padding: '3px 6px',
    fontSize: 'var(--font-size-xs)',
    border: '1px solid var(--color-border)',
    borderRadius: 'var(--radius-sm)',
    background: 'var(--surface-card)',
    color: 'var(--text-body)',
    boxSizing: 'border-box',
  };

  return (
    <div className="bd-page">
      <div className="bd-page-head">
        <div><h1>Resultaten</h1><p>Bekijk detectieresultaten per gemeente en type.</p></div>
        <div className="bd-page-head-actions">
          {actieveFilters && <Btn kind="ghost" icon="filter-x" onClick={resetFilters}>Filters wissen</Btn>}
          <Btn kind="secondary" icon="download" onClick={exportCSV} disabled={!actieveGemeente || isPerceelObjecten}>Export CSV</Btn>
        </div>
      </div>

      <div className="bd-card">
        <div className="bd-grid-2">
          <Field label="Gemeente">
            <select className="bd-select" value={actieveGemeente} onChange={e => setGemeente(e.target.value)}>
              <option value="">— Selecteer gemeente —</option>
              {gemeenten.filter(g=>g.status==='klaar').map(g => <option key={g.code} value={g.code}>{g.code} — {g.naam}</option>)}
            </select>
          </Field>
          <Field label="Detectietype">
            <div className="bd-pill-tabs">
              {['contour','zonnepanelen','dakkapel'].map(t => (
                <button key={t} className={'bd-pill-tab' + (detectieType === t ? ' is-active' : '')} onClick={() => setDetectieType(t)}>
                  <Icon name={DETECTIE_ICON[t]} size={14} /> {DETECTIE_LABEL[t]}
                </button>
              ))}
            </div>
          </Field>
        </div>
      </div>

      {stats && (
        <div className="bd-stats-grid">
          <StatCard label={isPerceelObjecten ? 'Objecten' : 'Totaal verwerkt'} value={fmtNum(stats.totaal)} icon="layers"
            info={isPerceelObjecten ? 'Aantal perceel-objecten.' : 'Aantal geanalyseerde panden/percelen.'} />
          <StatCard
            label={isPerceelObjecten ? 'Verdacht' : (detectieType === 'contour' ? 'BAG-afwijking' : 'Aanwezig')}
            value={fmtNum(stats.aanwezig)}
            hint={!isPerceelObjecten && stats.totaal ? `${Math.round(100*stats.aanwezig/stats.totaal)}%` : ''}
            icon="check-circle-2" kind="success"
            info={isPerceelObjecten ? 'Objecten die mogelijk een afwijking vormen.'
              : detectieType === 'contour'
                ? "Resultaten met ≥1 component dat de AI als bouwwerk zag (serre, aanbouw, schuur, overkapping) — een mogelijke afwijking t.o.v. BAG. Boom, vegetatie, schutting en 'geen bouwwerk' tellen niet mee."
                : 'Resultaten waar de AI het object (zonnepaneel/dakkapel) op het dak detecteerde.'} />
          <StatCard label={isPerceelObjecten ? 'Zonnepanelen' : 'Zekerheid hoog'} value={fmtNum(stats.hoog || 0)} icon="shield-check" kind="success"
            info={isPerceelObjecten ? 'Objecten geclassificeerd als zonnepanelen.' : 'Aantal resultaten met hoge AI-zekerheid.'} />
          <StatCard label={isPerceelObjecten ? 'Natuurlijk' : 'Zekerheid laag'} value={fmtNum(stats.laag || 0)} icon="alert-triangle" kind="warning"
            info={isPerceelObjecten ? 'Objecten geclassificeerd als natuurlijk (boom/vegetatie).' : 'Aantal resultaten met lage AI-zekerheid — extra aandacht bij review.'} />
        </div>
      )}

      <div className="bd-card bd-card--flush">
        <div style={{padding:'var(--space-5)', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
          <h2 style={{margin:0, fontSize:'var(--font-size-md)', fontWeight:600}}>{isPerceelObjecten ? 'Perceel-objecten' : 'Detectieresultaten'}</h2>
          <span style={{fontSize:'var(--font-size-xs)', color:'var(--text-muted)'}}>
            {actieveFilters ? `${gefilterd.length} van ${resultaten.length} resultaten` : `${resultaten.length} resultaten`}
          </span>
        </div>
        {!actieveGemeente ? (
          <Empty icon="map" title="Selecteer een gemeente" hint="Kies een gemeente en detectietype om resultaten te zien." />
        ) : laden ? (
          <Empty icon="loader" title="Laden…" />
        ) : resultaten.length === 0 ? (
          <Empty icon="inbox" title="Geen resultaten gevonden" />
        ) : (
          <div className="bd-table-wrap">
            {isPerceelObjecten && (
              <table className="bd-table">
                <thead>
                  <tr>
                    <th>Perceel</th>
                    <th>Gekoppeld pand</th>
                    <th>Type</th>
                    <th>Subtype</th>
                    <th>Zekerheid</th>
                    <th>Oppervlak</th>
                    <th>Hoogte</th>
                    <th>Afstand pand</th>
                    <th>Review</th>
                    <th>Aangemaakt</th>
                  </tr>
                  <tr>
                    <th style={thFilterStyle}><input style={filterInputStyle} placeholder="Perceel/pand..." value={fPandId} onChange={e => setFPandId(e.target.value)} /></th>
                    <th style={thFilterStyle}></th>
                    <th style={thFilterStyle}>
                      <select style={filterInputStyle} value={fAanwezig} onChange={e => setFAanwezig(e.target.value)}>
                        <option value="alle">Alle</option>
                        <option value="ja">Verdacht</option>
                        <option value="nee">Niet verdacht</option>
                      </select>
                    </th>
                    <th style={thFilterStyle}></th>
                    <th style={thFilterStyle}>
                      <select style={filterInputStyle} value={fZekerheid} onChange={e => setFZekerheid(e.target.value)}>
                        <option value="alle">Alle</option>
                        <option value="hoog">Hoog</option>
                        <option value="midden">Midden</option>
                        <option value="laag">Laag</option>
                      </select>
                    </th>
                    <th style={thFilterStyle}></th>
                    <th style={thFilterStyle}></th>
                    <th style={thFilterStyle}></th>
                    <th style={thFilterStyle}></th>
                    <th style={thFilterStyle}></th>
                  </tr>
                </thead>
                <tbody>
                  {gefilterd.length === 0 ? (
                    <tr><td colSpan={10} style={{textAlign:'center', padding:'var(--space-6)', color:'var(--text-muted)', fontSize:'var(--font-size-sm)'}}>
                      Geen perceel-objecten met huidige filters. <button onClick={resetFilters} style={{background:'none',border:'none',color:'var(--color-primary)',cursor:'pointer',padding:0,textDecoration:'underline'}}>Filters wissen</button>
                    </td></tr>
                  ) : gefilterd.slice(0, 500).map((r, i) => (
                    <tr key={r.id || i}>
                      <td className="bd-mono">{r.perceel_id || '-'}</td>
                      <td className="bd-mono">
                        {r.gekoppeld_pand_id && onNaarPand
                          ? <button onClick={() => onNaarPand(r.gekoppeld_pand_id)} style={{background:'none',border:'none',padding:0,color:'var(--color-primary)',cursor:'pointer',fontFamily:'inherit',fontSize:'inherit',textDecoration:'underline'}}>{r.gekoppeld_pand_id}</button>
                          : (r.gekoppeld_pand_id || '-')}
                      </td>
                      <td><Badge kind={r.object_type === 'contourafwijking' ? 'warning' : r.object_type === 'zonnepanelen' ? 'info' : 'neutral'}>{r.object_type || '-'}</Badge></td>
                      <td>{r.subtype || '-'}</td>
                      <td><Badge kind={ZEKERHEID_KIND[r.zekerheid] || 'neutral'}>{r.zekerheid || '-'}</Badge></td>
                      <td className="bd-mono">{r.oppervlakte_m2 != null ? `${Number(r.oppervlakte_m2).toFixed(1)} m2` : '-'}</td>
                      <td className="bd-mono">{r.hoogte_m != null ? `${Number(r.hoogte_m).toFixed(1)} m` : '-'}</td>
                      <td className="bd-mono">{r.afstand_tot_pand_m != null ? `${Number(r.afstand_tot_pand_m).toFixed(1)} m` : '-'}</td>
                      <td><Badge kind="neutral">{r.review_status || 'nieuw'}</Badge></td>
                      <td className="bd-mono">{fmtDateTime(r.aangemaakt_op)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
            {!isPerceelObjecten && (
            <table className="bd-table">
              <thead>
                <tr>
                  <th>Taak</th>
                  <th>Pand-id</th>
                  <th>Aanwezig</th>
                  <th>Status</th>
                  <th>Zekerheid</th>
                  <th>Toelichting</th>
                  <th>Luchtfoto</th>
                  <th>Model</th>
                  <th>Prompt</th>
                  <th>Datum analyse</th>
                  <th title="Review door medewerker" style={{textAlign:'center'}}>Rev.</th>
                  <th></th>
                </tr>
                <tr>
                  <th style={thFilterStyle}>
                    <input style={filterInputStyle} placeholder="Taak…" value={fTaak} onChange={e => setFTaak(e.target.value)} />
                  </th>
                  <th style={thFilterStyle}>
                    <input style={filterInputStyle} placeholder="Filter…" value={fPandId} onChange={e => setFPandId(e.target.value)} />
                  </th>
                  <th style={thFilterStyle}>
                    <select style={filterInputStyle} value={fAanwezig} onChange={e => setFAanwezig(e.target.value)}>
                      <option value="alle">Alle</option>
                      <option value="ja">Ja</option>
                      <option value="nee">Nee</option>
                    </select>
                  </th>
                  <th style={thFilterStyle}></th>
                  <th style={thFilterStyle}>
                    <select style={filterInputStyle} value={fZekerheid} onChange={e => setFZekerheid(e.target.value)}>
                      <option value="alle">Alle</option>
                      <option value="hoog">Hoog</option>
                      <option value="midden">Midden</option>
                      <option value="laag">Laag</option>
                    </select>
                  </th>
                  <th style={thFilterStyle}>
                    <input style={filterInputStyle} placeholder="Filter…" value={fToelichting} onChange={e => setFToelichting(e.target.value)} />
                  </th>
                  <th style={thFilterStyle}>
                    <select style={filterInputStyle} value={fLuchtfoto} onChange={e => setFLuchtfoto(e.target.value)}>
                      <option value="alle">Alle</option>
                      {uniekeLuchtfotos.map(l => <option key={l} value={l}>{l}</option>)}
                    </select>
                  </th>
                  <th style={thFilterStyle}>
                    <select style={filterInputStyle} value={fModel} onChange={e => setFModel(e.target.value)}>
                      <option value="alle">Alle</option>
                      {uniekeModellen.map(m => <option key={m} value={m}>{m}</option>)}
                    </select>
                  </th>
                  <th style={thFilterStyle}></th>
                  <th style={thFilterStyle}>
                    <div style={{display:'flex', flexDirection:'column', gap:2}}>
                      <input type="date" style={filterInputStyle} title="Van" value={fDatumVan} onChange={e => setFDatumVan(e.target.value)} />
                      <input type="date" style={filterInputStyle} title="Tot" value={fDatumTot} onChange={e => setFDatumTot(e.target.value)} />
                    </div>
                  </th>
                  <th style={{...thFilterStyle, textAlign:'center'}}>
                    <select style={filterInputStyle} value={fReview} onChange={e => setFReview(e.target.value)}>
                      <option value="alle">Alle</option>
                      <option value="correct">Correct</option>
                      <option value="incorrect">Incorrect</option>
                      <option value="onzeker">Onzeker</option>
                      <option value="geen">Geen review</option>
                    </select>
                  </th>
                  <th style={thFilterStyle}></th>
                </tr>
              </thead>
              <tbody>
                {gefilterd.length === 0 ? (
                  <tr><td colSpan={12} style={{textAlign:'center', padding:'var(--space-6)', color:'var(--text-muted)', fontSize:'var(--font-size-sm)'}}>
                    Geen resultaten met de huidige filters. <button onClick={resetFilters} style={{background:'none',border:'none',color:'var(--color-primary)',cursor:'pointer',padding:0,textDecoration:'underline'}}>Filters wissen</button>
                  </td></tr>
                ) : gefilterd.slice(0, 500).map((r, i) => (
                  <tr key={r.id ?? i}>
                    <td className="bd-mono" style={{fontWeight:600}}>{r.taak_id ? `#${r.taak_id}` : '—'}</td>
                    <td className="bd-mono">
                      {onNaarPand
                        ? <button onClick={() => onNaarPand(r.pand_identificatie)} style={{background:'none',border:'none',padding:0,color:'var(--color-primary)',cursor:'pointer',fontFamily:'inherit',fontSize:'inherit',textDecoration:'underline'}}>{r.pand_identificatie}</button>
                        : <span style={{color:'var(--color-primary)'}}>{r.pand_identificatie}</span>}
                    </td>
                    <td><AanwezigBadge r={r} /></td>
                    <td><AnalyseStatusBadge r={r} /></td>
                    <td><Badge kind={ZEKERHEID_KIND[r.zekerheid] || 'neutral'}>{r.zekerheid || '—'}</Badge></td>
                    <td style={{maxWidth:400, fontSize:'var(--font-size-xs)', color:'var(--text-muted)'}}>
                      {Array.isArray(r.cluster_subtypes) && r.cluster_subtypes.length > 0 && (
                        <div style={{display:'flex', flexWrap:'wrap', gap:4, marginBottom:4}}>
                          {r.cluster_subtypes.map((cs, ci) => (
                            <Badge key={ci} kind={['boom','tuinafscheiding','vegetatie'].includes(cs.subtype) ? 'success' : cs.subtype === 'geen_bouwwerk' ? 'neutral' : 'info'}>
                              {(CONTOUR_SUBTYPE_LABEL[cs.subtype] || cs.subtype)}{cs.n > 1 ? ` ×${cs.n}` : ''}
                            </Badge>
                          ))}
                        </div>
                      )}
                      {r.toelichting}
                    </td>
                    <td style={{fontSize:'var(--font-size-xs)', color:'var(--text-muted)'}}>
                      {r.kaartmateriaal_naam ? <span>🛰 {r.kaartmateriaal_naam}</span> : <span style={{color:'var(--color-border)'}}>—</span>}
                    </td>
                    <td className="bd-mono">
                      <div>{r.ai_model || '—'}</div>
                      {r.finish_reason && <div style={{fontSize:'var(--font-size-xs)', color:'var(--text-muted)', marginTop:2}}>finish: {r.finish_reason}</div>}
                    </td>
                    <td style={{fontSize:'var(--font-size-xs)', color:'var(--text-muted)'}}>
                      {r.prompt_naam || (r.prompt_id ? `#${r.prompt_id}` : '—')}
                    </td>
                    <td className="bd-mono">{fmtDateTime(r.geanalyseerd_op)}</td>
                    <td style={{textAlign:'center'}}><ReviewTooltip r={r} /></td>
                    <td style={{textAlign:'center'}}>
                      <button title="Resultaat verwijderen" onClick={() => verwijderResultaat(r)}
                        style={{background:'none', border:'none', cursor:'pointer', padding:4, color:'var(--color-danger)', display:'inline-flex'}}>
                        <Icon name="trash-2" size={14} />
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

function StatCard({ label, value, hint, icon, kind = 'neutral', info }) {
  return (
    <div className="bd-stat-card" title={info || undefined}>
      <div className={'bd-stat-icon bd-stat-icon--' + kind}><Icon name={icon} size={18} /></div>
      <div>
        <div className="bd-stat-label" style={{display:'flex', alignItems:'center', gap:4}}>
          {label}
          {info && <Icon name="info" size={12} style={{color:'var(--text-muted)', flexShrink:0}} />}
        </div>
        <div className="bd-stat-value">{value}</div>
        {hint && <div className="bd-stat-hint">{hint}</div>}
      </div>
    </div>
  );
}

window.SchermResultaten = SchermResultaten;