"use client";

import { useEffect, useState } from "react";
import { Box, Button, Modal } from "@mui/material";
import { styleDefault } from "@/mui";
import CloseModalD from "@/components/icons/CloseModalD";
import { request } from "@/services/response";
import { numberToArStyle } from "@/helper";

/**
 * لغو نوبت با نمایش پیامد مالی **پیش از** تأیید.
 *
 * پیش‌نمایش از همان محاسبه‌ای می‌آید که خودِ لغو انجام می‌دهد، پس عددی که بیمار می‌بیند
 * همان است که کسر می‌شود. تا پیش از این، این مودال هیچ درخواستی نمی‌فرستاد و دکمهٔ
 * «لغو نوبت» فقط پنجره را می‌بست — یعنی متن تبلیغاتی سایت وعده‌ای می‌داد که UI نداشت.
 */
function ModalDeleteComment({ loading, appointment, onDone }) {
  const [open, setOpen] = useState(false);
  const [preview, setPreview] = useState(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState(null);

  const handleOpen = () => setOpen(true);
  const handleClose = () => {
    setOpen(false);
    setPreview(null);
    setError(null);
  };

  useEffect(() => {
    if (!open || !appointment?.uuid) return;

    let cancelled = false;

    request
      .getCancellationPreview(appointment.uuid)
      .then((res) => {
        if (!cancelled) setPreview(res?.data ?? res ?? null);
      })
      // نبودِ پیش‌نمایش نباید لغو را قفل کند؛ فقط باید صریح گفته شود.
      .catch(() => {
        if (!cancelled) setPreview(null);
      });

    return () => {
      cancelled = true;
    };
  }, [open, appointment?.uuid]);

  const submit = async () => {
    setBusy(true);
    setError(null);

    try {
      await request.cancelAppointment(appointment.uuid, { by: "user" });
      handleClose();
      onDone?.();
    } catch (e) {
      setError(e?.message || "لغو نوبت ناموفق بود");
    } finally {
      setBusy(false);
    }
  };

  return (
    <div>
      {/* Button Modal */}
      <Button
        className={` ${!loading && "!border-[#828DE0]"} !rounded-[4px] !py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px] `}
        disabled={loading}
        onClick={handleOpen}
        variant="outlined"
      >
        لغو کردن نوبت
      </Button>
      {/* Content Modal */}
      <Modal open={open} onClose={handleClose}>
        <Box
          sx={styleDefault}
          className="!w-fit !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
        >
          <div className="flex items-center justify-between w-full">
            <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
              لغو نوبت
            </p>
            <Button onClick={handleClose} className="!p-1" variant="text">
              <CloseModalD />
            </Button>
          </div>
          <span className="block h-px w-full bg-[#EFEFEF] my-[12px] md:my-[14px] lg:my-[16px]"></span>
          <p className="text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-normal">
            آیا از لغو کردن نوبت مطمئن هستید؟
          </p>

          <div className="mt-[12px] rounded-[6px] bg-[#F7F7F7] p-[12px] text-[12px] md:text-[13px] leading-[2]">
            {preview === null ? (
              <span className="text-[#7E7E7E]">
                پیامد مالی لغو در دسترس نیست؛ لغو انجام می‌شود ولی مبلغ را از پشتیبانی
                بپرسید.
              </span>
            ) : (
              <>
                <div className="flex items-center justify-between">
                  <span className="text-[#7E7E7E]">جریمهٔ لغو</span>
                  <strong className={preview.penalty_rials > 0 ? "text-[#D64545]" : "text-[#2E9E63]"}>
                    {preview.penalty_rials > 0
                      ? `${numberToArStyle(Math.round(preview.penalty_rials / 10))} تومان`
                      : "بدون جریمه"}
                  </strong>
                </div>

                {preview.within_free_window && (
                  <div className="text-[#2E9E63]">این لغو در بازهٔ رایگان است.</div>
                )}

                {(preview.notes ?? []).map((note, i) => (
                  <div key={i} className="text-[#9A9A9A]">
                    {note}
                  </div>
                ))}
              </>
            )}
          </div>

          {error && <p className="mt-[10px] text-[12px] text-[#D64545]">{error}</p>}
          <div className="flex items-center justify-end gap-[16px] mt-[12px]">
            <Button
              variant="outlined"
              onClick={handleClose}
              className="!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[16px] !font-medium"
            >
              انصراف
            </Button>
            <Button
              variant="contained"
              disabled={busy}
              onClick={submit}
              className="!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !text-[#EFEFEF] !text-[16px] !font-medium"
            >
              لغو نوبت
            </Button>
          </div>
        </Box>
      </Modal>
    </div>
  );
}

export default ModalDeleteComment;