/* Review screen: snelle beeldbeoordeling voor AI-resultaten */

function ReviewQueueItem({ item, actief, index, onSelect }) {
  return (
    <button className={'bd-review-queue-item' + (actief ? ' is-active' : '')} onClick={onSelect}>
      <span className="bd-review-queue-index">{index + 1}</span>
      <span className="bd-review-queue-main">
        <span className="bd-review-queue-title">{item.pand_identificatie}</span>
        <span className="bd-review-queue-sub">{item.adres || 'Geen adres bekend'}</span>
      </span>
      <Badge kind={ZEKERHEID_KIND[item.zekerheid] || 'neutral'}>{item.zekerheid}</Badge>
    </button>
  );
}

function ReviewHistorie({ items }) {
  if (!items || items.length === 0) {
    return <div className="bd-review-muted">Geen eerdere beoordelingen voor dit pand en type.</div>;
  }
  return (
    <div className="bd-review-history">
      {items.slice(-4).map((h, idx) => (
        <div className="bd-review-history-row" key={idx}>
          <Badge kind={h.beoordeling === 'correct' ? 'success' : h.beoordeling === 'onzeker' ? 'warning' : 'error'}>
            {h.beoordeling}
          </Badge>
          <span>{h.aanwezig ? 'Aanwezig' : 'Niet aanwezig'}</span>
          <span>{fmtDateTime(h.beoordeeld_op || h.geanalyseerd_op)}</span>
        </div>
      ))}
    </div>
  );
}

