import Button from "@/components/Button";
import Table from "@/components/Table";
import type { ColumnType } from "@/components/types/TableTypes";
import { Paths } from "@/config/Paths";
import { formatDateShort, formatPrice } from "@/helpers/func";
import { usePageTitle } from "@/hooks/usePageTitle";
import { getTotalPrice } from "@/pages/designer/designerRequestForm";
import { useGetDesignRequests } from "@/pages/designer/hooks/useDesignerData";
import type { RequestDesignItemType } from "@/pages/designer/types/Types";
import { type FC, useMemo } from "react";
import { Link } from "react-router-dom";

const getInvoiceUrl = (invoiceId: string) => `${import.meta.env.VITE_INVOICE_URL}${invoiceId}`;

const RequestDesignList: FC = () => {
  usePageTitle("لیست درخواست‌های طراحی");
  const { data, isPending } = useGetDesignRequests();
  const requests = data?.data ?? [];

  const columns = useMemo<ColumnType<RequestDesignItemType>[]>(
    () => [
      { title: "عنوان", key: "title", className: "font-medium text-black" },
      { title: "تاریخ ثبت", key: "createdAt", render: (item) => formatDateShort(item.createdAt) },
      { title: "زمان تحویل", key: "expectedDate", render: (item) => formatDateShort(item.expectedDate) },
      { title: "تعداد صفحات", key: "count", render: (item) => item.count.toLocaleString("fa-IR") },
      {
        title: "مبلغ",
        key: "totalPrice",
        render: (item) => `${formatPrice(getTotalPrice(item.count))} تومان`,
      },
      {
        title: "وضعیت",
        key: "paidAt",
        render: (item) => {
          const isPaid = Boolean(item.paidAt);
          return (
            <span className={`inline-flex rounded-full px-3 py-1 text-xs ${isPaid ? "bg-[#E8F5E9] text-[#2E7D32]" : "bg-[#FFF3E0] text-[#E65100]"}`}>{isPaid ? "پرداخت شده" : "در انتظار پرداخت"}</span>
          );
        },
      },
      {
        title: "عملیات",
        key: "actions",
        render: (item) => {
          if (item.paidAt) {
            return <span className="text-[#999999]">—</span>;
          }

          return (
            <Button
              type="button"
              className="w-fit px-4 py-1.5 text-xs"
              onClick={(event) => {
                event.stopPropagation();
                window.open(getInvoiceUrl(item.invoiceId), "_blank");
              }}
            >
              پرداخت
            </Button>
          );
        },
      },
    ],
    [],
  );

  return (
    <div className="mt-4 w-full">
      <div className="flex flex-wrap items-center justify-between gap-4">
        <h1> درخواست‌های طراحی</h1>
        <Link to={Paths.designer.request}>
          <Button className="w-fit px-6">درخواست جدید</Button>
        </Link>
      </div>

      <Table
        columns={columns}
        data={requests}
        isLoading={isPending}
        className="mt-6"
        noDataMessage={
          <div className="flex flex-col items-center gap-5 py-2">
            <span>هنوز درخواست طراحی ثبت نشده است.</span>
            <Link to={Paths.designer.request}>
              <Button className="w-fit px-6">ثبت درخواست طراحی</Button>
            </Link>
          </div>
        }
      />
    </div>
  );
};

export default RequestDesignList;