"use client";

import { BaseModal } from "@/components/modal";
import DynamicButton from "@/components/button";
import { usePurchasePremiumPaddle } from "@/lib/clientQueries";
import { useAppToast } from "@/app/[lang]/providers";
import { useTranslations } from "next-intl";

interface PurchasePremiumPaddleModalProps {
  open: boolean;
  onClose: () => void;
}

export default function PurchasePremiumPaddleModal({
  open,
  onClose,
}: PurchasePremiumPaddleModalProps) {
  const t = useTranslations("DASHBOARD.PARTICIPATED_AUCTIONS");
  const toast = useAppToast();
  const purchasePremiumPaddle = usePurchasePremiumPaddle();

  const handlePurchase = async () => {
    try {
      const res = await purchasePremiumPaddle.mutateAsync();
      toast.success(t("premium_toast_success"));
      onClose();
    } catch (error: any) {
      const errorMessage =
        error?.response?.data?.message ||
        error?.message ||
        t("premium_toast_error_generic");
      toast.error(errorMessage);
    }
  };

  return (
    <BaseModal
      isOpen={open}
      onOpenChange={onClose}
      title={t("premium_modal_title")}
      contentClassName="w-[min(92vw,500px)]"
      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"
            isDisabled={purchasePremiumPaddle.isPending}
          >
            {t("premium_modal_cancel")}
          </DynamicButton>
          <DynamicButton
            onClick={handlePurchase}
            isLoading={purchasePremiumPaddle.isPending}
            className="px-4 py-2 rounded-lg bg-[#0F5132] text-white hover:bg-[#0F5132]/90"
          >
            {t("premium_modal_confirm")}
          </DynamicButton>
        </div>
      }
    >
      <div className="space-y-4 text-slate-700">
        <div className="space-y-2">
          <p className="text-base leading-7">
            {t("premium_modal_description")}
          </p>
          <ul className="list-disc list-inside space-y-1 text-sm text-slate-600 mr-4">
            <li>{t("premium_modal_bullet1")}</li>
            <li>{t("premium_modal_bullet2")}</li>
            <li>{t("premium_modal_bullet3")}</li>
          </ul>
        </div>

        <div className="p-4 rounded-xl bg-blue-50 border border-blue-200">
          <div className="font-semibold text-blue-900 mb-1">
            {t("premium_modal_note_title")}
          </div>
          <div className="text-sm text-blue-800">
            {t("premium_modal_note_body")}
          </div>
        </div>
      </div>
    </BaseModal>
  );
}