"use client"

import { useRouter } from "next/navigation"
import { useState } from "react"

import { updateInvitationLanguageAction } from "@/app/admin/guests/actions"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { supportedLanguages } from "@/lib/i18n/config"

interface InvitationLanguageSelectProps {
  invitationId: string
  currentLanguage: string
  displayName: string
}

export function InvitationLanguageSelect({
  invitationId,
  currentLanguage,
  displayName,
}: InvitationLanguageSelectProps) {
  const router = useRouter()
  const [value, setValue] = useState(currentLanguage)
  const [message, setMessage] = useState<string | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [isSaving, setIsSaving] = useState(false)

  async function updateLanguage(nextLanguage: string) {
    if (nextLanguage === value) return

    const previousLanguage = value

    setValue(nextLanguage)
    setMessage(null)
    setError(null)
    setIsSaving(true)

    try {
      const result = await updateInvitationLanguageAction({
        invitationId,
        language: nextLanguage,
      })

      if (!result.ok) {
        setValue(previousLanguage)
        setError(result.error)
        return
      }

      setMessage("Language updated.")
      router.refresh()
    } catch {
      setValue(previousLanguage)
      setError("Could not update the invitation language.")
    } finally {
      setIsSaving(false)
    }
  }

  return (
    <div className="space-y-2">
      <Select
        value={value}
        disabled={isSaving}
        onValueChange={(next) => void updateLanguage(next)}
      >
        <SelectTrigger
          aria-label={`Invitation language for ${displayName}`}
          className="w-full"
        >
          <SelectValue placeholder="Select language" />
        </SelectTrigger>
        <SelectContent>
          {supportedLanguages.map((language) => (
            <SelectItem key={language.code} value={language.code}>
              {language.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      {message ? <p className="text-xs text-emerald-700">{message}</p> : null}
      {error ? <p className="text-xs text-destructive">{error}</p> : null}
    </div>
  )
}