'use client'

import { useEffect, useState } from 'react'
import { Link } from '@/i18n/navigation'
import { useTranslations } from 'next-intl'
import { Package, ChevronRight } from 'lucide-react'
import { useCurrencyStore } from '@/store/currencyStore'
import OrderStatusBadge from './OrderStatusBadge'

interface Order {
  id: string
  order_number: string
  created_at: string
  grand_total: number
  status: string
  items_count: number
}

const FILTERS = ['all', 'pending', 'confirmed', 'shipped', 'delivered', 'cancelled', 'returned', 'refunded'] as const

export default function OrdersList() {
  const formatAmount = useCurrencyStore((s) => s.formatAmount)
  const t = useTranslations('Account.orders')
  const [filter, setFilter] = useState<string>('all')
  const [orders, setOrders] = useState<Order[]>([])
  const [loading, setLoading] = useState(true)

  const filterLabels: Record<(typeof FILTERS)[number], string> = {
    all: t('allOrders'),
    pending: t('statusFilter.pending'),
    confirmed: t('statusFilter.confirmed'),
    shipped: t('statusFilter.shipped'),
    delivered: t('statusFilter.delivered'),
    cancelled: t('statusFilter.cancelled'),
    returned: t('statusFilter.returned'),
    refunded: t('statusFilter.refunded'),
  }

  useEffect(() => {
    let cancelled = false
    const params = new URLSearchParams({ limit: '50' })
    if (filter !== 'all') params.set('status', filter)

    fetch(`/api/frontend/orders?${params}`, { credentials: 'include' })
      .then((res) => res.json())
      .then((data) => {
        if (cancelled) return
        if (data.success) setOrders(data.data.orders)
      })
      .finally(() => {
        if (!cancelled) setLoading(false)
      })

    return () => { cancelled = true }
  }, [filter])

  return (
    <div className="space-y-6">
      {/* Filter Tabs */}
      <div className="flex flex-wrap gap-2 border-b border-gray-100 pb-3">
        {FILTERS.map((status) => (
          <button
            key={status}
            onClick={() => setFilter(status)}
            className={`px-3 py-1.5 rounded-full text-sm font-medium transition-all ${
              filter === status
                ? 'bg-primary text-white'
                : 'bg-gray-100 text-dark hover:bg-gray-200'
            }`}
          >
            {filterLabels[status]}
          </button>
        ))}
      </div>

      {/* Orders List */}
      {loading ? (
        <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>
      ) : orders.length === 0 ? (
        <div className="text-center py-12">
          <Package size={48} className="mx-auto text-gray-custom mb-3" />
          <h3 className="text-lg font-semibold text-dark mb-1">{t('noOrders')}</h3>
          <p className="text-gray-custom text-sm">{t('noOrdersDescription')}</p>
          <Link href="/" className="inline-block mt-4 text-primary hover:underline">
            {t('startShopping')} →
          </Link>
        </div>
      ) : (
        <div className="space-y-4">
          {orders.map((order) => (
            <div key={order.id} className="border border-gray-100 rounded-xl p-4 hover:shadow-md transition-all">
              <div className="flex flex-wrap justify-between items-start gap-3">
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center">
                    <Package size={20} className="text-gray-custom" />
                  </div>
                  <div>
                    <Link href={`/account/orders/${order.id}`} className="font-semibold text-dark hover:text-primary">
                      {order.order_number}
                    </Link>
                    <p className="text-xs text-gray-custom">{new Date(order.created_at).toLocaleDateString()}</p>
                    <p className="text-xs text-gray-custom">{t('itemsCount', { count: order.items_count })}</p>
                  </div>
                </div>
                <div className="text-right">
                  <p className="font-bold text-dark">{formatAmount(order.grand_total)}</p>
                  <OrderStatusBadge status={order.status} />
                </div>
                <div className="flex gap-2">
                  <Link
                    href={`/account/orders/${order.id}`}
                    className="px-3 py-1.5 text-sm text-dark border border-gray-200 rounded-lg hover:border-primary hover:text-primary transition flex items-center gap-1"
                  >
                    {t('view')} <ChevronRight size={14} />
                  </Link>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}