import ConfirmDeleteButton from '@/components/common/confirm-delete-button';
import DataTable from '@/components/common/data-table';
import PageHeading from '@/components/common/page-heading';
import { TableBar } from '@/components/common/table-bar';
import { Button } from '@/components/ui/button';
import { useTableData } from '@/data/useTableData';
import QueryBuilder from '@/lib/query-builder';
import { router } from '@inertiajs/react';
import { PencilSimpleIcon, PlusIcon } from '@phosphor-icons/react';
import { SortingState } from '@tanstack/react-table';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';

const EditKycForm = () => {
  const builder = QueryBuilder();
  const [sorting, setSorting] = useState<SortingState>([]);
  const { items, isLoading, meta, refresh } = useTableData(
    `/admin/kyc-modules${builder.build()}`,
  );
  const { t } = useTranslation();

  return (
    <>
      <PageHeading
        title={t('KYC Form')}
        description={t(
          'Manage KYC verification modules and their configuration.',
        )}
      />
      <TableBar
        dateFilter={false}
        searchFields={['name']}
        builder={builder}
        addButton={
          <Button onClick={() => router.visit('/admin/kyc-form/create')}>
            <PlusIcon size="24" weight="bold" />
            {t('Add New Module')}
          </Button>
        }
      />
      <DataTable
        data={items}
        sorting={sorting}
        setSorting={setSorting}
        isLoading={isLoading}
        pagination={meta}
        onPageChange={(p) => builder.page(p)}
        onLimitChange={(l) => builder.limit(l)}
        structure={[
          {
            accessorKey: 'id',
            header: t('ID'),
            meta: { width: 'w-12' },
            cell: ({ row }) => String(row.original.id).padStart(2, '0'),
          },
          {
            accessorKey: 'name',
            header: t('Name'),
          },
          {
            accessorKey: 'actions',
            header: t('Actions'),
            cell: ({ row }) => (
              <div className="flex space-x-2">
                <Button
                  onClick={() =>
                    router.get(`/admin/kyc-form/${row.original?.id}/update`)
                  }
                  variant="ghostPrimary"
                >
                  <PencilSimpleIcon weight="bold" className="size-4" />
                </Button>
                <ConfirmDeleteButton
                  url={`/api/admin/kyc-modules/${row.original?.id}`}
                  onSuccess={refresh}
                  description={t(
                    'This will permanently delete this KYC module.',
                  )}
                />
              </div>
            ),
          },
        ]}
      />
    </>
  );
};

EditKycForm.title = 'Edit KYC Form';

export default EditKycForm;