import { useState } from "react"
import { Link } from "react-router"
import { useCart } from "@/context/CartContext"
import { toast } from "sonner"
import { MessageCircle, Send, Tag, Check, Zap, ArrowLeft } from "lucide-react"
import { validateCoupon } from "@/data/staticData"

export default function Checkout() {
  const { items, clearCart } = useCart()
  const [form, setForm] = useState({ name: "", email: "", phone: "", notes: "" })
  const [method, setMethod] = useState<"whatsapp" | "telegram">("whatsapp")
  const [couponCode, setCouponCode] = useState("")
  const [couponApplied, setCouponApplied] = useState<{valid: boolean; discount?: string; message: string; code?: string; type?: string | null; value?: number} | null>(null)
  const [isProcessing, setIsProcessing] = useState(false)

  const total = items.reduce((sum, i) => sum + Number(i.priceAtAdd ?? 0) * (i.quantity ?? 1), 0)
  const discount = couponApplied?.valid ? Number(couponApplied.discount) : 0
  const finalTotal = Math.max(0, total - discount)

  const applyCoupon = () => {
    if (!couponCode.trim()) return
    const result = validateCoupon(couponCode, total)
    setCouponApplied(result)
    if (result.valid) toast.success(result.message)
    else toast.error(result.message)
  }

  const handleCheckout = () => {
    if (!form.name || !form.email) { toast.error("Please fill in your details"); return }
    setIsProcessing(true)

    // Build order message
    const itemList = items.map(i => `- ${i.name} x${i.quantity} = $${(Number(i.priceAtAdd ?? 0) * (i.quantity ?? 1)).toFixed(2)}`).join("\n")
    const message = `🛒 *New Order - Subscription Hero*\n\n` +
      `👤 *Name:* ${form.name}\n` +
      `📧 *Email:* ${form.email}\n` +
      (form.phone ? `📱 *Phone:* ${form.phone}\n` : "") +
      `\n📦 *Items:*\n${itemList}\n\n` +
      (discount > 0 ? `💰 *Subtotal:* $${total.toFixed(2)}\n🏷️ *Discount:* -$${discount.toFixed(2)}\n` : "") +
      `💰 *Total:* $${finalTotal.toFixed(2)}\n\n` +
      (form.notes ? `📝 *Notes:* ${form.notes}\n` : "") +
      `\nPlaced on: ${new Date().toLocaleString()}`

    const encoded = encodeURIComponent(message)
    const url = method === "whatsapp"
      ? `https://wa.me/917038146526?text=${encoded}`
      : `https://t.me/mfatool`

    clearCart()
    toast.success("Order placed! Redirecting...")
    setTimeout(() => window.open(url, "_blank"), 800)
  }

  if (items.length === 0) return <div className="min-h-screen pt-28 px-4 flex items-center justify-center"><div className="text-center"><p className="text-xl text-slate-400 mb-4">Your cart is empty</p><Link to="/shop" className="btn-primary">Start Shopping</Link></div></div>

  return (
    <div className="min-h-screen pt-28 pb-16 px-4">
      <div className="max-w-4xl mx-auto">
        <Link to="/cart" className="flex items-center gap-2 text-sm text-slate-400 hover:text-white mb-6"><ArrowLeft className="w-4 h-4" />Back to Cart</Link>
        <h1 className="text-3xl font-bold mb-8 flex items-center gap-3"><Zap className="w-7 h-7 text-[#f97316]" />Checkout</h1>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <div className="space-y-6">
            <div className="glass-card p-6"><h2 className="font-semibold mb-4">Order Summary</h2><div className="space-y-3 mb-4">{items.map(i => <div key={i.cartId} className="flex justify-between text-sm"><span className="text-slate-300">{i.name} &times; {i.quantity}</span><span className="text-[#f97316]">${(Number(i.priceAtAdd ?? 0) * (i.quantity ?? 1)).toFixed(2)}</span></div>)}</div><div className="border-t border-white/5 pt-3 flex justify-between font-bold"><span>Total</span><span className="text-[#f97316]">${finalTotal.toFixed(2)}</span></div>{discount > 0 && <div className="flex justify-between text-sm text-green-400 mt-1"><span>Discount</span><span>-${discount.toFixed(2)}</span></div>}</div>
            <div className="glass-card p-6"><h2 className="font-semibold mb-4 flex items-center gap-2"><Tag className="w-4 h-4" />Coupon Code</h2><div className="flex gap-2"><input value={couponCode} onChange={e => setCouponCode(e.target.value)} placeholder="Enter code (e.g. HERO20)" className="flex-1 px-4 py-2 rounded-lg bg-white/5 border border-white/10 text-sm focus:outline-none focus:border-[#f97316]" /><button onClick={applyCoupon} className="px-4 py-2 bg-white/5 border border-white/10 rounded-lg hover:bg-white/10 transition-colors text-sm">Apply</button></div>{couponApplied?.valid && <p className="text-green-400 text-sm mt-2 flex items-center gap-1"><Check className="w-3 h-3" />{couponApplied.message}</p>}</div>
          </div>
          <div className="glass-card p-6">
            <h2 className="font-semibold mb-4">Your Information</h2>
            <div className="space-y-3 mb-6">
              <input placeholder="Full Name *" value={form.name} onChange={e => setForm({...form, name: e.target.value})} className="w-full px-4 py-3 rounded-xl bg-white/5 border border-white/10 focus:outline-none focus:border-[#f97316]" required />
              <input type="email" placeholder="Email *" value={form.email} onChange={e => setForm({...form, email: e.target.value})} className="w-full px-4 py-3 rounded-xl bg-white/5 border border-white/10 focus:outline-none focus:border-[#f97316]" required />
              <input type="tel" placeholder="Phone (optional)" value={form.phone} onChange={e => setForm({...form, phone: e.target.value})} className="w-full px-4 py-3 rounded-xl bg-white/5 border border-white/10 focus:outline-none focus:border-[#f97316]" />
              <textarea placeholder="Notes (optional)" value={form.notes} onChange={e => setForm({...form, notes: e.target.value})} rows={3} className="w-full px-4 py-3 rounded-xl bg-white/5 border border-white/10 focus:outline-none focus:border-[#f97316] resize-none" />
            </div>
            <h2 className="font-semibold mb-4">Checkout Method</h2>
            <div className="grid grid-cols-2 gap-3 mb-6">
              <button onClick={() => setMethod("whatsapp")} className={`p-3 rounded-xl border text-center transition-all ${method === "whatsapp" ? "border-green-500 bg-green-500/10" : "border-white/10"}`}><MessageCircle className="w-6 h-6 mx-auto mb-1 text-green-400" /><span className="text-sm">WhatsApp</span></button>
              <button onClick={() => setMethod("telegram")} className={`p-3 rounded-xl border text-center transition-all ${method === "telegram" ? "border-blue-500 bg-blue-500/10" : "border-white/10"}`}><Send className="w-6 h-6 mx-auto mb-1 text-blue-400" /><span className="text-sm">Telegram</span></button>
            </div>
            <button onClick={handleCheckout} disabled={isProcessing} className="btn-primary w-full flex items-center justify-center gap-2 disabled:opacity-50">{isProcessing ? "Processing..." : `Complete Order via ${method === "whatsapp" ? "WhatsApp" : "Telegram"}`}</button>
          </div>
        </div>
      </div>
    </div>
  )
}