import React from "react";
import { useNavigate } from "react-router-dom";
import {
  useGetCouponsQuery,
  useToggleCouponStatusMutation,
} from "../../features/coupons/couponAPI";
import { formatDate } from "../../utils/formatDate";

/* ---------- Badges ---------- */

const StatusBadge = ({ isActive }) => (
  <span
    className={`w-[93px] h-[27px] flex items-center justify-center rounded text-xs font-bold
      ${
        isActive
          ? "bg-[#00B69B]/10 border border-[#00B69B] text-[#00B69B]"
          : "bg-[#EF3826]/10 border border-[#EF3826] text-[#EF3826]"
      }`}
  >
    {isActive ? "ACTIVE" : "INACTIVE"}
  </span>
);

const CouponTypeBadge = ({ type }) => (
  <span
    className={`w-[110px] h-[27px] flex items-center justify-center rounded text-xs font-bold
      ${
        type === "PERCENTAGE"
          ? "bg-[#6226EF]/10 border border-[#6226EF] text-[#6226EF]"
          : "bg-[#FFA756]/10 border border-[#FFA756] text-[#FFA756]"
      }`}
  >
    {type}
  </span>
);

/* ---------- Toggle Switch ---------- */

const ToggleSwitch = ({ checked, onChange, disabled }) => (
  <button
    disabled={disabled}
    onClick={onChange}
    className={`relative inline-flex h-6 w-11 items-center rounded-full transition
      ${checked ? "bg-green-500" : "bg-gray-300"}
      ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
  >
    <span
      className={`inline-block h-4 w-4 transform rounded-full bg-white transition
        ${checked ? "translate-x-6" : "translate-x-1"}`}
    />
  </button>
);

/* ---------- Main Component ---------- */

const CouponsList = () => {
  const navigate = useNavigate();

  const { data: list = [], isLoading, isError } = useGetCouponsQuery();
  const [toggleCouponStatus, { isLoading: toggling }] =
    useToggleCouponStatusMutation();

  if (isLoading) {
    return <div className="text-center py-10">Loading coupons...</div>;
  }

  if (isError) {
    return (
      <div className="text-center py-10 text-red-500">
        Failed to load coupons
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <h1 className="text-xl font-semibold text-gray-600">All Coupons</h1>
        <button
          onClick={() => navigate("/create")}
          className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium"
        >
          + Add Coupon
        </button>
      </div>

      {/* Table */}
      <div className="overflow-x-auto bg-white rounded-2xl shadow border">
        <table className="min-w-full text-sm">
          <thead className="bg-gray-50 uppercase text-xs font-medium">
            <tr>
              <th className="px-6 py-3">Code</th>
              <th className="px-6 py-3">Type</th>
              <th className="px-6 py-3">Value</th>
              <th className="px-6 py-3">Min Order</th>
              <th className="px-6 py-3">Usage</th>
              <th className="px-6 py-3">Valid Till</th>
              <th className="px-6 py-3">Status</th>
              <th className="px-6 py-3 text-center">Toggle</th>
              <th className="px-6 py-3 text-center">Actions</th>
            </tr>
          </thead>

          <tbody>
            {list.map((coupon) => (
              <tr key={coupon.id} className="border-t hover:bg-gray-50">
                <td className="px-6 py-3 font-medium">{coupon.code}</td>

                <td className="px-6 py-3">
                  <CouponTypeBadge type={coupon.type} />
                </td>

                <td className="px-6 py-3 font-semibold text-green-600">
                  {coupon.type === "PERCENTAGE"
                    ? `${coupon.value}%`
                    : `₹${coupon.value}`}
                </td>

                <td className="px-6 py-3">₹{coupon.minOrderAmount}</td>

                <td className="px-6 py-3">
                  {coupon.usedCount}/{coupon.maxUses}
                </td>

                <td className="px-6 py-3">{formatDate(coupon.validUntil)}</td>

                <td className="px-6 py-3">
                  <StatusBadge isActive={coupon.isActive} />
                </td>

                {/* ✅ TOGGLE */}
                <td className="px-6 py-3 text-center">
                  <ToggleSwitch
                    checked={coupon.isActive}
                    disabled={toggling}
                    onChange={() => toggleCouponStatus(coupon.id)}
                  />
                </td>
                <td className="px-6 py-3 text-right">
                  <button
                    onClick={() => navigate(`/coupons/${coupon.id}`)}
                    className="text-blue-600 hover:underline"
                  >
                    View
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default CouponsList;
