import { X, Trash2, MessageCircle, Send, ShoppingCart } from "lucide-react";
import { useCart } from "@/context/CartContext";
import { useState } from "react";
import { trpc } from "@/providers/trpc";
import { toast } from "sonner";

export function CartDrawer() {
  const { items, isOpen, setIsOpen, removeItem, clearCart } = useCart();
  const [step, setStep] = useState<"cart" | "checkout">("cart");
  const [form, setForm] = useState({ name: "", email: "", phone: "", notes: "" });
  const [method, setMethod] = useState<"whatsapp" | "telegram">("whatsapp");

  const createOrder = trpc.order.create.useMutation({
    onSuccess: (data) => {
      clearCart();
      setIsOpen(false);
      setStep("cart");
      toast.success("Order placed! Redirecting...");
      setTimeout(() => {
        window.open(data.redirectUrl, "_blank");
      }, 1000);
    },
    onError: (err) => toast.error(err.message),
  });

  const total = items.reduce(
    (sum, item) => sum + Number(item.priceAtAdd ?? 0) * (item.quantity ?? 1),
    0
  );

  const handleCheckout = () => {
    if (!form.name || !form.email || !form.phone) {
      toast.error("Please fill all required fields");
      return;
    }
    createOrder.mutate({
      customerName: form.name,
      customerEmail: form.email,
      customerPhone: form.phone,
      checkoutMethod: method,
      checkoutNotes: form.notes || undefined,
    });
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-[60] animate-fade-in">
      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setIsOpen(false)} />
      <div className="absolute right-0 top-0 bottom-0 w-full max-w-md glass-card border-r-0 rounded-r-none overflow-y-auto">
        <div className="p-6">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-xl font-bold flex items-center gap-2">
              <ShoppingCart className="w-5 h-5 text-[#f97316]" />
              {step === "cart" ? "Your Cart" : "Checkout"}
            </h2>
            <button
              onClick={() => { setIsOpen(false); setStep("cart"); }}
              className="p-2 hover:bg-white/10 rounded-full transition-colors"
            >
              <X className="w-5 h-5" />
            </button>
          </div>

          {items.length === 0 ? (
            <div className="text-center py-12">
              <ShoppingCart className="w-16 h-16 mx-auto mb-4 text-slate-600" />
              <p className="text-slate-400">Your cart is empty</p>
              <button
                onClick={() => setIsOpen(false)}
                className="btn-primary mt-4 text-sm"
              >
                Continue Shopping
              </button>
            </div>
          ) : step === "cart" ? (
            <>
              <div className="space-y-4 mb-6">
                {items.map((item) => (
                  <div
                    key={item.cartId}
                    className="flex items-center gap-4 p-3 rounded-xl bg-white/5 border border-white/5"
                  >
                    <div className="w-12 h-12 rounded-lg bg-gradient-to-br from-[#f97316]/20 to-[#22c55e]/20 flex items-center justify-center text-lg flex-shrink-0">
                      🎁
                    </div>
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-medium truncate">{item.name}</p>
                      <p className="text-xs text-slate-400">
                        {item.plan} × {item.quantity}
                      </p>
                    </div>
                    <div className="text-right flex-shrink-0">
                      <p className="text-sm font-bold text-[#f97316]">
                        ${(Number(item.priceAtAdd ?? 0) * (item.quantity ?? 1)).toFixed(2)}
                      </p>
                      <button
                        onClick={() => removeItem(item.cartId)}
                        className="text-xs text-red-400 hover:text-red-300 flex items-center gap-1 mt-1"
                      >
                        <Trash2 className="w-3 h-3" /> Remove
                      </button>
                    </div>
                  </div>
                ))}
              </div>

              <div className="border-t border-white/10 pt-4 mb-6">
                <div className="flex justify-between text-lg font-bold mb-4">
                  <span>Total</span>
                  <span className="text-[#f97316]">${total.toFixed(2)}</span>
                </div>
                <button
                  onClick={() => setStep("checkout")}
                  className="btn-primary w-full"
                >
                  Proceed to Checkout
                </button>
                <button
                  onClick={clearCart}
                  className="w-full mt-2 text-sm text-red-400 hover:text-red-300 py-2"
                >
                  Clear Cart
                </button>
              </div>
            </>
          ) : (
            <div className="space-y-4">
              <div className="bg-white/5 rounded-xl p-4 border border-white/5">
                <p className="text-sm font-medium mb-3">Choose checkout method:</p>
                <div className="grid grid-cols-2 gap-3">
                  <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 hover:border-white/20"
                    }`}
                  >
                    <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 hover:border-white/20"
                    }`}
                  >
                    <Send className="w-6 h-6 mx-auto mb-1 text-blue-400" />
                    <span className="text-sm">Telegram</span>
                  </button>
                </div>
              </div>

              <div className="space-y-3">
                <input
                  type="text"
                  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 text-white placeholder:text-slate-500 focus:outline-none focus:border-[#f97316] transition-colors"
                />
                <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 text-white placeholder:text-slate-500 focus:outline-none focus:border-[#f97316] transition-colors"
                />
                <input
                  type="tel"
                  placeholder="Phone Number *"
                  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 text-white placeholder:text-slate-500 focus:outline-none focus:border-[#f97316] transition-colors"
                />
                <textarea
                  placeholder="Additional 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 text-white placeholder:text-slate-500 focus:outline-none focus:border-[#f97316] transition-colors resize-none"
                />
              </div>

              <div className="border-t border-white/10 pt-4">
                <div className="flex justify-between text-lg font-bold mb-4">
                  <span>Total</span>
                  <span className="text-[#f97316]">${total.toFixed(2)}</span>
                </div>
                <button
                  onClick={handleCheckout}
                  disabled={createOrder.isPending}
                  className="btn-primary w-full flex items-center justify-center gap-2 disabled:opacity-50"
                >
                  {createOrder.isPending ? (
                    <span className="animate-spin">⏳</span>
                  ) : method === "whatsapp" ? (
                    <MessageCircle className="w-4 h-4" />
                  ) : (
                    <Send className="w-4 h-4" />
                  )}
                  {createOrder.isPending ? "Processing..." : `Checkout via ${method === "whatsapp" ? "WhatsApp" : "Telegram"}`}
                </button>
                <button
                  onClick={() => setStep("cart")}
                  className="w-full mt-2 text-sm text-slate-400 hover:text-white py-2"
                >
                  ← Back to Cart
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}