'use client'

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

export default function OnboardingClient({
  initialPreferredLanguage,
  labels,
}: {
  initialPreferredLanguage: string | null
  labels?: {
    title: string
    body: string
    firstName: string
    lastName: string
    preferredLanguage: string
    continue: string
    saving: string
    error: string
  }
}) {
  const router = useRouter()
  const [firstName, setFirstName] = useState('')
  const [lastName, setLastName] = useState('')
  const [preferredLanguage, setPreferredLanguage] = useState(normalizeSupportedLanguage(initialPreferredLanguage))
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setLoading(true)
    setError(null)

    try {
      const res = await fetch('/api/users/me/name', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ firstName: firstName.trim(), lastName: lastName.trim(), preferredLanguage }),
      })
      if (!res.ok) throw new Error('Failed to save name')
      router.push('/')
      router.refresh()
    } catch {
      setError(labels?.error ?? 'Something went wrong. Please try again.')
    } finally {
      setLoading(false)
    }
  }

  return (
    <main className="flex min-h-screen items-center justify-center bg-zinc-50 px-4 text-zinc-950 dark:bg-zinc-950 dark:text-zinc-100">
      <div className="w-full max-w-sm rounded-lg border border-zinc-200 bg-white p-8 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
        <h1 className="mb-1 text-xl font-semibold text-zinc-950 dark:text-white">{labels?.title ?? 'One last thing'}</h1>
        <p className="mb-6 text-sm text-zinc-600 dark:text-zinc-400">
          {labels?.body ?? 'What should we call you? Your name is shown on tickets and responses.'}{' '}
          If you signed in with the wrong address,{' '}
          <button
            onClick={() => signOut({ callbackUrl: '/login' })}
            className="font-medium text-sky-700 underline underline-offset-2 hover:text-sky-800 dark:text-sky-400 dark:hover:text-sky-300"
          >
            sign out and try again
          </button>
          .
        </p>
        <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)}
                placeholder="Jane"
                autoFocus
              />
            </FieldGroup>
            <FieldGroup>
              <FieldLabel htmlFor="lastName">{labels?.lastName ?? 'Last name'}</FieldLabel>
              <TextField
                id="lastName"
                type="text"
                required
                value={lastName}
                onChange={(e) => setLastName(e.target.value)}
                placeholder="Smith"
              />
            </FieldGroup>
          </FieldGrid>
          <FieldGroup>
            <FieldLabel htmlFor="preferredLanguage">{labels?.preferredLanguage ?? 'Preferred language'}</FieldLabel>
            <SelectField
              id="preferredLanguage"
              value={preferredLanguage}
              onChange={(e) => setPreferredLanguage(normalizeSupportedLanguage(e.target.value))}
            >
              {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> : null}
          <PrimaryButton
            type="submit"
            loading={loading}
            className="w-full"
          >
            {loading ? labels?.saving ?? 'Saving...' : labels?.continue ?? 'Continue'}
          </PrimaryButton>
        </form>
      </div>
    </main>
  )
}