'use client'

import { useEffect, useState } from 'react'
import { useParams, useSearchParams } from 'next/navigation'
import Link from 'next/link'
import { useTranslations } from 'next-intl'
import { CheckCircle, Package, Truck, Printer, ShoppingBag, MapPin, CreditCard, XCircle, Info } from 'lucide-react'
import Container from '@/components/frontend/Container'
import { useCurrencyStore } from '@/store/currencyStore'
import { getApiErrorMessage } from '@/lib/utils/apiError'

interface OrderItem {
  id: string
  product_name: string
  variant_name: string | null
  quantity: number
  unit_price: number
  total_price: number
  image_url: string | null
}

interface Order {
  id: string
  order_number: string
  status: 'pending' | 'confirmed' | 'shipped' | 'delivered' | 'cancelled' | 'returned' | 'refunded'
  payment_method: 'cod' | 'bank_transfer' | 'paypal' | 'stripe'
  payment_status: string
  delivery_fee: number
  tax_amount: number
  tax_percentage: number
  coupon_discount_amount: number
  shipping_full_name: string
  shipping_phone: string
  shipping_address_line1: string
  shipping_address_line2: string | null
  shipping_city: string
  shipping_landmark: string | null
  created_at: string
}

const ACTIVE_STEPS: Order['status'][] = ['pending', 'confirmed', 'shipped', 'delivered']

