import { useState, useEffect } from "react";
import ArrowLeftB from "@/components/icons/ArrowLeftB";
import { Button, MenuItem, Select, FormControl, InputLabel } from "@mui/material";
import ButtonFixed from "./ButtonFixed";
import { request } from "@/services/response";

function Paying({ setStep, appointmentId }) {
  const [selectedBank, setSelectedBank] = useState("");
  const [loading, setLoading] = useState(false);
  const [timeLeft, setTimeLeft] = useState(600); // 10 minutes in seconds

  const banks = [
    { id: "mellat", title: "بانک ملت" },
    { id: "saman", title: "سامان کیش" }
  ];

  useEffect(() => {
    if (timeLeft === 0) return;

    const timer = setInterval(() => {
      setTimeLeft((prev) => prev - 1);
    }, 1000);

    return () => clearInterval(timer);
  }, [timeLeft]);

  const formatTime = (seconds) => {
    const minutes = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${minutes}:${secs.toString().padStart(2, '0')}`;
  };

  const handlePayment = async () => {
    if (!selectedBank) {
      alert("لطفا بانک خود را انتخاب کنید");
      return;
    }

    if (!appointmentId) {
      alert("شناسه نوبت یافت نشد");
      return;
    }

    setLoading(true);
    try {
      const paymentPayload = {
        payment_method: selectedBank,
        bundle: "appointment",
        entity_reference_id: appointmentId
      };

      const response = await request.postPayment(paymentPayload);

      // Redirect to payment gateway
      if (response?.uuid) {
        const paymentUrl = `${process.env.NEXT_PUBLIC_API_URL}/payment/${response.uuid}`;
        window.location.href = paymentUrl;
      } else {
        setStep((prev) => prev + 1);
      }
    } catch (error) {
      console.error("Payment error:", error);
      alert("خطا در پرداخت");
      setLoading(false);
    }
  };

  return (
    <div className="w-full lg:w-[59%]">
      <div
        className={`opacity-page bg-[#FFF] border border-solid border-[#EFEFEF] 
                rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]`}
      >
        <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
          اطلاعات پرداخت
        </p>

        <div className="mt-[12px] sm:mt-[18px] md:mt-[24px] lg:mt-[30px]">
          <div className="flex justify-between items-center mb-4">
            <p className="text-[#616161] text-[14px] md:text-[16px] font-medium">
              زمان باقیمانده:
            </p>
            <p className={`text-[14px] md:text-[16px] font-bold ${timeLeft < 60 ? 'text-red-500' : 'text-[#525252]'}`}>
              {formatTime(timeLeft)}
            </p>
          </div>

          <FormControl fullWidth className="!mb-4">
            <InputLabel id="bank-select-label">انتخاب بانک</InputLabel>
            <Select
              labelId="bank-select-label"
              value={selectedBank}
              label="انتخاب بانک"
              onChange={(e) => setSelectedBank(e.target.value)}
            >
              {banks.map((bank) => (
                <MenuItem key={bank.id} value={bank.id}>
                  {bank.title}
                </MenuItem>
              ))}
            </Select>
          </FormControl>

          {/* <div className="flex justify-between items-center">
            <p className="text-[#616161] text-[14px] md:text-[16px] font-medium">
              مبلغ پیش پرداخت (بیعانه) :
            </p>
            <p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
              10،000 تومان
            </p>
          </div> */}
        </div>

        <span className="bg-[#D7D7D7] hidden md:block h-px w-full mt-[32px] mb-[25px]"></span>

        <ButtonFixed>
          <div className="flex items-center justify-between gap-2">
            <p className="text-[#616161] md:text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
              مبلغ قابل پرداخت : 10،000 تومان
            </p>
            <Button
              className="!gap-[4px] !mr-auto !flex !px-[12px] !p-[7px] md:!py-[9px] !min-w-[157px]"
              onClick={handlePayment}
              variant="contained"
              disabled={loading || !selectedBank || timeLeft === 0}
            >
              <p className={`${loading && "opacity-0"} text-[#EFEFEF] text-[16px] font-medium`}>
                {timeLeft === 0 ? "زمان پرداخت تمام شد" : "پرداخت نهایی"}
              </p>
              {timeLeft > 0 && <ArrowLeftB />}
            </Button>
          </div>
        </ButtonFixed>
      </div>
    </div>
  );
}

export default Paying;