import AddPage from '@/components/admin/pages/add-page';
import UpdatePage from '@/components/admin/pages/update-page';
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 { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { useTableData } from '@/data/useTableData';
import { router } from '@inertiajs/react';
import { CaretRightIcon } from '@phosphor-icons/react';
import { SortingState } from '@tanstack/react-table';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';

const Pages = () => {
  const [sorting, setSorting] = useState<SortingState>([]);
  const { data, isLoading, refresh } =
    useTableData<
      { id: number; title: string; status: string; is_homepage: boolean }[]
    >('/admin/pages');
  const { t } = useTranslation();

  return (
    <>
      <PageHeading
        title={t('Manage Pages')}
        description={t('Create and manage public pages for your platform.')}
      />
      <TableBar
        dateFilter={false}
        searchFields={[]}
        addButton={<AddPage refresh={refresh} />}
      />
      <DataTable
        data={data ?? []}
        sorting={sorting}
        setSorting={setSorting}
        isLoading={isLoading}
        structure={[
          {
            accessorKey: 'id',
            header: t('ID'),
            meta: { width: 'w-12' },
            cell: ({ row }) => String(row.original.id).padStart(2, '0'),
          },
          {
            accessorKey: 'title',
            header: t('Title'),
          },
          {
            accessorKey: 'status',
            header: t('Status'),
            cell: ({ row }) => (
              <div className="flex items-center gap-2">
                {row.original?.is_homepage && (
                  <Badge variant="outline">{t('Home')}</Badge>
                )}
                <Badge
                  variant={
                    row.original?.status === 'published' ? 'success' : 'warning'
                  }
                >
                  {row.original?.status === 'published'
                    ? t('Published')
                    : t('Draft')}
                </Badge>
              </div>
            ),
          },
          {
            accessorKey: 'actions',
            header: t('Actions'),
            cell: ({ row }) => (
              <div className="flex space-x-2">
                <Button
                  variant="ghostPrimary"
                  onClick={() =>
                    router.visit(`/admin/pages/${row.original.id}/builder`)
                  }
                >
                  {t('Page Builder')}
                  <CaretRightIcon weight="bold" className="size-4" />
                </Button>
                <UpdatePage item={row.original} refresh={refresh} />
                <ConfirmDeleteButton
                  url={`/api/admin/pages/${row.original.id}`}
                  onSuccess={refresh}
                  title={
                    row.original?.is_homepage
                      ? t('Delete the homepage?')
                      : undefined
                  }
                  description={
                    row.original?.is_homepage
                      ? t(
                          'This is your current homepage. Deleting it will leave your site without a homepage until you set another one.',
                        )
                      : t('This will permanently delete this page.')
                  }
                />
              </div>
            ),
          },
        ]}
      />
    </>
  );
};

export default Pages;