function SchermReview({ gemeenten, defaultGemeente, onNaarPand, resultaatId = null }) {
  const enkelModus = resultaatId != null;
  const [gemeente, setGemeente] = useState(() => defaultGemeente || '');
  const [detectieType, setDetectieType] = useState('contour');
  const [zekerheid, setZekerheid] = useState('laag,midden');
  const [queue, setQueue] = useState([]);
  const [huidig, setHuidig] = useState(0);
  const [loading, setLoading] = useState(false);
  const [melding, setMelding] = useState(null);
  const [editModus, setEditModus] = useState(false);
  const [laatsteActie, setLaatsteActie] = useState(null);
  const [opslaanBezig, setOpslaanBezig] = useState(false);

  // Single-item modus (deep-link /review/{id}): laad dat ene resultaat, ongeacht
  // gemeente/zekerheid/reviewstatus.
  useEffect(() => {
    if (!enkelModus) return;
    setLoading(true);
    setMelding(null);
    fetch(`${API}/review/item/${resultaatId}`)
      .then(r => r.ok ? r.json() : Promise.reject(r))
      .then(item => {
        setQueue([item]);
        setHuidig(0);
        setEditModus(false);
        if (item.gemeente_code) setGemeente(item.gemeente_code);
        if (item.detectie_type) setDetectieType(item.detectie_type);
      })
      .catch(() => {
        setQueue([]);
        setMelding({ kind: 'error', tekst: 'Resultaat kon niet worden geladen.' });
      })
      .finally(() => setLoading(false));
  }, [resultaatId]);

  useEffect(() => {
    if (enkelModus) return;  // wachtrij niet laden in single-item modus
    if (!gemeente) {
      setQueue([]);
      setHuidig(0);
      return;
    }
    const params = new URLSearchParams({
      gemeente_code: gemeente,
      detectie_type: detectieType,
      zekerheid,
      limit: '100',
    });
    setLoading(true);
    setMelding(null);
    fetch(`${API}/review?${params}`)
      .then(r => r.ok ? r.json() : Promise.reject(r))
      .then(data => {
        setQueue(Array.isArray(data) ? data : []);
        setHuidig(0);
        setEditModus(false);
      })
      .catch(() => {
        setQueue([]);
        setMelding({ kind: 'error', tekst: 'Reviewwachtrij kon niet worden geladen.' });
      })
      .finally(() => setLoading(false));
  }, [gemeente, detectieType, zekerheid]);

  const r = queue[huidig];
  const ruwAiTekst = r && (r.ai_respons_ruw?.meta?.tekst || r.ai_respons_ruw?.meta?.fout);
  const gemeenteNaam = gemeenten.find(g => g.code === gemeente)?.naam || gemeente;
  const voortgang = queue.length ? `${huidig + 1} / ${queue.length}` : '0 / 0';

  function volgende() {
    setEditModus(false);
    setHuidig(prev => {
      if (prev + 1 >= queue.length) return prev;
      return prev + 1;
    });
  }

  function vorige() {
    setEditModus(false);
    setHuidig(prev => Math.max(0, prev - 1));
  }

  async function beoordeel(beoordeling) {
    if (!r || opslaanBezig) return;
    setOpslaanBezig(true);
    setMelding(null);
    await fetch(`${API}/review/${r.id}`, {
      method: 'POST',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify({ beoordeling }),
    }).then(resp => {
      if (!resp.ok) throw new Error('review mislukt');
      setLaatsteActie({ item: r, index: huidig, beoordeling });
      setQueue(prev => prev.filter(x => x.id !== r.id));
      setHuidig(prev => Math.min(prev, Math.max(0, queue.length - 2)));
      setEditModus(false);
    }).catch(() => {
      setMelding({ kind: 'error', tekst: 'Beoordeling kon niet worden opgeslagen.' });
    }).finally(() => setOpslaanBezig(false));
  }

  async function undoLaatsteActie() {
    if (!laatsteActie) {
      vorige();
      return;
    }
    await fetch(`${API}/review/${laatsteActie.item.id}`, { method: 'DELETE' })
      .then(resp => {
        if (!resp.ok) throw new Error('undo mislukt');
        setQueue(prev => {
          const copy = [...prev];
          copy.splice(Math.min(laatsteActie.index, copy.length), 0, laatsteActie.item);
          return copy;
        });
        setHuidig(Math.min(laatsteActie.index, queue.length));
        setLaatsteActie(null);
        setMelding({ kind: 'info', tekst: 'Laatste beoordeling is teruggezet.' });
      })
      .catch(() => setMelding({ kind: 'error', tekst: 'Laatste beoordeling kon niet worden teruggezet.' }));
  }

  function overslaan() {
    if (!r) return;
    if (queue.length <= 1) {
      setMelding({ kind: 'info', tekst: 'Er staat maar één resultaat in de wachtrij.' });
      return;
    }
    setQueue(prev => {
      const copy = [...prev];
      const [item] = copy.splice(huidig, 1);
      copy.push(item);
      return copy;
    });
    setHuidig(prev => Math.min(prev, queue.length - 2));
    setEditModus(false);
  }

  useEffect(() => {
    function onKey(e) {
      const tag = (e.target && e.target.tagName || '').toLowerCase();
      if (tag === 'input' || tag === 'select' || tag === 'textarea' || e.target?.isContentEditable) return;
      if (e.key === 'a' || e.key === 'A') { e.preventDefault(); beoordeel('correct'); }
      else if (e.key === 'n' || e.key === 'N') { e.preventDefault(); beoordeel('incorrect'); }
      else if (e.key === 'o' || e.key === 'O') { e.preventDefault(); beoordeel('onzeker'); }
      else if (e.key === 's' || e.key === 'S') { e.preventDefault(); overslaan(); }
      else if (e.key === 'ArrowRight') { e.preventDefault(); volgende(); }
      else if (e.key === 'ArrowLeft') { e.preventDefault(); vorige(); }
      else if (e.key === 'Backspace') { e.preventDefault(); undoLaatsteActie(); }
      else if (e.key === 'Escape') { setEditModus(false); }
    }
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [r, huidig, queue, laatsteActie]);

  const heeftQueue = queue.length > 0;

  return (
    <div className="bd-page bd-review-page">
      <div className="bd-page-head">
        <div>
          <h1>Review</h1>
          <p>Snel beeld beoordelen. Vlakken pas aanpassen wanneer dat nodig is.</p>
        </div>
        <div className="bd-page-head-actions">
          <Badge kind={heeftQueue ? 'info' : 'neutral'}>{voortgang}</Badge>
          {laatsteActie && <Btn kind="ghost" size="sm" icon="undo-2" onClick={undoLaatsteActie}>Undo</Btn>}
        </div>
      </div>

      {!enkelModus && (
      <div className="bd-card bd-review-filters">
        <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>
        <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>
        <Field label="Zekerheid">
          <select className="bd-select" value={zekerheid} onChange={e => setZekerheid(e.target.value)}>
            <option value="laag,midden">Laag + midden</option>
            <option value="laag">Alleen laag</option>
            <option value="midden">Alleen midden</option>
            <option value="hoog,midden,laag">Alles</option>
          </select>
        </Field>
      </div>
      )}

      {melding && <Alert kind={melding.kind}>{melding.tekst}</Alert>}

      {(!enkelModus && !gemeente) ? (
        <Empty icon="search-check" title="Selecteer een gemeente" hint="Kies een gemeente om de reviewwachtrij te laden." />
      ) : loading ? (
        <Empty icon="loader" title="Reviewwachtrij laden" hint="Resultaten worden opgehaald." />
      ) : !heeftQueue ? (
        <Empty icon="check-check" title="Geen resultaten te beoordelen" hint="Alle resultaten met deze filters zijn al beoordeeld." />
      ) : r && (
        <div className="bd-review-workbench">
          <div className="bd-review-main">
            <div className="bd-review-viewport">
              {r.heeft_afbeelding ? (
                <ReviewCanvas
                  resultaatId={r.id}
                  fotoUrl={`${API}/afbeelding/${r.id}${detectieType === 'contour' ? '?variant=clean' : ''}`}
                  detectieType={detectieType}
                  editable={editModus}
                />
              ) : (
                <div className="bd-review-image-empty">
                  <Icon name="image-off" size={52} />
                  <div>Geen afbeelding beschikbaar</div>
                </div>
              )}
            </div>

            <div className="bd-review-actionbar">
              <Btn kind="primary" icon="check" onClick={() => beoordeel('correct')} disabled={opslaanBezig}>A Akkoord</Btn>
              <Btn kind="danger-solid" icon="x" onClick={() => beoordeel('incorrect')} disabled={opslaanBezig}>N Niet akkoord</Btn>
              <Btn kind="secondary" icon="circle-help" onClick={() => beoordeel('onzeker')} disabled={opslaanBezig}>O Onzeker</Btn>
              <Btn kind="ghost" icon="skip-forward" onClick={overslaan} disabled={opslaanBezig}>S Overslaan</Btn>
              <Btn kind="ghost" icon="arrow-left" onClick={vorige} disabled={huidig === 0}>Vorige</Btn>
              <Btn kind={editModus ? 'primary' : 'secondary'} icon="square-pen" onClick={() => setEditModus(v => !v)}>
                {editModus ? 'Vorm bewerken aan' : 'Vorm bewerken'}
              </Btn>
            </div>
          </div>

          <aside className="bd-review-side">
            <div className="bd-review-side-head">
              <div>
                <div className="bd-review-label">{gemeenteNaam} - {DETECTIE_LABEL[detectieType]}</div>
                <h2>{r.pand_identificatie}</h2>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                {r.heeft_kandidaat_pand && (
                  <Badge kind="warning"><Icon name="land-plot" size={12} /> Mogelijk ontbrekend pand</Badge>
                )}
                <Btn kind="ghost" size="sm" icon="search" title="Open in Data" aria-label="Open in Data"
                     onClick={() => onNaarPand && onNaarPand((r.gekoppelde_panden && r.gekoppelde_panden[0]?.pand_id) || r.pand_identificatie)} />
                <Badge kind={ZEKERHEID_KIND[r.zekerheid] || 'neutral'}>{r.zekerheid}</Badge>
              </div>
            </div>

            <div className="bd-review-fact">
              <span>AI-oordeel</span>
              <strong>{r.aanwezig ? 'Aanwezig' : 'Niet aanwezig'}</strong>
            </div>
            <div className="bd-review-fact">
              <span>Score</span>
              <strong>{r.score == null ? '-' : Number(r.score).toFixed(2)}</strong>
            </div>
            <div className="bd-review-fact">
              <span>Adres</span>
              <strong>{r.adres || 'Onbekend'}</strong>
            </div>

            {r.gekoppelde_panden && r.gekoppelde_panden.length > 0 && (
              <section className="bd-review-panel">
                <h3>Panden op dit perceel</h3>
                <div className="bd-review-pandlijst">
                  {r.gekoppelde_panden.map(p => (
                    <button
                      key={p.pand_id}
                      className="bd-review-pand-row"
                      onClick={() => onNaarPand && onNaarPand(p.pand_id)}
                      title="Open in Data"
                    >
                      <span className="bd-review-pand-main">
                        <span className="bd-mono">{p.pand_id}</span>
                        <span className="bd-review-queue-sub">{p.adres || 'Geen adres bekend'}</span>
                      </span>
                      {p.primair && <Badge kind="info">primair</Badge>}
                      <Icon name="arrow-right" size={14} />
                    </button>
                  ))}
                </div>
              </section>
            )}

            {r.toelichting && (
              <section className="bd-review-panel">
                <h3>Toelichting</h3>
                <p>{r.toelichting}</p>
              </section>
            )}

            {ruwAiTekst && (
              <section className="bd-review-panel">
                <details>
                  <summary style={{ cursor: 'pointer', fontWeight: 600, fontSize: 'var(--font-size-sm)' }}>Ruwe AI-tekst</summary>
                  <pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', fontSize: 'var(--font-size-xs)', maxHeight: 300, overflow: 'auto', margin: '8px 0 0', background: 'var(--surface-subtle)', padding: 8, borderRadius: 'var(--radius-sm)', border: '1px solid var(--color-border-light)' }}>{ruwAiTekst}</pre>
                </details>
              </section>
            )}

            <section className="bd-review-panel">
              <h3>Historie</h3>
              <ReviewHistorie items={r.historische_beoordelingen} />
            </section>

            <section className="bd-review-panel">
              <h3>Bediening</h3>
              <div className="bd-review-shortcuts">
                <span>A akkoord</span>
                <span>N niet akkoord</span>
                <span>O onzeker</span>
                <span>S overslaan</span>
                <span>Backspace undo</span>
                <span>Esc edit uit</span>
              </div>
            </section>

            {!enkelModus && (
            <section className="bd-review-panel bd-review-queue-panel">
              <h3>Wachtrij</h3>
              <div className="bd-review-queue">
                {queue.slice(Math.max(0, huidig - 2), huidig + 8).map((item, idx) => {
                  const echteIndex = Math.max(0, huidig - 2) + idx;
                  return (
                    <ReviewQueueItem
                      key={item.id}
                      item={item}
                      index={echteIndex}
                      actief={echteIndex === huidig}
                      onSelect={() => { setHuidig(echteIndex); setEditModus(false); }}
                    />
                  );
                })}
              </div>
            </section>
            )}
          </aside>
        </div>
      )}
    </div>
  );
}

window.SchermReview = SchermReview;