"use client";

import Modal from "@/components/elements/Modal";
import RoundedButton from "@/components/elements/RoundedButton";
import RoundedDiv from "@/components/elements/RoundedDiv";
import UserInfo from "@/components/main/UserInfo";
import useAxios from "@/hooks/useAxios";
import { IProjectRequest } from "@/types/types";
import Image from "next/image";
import { useRouter } from "next/navigation";
import React, { useState } from "react";

function ProjectRequestsAction({
  projectRequests,
  projectId,
  status,
}: {
  projectRequests: IProjectRequest[];
  projectId: string;
  status: string;
}) {
  const { request } = useAxios();
  const router = useRouter();
  const [showConfirmModal, setShowConfirmModal] = useState<boolean>(false);
  const [itemToAccept, setItemToAccept] = useState<IProjectRequest>();
  const acceptHandler = async () => {
    try {
      await request<{ type?: string }>(
        "POST",
        "/projects/payment-request-step-one/web",
        {
          requestId: itemToAccept?._id, // Pass advertisingId to initiate payment
          projectId,
        }
      );
      router.refresh();
    } catch (error: unknown) {
      console.log(error);
    }
  };
  return (
    <>
      {projectRequests
        ? projectRequests.map((item: IProjectRequest) => {
            return (
              <div
                key={item?._id}
                className={`flex p-2 rounded-3xl my-4 justify-between items-center w-full  max-w-sm mx-auto md:max-w-md ${
                  item?.status === "accepted" ? "border border-[#0C8002]" : ""
                }`}
                onClick={() => {
                  if (status == "accepted") {
                    setItemToAccept(item);
                    setShowConfirmModal(true);
                  }
                }}
              >
                <UserInfo
                  first_name={item?.user?.first_name}
                  is_verified={item?.user?.is_verified}
                  profile_image={item?.user?.profile_image}
                  user_level={item?.user?.user_level}
                  last_name={item?.user?.last_name}
                  user_name={item?.user?.user_name}
                />

                <div className="flex flex-col sm:text-xs text-[10px] gap-1.5 items-start">
                  <span>
                    مبلغ پیشنهادی: {Number(item?.price).toLocaleString()} تومان
                  </span>
                  <span>زمان پیشنهادی: {item?.time} روز</span>
                  <div className="flex gap-3">
                    <div className="flex items-center justify-center gap-0.5">
                      <>
                        <span>
                          {item?.user?.user_score
                            ? item?.user?.user_score
                            : "0"}
                        </span>
                        <Image
                          width={21}
                          height={21}
                          alt={"verify icon"}
                          src={`/images/icons/medal-star.svg`}
                          className="pb-1"
                        />
                      </>
                    </div>
                    <div className="flex items-center gap-0.5">
                      <>
                        <span>{item?.user?.rate ? item?.user?.rate : "0"}</span>
                        <Image
                          width={21}
                          height={21}
                          alt={"verify icon"}
                          src={`/images/icons/star1.svg`}
                          className="pb-1"
                        />
                      </>
                    </div>
                  </div>
                </div>
              </div>
            );
          })
        : ""}
      {showConfirmModal && (
        <Modal
          isOpen={showConfirmModal}
          onClose={() => setShowConfirmModal(false)}
          height="430px"
        >
          {itemToAccept && (
            <div className="flex flex-col items-center max-w-sm pt-6 mx-auto gap-4">
              <UserInfo
                first_name={itemToAccept?.user?.first_name}
                is_verified={itemToAccept?.user?.is_verified}
                profile_image={itemToAccept?.user?.profile_image}
                user_level={itemToAccept?.user?.user_level}
                last_name={itemToAccept?.user?.last_name}
                user_name={itemToAccept?.user?.user_name}
              />
              <RoundedDiv className="w-full mt-5 p-2 text-xs">
                مبلغ پیشنهادی: {Number(itemToAccept?.price).toLocaleString()}{" "}
                تومان
              </RoundedDiv>
              <RoundedDiv className="w-full p-2 text-xs">
                زمان پیشنهادی: {itemToAccept?.time} روز
              </RoundedDiv>
              <RoundedButton
                onClick={() => {
                  acceptHandler();
                  setShowConfirmModal(false);
                }}
                className="w-full p-2 mt-5 text-sm text-[#0C8002] !border-[#0C8002]"
              >
                می پذیرم
              </RoundedButton>
            </div>
          )}
        </Modal>
      )}
    </>
  );
}

export default ProjectRequestsAction;
