"use client";

import { BaseModal } from "@/components/modal";
import DynamicButton from "@/components/button";
import { UserPaddle } from "@/lib/clientQueries";
import { useTranslations } from "next-intl";

interface SelectPaddleModalProps {
  open: boolean;
  onClose: () => void;
  paddles: UserPaddle[];
  onSelectPaddle: (paddleId: string) => void;
  onBuyNew: () => void;
}

export default function SelectPaddleModal({
  open,
  onClose,
  paddles,
  onSelectPaddle,
  onBuyNew,
}: SelectPaddleModalProps) {
  const t = useTranslations("AUCTION");

  const formatDate = (dateString: string | null | undefined): string => {
    if (!dateString) return "";
    try {
      const date = new Date(dateString);
      return new Intl.DateTimeFormat("en-EN", {
        year: "numeric",
        month: "long",
        day: "numeric",
      }).format(date);
    } catch {
      return dateString;
    }
  };

  const getTypeBadge = (type?: string) => {
    switch (type) {
      case "vip":
        return (
          <span className="px-2 py-1 text-xs font-bold rounded-full bg-purple-100 text-purple-700">
            VIP
          </span>
        );
      case "premium":
        return (
          <span className="px-2 py-1 text-xs font-bold rounded-full bg-blue-100 text-blue-700">
            Premium
          </span>
        );
      case "normal":
      default:
        return (
          <span className="px-2 py-1 text-xs font-bold rounded-full bg-gray-100 text-gray-700">
            عادي
          </span>
        );
    }
  };

  const isPaddleDisabled = (paddle: UserPaddle): boolean => {
    return (
      paddle.can_use_for_auction === false || paddle.is_available === false
    );
  };

  return (
    <BaseModal
      isOpen={open}
      onOpenChange={onClose}
      title="اختر مضرب للمزاد"
      contentClassName="w-[min(92vw,600px)]"
      footer={
        <div className="flex gap-3 justify-end w-full">
          <DynamicButton
            onClick={onClose}
            variant="bordered"
            className="px-4 py-2 rounded-lg border-slate-300 text-slate-700"
          >
            إلغاء
          </DynamicButton>
          <DynamicButton
            onClick={onBuyNew}
            className="px-4 py-2 rounded-lg bg-[#0F5132] text-white hover:bg-[#0F5132]/90"
          >
            شراء مضرب جديد
          </DynamicButton>
        </div>
      }
    >
      <div className="space-y-4">
        {paddles.length === 0 ? (
          <div className="text-center py-8 text-slate-600">
            <p>لا توجد مضارب متاحة للاستخدام</p>
          </div>
        ) : (
          <>
            <p className="text-sm text-slate-600 mb-4">
              يمكنك استخدام أحد المضارب المتاحة أدناه أو شراء مضرب جديد
            </p>
            <div className="space-y-3 max-h-[400px] overflow-y-auto">
              {paddles.map((paddle) => {
                const disabled = isPaddleDisabled(paddle);
                return (
                  <div
                    key={paddle.id}
                    className={`p-4 rounded-xl border-2 transition-all ${
                      disabled
                        ? "bg-slate-50 border-slate-200 opacity-60"
                        : "bg-white border-slate-200 hover:border-[#0F5132] hover:shadow-md"
                    }`}
                  >
                    <div className="flex items-start justify-between gap-4">
                      <div className="flex-1 space-y-2">
                        <div className="flex items-center gap-3">
                          <div className="font-bold text-lg text-slate-800">
                            #{paddle.unique_id}
                          </div>
                          {getTypeBadge(paddle.type)}
                          {disabled && (
                            <span className="px-2 py-1 text-xs font-medium rounded-full bg-red-100 text-red-700">
                              غير متاح
                            </span>
                          )}
                        </div>

                        <div className="space-y-1 text-sm text-slate-600">
                          {(paddle.type === "premium" ||
                            paddle.type === "vip") &&
                            paddle.remaining_uses != null && (
                              <div className="flex items-center gap-2">
                                <span className="font-medium">
                                  الاستخدامات المتبقية:
                                </span>
                                <span className="font-bold text-[#0F5132]">
                                  {paddle.remaining_uses}
                                </span>
                              </div>
                            )}

                          {paddle.expires_at && (
                            <div className="flex items-center gap-2">
                              <span className="font-medium">ينتهي في:</span>
                              <span>{formatDate(paddle.expires_at)}</span>
                            </div>
                          )}

                          {paddle.type === "vip" &&
                            paddle.allowed_auction_type && (
                              <div className="flex items-center gap-2">
                                <span className="font-medium">
                                  نوع المزاد المسموح:
                                </span>
                                <span>
                                  {paddle.allowed_auction_type === "horse"
                                    ? "خيول"
                                    : paddle.allowed_auction_type === "camel"
                                      ? "إبل"
                                      : paddle.allowed_auction_type}
                                </span>
                              </div>
                            )}
                        </div>
                      </div>

                      <DynamicButton
                        onClick={() => onSelectPaddle(paddle.id)}
                        isDisabled={disabled}
                        className="px-4 py-2 rounded-lg bg-[#0F5132] text-white hover:bg-[#0F5132]/90 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
                      >
                        استخدام هذا المضرب
                      </DynamicButton>
                    </div>
                  </div>
                );
              })}
            </div>
          </>
        )}
      </div>
    </BaseModal>
  );
}