import { NavLink, useNavigate } from "react-router-dom";
import { CirclePlus } from "lucide-react";
import { VisionColumnDefn } from "./VisionColumn";
import { useTranslation } from "react-i18next";
import { AdvancedTable } from "@/shared/common/ui/table/AdvancedTable";
import { useMemo, useState } from "react";
import Loader from "@/record-management/components/Loader/loader";
import { Button } from "@/shared/common/ui/button";
import { useVision } from "../hooks/useVision";
export const Vision = () => {
  const [pageIndex, setPageIndex] = useState(0);
  const navigate = useNavigate();
  const pageSize = 10;
  const { t } = useTranslation();
  const baseParams = useMemo(() => {
    const params: Record<string, any> = {
      skip: pageIndex * pageSize,
      take: pageSize,
      orderBy: "createdAt:DESC",
    };

    return params;
  }, [pageIndex]);

  const { items, refetch, deleteItem, error, isLoading, count } =
    useVision(baseParams);
  const handlePageChange = (newPage: number) => {
    setPageIndex(newPage);
  };
  
  return (
    <div className="flex flex-col h-full w-full p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700">
      {/* Header Section */}
      <div className="flex items-center justify-between mb-4 border-b pb-3 border-gray-200 dark:border-gray-700">
        <h1 className="text-xl font-semibold text-gray-800 dark:text-gray-200">{t("Vision")}</h1>
        {
          <NavLink to="/user-management/web-Management/Vision/AddVision">
            <Button
              variant="addRecordBtn"
              className="flex items-center gap-1 bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition-all">
              <CirclePlus className="w-4 h-4" />
              <span>{t("addVision")}</span>
            </Button>
          </NavLink>
        }
      </div>

      {/* Content Section */}
      <div className="flex-1 overflow-auto">
        {isLoading && (
          <div className="flex justify-center items-center h-48">
            <Loader />
          </div>
        )}

        {error && (
          <p className="text-center text-red-500 text-sm mt-4">
            {t("userRecord.Error loading records.")}
          </p>
        )}

        {!isLoading && !error && (
          <div className="mt-2">
            <AdvancedTable
              columns={VisionColumnDefn({
                navigate,
                onDelete: deleteItem,
              })}
              data={items || []}
              tableName="Visions"
              toolBarPosition="right"
              extraToolbar={<div className="flex gap-2"></div>}
              itemCount={count || 2}
              pageIndex={pageIndex}
              onPageChange={handlePageChange}
              nextFunction={() => handlePageChange(pageIndex + 1)}
              prevFunction={() => handlePageChange(Math.max(pageIndex - 1, 0))}
              refresh={refetch}
            />
          </div>
        )}
      </div>
    </div>
  );
};
