import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import Navbar from '../components/Navbar'
import Footer from '../components/Footer'
import { API_BASE, formatPrice, type Category } from '../types'
import { useCartStore } from '../store/cartStore'
import { useAuthStore } from '../store/authStore'
import { Loader2 } from 'lucide-react'

export default function CheckoutPage() {
  const navigate = useNavigate()
  const { items, getCartTotal, clearCart } = useCartStore()
  const { customer } = useAuthStore()
  const [categories, setCategories] = useState<Category[]>([])
  
  const [shippingFee, setShippingFee] = useState<number>(35)
  const [loading, setLoading] = useState(false)
  const [loadingSettings, setLoadingSettings] = useState(true)

  const [couponCode, setCouponCode] = useState('')
  const [appliedCoupon, setAppliedCoupon] = useState<string | null>(null)
  const [discountAmount, setDiscountAmount] = useState<number>(0)
  const [isFreeShipping, setIsFreeShipping] = useState<boolean>(false)
  const [couponLoading, setCouponLoading] = useState(false)
  const [couponError, setCouponError] = useState('')

  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    address: ''
  })

  // Prefill form with LINE customer data
  useEffect(() => {
    if (customer) {
      setFormData(prev => ({
        ...prev,
        name: prev.name || customer.displayName || '',
        email: prev.email || customer.email || '',
        phone: prev.phone || customer.phone || ''
      }))
    }
  }, [customer])

  // Load Settings (for dynamic shipping fee)
  useEffect(() => {
    fetch(`${API_BASE}/settings`)
      .then(res => res.json())
      .then(data => {
        if (data.shippingFee !== undefined) setShippingFee(data.shippingFee)
      })
      .catch(err => console.error("Could not load settings:", err))
      .finally(() => setLoadingSettings(false))

    fetch(`${API_BASE}/categories`)
      .then(res => res.json())
      .then(setCategories)

    // Check if there's an active coupon saved in localStorage
    const savedCoupon = localStorage.getItem('homaroma_active_coupon')
    if (savedCoupon) {
      setCouponCode(savedCoupon)
      // We will trigger handleApplyCoupon but we need to wait for items/subtotal to be ready.
      // So we'll handle this in another effect or let the user click apply if needed.
      // Better yet, we can validate it immediately if subtotal is available.
    }
  }, [])

  // Kick out if cart empty
  useEffect(() => {
    if (items.length === 0) {
      navigate('/shop')
    }
  }, [items, navigate])

  const subtotal = getCartTotal()
  const effectiveShippingFee = isFreeShipping ? 0 : shippingFee
  const total = Math.max(0, subtotal + effectiveShippingFee - discountAmount)

  // Auto-apply saved coupon if subtotal is ready
  useEffect(() => {
    const savedCoupon = localStorage.getItem('homaroma_active_coupon')
    if (savedCoupon && subtotal > 0 && !appliedCoupon && !couponError && !couponLoading) {
      setCouponCode(savedCoupon)
      // trigger fetch to validate
      fetch(`${API_BASE}/coupons/validate`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ code: savedCoupon, cartTotal: subtotal })
      })
      .then(r => r.json())
      .then(data => {
        if (data.valid) {
          setAppliedCoupon(data.coupon.code)
          setDiscountAmount(data.discountAmount)
          setIsFreeShipping(data.isFreeShipping)
        } else {
          localStorage.removeItem('homaroma_active_coupon') // Remove invalid
        }
      })
      .catch(console.error)
    }
  }, [subtotal, appliedCoupon])

  // Re-validate applied coupon if subtotal changes
  useEffect(() => {
    if (appliedCoupon && subtotal > 0) {
      fetch(`${API_BASE}/coupons/validate`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ code: appliedCoupon, cartTotal: subtotal })
      })
      .then(r => r.json())
      .then(data => {
        if (data.valid) {
          setDiscountAmount(data.discountAmount)
          setIsFreeShipping(data.isFreeShipping)
        } else {
          removeCoupon()
          setCouponError(data.error || 'Coupon is no longer valid for this cart')
        }
      })
    }
  }, [subtotal, appliedCoupon])

  const handleApplyCoupon = async () => {
    if (!couponCode.trim()) return
    setCouponLoading(true)
    setCouponError('')
    
    try {
      const res = await fetch(`${API_BASE}/coupons/validate`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ code: couponCode, cartTotal: subtotal })
      })
      const data = await res.json()
      
      if (res.ok && data.valid) {
        setAppliedCoupon(data.coupon.code)
        setDiscountAmount(data.discountAmount)
        setIsFreeShipping(data.isFreeShipping)
      } else {
        setCouponError(data.error || 'Invalid coupon')
        setAppliedCoupon(null)
        setDiscountAmount(0)
        setIsFreeShipping(false)
      }
    } catch (err) {
      setCouponError('Error validating coupon')
    } finally {
      setCouponLoading(false)
    }
  }

  const removeCoupon = () => {
    setAppliedCoupon(null)
    setCouponCode('')
    setDiscountAmount(0)
    setIsFreeShipping(false)
    setCouponError('')
    localStorage.removeItem('homaroma_active_coupon')
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

    try {
      const orderData = {
        customerId: customer ? customer.id : null,
        customerName: formData.name,
        customerEmail: formData.email,
        customerPhone: formData.phone,
        shippingAddress: formData.address,
        totalAmount: total,
        shippingFee: effectiveShippingFee,
        couponCode: appliedCoupon || undefined,
        discountAmount: discountAmount || undefined,
        items: items.map(item => ({
          productId: item.productId,
          variantId: item.variantId,
          quantity: item.quantity,
          priceAtPurchase: item.price,
          productName: item.productName,
          variantSize: item.variantSize,
          productImage: item.productImage
        }))
      }

      const res = await fetch(`${API_BASE}/orders`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(orderData)
      })
      
      const responseData = await res.json()

      if (res.ok) {
        clearCart()
        
        const existingStr = localStorage.getItem('homaroma_local_orders')
        const existing = existingStr ? JSON.parse(existingStr) : []
        if (!existing.includes(responseData.id)) {
          localStorage.setItem('homaroma_local_orders', JSON.stringify([responseData.id, ...existing]))
        }
        
        navigate(`/order/${responseData.id}`)
      } else {
        alert(responseData.error || 'Failed to place order')
      }
    } catch (err) {
      console.error(err)
      alert('An error occurred. Please try again.')
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="min-h-screen">
      <Navbar categories={categories} />

      <main className="max-w-6xl mx-auto px-6 pt-32 pb-24">
        <h1 className="text-4xl font-bold mb-12">Checkout</h1>

        <div className="flex flex-col lg:flex-row gap-12">
          {/* Form Section */}
          <div className="flex-1 space-y-8">
            <form id="checkout-form" onSubmit={handleSubmit} className="space-y-6">
              <div className="bg-night-900/50 p-8 rounded-2xl border border-white/5 space-y-6">
                <h2 className="text-xl font-bold uppercase tracking-widest text-cyan-glow border-b border-white/10 pb-4">Shipping Information</h2>
                
                <div className="grid md:grid-cols-2 gap-6">
                  <div className="space-y-2">
                    <label className="text-xs uppercase tracking-widest text-slate-400">Full Name *</label>
                    <input 
                      type="text" 
                      required 
                      value={formData.name}
                      onChange={e => setFormData({ ...formData, name: e.target.value })}
                      className="w-full bg-night-950 border border-white/10 rounded-lg p-3 text-white focus:border-cyan-glow focus:ring-1 focus:ring-cyan-glow outline-none transition-all"
                      placeholder="Jane Doe"
                    />
                  </div>
                  <div className="space-y-2">
                    <label className="text-xs uppercase tracking-widest text-slate-400">Phone Number *</label>
                    <input 
                      type="tel" 
                      required 
                      value={formData.phone}
                      onChange={e => setFormData({ ...formData, phone: e.target.value })}
                      className="w-full bg-night-950 border border-white/10 rounded-lg p-3 text-white focus:border-cyan-glow focus:ring-1 focus:ring-cyan-glow outline-none transition-all"
                      placeholder="0812345678"
                    />
                  </div>
                  <div className="md:col-span-2 space-y-2">
                    <label className="text-xs uppercase tracking-widest text-slate-400">Email Address *</label>
                    <input 
                      type="email" 
                      required 
                      value={formData.email}
                      onChange={e => setFormData({ ...formData, email: e.target.value })}
                      className="w-full bg-night-950 border border-white/10 rounded-lg p-3 text-white focus:border-cyan-glow focus:ring-1 focus:ring-cyan-glow outline-none transition-all"
                      placeholder="jane@example.com"
                    />
                  </div>
                  <div className="md:col-span-2 space-y-2">
                    <label className="text-xs uppercase tracking-widest text-slate-400">Shipping Address *</label>
                    <textarea 
                      required 
                      rows={3}
                      value={formData.address}
                      onChange={e => setFormData({ ...formData, address: e.target.value })}
                      className="w-full bg-night-950 border border-white/10 rounded-lg p-3 text-white focus:border-cyan-glow focus:ring-1 focus:ring-cyan-glow outline-none transition-all resize-none"
                      placeholder="123 Serenity Street..."
                    />
                  </div>
                </div>
              </div>
            </form>
          </div>

          {/* Summary Section */}
          <div className="lg:w-96 space-y-6">
            <div className="bg-night-900/50 p-8 rounded-2xl border border-white/5 sticky top-32">
              <h2 className="text-xl font-bold uppercase tracking-widest text-cyan-glow border-b border-white/10 pb-4 mb-6">Order Summary</h2>
              
              {/* Coupon Section */}
              <div className="mb-6 pb-6 border-b border-white/10">
                {!appliedCoupon ? (
                  <div className="space-y-2">
                    <label className="text-[10px] uppercase font-bold tracking-widest text-slate-500">Discount Code</label>
                    <div className="flex gap-2">
                      <input
                        type="text"
                        value={couponCode}
                        onChange={e => setCouponCode(e.target.value.toUpperCase())}
                        placeholder="e.g. SUMMER2026"
                        className="flex-1 bg-night-950 border border-white/10 rounded-lg px-3 text-sm text-white focus:border-cyan-glow outline-none uppercase tracking-widest"
                      />
                      <button
                        type="button"
                        onClick={handleApplyCoupon}
                        disabled={couponLoading || !couponCode.trim()}
                        className="px-4 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-xs font-bold uppercase tracking-widest disabled:opacity-50 transition-all"
                      >
                        {couponLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Apply'}
                      </button>
                    </div>
                    {couponError && <p className="text-xs text-rose-500 mt-1">{couponError}</p>}
                  </div>
                ) : (
                  <div className="flex items-center justify-between bg-cyan-glow/10 border border-cyan-glow/20 rounded-lg px-4 py-3">
                    <div className="flex items-center gap-2">
                      <svg className="w-4 h-4 text-cyan-glow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                      </svg>
                      <span className="text-sm font-bold tracking-widest text-cyan-glow">{appliedCoupon}</span>
                    </div>
                    <button type="button" onClick={removeCoupon} className="text-xs text-slate-400 hover:text-rose-500 uppercase tracking-widest font-bold">Remove</button>
                  </div>
                )}
              </div>
              
              <div className="space-y-4 mb-6">
                {items.map(item => (
                  <div key={item.cartItemId} className="flex justify-between items-start gap-4 text-sm">
                    <div className="flex-1">
                      <p className="font-bold">{item.productName}</p>
                      <p className="text-slate-400 text-xs mt-0.5">{item.variantSize} x {item.quantity}</p>
                    </div>
                    <p className="font-medium text-cyan-glow">{formatPrice(item.price * item.quantity)}</p>
                  </div>
                ))}
              </div>

              <div className="border-t border-white/10 pt-4 space-y-3 font-medium">
                <div className="flex justify-between text-sm text-slate-300">
                  <span>Subtotal</span>
                  <span>{formatPrice(subtotal)}</span>
                </div>
                <div className="flex justify-between text-sm text-slate-300">
                  <span>Shipping Fee</span>
                  {loadingSettings ? <Loader2 className="w-4 h-4 animate-spin" /> : 
                    <span className={isFreeShipping ? "line-through text-slate-500" : ""}>{formatPrice(shippingFee)}</span>
                  }
                </div>
                {isFreeShipping && (
                  <div className="flex justify-between text-sm text-emerald-400">
                    <span>Shipping Discount</span>
                    <span>- {formatPrice(shippingFee)}</span>
                  </div>
                )}
                {discountAmount > 0 && (
                  <div className="flex justify-between text-sm text-cyan-glow">
                    <span>Discount</span>
                    <span>- {formatPrice(discountAmount)}</span>
                  </div>
                )}
                <div className="border-t border-white/10 pt-3 mt-3 flex justify-between text-lg font-bold">
                  <span>Total</span>
                  <span className="text-cyan-glow">{formatPrice(total)}</span>
                </div>
              </div>

              <button 
                form="checkout-form"
                type="submit"
                disabled={loading || loadingSettings}
                className="w-full mt-8 py-4 bg-white text-night-900 font-bold rounded-lg tracking-widest uppercase hover:bg-cyan-glow hover:shadow-[0_0_25px_rgba(102,252,241,0.4)] transition-all duration-500 disabled:opacity-50 disabled:cursor-not-allowed flex justify-center items-center gap-2"
              >
                {loading ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Confirm Order'}
              </button>
            </div>
          </div>
        </div>
      </main>

      <Footer categories={categories} />
    </div>
  )
}