"use client";

import Container from "@/components/elements/Container";
import RoundedButton from "@/components/elements/RoundedButton";
import RoundedInput from "@/components/elements/RoundedInput";
import PageTitle from "@/components/settings/PageTitle";
import UserDetails from "@/components/settings/UserDetails";
import useInfiniteScroll from "@/hooks/useInfiniteScroll";
import { ITicket } from "@/types/types";
import Image from "next/image";
import Link from "next/link";
import React, { useState } from "react";

function Tickets() {
  const [searchText, setSearchText] = useState("");
  const [search, setSearch] = useState("");
  const { data, isFetchingNextPage } = useInfiniteScroll({
    endpoint: "/tickets",
    queryKey: ["tickets", search],
    params: { search: search },
  });


  return (
    <Container>
      <PageTitle>تیکت پشتیبانی</PageTitle>
      <div className="px-4 text-xs md:text-sm">
        <UserDetails />
        <div className="w-full relative mt-5">
          <RoundedInput
            value={searchText}
            onChange={(e) => setSearchText(e.target.value)}
            placeholder="جستجو"
            className="w-full"
          />
          <Image
            width={25}
            height={25}
            alt="filter icon"
            src="/images/icons/search-normal.svg"
            className=" min-w-[25px] absolute left-3 top-[7px]"
            onClick={() => setSearch(searchText)}
          />
        </div>
        <div className="w-full mt-5">
          {data?.pages.length === 0 ||
          (data?.pages[0]?.tickets?.length === 0 && !isFetchingNextPage) ? (
            <p className="text-center text-gray-500">تیکتی ثبت نشده است.</p>
          ) : (
            data?.pages?.map((page, pageIndex) => (
              <React.Fragment key={pageIndex}>
                {page?.tickets?.map((item: ITicket) => (
                  <Link
                    href={`/settings/tickets/${item?.title}/${item?._id}`}
                    key={item?._id}
                    className="mb-4 p-4 border-b border-border-primary-light w-full block"
                  >
                    <div className="flex w-full items-center justify-between">
                      <div className="flex items-center gap-2">
                        {item?.new_message ? (
                          <div className="bg-[#05FF00] rounded-full w-4 h-4"></div>
                        ) : (
                          ""
                        )}
                        <p>{item?.title}</p>
                      </div>
                      <span>{item?.createdAt}</span>
                    </div>
                    <div className="flex justify-end">
                      <span
                        className={`${
                          item?.status == "Pending"
                            ? "text-[#FDA700]"
                            : item?.status === "Answered"
                            ? "text-[#03AE00]"
                            : item?.status === "Customer Response"
                            ? "text-[#2196EB]"
                            : "text-[#676767]"
                        } mt-2`}
                      >
                        {item?.status === "Pending"
                          ? "در حال بررسی"
                          : item?.status === "Answered"
                          ? "پاسخ داده شده"
                          : item?.status === "Customer Response"
                          ? "پاسخ مشتری"
                          : "بسته شده"}
                      </span>
                    </div>
                  </Link>
                ))}
              </React.Fragment>
            ))
          )}
        </div>
        <Link href={"/settings/tickets/new"} className="block fixed bottom-28 left-1/2">
          <RoundedButton className="w-40 h-9 -translate-x-1/2 bg-th bg-secondary-light dark:bg-secondary-dark">
            ثبت تیکت
          </RoundedButton>
        </Link>
      </div>
    </Container>
  );
}

export default Tickets;
