"use client";

import { useState } from "react";
import { FiPlus } from "react-icons/fi";

import { DataTable } from "../../../components/table/DataTable";
import { HeadingToolbar } from "../../../components/table/toolbars/HeadingToolbar";
import { useAppPagination } from "../../../hooks/useAppPagination";
import { useModal } from "../../../lib/modal-system/ModalContext";
import { packageColumns } from "../../../features/packages/columns/packageColumns";
import type { Package } from "../../../features/packages/types/package";
import Button from "../../../components/ui/Button";

const initialPackages: Package[] = [
  {
    id: 1,
    title: "Starter",
    description: "Use credits anytime. No expiry. No limits",
    price: "$10",
    credits: 100,
    status: "Active",
  },
  {
    id: 2,
    title: "Standard",
    description: "Use credits anytime. No expiry. No limits",
    price: "$25",
    credits: 300,
    status: "Active",
  },
  {
    id: 3,
    title: "Pro",
    description: "Use credits anytime. No expiry. No limits",
    price: "$50",
    credits: 700,
    status: "Inactive",
  },
  {
    id: 4,
    title: "Elite",
    description: "Use credits anytime. No expiry. No limits",
    price: "$75",
    credits: 1000,
    status: "Active",
  },
];

export default function AdminPackagesPage() {
  const [packages, setPackages] = useState<Package[]>(initialPackages);
  const pagination = useAppPagination();
  const { openModal } = useModal();

  const handleSubmitPackage = (data: Package) => {
    setPackages((prev) => {
      if (data.id) {
        return prev.map((item) =>
          item.id === data.id ? data : item
        );
      }

      const nextId =
        prev.length > 0
          ? Math.max(...prev.map((item) => item.id)) + 1
          : 1;

      return [...prev, { ...data, id: nextId }];
    });
  };

  const handleCreate = () => {
    openModal("PACKAGE_FORM", {
      mode: "create",
      packageData: null,
      onSubmit: handleSubmitPackage,
    });
  };

  const handleEdit = (item: Package) => {
    openModal("PACKAGE_FORM", {
      mode: "edit",
      packageData: item,
      onSubmit: handleSubmitPackage,
    });
  };

  const handleDelete = (item: Package) => {
    setPackages((prev) => prev.filter((pkg) => pkg.id !== item.id));
  };

  const columns = packageColumns({
    onEdit: handleEdit,
    onDelete: handleDelete,
  });

  return (
    <section className="w-full p-4 md:p-8">
      <DataTable
        data={packages}
        columns={columns}
        appearance="default"
        size="md"
        getRowId={(item) => String(item.id)}
        toolbar={
          <div className="flex w-full items-center justify-between gap-4">
            <HeadingToolbar
              title="Packages"
            />

            
          </div>
        }
        filters={<>
          <Button
              variant="white"
              type="button"
              icon={<FiPlus size={18} />}
              onClick={handleCreate}
              buttonClassName="shadow-none!"
              BtnInnerclassName="px-4! py-3.5! text-link!"
            >
              
              Create
            </Button>
        </>}
        classNames={{
          root: "",
          toolbar: "flex items-center gap-3",
          filters: "flex items-center gap-2",
          table: "min-w-full",
          tableThead: "admin-table relative",
          tableTheadRow: "whitespace-nowrap",
          tableTheadCell:
            "px-6 py-4 text-left font-body text-base font-medium text-heading relative",
          tableTbody: "admin-table relative",
          tableTbodyRow: `
            hover:bg-link-1/10 transition-colors
            [&>td]:border-b [&>td]:border-white
            first:[&>td:first-child]:rounded-tl-xl
            first:[&>td:last-child]:rounded-tr-xl
            last:[&>td:first-child]:rounded-bl-xl
            last:[&>td:last-child]:rounded-br-xl
          `,
          tableTbodyCell:
            "px-6 py-5 font-body font-medium text-base text-table-text relative",
          pagination: "",
        }}
        pagination={{
          controller: pagination,
          pageCount: 1,
          totalItems: packages.length,
        }}
      />
    </section>
  );
}