'use client'

import { useRouter, useSearchParams } from 'next/navigation'
import { FileText } from 'lucide-react'
import { Select } from '@/components/ui/select'
import { Feld } from '@/components/feld'

/**
 * Vorlagenauswahl über dem Schreiben-Editor.
 *
 * Die Wahl lädt die Seite mit ?vorlageId neu — der Entwurf entsteht
 * serverseitig, wo die Platzhalter aufgelöst werden. Ein Wechsel wirft
 * damit auch bewusst den bearbeiteten Text weg; deshalb steht die Auswahl
 * VOR dem Editor, nicht darin.
 */
export function VorlagenWahl({
  vorlagen,
  aktiveVorlageId,
}: {
  vorlagen: { id: string; name: string }[]
  aktiveVorlageId: string | null
}) {
  const router = useRouter()
  const parameter = useSearchParams()

  function wechseln(vorlageId: string) {
    const neu = new URLSearchParams(parameter.toString())
    if (vorlageId) neu.set('vorlageId', vorlageId)
    else neu.delete('vorlageId')
    router.push(`/schreiben/neu?${neu.toString()}`)
  }

  return (
    <div className="flex items-start gap-2.5 rounded-md border bg-muted/30 p-3">
      <FileText className="mt-8 size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
      <Feld
        id="vorlageWahl"
        beschriftung="Aus eigener Vorlage"
        erklaerung="Ersetzt den Entwurf unten — was dort schon steht, geht dabei verloren."
        className="flex-1"
      >
        <Select
          id="vorlageWahl"
          value={aktiveVorlageId ?? ''}
          onChange={(ereignis) => wechseln(ereignis.target.value)}
        >
          <option value="">– leerer Entwurf –</option>
          {vorlagen.map((vorlage) => (
            <option key={vorlage.id} value={vorlage.id}>
              {vorlage.name}
            </option>
          ))}
        </Select>
      </Feld>
    </div>
  )
}