'use client'

import { useEffect, useState } from 'react'
import { authFetch, getApiBase } from '../../lib/auth'

type AudioChoice = { language: { code: string } | null; originalEnabled?: boolean; canChange?: boolean; profileLanguage?: string }

export default function RequestLanguage({ requestId, disabled, onApply }: {
  requestId: string; disabled: boolean; onApply: (code: string) => Promise<void>
}) {
  const [choice, setChoice] = useState<AudioChoice | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [revision, setRevision] = useState(0)
  useEffect(() => {
    const controller = new AbortController()
    void authFetch(`${getApiBase()}/requests/${requestId}/language`, { signal: controller.signal })
      .then(async response => { if (!response.ok) throw new Error('Could not check the audio settings. Reload the request to try again.'); return response.json() })
      .then(data => { if (!controller.signal.aborted) setChoice(data) })
      .catch(e => { if (!controller.signal.aborted) setError(e.message) })
    return () => controller.abort()
  }, [requestId, revision])
  if (error && !choice) return <p role="alert">{error}</p>
  if (!choice?.language) return null
  const code = choice.language.code
  const name = new Intl.DisplayNames(['en'], { type: 'language' }).of(code) || code
  return <section className="request-language-notice" aria-label="Audio language">
    <h2>{name} audio {choice.originalEnabled ? 'enabled' : 'may need your approval'}</h2>
    <p>This movie was originally made in {name}. An English dub may not exist. {choice.originalEnabled ? 'Radarr is set to accept its original audio.' : `The current audio requirement is ${choice.profileLanguage || 'set by the library'}. This can leave the request waiting even when an original-language release exists.`}</p>
    <p>Accepting original audio keeps the quality requirements. Subtitles and individual release audio tracks are not guaranteed by title metadata.</p>
    {choice.canChange && !choice.originalEnabled && <button type="button" disabled={disabled} onClick={async () => {
      setError(null)
      try { await onApply(code); setRevision(v => v + 1) } catch (e) { setError(e instanceof Error ? e.message : 'The audio choice could not be saved.') }
    }}>Use {name} audio &amp; search</button>}
    {error && <p role="alert">{error}</p>}
  </section>
}