// § 5 Schritt 4: „nein → fragen" — Suche + Auswahl der richtigen Metadaten.
import { useEffect, useState } from 'react'
import type { MetaVorschlag } from '../../gemeinsam/nachrichten'
import { DialogRahmen, IconDisc, posterUrlKlein } from '../bausteine'
import { metadatenSuchen, zuordnungSetzen } from '../kernverbindung'

export function AendernDialog({
  id,
  startText,
  vorschlaege,
  schliessen,
}: {
  id: string
  startText: string
  vorschlaege: MetaVorschlag[]
  schliessen: () => void
}) {
  const [text, setText] = useState(startText)
  useEffect(() => {
    metadatenSuchen(id, startText)
    // Nur beim Öffnen — weitere Suchen löst der Knopf aus.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  return (
    <DialogRahmen schliessen={schliessen} breite="max-w-lg">
      <h3 className="mb-3 font-display text-lg font-bold text-schnee">Was ist das wirklich?</h3>
      <div className="mb-3 flex gap-2">
        <input
          value={text}
          onChange={(e) => setText(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === 'Enter') metadatenSuchen(id, text)
          }}
          placeholder="Titel suchen …"
          className="flex-1 rounded-lg border border-tinte/12 bg-samt px-3 py-2 font-mono text-xs text-schnee placeholder:text-nebel focus:border-gold/60 focus:outline-none"
        />
        <button
          onClick={() => metadatenSuchen(id, text)}
          className="rounded-lg border border-gold/50 bg-gold/10 px-4 py-2 text-xs font-semibold text-gold-hell hover:bg-gold/20"
        >
          Suchen
        </button>
      </div>
      {vorschlaege.length === 0 ? (
        <p className="font-mono text-xs text-nebel">Keine Treffer — anderen Suchtext probieren.</p>
      ) : (
        <div className="space-y-1.5">
          {vorschlaege.map((v) => (
            <button
              key={`${v.typ}-${v.tmdbId}`}
              onClick={() => {
                zuordnungSetzen(id, v)
                schliessen()
              }}
              className="flex w-full items-center gap-3 rounded-xl border border-tinte/10 bg-karte/60 p-2 text-left hover:border-gold/50 hover:bg-karte"
            >
              {v.posterPfad.length > 0 ? (
                <img src={posterUrlKlein(v.posterPfad)} alt="" className="h-16 w-11 rounded-md object-cover" />
              ) : (
                <span className="flex h-16 w-11 items-center justify-center rounded-md bg-samt">
                  <IconDisc groesse={20} farbe="oklch(0.55 0.015 80)" />
                </span>
              )}
              <div>
                <p className="text-sm font-medium text-schnee">
                  {v.titel}
                  {v.jahr !== null ? ` (${v.jahr})` : ''}
                </p>
                <p className="font-mono text-[10px] tracking-wider text-nebel">{v.typ === 'tv' ? 'SERIE' : 'FILM'}</p>
              </div>
            </button>
          ))}
        </div>
      )}
      <div className="mt-4 text-right">
        <button onClick={schliessen} className="rounded-lg border border-tinte/15 px-4 py-1.5 text-xs text-dunst hover:bg-tinte/5">
          Schließen
        </button>
      </div>
    </DialogRahmen>
  )
}