'use client'

import { useState } from 'react'
import { useRouter } from '@/i18n/navigation'
import { useTranslations } from 'next-intl'
import { toast } from 'react-hot-toast'
import { User, Mail, Phone, Save, Lock } from 'lucide-react'
import { useAccountUser } from './AccountUserContext'
import { getApiErrorMessage } from '@/lib/utils/apiError'

export default function ProfileForm() {
  const user = useAccountUser()
  const router = useRouter()
  const t = useTranslations('Account.profile')
  const [formData, setFormData] = useState({ name: user.name, phone: user.phone ?? '' })
  const [errors, setErrors] = useState<{ name?: string; phone?: string }>({})
  const [saving, setSaving] = useState(false)

  const validate = () => {
    const newErrors: typeof errors = {}
    if (formData.name.trim().length < 2) newErrors.name = t('nameRequired')
    if (formData.phone && !/^03[0-9]{9}$/.test(formData.phone)) newErrors.phone = t('phoneInvalid')
    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!validate()) return

    setSaving(true)
    try {
      const res = await fetch('/api/frontend/auth/profile', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify({ name: formData.name, phone: formData.phone || undefined }),
      })
      const data = await res.json()
      if (!res.ok || !data.success) {
        toast.error(getApiErrorMessage(data, t('updateFailed')))
        return
      }
      toast.success(t('updated'))
      // Layout.tsx's server-side data (name/phone shown in the sidebar
      // welcome banner elsewhere in /account) only refreshes on a real
      // navigation — router.refresh() re-runs it without a full page reload.
      router.refresh()
    } catch {
      toast.error(t('networkError'))
    } finally {
      setSaving(false)
    }
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-5">
      {/* Full Name */}
      <div>
        <label className="block text-dark font-medium mb-2 text-sm">{t('fullName')}</label>
        <div className="relative">
          <User size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-custom" />
          <input
            type="text"
            value={formData.name}
            onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
            className={`w-full pl-10 pr-4 py-2.5 border rounded-lg focus:ring-1 focus:ring-primary outline-none transition ${errors.name ? 'border-red-400' : 'border-gray-200 focus:border-primary'}`}
          />
        </div>
        {errors.name && <p className="text-xs text-red-500 mt-1">{errors.name}</p>}
      </div>

      {/* Email (read-only) */}
      <div>
        <label className="block text-dark font-medium mb-2 text-sm">{t('email')}</label>
        <div className="relative">
          <Mail size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-custom" />
          <input
            type="email"
            value={user.email}
            disabled
            className="w-full pl-10 pr-10 py-2.5 border border-gray-200 rounded-lg bg-gray-50 text-gray-custom cursor-not-allowed"
          />
          <Lock size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-custom" />
        </div>
        <p className="text-xs text-gray-custom mt-1">{t('emailLocked')}</p>
      </div>

      {/* Phone */}
      <div>
        <label className="block text-dark font-medium mb-2 text-sm">{t('phone')}</label>
        <div className="relative">
          <Phone size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-custom" />
          <input
            type="tel"
            value={formData.phone}
            onChange={(e) => setFormData((prev) => ({ ...prev, phone: e.target.value }))}
            placeholder="03XXXXXXXXX"
            className={`w-full pl-10 pr-4 py-2.5 border rounded-lg focus:ring-1 focus:ring-primary outline-none transition ${errors.phone ? 'border-red-400' : 'border-gray-200 focus:border-primary'}`}
          />
        </div>
        {errors.phone && <p className="text-xs text-red-500 mt-1">{errors.phone}</p>}
      </div>

      {/* Submit */}
      <button
        type="submit"
        disabled={saving}
        className="flex items-center gap-2 px-6 py-2.5 bg-gradient-primary text-white rounded-lg font-medium hover:shadow-md transition disabled:opacity-50"
      >
        <Save size={16} />
        {saving ? t('saving') : t('saveChanges')}
      </button>
    </form>
  )
}