"use client";
import { BaseModal } from "@/components/modal";
import DynamicButton from "@/components/button";
import { getMinIncrement, getQuickDeltas } from "@/lib/auction/biddingRules";
import { useMemo } from "react";
import Money from "@/components/ui/Money";
import { useTranslations } from "next-intl";

export default function Modals({
  confirmBidOpen,
  setConfirmBidOpen,
  successOpen,
  setSuccessOpen,
  onConfirmBid,
  onSuccessClose,
  bidDelta,
  setBidDelta,
  currentPrice,
  auctionStatus,
  isClosed,
  marketEntryPrice,
}: any) {
  const t = useTranslations("SINGLE_AUCTION.BID_MODALS");

  const minIncrement = useMemo(
    () => getMinIncrement(currentPrice || 0, marketEntryPrice),
    [currentPrice, marketEntryPrice],
  );
  const quickDeltas = useMemo(
    () => getQuickDeltas(currentPrice || 0, marketEntryPrice),
    [currentPrice, marketEntryPrice],
  );

  const finalBid = (currentPrice || 0) + (bidDelta || 0);
  const isDisabled = isClosed || auctionStatus !== "active";

  return (
    <>
      <BaseModal
        isOpen={confirmBidOpen}
        onOpenChange={setConfirmBidOpen}
        title={t("confirm_title")}
        contentClassName="w-[min(92vw,480px)]"
        footer={
          <DynamicButton
            onClick={() => {
              onConfirmBid?.();
            }}
            className="w-full px-4 py-2 rounded-lg bg-[#0F5132] text-white hover:bg-[#0F5132]/90"
          >
            {t("confirm_button")}
          </DynamicButton>
        }
      >
        <div className="space-y-3">
          <p className="text-slate-700 text-sm leading-7">
            {t.rich("confirm_text", {
              b: (chunks) => <b>{chunks}</b>,
            })}
          </p>

          <div>
            <label className="block text-sm text-slate-600 mb-1">
              {t("bid_delta_label")}
            </label>
            <input
              type="number"
              min={minIncrement}
              step={minIncrement}
              value={bidDelta || ""}
              onChange={(e) => setBidDelta?.(Number(e.target.value || 0))}
              placeholder={t("bid_delta_placeholder", {
                value: minIncrement.toLocaleString("en-EN"),
              })}
              className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#0F5132]"
            />
            <div className="text-xs text-slate-600 mt-1">
              {t("min_increment_label")} <Money value={minIncrement} />
            </div>
          </div>

          <div className="p-3 bg-slate-50 rounded-lg space-y-2">
            <div className="flex justify-between items-center">
              <div className="text-sm text-slate-600">{t("current_price")}</div>
              <div className="font-bold">
                <Money value={currentPrice || 0} />
              </div>
            </div>

            <div className="flex justify-between items-center">
              <div className="text-sm text-slate-600">{t("your_increase")}</div>
              <div className="font-bold text-[#0F5132]">
                <span className="inline-flex items-center gap-1">
                  <span>+</span>
                  <Money value={bidDelta || 0} />
                </span>
              </div>
            </div>

            <div className="border-t pt-2 flex justify-between items-center">
              <div className="text-sm text-slate-600">{t("final_price")}</div>
              <div className="text-lg font-extrabold text-[#0F5132]">
                <Money value={finalBid} />
              </div>
            </div>
          </div>

          <div className="flex flex-wrap gap-2">
            {quickDeltas.map((delta: number) => (
              <button
                key={delta}
                type="button"
                onClick={() => setBidDelta?.(delta)}
                disabled={isDisabled}
                className="px-3 py-2 rounded-lg bg-slate-100 hover:bg-slate-200 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
              >
                <span className="inline-flex items-center gap-1">
                  <span>+</span>
                  <Money value={delta} />
                </span>
              </button>
            ))}
          </div>
        </div>
      </BaseModal>

      <BaseModal
        isOpen={successOpen}
        onOpenChange={setSuccessOpen}
        title={t("success_title")}
        contentClassName="w-[min(92vw,420px)] text-center"
        footer={
          <DynamicButton
            onClick={() => {
              setSuccessOpen(false);
              onSuccessClose?.();
            }}
            className="px-4 py-2 rounded-lg bg-[#0F5132] text-white hover:bg-[#0F5132]/90"
          >
            {t("success_button")}
          </DynamicButton>
        }
      >
        <p className="text-slate-700 text-sm">{t("success_text")}</p>
      </BaseModal>
    </>
  );
}