/* Rapporten screen: CSV en GeoJSON export per gemeente */

function SchermRapporten({ gemeenten, defaultGemeente }) {
  const [gemeente, setGemeente] = useState(() => defaultGemeente || '');

  function download(type) {
    if (!gemeente) return;
    window.location = `${API}/rapporten/${type}?gemeente_code=${gemeente}`;
  }

  return (
    <div className="bd-page">
      <div className="bd-page-head">
        <div><h1>Rapporten</h1><p>Exporteer detectieresultaten per gemeente als CSV of GeoJSON.</p></div>
      </div>

      <div className="bd-card">
        <div className="bd-card-head"><h2><Icon name="file-plus-2" /> Exporteren</h2></div>
        <Field label="Gemeente">
          <select className="bd-select" value={gemeente} 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>
        <div style={{display:'flex', gap:8, flexWrap:'wrap', marginTop:12}}>
          <Btn kind="primary" icon="table" onClick={() => download('csv')} disabled={!gemeente}>
            Download CSV
          </Btn>
          <Btn kind="secondary" icon="map" onClick={() => download('geojson')} disabled={!gemeente}>
            Download GeoJSON
          </Btn>
        </div>
        {!gemeente && (
          <p style={{marginTop:10, fontSize:'var(--font-size-xs)', color:'var(--text-muted)'}}>
            Selecteer eerst een gemeente om te kunnen exporteren.
          </p>
        )}
      </div>
    </div>
  );
}

window.SchermRapporten = SchermRapporten;