/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import React, { useMemo } from "react";
import { useSiteConfig } from "@/context/SiteConfigContext";
import { Calendar, Sparkles } from "lucide-react";

interface PaymentMethodSelectorProps {
  paymentMethod: string;
  setPaymentMethod: (val: string) => void;
  isEmi: boolean;
  setIsEmi: (val: boolean) => void;
  emiTenure?: number;
  setEmiTenure?: (val: number) => void;
  emiDownPayment?: number;
  setEmiDownPayment?: (val: number) => void;
  totalAmount?: number;
  allEmiEligible?: boolean;
  ineligibleNames?: string[];
}

export default function PaymentMethodSelector({
  paymentMethod,
  setPaymentMethod,
  isEmi,
  setIsEmi,
  emiTenure = 3,
  setEmiTenure,
  emiDownPayment = 0,
  setEmiDownPayment,
  totalAmount = 0,
  allEmiEligible = true,
  ineligibleNames = [],
}: PaymentMethodSelectorProps) {
  const config = useSiteConfig();
  const isEmiEnabled = config.emi_enabled !== "false" && config.emi_enabled !== "0";
  const defaultInterestRate = Math.max(0, parseFloat(config.emi_interest_rate || "0") || 0);
  const minAmount = Math.max(0, parseFloat(config.emi_min_amount || "0") || 0);

  const tenureRates = useMemo<Record<number, number>>(() => {
    if (!config.emi_tenure_rates) return {};
    try {
      const parsed = typeof config.emi_tenure_rates === "string" ? JSON.parse(config.emi_tenure_rates) : config.emi_tenure_rates;
      if (Array.isArray(parsed)) {
        const map: Record<number, number> = {};
        parsed.forEach((it: any) => {
          const m = Number(it.months || it.tenure);
          const r = Number(it.rate ?? it.interest_rate);
          if (m > 0 && !isNaN(r)) map[m] = r;
        });
        return map;
      } else if (typeof parsed === "object" && parsed !== null) {
        const map: Record<number, number> = {};
        Object.entries(parsed).forEach(([k, v]) => {
          const m = Number(k);
          const r = Number(v);
          if (m > 0 && !isNaN(r)) map[m] = r;
        });
        return map;
      }
    } catch (e) { }
    return {};
  }, [config.emi_tenure_rates]);

  const availableTenures = useMemo(() => {
    const fromRates = Object.keys(tenureRates).map(Number).filter((n) => n > 0).sort((a, b) => a - b);
    if (fromRates.length > 0) return fromRates;
    return (config.emi_tenures || "3,6,12")
      .split(",")
      .map((s) => parseInt(s.trim(), 10))
      .filter((n) => !isNaN(n) && n > 0);
  }, [config.emi_tenures, tenureRates]);

  const currentInterestRate = (emiTenure && tenureRates[emiTenure] !== undefined)
    ? tenureRates[emiTenure]
    : defaultInterestRate;

  const methods = [
    { id: "cod", label: "Cash on Delivery", desc: "Pay on arrival" },
    { id: "sslcommerz", label: "Pay Online (SSLCommerz)", desc: "Pay with Mobile Wallets / Cards" },
  ];

  const emiCalculation = useMemo(() => {
    if (!isEmi) return null;
    const base = Number(totalAmount || 0);
    const extraCharge = Math.round(((base * currentInterestRate) / 100) * 100) / 100;
    const totalWithInterest = Math.round((base + extraCharge) * 100) / 100;
    const dp = Math.min(Math.max(0, Number(emiDownPayment || 0)), totalWithInterest);
    const financed = Math.max(0, totalWithInterest - dp);
    const installmentCount = emiTenure;
    const monthly = installmentCount > 0 ? Math.round((financed / installmentCount) * 100) / 100 : 0;

    return {
      base,
      extraCharge,
      totalWithInterest,
      downPayment: dp,
      financed,
      monthly,
      installmentCount,
      isBelowMin: base < minAmount,
    };
  }, [isEmi, totalAmount, currentInterestRate, emiDownPayment, emiTenure, minAmount]);

  const emiBlocked = isEmiEnabled && !allEmiEligible && ineligibleNames.length > 0;

  return (
    <div className="bg-white dark:bg-zinc-900 border border-slate-100 dark:border-zinc-800/80 rounded-2xl p-5 shadow-xs space-y-4">
      <h2 className="text-sm font-extrabold text-slate-900 dark:text-zinc-100 uppercase tracking-wide border-b border-slate-100 dark:border-zinc-800 pb-2">
        3. Payment Method
      </h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2.5">
        {methods.map((pm) => {
          const isSelected = paymentMethod === pm.id;
          return (
            <button
              key={pm.id}
              type="button"
              onClick={() => setPaymentMethod(pm.id)}
              className={`flex flex-col items-start gap-1 p-3.5 rounded-xl border text-left transition-all duration-300 ${isSelected
                ? "border-brand-accent bg-brand-accent/5 ring-1 ring-brand-accent"
                : "border-slate-100 dark:border-zinc-800/80 hover:border-slate-200 hover:bg-slate-50 dark:hover:bg-zinc-900 bg-white dark:bg-zinc-950"
                }`}
            >
              <span className="text-xs font-black text-slate-800 dark:text-zinc-200 flex items-center gap-1.5">
                {pm.label}
              </span>
              <span className="text-[9px] text-slate-400 font-medium">{pm.desc}</span>
            </button>
          );
        })}
      </div>

      {isEmiEnabled && (
        <div className="space-y-3">
          <label
            className={`flex items-center gap-3 rounded-xl border px-4 py-3 transition-colors ${isEmi
              ? "border-indigo-400 bg-indigo-50/60 dark:bg-indigo-950/30"
              : emiBlocked
                ? "border-gray-200 bg-gray-50 dark:bg-zinc-900 opacity-50 cursor-not-allowed"
                : "border-slate-100 dark:border-zinc-800/80 hover:border-indigo-200 hover:bg-indigo-50/20 cursor-pointer"
              }`}
          >
            <input
              type="checkbox"
              checked={isEmi}
              disabled={emiBlocked}
              onChange={(e) => {
                if (e.target.checked) {
                  setIsEmi(true);
                } else {
                  setIsEmi(false);
                  setEmiDownPayment?.(0);
                }
              }}
              className="w-4 h-4 accent-indigo-600 rounded"
            />
            <div className="flex flex-col">
              <span className="text-xs font-black text-slate-800 dark:text-zinc-200 flex items-center gap-1.5">
                <Calendar className="w-3.5 h-3.5 text-indigo-600" />
                Pay via EMI (Installments)
              </span>
              <span className="text-[10px] text-slate-400 font-medium">
                {emiBlocked
                  ? "Not available — no items in your cart support EMI"
                  : isEmi
                    ? "EMI financing active — configure tenure below"
                    : "Finance EMI-eligible items; others paid directly"}
              </span>
            </div>
            {isEmi && (
              <span className="ml-auto text-[10px] font-bold uppercase tracking-wider text-indigo-600 bg-indigo-100 dark:bg-indigo-900/60 px-2 py-0.5 rounded-full">
                Active
              </span>
            )}
          </label>

          {isEmi && emiCalculation && (
            <div className="p-4 rounded-xl border border-indigo-100 dark:border-indigo-900/40 bg-indigo-50/30 dark:bg-indigo-950/20 space-y-3.5 animate-in fade-in-50">
              <div className="flex items-center justify-between">
                <span className="text-xs font-black text-indigo-900 dark:text-indigo-200 uppercase tracking-wider flex items-center gap-1.5">
                  <Sparkles className="w-3.5 h-3.5 text-indigo-600" />
                  Configure EMI Installment Plan
                </span>
                {currentInterestRate > 0 && (
                  <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-indigo-100 dark:bg-indigo-900/60 text-indigo-700 dark:text-indigo-300">
                    {currentInterestRate}% Interest Fee
                  </span>
                )}
              </div>

              {emiCalculation.isBelowMin && (
                <div className="p-2.5 rounded-lg bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 text-[11px] text-amber-800 dark:text-amber-300 font-medium">
                  Minimum order amount for EMI is ৳{minAmount.toLocaleString()}.
                </div>
              )}

              <div className="space-y-1.5">
                <label className="text-[10px] font-extrabold uppercase text-slate-500 tracking-wider flex items-center gap-1">
                  <Calendar className="w-3 h-3 text-slate-400" /> Select Duration <span className="text-red-500">*</span>
                </label>
                <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
                  {availableTenures.map((t) => {
                    const isTenureSelected = emiTenure === t;
                    const rateForT = tenureRates[t] !== undefined ? tenureRates[t] : defaultInterestRate;
                    return (
                      <button
                        key={t}
                        type="button"
                        onClick={() => setEmiTenure?.(t)}
                        className={`py-2 px-3 rounded-lg text-xs font-black border text-center transition-all cursor-pointer flex flex-col items-center justify-center gap-0.5 ${isTenureSelected
                          ? "border-indigo-600 bg-indigo-600 text-white shadow-xs"
                          : "border-slate-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 text-slate-700 dark:text-zinc-300 hover:border-indigo-300"
                          }`}
                      >
                        <span>{t} Months</span>
                        <span className={`text-[10px] font-semibold ${isTenureSelected ? "text-indigo-100" : "text-amber-600 dark:text-amber-400"}`}>
                          {rateForT}% fee
                        </span>
                      </button>
                    );
                  })}
                </div>
                {(!emiTenure || emiTenure <= 0) && (
                  <p className="text-[10px] font-bold text-amber-600 dark:text-amber-400 mt-1">
                    ⚠️ Please select a duration to enable order confirmation
                  </p>
                )}
              </div>

              <div className="space-y-1.5">
                <label className="text-[10px] font-extrabold uppercase text-slate-500 tracking-wider">
                  Down Payment (Optional ৳)
                </label>
                <input
                  type="number"
                  min={0}
                  placeholder="0"
                  value={emiDownPayment || ""}
                  onChange={(e) => setEmiDownPayment?.(Math.max(0, Number(e.target.value) || 0))}
                  onKeyDown={(e) => {
                    if (e.key === "-" || e.key === "e") e.preventDefault();
                  }}
                  className="w-full h-9 px-3 text-xs font-bold rounded-lg border border-slate-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 text-slate-900 dark:text-zinc-100 focus:outline-none focus:ring-1 focus:ring-indigo-500"
                />
              </div>

              <div className="p-3 rounded-lg bg-white dark:bg-zinc-900 border border-slate-100 dark:border-zinc-800 space-y-1.5 text-xs">
                <div className="flex justify-between text-slate-500 dark:text-zinc-400 font-medium text-[11px]">
                  <span>Order Amount:</span>
                  <span>৳{emiCalculation.base.toLocaleString()}</span>
                </div>
                {emiCalculation.extraCharge > 0 && (
                  <div className="flex justify-between text-indigo-600 dark:text-indigo-400 font-medium text-[11px]">
                    <span>EMI Fee ({currentInterestRate}%):</span>
                    <span>+ ৳{emiCalculation.extraCharge.toLocaleString()}</span>
                  </div>
                )}
                {emiCalculation.downPayment > 0 && (
                  <div className="flex justify-between text-emerald-600 dark:text-emerald-400 font-medium text-[11px]">
                    <span>Down Payment Paid Now:</span>
                    <span>- ৳{emiCalculation.downPayment.toLocaleString()}</span>
                  </div>
                )}
                <div className="pt-2 border-t border-slate-100 dark:border-zinc-800 flex justify-between items-center">
                  <span className="font-extrabold text-slate-800 dark:text-zinc-200">
                    Monthly Installment ({emiCalculation.installmentCount}x):
                  </span>
                  <span className="text-sm font-black text-indigo-600 dark:text-indigo-400">
                    ~ ৳{emiCalculation.monthly.toLocaleString()} / mo
                  </span>
                </div>
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}