import React from "react";
import { Tag, X, Loader2 } from "lucide-react";
import { useCart } from "@/context/CartContext";

interface CouponSectionProps {
  couponCode: string;
  setCouponCode: (val: string) => void;
  isValidatingCoupon: boolean;
  setIsValidatingCoupon: (val: boolean) => void;
}

export default function CouponSection({
  couponCode,
  setCouponCode,
  isValidatingCoupon,
  setIsValidatingCoupon,
}: CouponSectionProps) {
  const { coupon, applyCoupon, removeCoupon, calculations } = useCart();

  const handleApplyCoupon = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!couponCode.trim()) return;
    setIsValidatingCoupon(true);
    const ok = await applyCoupon(couponCode.trim().toUpperCase());
    if (!ok) setCouponCode(""); // clear bad code
    setIsValidatingCoupon(false);
  };

  return (
    <div className="border-t border-slate-100 dark:border-zinc-800 pt-4 space-y-2">
      <div className="flex items-center gap-1.5 text-xs font-bold text-slate-700 dark:text-zinc-300 uppercase tracking-wide">
        <Tag size={13} className="text-emerald-600 dark:text-emerald-400" />
        <span>Discount Coupon</span>
      </div>
      {coupon ? (
        /* Applied state — single badge, no duplicate Remove button */
        <div
          className="flex items-center justify-between gap-2 px-3.5 py-2.5
            bg-emerald-50 dark:bg-emerald-950/20
            border border-emerald-200 dark:border-emerald-800/60
            rounded-xl"
        >
          <div className="flex items-center gap-2 min-w-0">
            <Tag size={13} className="text-emerald-600 dark:text-emerald-400 shrink-0" />
            <span className="text-[10px] font-black text-emerald-700 dark:text-emerald-400 uppercase tracking-wider">
              {coupon.code}
            </span>
            {coupon.discount_type === "free_delivery" ? (
              <span className="text-[10px] font-semibold text-emerald-600 dark:text-emerald-400">
                — Free Delivery
              </span>
            ) : calculations.couponDiscount > 0 ? (
              <span className="text-[10px] font-semibold text-emerald-600 dark:text-emerald-400">
                — saving ৳{calculations.couponDiscount.toFixed(0)}
              </span>
            ) : null}
          </div>
          <button
            type="button"
            onClick={() => {
              removeCoupon();
              setCouponCode("");
            }}
            className="shrink-0 p-1 rounded-lg hover:bg-red-100 dark:hover:bg-red-950/30 text-slate-400 hover:text-red-500 transition-colors"
            title="Remove coupon"
          >
            <X size={12} />
          </button>
        </div>
      ) : (
        /* Input state — enter & apply */
        <div className="flex gap-2">
          <input
            type="text"
            placeholder="Enter coupon code"
            value={couponCode}
            onChange={(e) => setCouponCode(e.target.value.toUpperCase())}
            disabled={isValidatingCoupon}
            className="flex-1 h-10 px-3.5 rounded-xl border border-slate-200 dark:border-zinc-800
              bg-white dark:bg-zinc-950 text-xs font-bold
              focus:border-brand-accent focus:outline-none
              uppercase placeholder:normal-case placeholder:font-normal placeholder:text-slate-400
              disabled:opacity-50 transition-colors"
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                e.preventDefault();
                handleApplyCoupon(e);
              }
            }}
          />
          <button
            type="button"
            onClick={(e) => {
              e.preventDefault();
              handleApplyCoupon(e);
            }}
            disabled={isValidatingCoupon || !couponCode.trim()}
            className="px-5 h-10 bg-slate-900 dark:bg-zinc-100 hover:bg-slate-700 dark:hover:bg-white
              text-white dark:text-zinc-900
              disabled:bg-slate-200 dark:disabled:bg-zinc-800 disabled:text-slate-400
              rounded-xl text-xs font-black uppercase tracking-wider
              transition-colors shrink-0 flex items-center justify-center gap-1.5"
          >
            {isValidatingCoupon ? (
              <>
                <Loader2 size={12} className="animate-spin" /> Checking...
              </>
            ) : (
              "Apply"
            )}
          </button>
        </div>
      )}
    </div>
  );
}