"use client";
import { useState, useEffect } from "react";
import axios from "axios";
import EnhancedTable from "@/components/Tables/EnhancedTable";
import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
import TableHeader from "@/components/Breadcrumbs/TableHeader";
import { Listable } from "@/types/form";

export default function User() {
  const modelName = "users";
  const token = localStorage.getItem("jobAdminJwtToken");
  const [listableElements, setListableElements] = useState<Listable[]>([]);

  // Fetch data from API
  const fetchData = async (page: number, pageSize: number) => {
    try {
      const response = await axios.get(
        `${process.env.NEXT_PUBLIC_API_BASE_URL}${modelName}?page=${page + 1}&limit=${pageSize}`,
        {
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`,
          },
        }
      );
      return { data: response.data.data, total: response.data.meta.total };
    } catch (error) {
      console.error("Error fetching data:", error);
      return { data: [], total: 0 };
    }
  };

  const deleteRow = async (id: string) => {
    try {
      const response = await axios.delete(
        `${process.env.NEXT_PUBLIC_API_BASE_URL}${modelName}/${id}`,
        {
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`,
          },
        }
      );
      return; // Return nothing or undefined since the function is supposed to return Promise<void>
    } catch (error) {
      console.error("Error Deleting data:", error);
      throw error; // Re-throw the error to handle it appropriately
    }
  };

  // Define additional actions data
  const additionalActions = [
    { name: "Action 1", url: `/actions/${modelName}/action1` },
    { name: "Action 2", url: `/actions/${modelName}/action2` },
    // Add more additional actions as needed
  ];

  const fetchListableElements = async () => {
    try {
      const metadata: any = localStorage.getItem("metaData");
      const dynamicFormElements = JSON.parse(metadata).modules;

      const modelData = dynamicFormElements[modelName];
      const listingData = modelData.listing;

      setListableElements(listingData);
    } catch (error) {
      console.error("Error fetching form elements:", error);
    }
  };

  useEffect(() => {
    fetchListableElements();
  }, [modelName]);

  return (
    <>
      <Breadcrumb pageName="Users" />
      <div className="flex flex-col gap-2">
        <TableHeader
          modelName={modelName}
          addNewRoute={process.cwd() + `actions/${modelName}/new`}
        />
        <EnhancedTable
          fetchData={fetchData}
          listable={listableElements}
          modelName={modelName}
          deleteRow={deleteRow}
          additionalOptions={additionalActions} // Pass additional actions data
        />
      </div>
    </>
  );
}