export default function OrderConfirmationPage() {
  const { id } = useParams<{ id: string }>()
  const searchParams = useSearchParams()
  const newAccountEmail = searchParams.get('newAccount')
  const t = useTranslations('OrderConfirmation')
  const tCheckout = useTranslations('Checkout')
  const formatAmount = useCurrencyStore((s) => s.formatAmount)

  const [order, setOrder] = useState<Order | null>(null)
  const [items, setItems] = useState<OrderItem[]>([])
  const [siteName, setSiteName] = useState('')
  const [status, setStatus] = useState<'loading' | 'idle' | 'error'>('loading')

  useEffect(() => {
    fetch(`/api/frontend/orders/${id}`, { credentials: 'include' })
      .then((res) => res.json())
      .then((data) => {
        if (!data.success) throw new Error(getApiErrorMessage(data, t('notFound')))
        setOrder(data.data.order)
        setItems(data.data.items)
        setSiteName(data.data.siteName)
        setStatus('idle')
      })
      .catch(() => setStatus('error'))
  }, [id, t])

  if (status === 'loading') {
    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" />
        <p className="text-gray-custom mt-4">{t('loading')}</p>
      </Container>
    )
  }

  if (status === 'error' || !order) {
    return (
      <Container className="py-20 text-center">
        <XCircle size={48} className="text-gray-300 mx-auto mb-4" />
        <h1 className="text-xl font-bold text-dark mb-2">{t('notFound')}</h1>
        <p className="text-gray-custom mb-6">{t('notFoundDescription')}</p>
        <Link href="/" className="inline-flex items-center gap-2 bg-gradient-primary text-white px-6 py-3 rounded-lg font-medium">
          {t('continueShopping')}
        </Link>
      </Container>
    )
  }

  const subtotal = items.reduce((sum, item) => sum + item.total_price, 0)
  const total = Math.max(subtotal + order.delivery_fee + order.tax_amount - order.coupon_discount_amount, 0)
  const orderDate = new Date(order.created_at)
  const isTerminalState = ['cancelled', 'returned', 'refunded'].includes(order.status)
  const currentStepIndex = ACTIVE_STEPS.indexOf(order.status)

  const paymentLabel = order.payment_method === 'cod' ? t('cod') : order.payment_method === 'bank_transfer' ? t('bankTransfer') : order.payment_method

  return (
    <Container className="py-8">
      <div className="text-center mb-8">
        <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <CheckCircle size={40} className="text-green-600" />
        </div>
        <h1 className="text-2xl font-bold text-dark">{t('title')}</h1>
        <p className="text-gray-custom mt-2">{t('thankYou', { siteName })}</p>
        <p className="text-primary font-medium mt-1">{t('orderNumber', { number: order.order_number })}</p>
      </div>

      {newAccountEmail && (
        <div className="max-w-2xl mx-auto mb-6 flex items-start gap-3 bg-primary/5 border border-primary/20 rounded-xl p-4 text-sm text-dark">
          <Info size={18} className="text-primary shrink-0 mt-0.5" />
          <p>{tCheckout('accountCreatedNotice', { email: newAccountEmail })}</p>
        </div>
      )}

      <div className="grid lg:grid-cols-3 gap-8">
        <div className="lg:col-span-2 space-y-6">
          {!isTerminalState ? (
            <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
              <h3 className="font-semibold text-dark mb-4">{t('orderStatus')}</h3>
              <div className="flex flex-wrap justify-between gap-4">
                {[
                  { label: t('orderPlaced'), icon: CheckCircle },
                  { label: t('processing'), icon: Package },
                  { label: t('outForDelivery'), icon: Truck },
                  { label: t('delivered'), icon: CheckCircle },
                ].map((stage, index) => {
                  const done = index <= currentStepIndex
                  const StageIcon = stage.icon
                  return (
                    <div key={stage.label} className="text-center flex-1">
                      <div className={`w-10 h-10 rounded-full flex items-center justify-center mx-auto mb-2 ${done ? 'bg-green-100' : 'bg-gray-100'}`}>
                        <StageIcon size={18} className={done ? 'text-green-600' : 'text-gray-custom'} />
                      </div>
                      <p className="text-sm font-medium text-dark">{stage.label}</p>
                      {index === 0 && <p className="text-xs text-gray-custom">{orderDate.toLocaleDateString()}</p>}
                    </div>
                  )
                })}
              </div>
            </div>
          ) : (
            <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex items-center gap-3">
              <XCircle size={24} className="text-red-500" />
              <div>
                <p className="font-semibold text-dark capitalize">{order.status}</p>
                <p className="text-sm text-gray-custom">{orderDate.toLocaleDateString()}</p>
              </div>
            </div>
          )}

          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h3 className="font-semibold text-dark mb-4">{t('orderItems')}</h3>
            <div className="space-y-3">
              {items.map((item) => (
                <div key={item.id} className="flex justify-between items-center py-2 border-b border-gray-100 last:border-0">
                  <div>
                    <p className="font-medium text-dark">{item.product_name}</p>
                    {item.variant_name && <p className="text-xs text-gray-custom">{item.variant_name}</p>}
                    <p className="text-xs text-gray-custom">{t('qty', { count: item.quantity })}</p>
                  </div>
                  <p className="font-medium text-dark">{formatAmount(item.total_price)}</p>
                </div>
              ))}
            </div>
          </div>

          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h3 className="font-semibold text-dark mb-4">{t('deliveryDetails')}</h3>
            <div className="space-y-3">
              <div className="flex gap-3">
                <MapPin size={16} className="text-primary shrink-0 mt-1" />
                <div>
                  <p className="text-dark font-medium">{t('shippingAddress')}</p>
                  <p className="text-gray-custom">
                    {order.shipping_address_line1}
                    {order.shipping_address_line2 && `, ${order.shipping_address_line2}`}, {order.shipping_city}
                    {order.shipping_landmark && `, ${order.shipping_landmark}`}
                  </p>
                  <p className="text-gray-custom text-sm mt-1">{t('phone')}: {order.shipping_phone}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="space-y-6">
          <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h3 className="font-semibold text-dark mb-4">{t('paymentSummary')}</h3>
            <div className="space-y-2 text-sm">
              <div className="flex justify-between">
                <span className="text-gray-custom">{t('subtotal')}</span>
                <span>{formatAmount(subtotal)}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-custom">{t('deliveryFee')}</span>
                <span>{order.delivery_fee === 0 ? t('free') : formatAmount(order.delivery_fee)}</span>
              </div>
              {order.tax_amount > 0 && (
                <div className="flex justify-between">
                  <span className="text-gray-custom">{t('tax', { percentage: order.tax_percentage })}</span>
                  <span>{formatAmount(order.tax_amount)}</span>
                </div>
              )}
              {order.coupon_discount_amount > 0 && (
                <div className="flex justify-between text-green-600">
                  <span>{t('discount')}</span>
                  <span>- {formatAmount(order.coupon_discount_amount)}</span>
                </div>
              )}
              <div className="border-t border-gray-100 pt-2 mt-2">
                <div className="flex justify-between font-semibold">
                  <span>{t('total')}</span>
                  <span className="text-primary">{formatAmount(total)}</span>
                </div>
              </div>
            </div>
            <div className="mt-4 p-3 bg-gray-50 rounded-lg">
              <p className="text-xs text-gray-custom text-center flex items-center justify-center gap-2">
                <CreditCard size={14} />
                {t('paymentMethodLabel', { method: paymentLabel })}
              </p>
            </div>
          </div>

          <div className="space-y-3">
            <Link
              href="/"
              className="w-full flex items-center justify-center gap-2 bg-gradient-primary text-white py-3 rounded-lg font-medium hover:shadow-md transition"
            >
              <ShoppingBag size={18} />
              {t('continueShopping')}
            </Link>
            <button
              onClick={() => window.print()}
              className="w-full flex items-center justify-center gap-2 border border-gray-200 text-dark py-3 rounded-lg font-medium hover:border-primary hover:text-primary transition cursor-pointer"
            >
              <Printer size={18} />
              {t('printReceipt')}
            </button>
          </div>
        </div>
      </div>
    </Container>
  )
}