"use client";

import React, { useState, useEffect } from "react";
import { getPublicLoyaltyConfig, validatePointRedeem } from "@/actions/loyalty/loyalty.action";
import { LoyaltyConfigPublic } from "@/types/loyalty";
import { Sparkles, Loader2, X, Info } from "lucide-react";

interface PointRedeemSectionProps {
  customerId?: number;
  subtotal: number;
  orderTotal?: number;
  couponDiscount?: number;
  onApplyPoints: (points: number, discountAmount: number) => void;
  onRemovePoints: () => void;
  appliedPoints: number;
  appliedDiscount: number;
  availableBalance: number;
  totalBalance?: number;
}

export default function PointRedeemSection({
  customerId,
  subtotal,
  orderTotal,
  couponDiscount,
  onApplyPoints,
  onRemovePoints,
  appliedPoints,
  appliedDiscount,
  availableBalance,
  totalBalance,
}: PointRedeemSectionProps) {
  const [config, setConfig] = useState<LoyaltyConfigPublic | null>(null);
  const [loadingConfig, setLoadingConfig] = useState(true);
  const [pointsInput, setPointsInput] = useState<number | "">(appliedPoints || "");
  const [validating, setValidating] = useState(false);
  const [errorMsg, setErrorMsg] = useState<string | null>(null);
  const [warnings, setWarnings] = useState<string[]>([]);

  useEffect(() => {
    async function loadConfig() {
      const cfg = await getPublicLoyaltyConfig();
      setConfig(cfg);
      setLoadingConfig(false);
    }
    loadConfig();
  }, []);

  if (loadingConfig || !config || !config.is_enabled) {
    return null;
  }

  const effectiveBalance = availableBalance > 0 ? availableBalance : 0;
  const maxUsablePoints = Math.min(
    effectiveBalance > 0 ? effectiveBalance : config.max_redeem_points_per_order,
    config.max_redeem_points_per_order
  );

  const handleApply = async () => {
    setErrorMsg(null);
    setWarnings([]);

    const numPts = Number(pointsInput);
    if (!numPts || numPts < config.min_points_to_redeem) {
      setErrorMsg(
        `Minimum ${config.min_points_to_redeem} pts required to redeem. You entered ${pointsInput || 0} pts.`
      );
      return;
    }

    if (numPts > effectiveBalance) {
      setErrorMsg(
        `You only have ${effectiveBalance} pts available but entered ${numPts} pts.`
      );
      return;
    }

    setValidating(true);
    const res = await validatePointRedeem(customerId || 0, numPts, subtotal, orderTotal, couponDiscount);
    setValidating(false);

    if (res.valid) {
      const actualUsed = res.points_used || numPts;
      setPointsInput(actualUsed);
      onApplyPoints(actualUsed, res.discount_amount);
      if (res.warnings && res.warnings.length > 0) {
        setWarnings(res.warnings);
      }
    } else {
      setErrorMsg(res.message || "Invalid redemption attempt");
    }
  };

  const handleRemove = () => {
    setPointsInput("");
    setErrorMsg(null);
    setWarnings([]);
    onRemovePoints();
  };

  return (
    <div className="border-t border-slate-100 dark:border-zinc-800 pt-4 space-y-2">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-1.5 text-xs font-bold text-amber-600 dark:text-amber-400 uppercase tracking-wide">
          <Sparkles size={13} />
          <span>Loyalty Points</span>
        </div>
        <div className="flex items-center gap-2 text-xs font-bold">
          <span className="text-amber-600 dark:text-amber-400 font-black">
            ⭐ {availableBalance} pts Usable
          </span>
          {totalBalance !== undefined && totalBalance > availableBalance && (
            <span className="text-slate-400 dark:text-zinc-500 font-medium text-[10px]">
              (Total: ⭐ {totalBalance} pts)
            </span>
          )}
        </div>
      </div>

      {appliedPoints > 0 ? (
        <div className="space-y-1.5">
          <div className="flex items-center justify-between gap-2 px-3.5 py-2.5 bg-amber-50 dark:bg-amber-950/20 border border-amber-200 dark:border-amber-800/60 rounded-xl">
            <div className="flex items-center gap-2 min-w-0">
              <Sparkles size={13} className="text-amber-600 dark:text-amber-400 shrink-0" />
              <span className="text-[10px] font-black text-amber-700 dark:text-amber-400 uppercase tracking-wider">
                {appliedPoints} PTS REDEEMED
              </span>
              <span className="text-[10px] font-semibold text-amber-600 dark:text-amber-400">
                — saving ৳{appliedDiscount}
              </span>
            </div>
            <button
              type="button"
              onClick={handleRemove}
              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 points"
            >
              <X size={12} />
            </button>
          </div>

          {/* Warnings: explain why points/discount were capped */}
          {warnings.length > 0 && (
            <div className="space-y-1">
              {warnings.map((w, i) => (
                <div
                  key={i}
                  className="flex items-start gap-1.5 px-3 py-2 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-700/40 rounded-lg"
                >
                  <Info size={11} className="text-amber-500 shrink-0 mt-0.5" />
                  <p className="text-[10px] text-amber-700 dark:text-amber-400 leading-snug">{w}</p>
                </div>
              ))}
            </div>
          )}
        </div>
      ) : (
        <div className="space-y-1.5">
          {/* Hint row: min required & max allowed */}
          <div className="flex flex-col gap-1 text-[10px] text-slate-400 dark:text-zinc-500 px-0.5">
            <div className="flex items-center justify-between">
              <span>Min: <span className="font-bold text-slate-500 dark:text-zinc-400">{config.min_points_to_redeem} pts</span></span>
              <span>Max per order: <span className="font-bold text-slate-500 dark:text-zinc-400">{maxUsablePoints} pts</span></span>
            </div>
          </div>

          <div className="flex gap-2">
            <input
              type="number"
              placeholder={`Min ${config.min_points_to_redeem} pts`}
              min={1}
              max={maxUsablePoints}
              value={pointsInput || ""}
              onChange={(e) => {
                setErrorMsg(null);
                setWarnings([]);
                setPointsInput(Number(e.target.value));
              }}
              onKeyDown={(e) => {
                if (e.key === "-" || e.key === "e") e.preventDefault();
                if (e.key === "Enter") { e.preventDefault(); handleApply(); }
              }}
              onInput={(e) => {
                const el = e.currentTarget as HTMLInputElement;
                if (Number(el.value) < 0) el.value = "0";
              }}
              disabled={validating}
              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 placeholder:normal-case placeholder:font-normal placeholder:text-slate-400 disabled:opacity-50 transition-colors"
            />
            <button
              type="button"
              onClick={handleApply}
              disabled={validating || !pointsInput}
              className="px-5 h-10 bg-brand-accent hover:bg-brand-accent/90 text-white 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 cursor-pointer shadow-none"
            >
              {validating ? (
                <>
                  <Loader2 size={12} className="animate-spin" /> Redeem...
                </>
              ) : (
                "Redeem"
              )}
            </button>
          </div>

          {/* Error message below input */}
          {errorMsg && (
            <p className="text-[10px] text-red-500 dark:text-red-400 font-semibold flex items-start gap-1">
              <Info size={10} className="shrink-0 mt-0.5" />
              {errorMsg}
            </p>
          )}
        </div>
      )}
    </div>
  );
}