import React from "react";
import {
  LuHardDrive,
  LuClock,
  LuShare2,
  LuHeadphones,
  LuCheck,
  LuSparkles,
  LuBadgeCheck,
} from "react-icons/lu";
import {
  TbFolderShare,
  TbBrowserPlus,
} from "react-icons/tb";
import { formatBytes, formatPrice } from "../../utils/billing";

export default function PlanCard({
  plan,
  isBest = false,
  isCurrentPlan = false,
  disabled = false,
  isPaying = false,
  onSelect,
  onDisabledClick,
}) {
  return (
    <div
      className={`relative p-5 rounded-xl shadow border overflow-hidden dark:bg-[#16325b] bg-white
        ${plan?.is_active ? "border-[#43BEFF]/40" : "border-[#43BEFF]/30 opacity-70"}
        ${isBest ? "ring-1 ring-[#43BEFF]/40" : ""}
        ${isCurrentPlan ? "border-[#43BEFF] ring-1 ring-[#43BEFF]/50" : ""}
      `}
    >
      {/* badges */}
      <div className="absolute top-3 left-3 flex gap-2 flex-wrap">
        {plan?.is_active ? (
          <span className="text-xs px-3 py-1 rounded-full bg-green-500/10 text-green-700 dark:text-green-300">
            فعال
          </span>
        ) : (
          <span className="text-xs px-3 py-1 rounded-full bg-red-500/10 text-red-600 dark:text-red-300">
            غیرفعال
          </span>
        )}

        {isBest && !isCurrentPlan ? (
          <span className="text-xs px-3 py-1 rounded-full bg-yellow-500/10 text-yellow-700 dark:text-yellow-300 flex items-center gap-1">
            <LuSparkles className="w-3.5 h-3.5" />
            پیشنهادی
          </span>
        ) : null}

        {isCurrentPlan ? (
          <span className="text-xs px-3 py-1 rounded-full bg-[#43BEFF]/15 text-[#0b6ea3] dark:text-[#aee7ff] border border-[#43BEFF]/30 flex items-center gap-1">
            <LuBadgeCheck className="w-3.5 h-3.5" />
            پلن فعلی شما
          </span>
        ) : null}
      </div>

      <div className="pt-12 text-center">
        <h2 className="text-lg font-bold mb-1 text-black dark:text-white">{plan?.name}</h2>
        <p className="text-xs opacity-70 mb-4 text-black/60 dark:text-white/70">
          مدت: {plan?.duration_days} روز
        </p>

        <div className="mb-5">
          <span className="text-2xl font-extrabold text-black dark:text-white">{formatPrice(plan?.price)}</span>
          <span className="text-sm opacity-70 text-black/60 dark:text-white/70"> ریال</span>
        </div>

        <ul className="space-y-3 text-sm text-right">
          <li className="flex items-center gap-2">
            <LuHardDrive className="w-4 h-4 text-[#43BEFF]" />
            فضای ذخیره‌سازی:{" "}
            <b className="text-black dark:text-white">{formatBytes(plan?.storage_limit_bytes)}</b>
          </li>

          <li className="flex items-center gap-2">
            <TbFolderShare className="w-4 h-4 text-[#43BEFF]" />
            اکانت اف تی پی : دارد
          </li>

          <li className="flex items-center gap-2">
            <LuShare2 className={`w-4 h-4 ${plan?.can_share_public ? "text-[#43BEFF]" : "text-black/30 dark:text-white/40"}`} />
            اشتراک‌گذاری عمومی: {plan?.can_share_public ? "دارد" : "ندارد"}
          </li>

          <li className="flex items-center gap-2">
            <TbBrowserPlus className={`w-4 h-4 text-[#43BEFF]`} />
             امکان اتصال دامنه شخصی : دارد
          </li>

          <li className="flex items-center gap-2">
            <LuClock className="w-4 h-4 text-[#43BEFF]" />
            دوره: {plan?.duration_days} روز
          </li>
        </ul>

        <button
          type="button"
          disabled={disabled}
          onClick={onSelect}
          className={`
            mt-6 w-full px-4 py-2 rounded-xl shadow text-sm transition
            ${
              isCurrentPlan
                ? "bg-[#43BEFF]/15 text-[#0b6ea3] dark:text-[#aee7ff] cursor-not-allowed"
                : plan?.is_active
                ? "dark:bg-[#A1E3F919] bg-[#A1E3F980] hover:bg-[#43BEFF]/30"
                : "bg-black/5 dark:bg-white/10"
            }
            disabled:opacity-70 disabled:cursor-not-allowed
          `}
        >
          {isCurrentPlan
            ? "پلن فعلی شما"
            : isPaying
            ? "درحال صدور فاکتور..."
            : plan?.is_active
            ? "انتخاب پلن"
            : "قابل خرید نیست"}
        </button>

        {disabled ? (
          <button
            type="button"
            className="mt-2 w-full text-xs opacity-70 hover:opacity-100 transition"
            onClick={onDisabledClick}
          >
            چرا غیر فعال است؟
          </button>
        ) : null}
      </div>
    </div>
  );
}
