import { type FC, useEffect, useState } from "react";
import DefaulModal from "@/components/DefaulModal";
import Input from "@/components/Input";
import Textarea from "@/components/Textarea";
import Button from "@/components/Button";
import { useTranslation } from "react-i18next";
import { toast } from "react-toastify";
import { extractErrorMessage } from "@/config/func";
import { useUpdateCashShift } from "../hooks/useCashShiftData";
import type { CashShift } from "../types/Types";

type Props = {
  open: boolean;
  onClose: () => void;
  shift: CashShift | null;
};

const EditCashShiftModal: FC<Props> = ({ open, onClose, shift }) => {
  const { t } = useTranslation("global");
  const [openingAmount, setOpeningAmount] = useState("");
  const [notes, setNotes] = useState("");
  const [error, setError] = useState("");
  const updateShift = useUpdateCashShift();

  useEffect(() => {
    if (open && shift) {
      setOpeningAmount(String(shift.openingAmount));
      setNotes(shift.notes ?? "");
      setError("");
    }
  }, [open, shift]);

  const handleClose = () => {
    setOpeningAmount("");
    setNotes("");
    setError("");
    onClose();
  };

  const handleSubmit = () => {
    if (!shift) return;

    const numericAmount = Number(openingAmount);

    if (Number.isNaN(numericAmount) || numericAmount < 0) {
      setError(t("cash_shift.opening_amount_required"));
      return;
    }

    updateShift.mutate(
      {
        shiftId: shift.id,
        payload: {
          openingAmount: numericAmount,
          notes: notes.trim() || undefined,
        },
      },
      {
        onSuccess: () => {
          toast.success(t("cash_shift.updated_success"));
          handleClose();
        },
        onError: (err) => {
          toast.error(extractErrorMessage(err));
        },
      }
    );
  };

  if (!shift) return null;

  return (
    <DefaulModal
      open={open}
      close={handleClose}
      isHeader
      title_header={t("cash_shift.edit_title")}
      width={480}
    >
      <div className="mt-6">
        <Input
          name="openingAmount"
          label={t("cash_shift.opening_amount")}
          placeholder={t("cash_shift.opening_amount_placeholder")}
          type="number"
          seprator
          value={openingAmount}
          onChange={(e) => {
            setOpeningAmount(e.target.value);
            setError("");
          }}
          error_text={error}
        />

        <div className="mt-4">
          <Textarea
            name="notes"
            label={t("cash_shift.notes")}
            placeholder={t("cash_shift.notes_placeholder")}
            value={notes}
            onChange={(e) => setNotes(e.target.value)}
            isNotRequired
          />
        </div>

        <div className="flex gap-3 mt-6">
          <Button
            label={t("cash_shift.cancel")}
            type="button"
            onClick={handleClose}
            className="bg-gray-100 text-gray-700"
          />
          <Button
            label={t("cash_shift.save_changes")}
            type="button"
            onClick={handleSubmit}
            isloading={updateShift.isPending}
          />
        </div>
      </div>
    </DefaulModal>
  );
};

export default EditCashShiftModal;