'use client'

import { useState, useEffect, FormEvent } from 'react'
import { useParams, useRouter } from 'next/navigation'
import { useCart } from '@/lib/cart'
import { createCheckoutOrder, getShopConfig, type ShopConfig } from '@/lib/shop'
import { formatCurrency } from '@/lib/types'
import { Button } from '@/components/ui/Button'
import { Input } from '@/components/ui/Input'
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/Card'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/Select'
import { AlertCircle, CheckCircle2, Loader2, Truck, CreditCard, MapPin, Mail, Phone, User } from 'lucide-react'
import { ShopHeader } from '../ShopHeader'

export default function CheckoutPage() {
  const params = useParams()
  const router = useRouter()
  const businessSlug = params.businessSlug as string
  const { state, clearCart } = useCart()
  const { items, subtotal, itemCount } = state

  // Authoritative pricing config (P1 fix): mirrors backend fee/tax rules.
  const [config, setConfig] = useState<ShopConfig | null>(null)
  useEffect(() => {
    getShopConfig(businessSlug).then(r => {
      if (r.success) setConfig(r.data)
    }).catch(() => undefined)
  }, [businessSlug])

  const deliveryFee =
    config == null
      ? 0
      : config.free_delivery_threshold != null && subtotal >= config.free_delivery_threshold
        ? 0
        : config.delivery_fee
  const tax = config ? (subtotal * config.tax_rate_pct) / 100 : 0
  const total = subtotal + deliveryFee + tax

  const [form, setForm] = useState({
    customer_name: '',
    customer_phone: '',
    customer_email: '',
    delivery_address: '',
    delivery_notes: '',
    preferred_delivery_date: '',
  })
  const [submitting, setSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState(false)

  // Check if cart is empty
  if (items.length === 0) {
    return (
      <>
        <ShopHeader businessSlug={businessSlug} />
        <div className="min-h-[70vh] bg-gray-50 dark:bg-gray-950 flex items-center justify-center px-4">
          <div className="text-center max-w-md">
            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">Cart is Empty</h1>
            <p className="text-gray-500 dark:text-gray-400 mb-6">Your cart is empty. Add some products before checking out.</p>
            <button onClick={() => router.push(`/shop/${params.businessSlug}`)} className="inline-flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition-colors">
              Continue Shopping
            </button>
          </div>
        </div>
      </>
    )
  }

  const totalAmount = total

  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setError('')
    setSubmitting(true)

    const itemsPayload = items.map(item => ({
      product_id: item.productId,
      quantity: item.quantity,
      unit_price: item.unitPrice,
    }))

    const payload = {
      business_slug: businessSlug,
      customer_name: form.customer_name,
      customer_phone: form.customer_phone,
      customer_email: form.customer_email || undefined,
      delivery_address: form.delivery_address,
      delivery_notes: form.delivery_notes || undefined,
      preferred_delivery_date: form.preferred_delivery_date || undefined,
      items: itemsPayload,
    }

    try {
      const result = await createCheckoutOrder(payload)
      if (result.success) {
        clearCart()
        setSuccess(true)
        setTimeout(() => {
          router.push(`/track/${result.data.tracking_token}`)
        }, 2000)
      } else {
        setError(result.message)
      }
    } catch (err) {
      setError('An unexpected error occurred. Please try again.')
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <>
      <ShopHeader businessSlug={businessSlug} />
      <div className="bg-gray-50 dark:bg-gray-950 py-8 px-4">
      <div className="max-w-3xl mx-auto">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">Checkout</h1>
          <p className="text-gray-500 dark:text-gray-400">Fill in your details to complete your order</p>
        </div>

        {success && (
          <div className="mb-6 p-4 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 rounded-lg">
            <div className="flex items-center gap-3 text-green-700 dark:text-green-400">
              <CheckCircle2 className="h-6 w-6 flex-shrink-0" />
              <div>
                <p className="font-semibold">Order placed successfully!</p>
                <p className="text-sm">Redirecting to tracking page...</p>
              </div>
            </div>
          </div>
        )}

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* Checkout Form */}
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <User className="h-5 w-5" />
                  Customer Information
                </CardTitle>
                <CardDescription>Contact details for order updates</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <label htmlFor="customer_name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Full Name *
                  </label>
                  <div className="relative">
                    <User className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
                    <Input
                      id="customer_name"
                      value={form.customer_name}
                      onChange={e => setForm({ ...form, customer_name: e.target.value })}
                      placeholder="John Doe"
                      className="pl-10"
                      required
                    />
                  </div>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div>
                    <label htmlFor="customer_phone" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                      Phone Number *
                    </label>
                    <div className="relative">
                      <Phone className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
                      <Input
                        id="customer_phone"
                        type="tel"
                        value={form.customer_phone}
                        onChange={e => setForm({ ...form, customer_phone: e.target.value })}
                        placeholder="+250 788 123 456"
                        className="pl-10"
                        required
                      />
                    </div>
                  </div>

                  <div>
                    <label htmlFor="customer_email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                      Email (optional)
                    </label>
                    <div className="relative">
                      <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
                      <Input
                        id="customer_email"
                        type="email"
                        value={form.customer_email}
                        onChange={e => setForm({ ...form, customer_email: e.target.value })}
                        placeholder="john@example.com"
                        className="pl-10"
                      />
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <MapPin className="h-5 w-5" />
                  Delivery Address
                </CardTitle>
                <CardDescription>Where should we deliver your order?</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <label htmlFor="delivery_address" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Delivery Address *
                  </label>
                  <textarea
                    id="delivery_address"
                    value={form.delivery_address}
                    onChange={e => setForm({ ...form, delivery_address: e.target.value })}
                    rows={3}
                    className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                    placeholder="Enter full delivery address including landmarks"
                    required
                  />
                </div>

                <div>
                  <label htmlFor="delivery_notes" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Delivery Notes (optional)
                  </label>
                  <textarea
                    id="delivery_notes"
                    value={form.delivery_notes}
                    onChange={e => setForm({ ...form, delivery_notes: e.target.value })}
                    rows={2}
                    className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                    placeholder="e.g., Call when you arrive, leave at reception, etc."
                  />
                </div>

                <div>
                  <label htmlFor="preferred_delivery_date" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    Preferred Delivery Date (optional)
                  </label>
                  <Input
                    id="preferred_delivery_date"
                    type="date"
                    value={form.preferred_delivery_date}
                    onChange={e => setForm({ ...form, preferred_delivery_date: e.target.value })}
                    min={new Date().toISOString().split('T')[0]}
                    className="max-w-xs"
                  />
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Order Summary */}
          <div className="lg:col-span-1">
            <Card className="sticky top-24">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <Truck className="h-5 w-5" />
                  Order Summary
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2 text-sm">
                  <div className="flex justify-between">
                    <span className="text-gray-500 dark:text-gray-400">Subtotal ({items.length} items)</span>
                    <span className="font-medium">{formatCurrency(subtotal)}</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-gray-500 dark:text-gray-400">Delivery</span>
                    <span className="font-medium">
                      {deliveryFee === 0 ? (
                        <span className="text-green-600 dark:text-green-400">Free</span>
                      ) : (
                        formatCurrency(deliveryFee)
                      )}
                    </span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-gray-500 dark:text-gray-400">
                      Tax{config && config.tax_rate_pct ? ` (${config.tax_rate_pct}%)` : ''}
                    </span>
                    <span className="font-medium">{formatCurrency(tax)}</span>
                  </div>
                  <div className="border-t border-gray-200 dark:border-gray-700 pt-2">
                    <div className="flex justify-between text-lg font-bold">
                      <span>Total</span>
                      <span>{formatCurrency(total)}</span>
                    </div>
                  </div>
                </div>

                {config?.branding?.payment_enabled && (
                  <div className="p-3 rounded-lg border text-sm bg-emerald-50 dark:bg-emerald-900/30 border-emerald-200 dark:border-emerald-800 text-emerald-700 dark:text-emerald-400">
                    <p className="flex items-center gap-1.5 font-medium">
                      <CheckCircle2 className="h-4 w-4" /> Mobile-money payment
                    </p>
                    <p className="mt-1 text-xs leading-relaxed">
                      Pay <span className="font-semibold">{formatCurrency(total)}</span> to{' '}
                      <span className="font-semibold">{config?.branding?.payment_phone || 'the store number shown at delivery'}</span>{' '}
                      at or before delivery, then confirm via your tracking link.
                    </p>
                  </div>
                )}

                {error && (
                  <div className="p-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg text-sm text-red-700 dark:text-red-400">
                    {error}
                  </div>
                )}

                <form onSubmit={handleSubmit}>
                  <Button type="submit" className="w-full" size="lg" loading={submitting}>
                    {submitting ? (
                      <>
                        <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                        Processing...
                      </>
                    ) : (
                      <>
                        <CreditCard className="h-4 w-4 mr-2" />
                        Place Order - {formatCurrency(total)}
                      </>
                    )}
                  </Button>
                </form>

                <div className="pt-4 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-500 dark:text-gray-400 space-y-1">
                  <p className="flex items-center gap-1"><CreditCard className="h-3 w-3" /> Secure checkout</p>
                  <p className="flex items-center gap-1"><Truck className="h-3 w-3" /> Free delivery over {formatCurrency(config?.free_delivery_threshold ?? 50)}</p>
                  <p className="flex items-center gap-1"><CheckCircle2 className="h-3 w-3" /> Quality guaranteed</p>
                </div>
              </CardContent>
</Card>

          </div>

        </div>

      </div>

      </div>

      </>
    )

  }