"use client";

import AppButton from "@/components/ui/button";
import AppDropdown from "@/components/ui/dropdown";
import AppInput from "@/components/ui/input";
import AppTable, { ColumnsType } from "@/components/ui/table";
import AppTag from "@/components/ui/tag";
import useFetchSubscriptionPlan from "@/hooks/useFetchSubscription";
import {
  ResponseStatus,
  SortDirection,
  SortField,
  Status,
} from "@/types/common";
import {
  SubscriptionPlan,
  SubscriptionPlanQueryParams,
} from "@/types/subscriptionsPlan";
import { EditOutlined, SearchOutlined } from "@ant-design/icons";
import { Ellipsis, Trash } from "lucide-react";
import { useEffect, useState } from "react";
import { debounce } from "lodash";
import CreateSubscription from "@/components/manage-subscription-plan/create-subscription";
import UpdateSubscription from "@/components/manage-subscription-plan/update-subscription";
import { useAppDispatch, useAppSelector } from "@/lib/redux/hooks";
import {
  doDeleteSubscription,
  setSubscriptionDetail,
} from "@/lib/redux/features/subscriptionsPlan";
import { useTranslations } from "use-intl";
import showConfirmModal from "@/components/ui/confirm-modal";
import AppPrivateMode from "@/components/private-mode";
import { getAuthInfo } from "@/lib/redux/features/auth";
import { UserType } from "@/types/user";
import { getAppDetail } from "@/lib/redux/features/app";

type ManageSubscriptionPlanTableProps = {
  appId: string;
};

