'use client'

import { useEffect, useState } from 'react'
import { useParams } from 'next/navigation'
import { useTranslations } from 'next-intl'
import { XCircle } from 'lucide-react'
import AccountLayout from '@/components/frontend/account/AccountLayout'
import AddressForm, { type AddressFormData } from '@/components/frontend/account/AddressForm'

export default function EditAddressPageClient() {
  const { id } = useParams<{ id: string }>()
  const t = useTranslations('Account.addresses')
  const [initialData, setInitialData] = useState<Partial<AddressFormData> | null>(null)
  const [status, setStatus] = useState<'loading' | 'idle' | 'error'>('loading')

  useEffect(() => {
    let cancelled = false
    fetch(`/api/frontend/addresses/${id}`, { credentials: 'include' })
      .then((res) => res.json())
      .then((data) => {
        if (cancelled) return
        if (!data.success) {
          setStatus('error')
          return
        }
        const a = data.data
        setInitialData({
          full_name: a.full_name,
          phone: a.phone,
          alternate_phone: a.alternate_phone || '',
          address_line1: a.address_line1,
          address_line2: a.address_line2 || '',
          city: a.city,
          state: a.state,
          postal_code: a.postal_code,
          address_type: a.address_type,
          landmark: a.landmark || '',
          is_default: Boolean(a.is_default),
        })
        setStatus('idle')
      })
      .catch(() => {
        if (!cancelled) setStatus('error')
      })
    return () => { cancelled = true }
  }, [id])

  if (status === 'loading') {
    return (
      <AccountLayout title={t('editTitle')} description={t('editDescription')}>
        <div className="text-center py-12">
          <div className="animate-spin w-8 h-8 border-4 border-primary border-t-transparent rounded-full mx-auto" />
        </div>
      </AccountLayout>
    )
  }

  if (status === 'error' || !initialData) {
    return (
      <AccountLayout title={t('editTitle')} description="">
        <div className="text-center py-12">
          <XCircle size={48} className="mx-auto text-gray-300 mb-3" />
          <h3 className="text-lg font-semibold text-dark">{t('notFound')}</h3>
        </div>
      </AccountLayout>
    )
  }

  return (
    <AccountLayout title={t('editTitle')} description={t('editDescription')}>
      <AddressForm addressId={id} initialData={initialData} />
    </AccountLayout>
  )
}