'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { FieldGrid, FieldGroup, FieldLabel, PrimaryButton, SelectField, TextField } from '@/app/FormFields'
import { normalizeSupportedLanguage, USER_LANGUAGE_OPTIONS } from '@/lib/user-language'
import { normalizeUserTimeZone, USER_TIME_ZONE_OPTIONS } from '@/lib/user-time-zone'

export default function SettingsClient({
  initialFirstName,
  initialLastName,
  initialTimeZone,
  initialPreferredLanguage,
  labels,
}: {
  initialFirstName: string
  initialLastName: string
  initialTimeZone: string | null
  initialPreferredLanguage: string | null
  labels?: {
    personalInfo: string
    firstName: string
    lastName: string
    timeZone: string
    preferredLanguage: string
    saved: string
    save: string
    saving: string
    error: string
  }
}) {
  const router = useRouter()
  const [firstName, setFirstName] = useState(initialFirstName)
  const [lastName, setLastName] = useState(initialLastName)
  const [timeZone, setTimeZone] = useState(normalizeUserTimeZone(initialTimeZone))
  const [preferredLanguage, setPreferredLanguage] = useState(normalizeSupportedLanguage(initialPreferredLanguage))
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [saved, setSaved] = useState(false)

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setSaving(true)
    setError(null)
    setSaved(false)

    const res = await fetch('/api/users/me/name', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ firstName: firstName.trim(), lastName: lastName.trim(), timeZone, preferredLanguage }),
    })

    if (!res.ok) {
      const data = await res.json().catch(() => ({}))
      setError(data.error ?? labels?.error ?? 'Failed to save. Please try again.')
      setSaving(false)
      return
    }

    setSaved(true)
    setSaving(false)
    router.refresh()
  }

  return (
    <section className="rounded-lg border border-zinc-200 bg-white p-6 dark:border-zinc-800 dark:bg-zinc-900">
      <h2 className="mb-4 text-sm font-semibold text-zinc-950 dark:text-white">{labels?.personalInfo ?? 'Personal info'}</h2>
      <form onSubmit={handleSubmit} className="space-y-4">
        <FieldGrid className="grid-cols-2">
          <FieldGroup>
            <FieldLabel htmlFor="firstName">{labels?.firstName ?? 'First name'}</FieldLabel>
            <TextField
              id="firstName"
              type="text"
              required
              value={firstName}
              onChange={(e) => { setFirstName(e.target.value); setSaved(false) }}
              placeholder="Jane"
            />
          </FieldGroup>
          <FieldGroup>
            <FieldLabel htmlFor="lastName">{labels?.lastName ?? 'Last name'}</FieldLabel>
            <TextField
              id="lastName"
              type="text"
              required
              value={lastName}
              onChange={(e) => { setLastName(e.target.value); setSaved(false) }}
              placeholder="Smith"
            />
          </FieldGroup>
        </FieldGrid>

        <FieldGroup>
          <FieldLabel htmlFor="timeZone">{labels?.timeZone ?? 'Time zone'}</FieldLabel>
          <SelectField
            id="timeZone"
            value={timeZone}
            onChange={(e) => { setTimeZone(normalizeUserTimeZone(e.target.value)); setSaved(false) }}
          >
            {USER_TIME_ZONE_OPTIONS.map((option) => (
              <option key={option.value} value={option.value}>{option.label}</option>
            ))}
          </SelectField>
        </FieldGroup>

        <FieldGroup>
          <FieldLabel htmlFor="preferredLanguage">{labels?.preferredLanguage ?? 'Preferred language'}</FieldLabel>
          <SelectField
            id="preferredLanguage"
            value={preferredLanguage}
            onChange={(e) => { setPreferredLanguage(normalizeSupportedLanguage(e.target.value)); setSaved(false) }}
          >
            {USER_LANGUAGE_OPTIONS.map((option) => (
              <option key={option.value} value={option.value}>{option.label}</option>
            ))}
          </SelectField>
        </FieldGroup>

        {error && <p className="text-sm text-red-700 dark:text-red-300">{error}</p>}
        {saved && (
          <p className="text-sm text-emerald-700 dark:text-emerald-300">{labels?.saved ?? 'Settings updated successfully.'}</p>
        )}

        <div className="flex items-center justify-end">
          <PrimaryButton
            type="submit"
            loading={saving}
            disabled={!firstName.trim() || !lastName.trim()}
          >
            {saving ? labels?.saving ?? 'Saving...' : labels?.save ?? 'Save settings'}
          </PrimaryButton>
        </div>
      </form>
    </section>
  )
}