'use client'

import { useState, useEffect, useCallback } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { useTranslations, useLocale } from 'next-intl'
import { toast } from 'react-hot-toast'
import Container from '@/components/frontend/Container'
import CheckoutSteps from '@/components/frontend/checkout/CheckoutSteps'
import CheckoutForm, { type CheckoutFormData } from '@/components/frontend/checkout/CheckoutForm'
import PaymentMethods, { type PaymentMethod } from '@/components/frontend/checkout/PaymentMethods'
import OrderSummary from '@/components/frontend/checkout/OrderSummary'
import { useCartStore } from '@/store/cartStore'
import { useCurrencyStore } from '@/store/currencyStore'
import { useCheckoutSettingsStore } from '@/store/checkoutSettingsStore'
import { getApiErrorMessage } from '@/lib/utils/apiError'
import { getGuestSessionId } from '@/lib/cart/guestSession'

interface MeResponse {
  success: boolean
  data?: { user: { name: string; email: string; phone: string | null } }
}

export default function CheckoutPage() {
  const router = useRouter()
  const locale = useLocale()
  const t = useTranslations('Checkout')
  const tCart = useTranslations('Cart')
  const formatAmount = useCurrencyStore((s) => s.formatAmount)
  const { items, couponCode, couponDiscount, appliedCoupon, fetchCart, getSubtotal } = useCartStore()
  const {
    minOrderAmount,
    vatLabel,
    vatPercentage,
    enabledPaymentMethods,
    guestCheckoutEnabled,
    calculateDeliveryFee,
    calculateTax,
  } = useCheckoutSettingsStore()

  const [step, setStep] = useState<'details' | 'payment'>('details')
  const [isLoggedIn, setIsLoggedIn] = useState(false)
  const [meChecked, setMeChecked] = useState(false)
  const [initialValues, setInitialValues] = useState<Partial<CheckoutFormData>>({})
  const [checkoutData, setCheckoutData] = useState<CheckoutFormData | null>(null)
  const [paymentMethod, setPaymentMethod] = useState<PaymentMethod | ''>('')
  const [placingOrder, setPlacingOrder] = useState(false)
  const [cartChecked, setCartChecked] = useState(false)

  useEffect(() => {
    fetchCart(locale).finally(() => setCartChecked(true))
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [locale])

  useEffect(() => {
    fetch('/api/frontend/auth/me', { credentials: 'include' })
      .then((res) => res.json())
      .then((data: MeResponse) => {
        if (data.success && data.data) {
          setIsLoggedIn(true)
          setInitialValues({
            shipping_full_name: data.data.user.name,
            shipping_phone: data.data.user.phone ?? '',
            email: data.data.user.email,
          })
        }
      })
      .catch(() => {})
      .finally(() => setMeChecked(true))
  }, [])

  // Empty cart shouldn't be checking out — bounce back once we actually know
  // (not before fetchCart resolves, or a real non-empty cart would flash-redirect).
  useEffect(() => {
    if (cartChecked && items.length === 0) {
      router.replace('/cart')
    }
  }, [cartChecked, items.length, router])

  const subtotal = getSubtotal()
  const deliveryFee = items.length === 0 ? 0 : calculateDeliveryFee(subtotal)
  const tax = items.length === 0 ? 0 : calculateTax(subtotal)
  const total = Math.max(subtotal + deliveryFee + tax - couponDiscount, 0)
  const belowMinOrder = minOrderAmount > 0 && subtotal < minOrderAmount
  const guestBlocked = meChecked && !isLoggedIn && !guestCheckoutEnabled

  const handleDetailsSubmit = (data: CheckoutFormData) => {
    setCheckoutData(data)
    setStep('payment')
  }

  const handlePlaceOrder = useCallback(async () => {
    if (!checkoutData || !paymentMethod || placingOrder) return
    setPlacingOrder(true)
    try {
      const res = await fetch('/api/frontend/orders', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify({
          session_id: getGuestSessionId(),
          email: checkoutData.email || undefined,
          shipping_full_name: checkoutData.shipping_full_name,
          shipping_phone: checkoutData.shipping_phone,
          shipping_address_line1: checkoutData.shipping_address_line1,
          shipping_address_line2: checkoutData.shipping_address_line2 || undefined,
          shipping_city: checkoutData.shipping_city,
          shipping_state: checkoutData.shipping_state || undefined,
          shipping_postal_code: checkoutData.shipping_postal_code || undefined,
          shipping_landmark: checkoutData.shipping_landmark || undefined,
          payment_method: paymentMethod,
          customer_notes: checkoutData.customer_notes || undefined,
          locale,
        }),
      })
      const data = await res.json()

      if (!res.ok || !data.success) {
        toast.error(getApiErrorMessage(data, t('orderFailed')))
        return
      }

      await fetchCart(locale) // server already cleared it — sync the local store
      const query = data.data.is_new_account ? `?newAccount=${encodeURIComponent(data.data.account_email)}` : ''
      router.push(`/order-confirmation/${data.data.id}${query}`)
    } catch {
      toast.error(t('networkError'))
    } finally {
      setPlacingOrder(false)
    }
  }, [checkoutData, paymentMethod, placingOrder, fetchCart, locale, router, t])

  if (!cartChecked || items.length === 0) {
    return (
      <Container className="py-20 text-center">
        <div className="animate-spin w-10 h-10 border-4 border-primary border-t-transparent rounded-full mx-auto" />
      </Container>
    )
  }

  if (belowMinOrder) {
    return (
      <Container className="py-20 text-center max-w-md mx-auto">
        <p className="text-dark font-medium mb-4">{t('minOrderNotMet', { amount: formatAmount(minOrderAmount) })}</p>
        <Link href="/cart" className="inline-block bg-gradient-primary text-white px-6 py-3 rounded-lg font-medium">
          {t('backToCart')}
        </Link>
      </Container>
    )
  }

  if (guestBlocked) {
    return (
      <Container className="py-20 text-center max-w-md mx-auto">
        <p className="text-dark font-medium mb-4">{t('guestCheckoutDisabled')}</p>
        <Link href="/login" className="inline-block bg-gradient-primary text-white px-6 py-3 rounded-lg font-medium">
          {t('logIn')}
        </Link>
      </Container>
    )
  }

  return (
    <Container className="py-8">
      <CheckoutSteps currentStep={step === 'details' ? 2 : 3} />

      <div className="flex flex-col lg:flex-row gap-8">
        <div className="flex-1">
          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            {step === 'details' && (
              <>
                <h2 className="text-xl font-bold text-dark mb-4">{t('shippingDetails')}</h2>
                <CheckoutForm
                  key={meChecked ? 'me-loaded' : 'me-loading'}
                  isLoggedIn={isLoggedIn}
                  initialValues={initialValues}
                  onSubmit={handleDetailsSubmit}
                />
              </>
            )}

            {step === 'payment' && (
              <>
                <div className="flex items-center justify-between mb-4">
                  <h2 className="text-xl font-bold text-dark">{t('paymentMethod')}</h2>
                  <button
                    onClick={() => setStep('details')}
                    className="text-sm text-primary hover:underline cursor-pointer"
                  >
                    {t('editDetails')}
                  </button>
                </div>
                <PaymentMethods
                  selectedMethod={paymentMethod}
                  onSelect={setPaymentMethod}
                  enabledMethods={enabledPaymentMethods}
                />

                <button
                  onClick={handlePlaceOrder}
                  disabled={!paymentMethod || placingOrder}
                  className="w-full mt-6 bg-gradient-primary text-white py-3 rounded-lg font-semibold hover:shadow-md transition disabled:opacity-50 cursor-pointer"
                >
                  {placingOrder ? t('placingOrder') : t('placeOrder', { amount: formatAmount(total) })}
                </button>
              </>
            )}
          </div>
        </div>

        <div className="lg:w-96">
          <OrderSummary
            items={items}
            subtotal={subtotal}
            deliveryFee={deliveryFee}
            tax={tax}
            vatLabel={vatLabel}
            vatPercentage={vatPercentage}
            discount={couponDiscount}
            total={total}
            appliedCoupon={appliedCoupon}
          />
          {couponCode && (
            <p className="text-xs text-gray-custom mt-2 text-center">
              {appliedCoupon && !appliedCoupon.appliesToAll
                ? appliedCoupon.type === 'percentage'
                  ? tCart('couponAppliedPercentageScoped', { code: couponCode, percent: appliedCoupon.value })
                  : tCart('couponAppliedFixedScoped', { code: couponCode, amount: formatAmount(appliedCoupon.value) })
                : tCart('couponApplied', { code: couponCode })}
            </p>
          )}
        </div>
      </div>
    </Container>
  )
}