const ManageSubscriptionPlanTable = ({
  appId,
}: ManageSubscriptionPlanTableProps) => {
  const dispatch = useAppDispatch();
  const t = useTranslations("AppPage.subscription");
  const defaultQueryParams: SubscriptionPlanQueryParams = {
    pageNumber: 1,
    pageSize: 10,
    sortField: SortField.createdTime,
    sortDirection: SortDirection.DESC,
  };

  const authInfo = useAppSelector(getAuthInfo);
  const appDetails = useAppSelector(getAppDetail);

  const {
    subscriptions,
    subscriptionPaging,
    isFetchingSubscription,
    fetchSubscriptionPaging,
    subscriptionQuery,
    setSubscriptionQuery,
  } = useFetchSubscriptionPlan(defaultQueryParams);

  const [isOpenUpdateSubModal, setIsOpenUpdateSubModal] = useState(false);

  useEffect(() => {
    (async () => {
      if (!appId) return;
      await fetchSubscriptionPaging({ ...subscriptionQuery, appsId: appId });
    })();
  }, [appId, subscriptionQuery]);

  const handleConfirmDeleteSubscription = (
    subscription: SubscriptionPlan | undefined,
  ) => {
    showConfirmModal({
      title: t("delete_subscription"),
      content: t("delete_subscription_msg", {
        subscriptionName: subscription?.name,
      }),
      okText: t("delete"),
      cancelText: t("cancel"),
      onOk: async () => {
        await handleDeleteSubscriptionPlan(subscription?.id);
      },
    });
  };

  const handleDeleteSubscriptionPlan = async (
    subscriptionId: string | undefined,
  ) => {
    try {
      if (!subscriptionId) {
        console.error("Subscription ID not found!");
        return;
      }
      const { payload } = await dispatch(doDeleteSubscription(subscriptionId));
      if (payload && payload.status === ResponseStatus.SUCCESS) {
        setSubscriptionQuery((prevState) => ({
          ...prevState,
          pageNumber: 1,
        }));
      }
    } catch (error: any) {
      console.error("Failed delete app!", error?.message);
    }
  };

  const handleOpenUpdateSubModal = (record: any) => {
    dispatch(setSubscriptionDetail(record));
    setIsOpenUpdateSubModal(true);
  };
  const handleCloseUpdateSubModal = () => {
    setIsOpenUpdateSubModal(false);
  };

  const handleSearch = debounce(
    async (e: React.ChangeEvent<HTMLInputElement>) => {
      const value = e.target.value.trim();
      setSubscriptionQuery((prevState) => ({
        ...prevState,
        searchKeyName: value,
        pageNumber: 1,
      }));
    },
    500,
  );

  const handleTableChange = async (
    pagination: any,
    filters: any,
    sorter: any,
  ) => {
    let queryParams = { ...subscriptionQuery };

    if (filters?.statuses?.length > 0) {
      queryParams = {
        ...queryParams,
        statuses: filters.statuses,
      };
    } else {
      queryParams = {
        ...queryParams,
        statuses: [Status.ACTIVE, Status.INACTIVE],
      };
    }

    if (sorter && sorter.columnKey && sorter.order) {
      queryParams = {
        ...queryParams,
        sortField: sorter.columnKey,
        sortDirection:
          sorter.order === "ascend" ? SortDirection.ASC : SortDirection.DESC,
      };
    }

    queryParams = {
      ...queryParams,
      pageNumber: pagination.current,
      pageSize: pagination.pageSize,
    };

    setSubscriptionQuery(queryParams);
  };

  const handleActions = (record: any) => {
    return [
      {
        key: "edit-subscription",
        label: t("edit"),
        icon: <EditOutlined style={{ fontSize: 20 }} />,
        onClick: () => handleOpenUpdateSubModal(record),
        disabled:
          authInfo?.userType !== UserType.ADMIN ||
          record.status === Status.INACTIVE ||
          appDetails?.status === Status.INACTIVE,
      },
      {
        key: "delete-subscription",
        danger: true,
        label: t("delete"),
        icon: <Trash size={18} />,
        onClick: () => handleConfirmDeleteSubscription(record),
        disabled:
          record.status === Status.INACTIVE ||
          authInfo?.userType !== UserType.ADMIN ||
          appDetails?.status === Status.INACTIVE,
      },
    ];
  };

  const columns: ColumnsType<SubscriptionPlan> = [
    {
      title: t("id"),
      dataIndex: "id",
      key: "id",
      width: "20%",
      render: (_, { id }) => {
        return (
          <div>
            <AppPrivateMode data={id} isShowCopyButton={true} />
          </div>
        );
      },
    },
    {
      title: t("name"),
      dataIndex: "name",
      key: "name",
      sorter: true,
      width: "30%",
      render: (_, { name }) => {
        return `${name}`;
      },
    },
    {
      title: t("type"),
      dataIndex: "subscriptionType",
      key: "subscriptionType",
      render: (_, { subscriptionType }) => {
        return `${subscriptionType}`;
      },
    },
    {
      title: t("status"),
      dataIndex: "status",
      key: "statuses",
      filters: [
        {
          text: "ACTIVE",
          value: Status.ACTIVE,
        },
        {
          text: "INACTIVE",
          value: Status.INACTIVE,
        },
      ],
      render: (_, { status }) => {
        return (
          <AppTag
            color={status === Status.ACTIVE ? "#0E9154" : "orange-inverse"}
            bordered={false}
          >
            {status}
          </AppTag>
        );
      },
    },
    {
      title: t("created_time"),
      dataIndex: "createdTime",
      key: "createdTime",
      sorter: true,
      render: (time: number) => {
        return new Date(time).toLocaleString();
      },
    },
    {
      title: t("actions"),
      dataIndex: "actions",
      key: "actions",
      render: (_, record) => {
        return (
          <AppDropdown
            menu={{
              items: handleActions(record),
            }}
            trigger={["click"]}
          >
            <AppButton type="text" shape="circle">
              <Ellipsis size={18} />
            </AppButton>
          </AppDropdown>
        );
      },
    },
  ];

  return (
    <>
      <div className="mb-4">
        {authInfo && (
          <CreateSubscription
            appId={appId}
            authInfo={authInfo}
            setSubscriptionQuery={setSubscriptionQuery}
            appDetails={appDetails}
          />
        )}
      </div>
      <div className="max-w-[300px] mb-4">
        <AppInput
          placeholder={t("subscription_name_placeholder")}
          prefix={<SearchOutlined />}
          onChange={handleSearch}
          allowClear
        />
      </div>
      <AppTable<SubscriptionPlan>
        columns={columns}
        dataSource={subscriptions}
        loading={isFetchingSubscription}
        pagination={{
          current: subscriptionPaging.pageNumber,
          pageSize: subscriptionPaging.pageSize,
          total: subscriptionPaging.totalElements,
        }}
        rowKey="id"
        scroll={{ x: 1000 }}
        onChange={handleTableChange}
      />
      <UpdateSubscription
        isOpenUpdateSubModal={isOpenUpdateSubModal}
        handleCloseUpdateSubModal={handleCloseUpdateSubModal}
        setSubscriptionQuery={setSubscriptionQuery}
      />
    </>
  );
};

export default ManageSubscriptionPlanTable;