'use client'

import { useId, useMemo } from 'react'
import { SettingsCard } from './components.js'
import type { GeneralSettingsForm, ValidationIssue } from './useGeneralSettings.js'

const INPUT_CLASS =
  'w-full rounded-md border border-border bg-input-background px-3 py-2 text-base text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60'
const LABEL_CLASS = 'mb-1 block text-sm font-medium text-foreground'

const LANGUAGES: Array<{ value: string; label: string }> = [
  { value: 'en-US', label: 'English (US)' },
  { value: 'en-GB', label: 'English (UK)' },
  { value: 'es-ES', label: 'Spanish (Spain)' },
  { value: 'es-MX', label: 'Spanish (Mexico)' },
  { value: 'fr-FR', label: 'French (France)' },
  { value: 'de-DE', label: 'German (Germany)' },
  { value: 'en', label: 'English' },
]

const TIMEZONES = [
  'UTC',
  'America/New_York',
  'America/Chicago',
  'America/Denver',
  'America/Los_Angeles',
  'America/Anchorage',
  'Europe/London',
  'Europe/Paris',
  'Europe/Berlin',
  'Asia/Tokyo',
  'Asia/Singapore',
  'Australia/Sydney',
]

interface LanguageRegionCardProps {
  form: GeneralSettingsForm
  setField: <K extends keyof GeneralSettingsForm>(key: K, value: GeneralSettingsForm[K]) => void
  issues: ValidationIssue[]
  canEdit: boolean
}

export function LanguageRegionCard({ form, setField, issues, canEdit }: LanguageRegionCardProps) {
  const langId = useId()
  const tzId = useId()
  const langIssue = issues.find((i) => i.field === 'language')
  const tzIssue = issues.find((i) => i.field === 'timezone')

  // Surface the loaded value even when it isn't one of our presets, so a
  // seeded/config value is never silently dropped from the select.
  const languageOptions = useMemo(() => {
    if (LANGUAGES.some((l) => l.value === form.language)) return LANGUAGES
    return [{ value: form.language, label: form.language }, ...LANGUAGES]
  }, [form.language])

  const timezoneOptions = useMemo(() => {
    if (TIMEZONES.includes(form.timezone)) return TIMEZONES
    return [form.timezone, ...TIMEZONES]
  }, [form.timezone])

  return (
    <SettingsCard
      title="Language & Region"
      description="Default language and timezone applied across the admin and public site."
    >
      <div className="space-y-4">
        <div>
          <label htmlFor={langId} className={LABEL_CLASS}>
            Language
          </label>
          <select
            id={langId}
            value={form.language}
            disabled={!canEdit}
            aria-invalid={Boolean(langIssue)}
            onChange={(e) => setField('language', e.target.value)}
            className={INPUT_CLASS}
          >
            {languageOptions.map((l) => (
              <option key={l.value} value={l.value}>
                {l.label}
              </option>
            ))}
          </select>
          {langIssue && <p className="text-destructive mt-1 text-sm">{langIssue.message}</p>}
        </div>

        <div>
          <label htmlFor={tzId} className={LABEL_CLASS}>
            Timezone
          </label>
          <select
            id={tzId}
            value={form.timezone}
            disabled={!canEdit}
            aria-invalid={Boolean(tzIssue)}
            onChange={(e) => setField('timezone', e.target.value)}
            className={INPUT_CLASS}
          >
            {timezoneOptions.map((tz) => (
              <option key={tz} value={tz}>
                {tz}
              </option>
            ))}
          </select>
          {tzIssue ? (
            <p className="text-destructive mt-1 text-sm">{tzIssue.message}</p>
          ) : (
            <p className="text-muted-foreground mt-1 text-sm">
              Applied to dashboard dates, audit logs, scheduled publishing, and form submissions.
            </p>
          )}
        </div>
      </div>
    </SettingsCard>
  )
}
