import { useEffect, useRef, useState } from 'react'
import { Navigate, useNavigate } from 'react-router-dom'
import { MapPin, Store } from 'lucide-react'
import { useAuth } from '../../context/AuthContext'
import { useCheckout } from '../../context/CheckoutContext'
import { ApiError, isAbortError } from '../../lib/api'
import { listAddresses, type UserAddress } from '../../services/addressService'
import {
  CheckoutAddAddressRow,
} from '../../components/checkout/CheckoutAddAddressPanel'
import { CheckoutAddAddressModal } from '../../components/checkout/CheckoutAddAddressModal'
import { CheckoutActionBar } from '../../components/checkout/CheckoutActionBar'
import { CheckoutBackButton } from '../../components/checkout/CheckoutBackButton'
import styles from './CheckoutSteps.module.css'

export function CheckoutDeliveryStep() {
  const navigate = useNavigate()
  const { user, isLoading: authLoading } = useAuth()
  const { deliveryMode, selectedAddressId, setDeliveryMode, setSelectedAddressId } =
    useCheckout()
  const [addresses, setAddresses] = useState<UserAddress[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')
  const [showAddModal, setShowAddModal] = useState(false)
  const selectedAddressIdRef = useRef(selectedAddressId)
  selectedAddressIdRef.current = selectedAddressId

  useEffect(() => {
    if (!user) return

    const controller = new AbortController()

    async function load() {
      setLoading(true)
      setError('')

      try {
        const data = await listAddresses(controller.signal)
        if (controller.signal.aborted) return

        setAddresses(data.items)

        const current = selectedAddressIdRef.current
        if (data.items.length === 0) {
          if (current !== null) setSelectedAddressId(null)
          return
        }

        const stillValid = current !== null && data.items.some((item) => item.id === current)
        if (!stillValid) {
          setSelectedAddressId(data.items[0].id)
        }
      } catch (err) {
        if (isAbortError(err)) return
        setError(err instanceof ApiError ? err.message : 'بارگذاری آدرس‌ها ممکن نشد.')
      } finally {
        if (!controller.signal.aborted) setLoading(false)
      }
    }

    void load()
    return () => controller.abort()
  }, [user, setSelectedAddressId])

  async function handleAddressSaved() {
    try {
      const data = await listAddresses()
      setAddresses(data.items)
      const newest = data.items.at(-1)
      if (newest) setSelectedAddressId(newest.id)
    } catch (err) {
      setError(err instanceof ApiError ? err.message : 'بارگذاری آدرس‌ها ممکن نشد.')
    }
  }

  const canContinue =
    deliveryMode === 'pickup' || (deliveryMode === 'delivery' && selectedAddressId)

  if (authLoading) {
    return <div className={styles.loading}>در حال بارگذاری...</div>
  }

  if (!user) {
    return (
      <Navigate
        to={`/checkout/login?redirect=${encodeURIComponent('/checkout/delivery')}`}
        replace
        state={{ from: '/checkout/delivery' }}
      />
    )
  }

  return (
    <div className={styles.stepContent}>
      <CheckoutBackButton
        label="بازگشت به سبد خرید"
        onClick={() => navigate('/checkout/cart')}
      />

      <div>
        <h1 className={styles.stepTitle}>نحوه دریافت</h1>
        <p className={styles.stepDesc}>چگونه می‌خواهید سفارش را دریافت کنید؟</p>
      </div>

      <div className={styles.deliveryOptions}>
        <button
          type="button"
          className={[
            styles.deliveryOption,
            deliveryMode === 'delivery' ? styles.deliveryOptionActive : '',
          ]
            .filter(Boolean)
            .join(' ')}
          onClick={() => setDeliveryMode('delivery')}
        >
          <MapPin size={22} />
          <span className={styles.deliveryOptionLabel}>ارسال به آدرس</span>
          <span className={styles.deliveryOptionHint}>ارسال به یکی از آدرس‌های ذخیره‌شده</span>
        </button>

        <button
          type="button"
          className={[
            styles.deliveryOption,
            deliveryMode === 'pickup' ? styles.deliveryOptionActive : '',
          ]
            .filter(Boolean)
            .join(' ')}
          onClick={() => {
            setDeliveryMode('pickup')
            setShowAddModal(false)
          }}
        >
          <Store size={22} />
          <span className={styles.deliveryOptionLabel}>تحویل حضوری</span>
          <span className={styles.deliveryOptionHint}>دریافت از فروشگاه</span>
        </button>
      </div>

      {deliveryMode === 'pickup' ? (
        <p className={styles.pickupNote}>
          سفارش را از فروشگاه تحویل می‌گیرید. پس از آماده‌سازی به شما اطلاع می‌دهیم.
        </p>
      ) : (
        <>
          {error && (
            <div className={styles.error} role="alert">
              {error}
            </div>
          )}

          {loading ? (
            <div className={styles.loading}>در حال بارگذاری آدرس‌ها...</div>
          ) : (
            <div className={styles.addressList}>
              {addresses.length === 0 && (
                <p className={styles.addressEmptyHint}>
                  هنوز آدرسی ذخیره نکرده‌اید. یک آدرس جدید اضافه کنید یا تحویل حضوری را انتخاب
                  کنید.
                </p>
              )}

              {addresses.map((address) => {
                const active = selectedAddressId === address.id
                return (
                  <button
                    key={address.id}
                    type="button"
                    className={[
                      styles.addressCard,
                      active ? styles.addressCardActive : '',
                    ]
                      .filter(Boolean)
                      .join(' ')}
                    onClick={() => setSelectedAddressId(address.id)}
                  >
                    <span className={styles.radio}>
                      {active && <span className={styles.radioInner} />}
                    </span>
                    <span className={styles.addressCardBody}>
                      <span className={styles.addressCardTitle}>
                        {address.label || address.city}
                      </span>
                      <span className={styles.addressCardText}>
                        {[
                          address.label ? address.city : null,
                          address.address,
                          address.postalCode,
                        ]
                          .filter(Boolean)
                          .join(' · ')}
                      </span>
                    </span>
                  </button>
                )
              })}

              <CheckoutAddAddressRow onClick={() => setShowAddModal(true)} />
            </div>
          )}
        </>
      )}

      <CheckoutAddAddressModal
        open={showAddModal}
        onClose={() => setShowAddModal(false)}
        onSaved={() => void handleAddressSaved()}
      />

      <CheckoutActionBar
        primaryLabel="ادامه به پرداخت"
        onPrimary={() => navigate('/checkout/payment')}
        primaryDisabled={!canContinue}
      />
    </div>
  )
}
