import DataTable from '@/components/common/data-table';
import PageHeading from '@/components/common/page-heading';
import { Button } from '@/components/ui/button';
import { Switch } from '@/components/ui/switch';
import { toggleStatus } from '@/data/request/toggle-status';
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';
import { toast } from 'sonner';

const EmailTemplates = () => {
  const [sorting, setSorting] = useState<SortingState>([]);
  const { data, isLoading } =
    useTableData<
      { id: number; name: string; subject: string; is_active: boolean }[]
    >('/admin/templates');
  const { t } = useTranslation();

  const handleStatusChange = (id: number) => {
    toast.promise(toggleStatus(`/api/admin/templates/${id}/toggle-status`), {
      loading: t('Updating status...'),
      success: (res) => res.message,
      error: t('Failed to update status'),
    });
  };

  return (
    <>
      <PageHeading
        title={t('Email Template')}
        description={t(
          'Manage email templates used for notifications and communications.',
        )}
      />
      <DataTable
        rounded
        data={data ?? []}
        sorting={sorting}
        setSorting={setSorting}
        isLoading={isLoading}
        structure={[
          {
            accessorKey: 'name',
            header: t('Email'),
            cell: ({ row }) => (
              <>
                <p className="mb-1 font-medium">{row.original?.name}</p>
                <p className="text-sm text-black/70">{row.original?.subject}</p>
              </>
            ),
          },
          {
            accessorKey: 'is_active',
            header: t('Status'),
            cell: ({ row }) => (
              <Switch
                id={row.original?.id}
                defaultChecked={row.original.is_active}
                onCheckedChange={() => handleStatusChange(row.original.id)}
              />
            ),
          },
          {
            accessorKey: 'actions',
            header: t('Actions'),
            cell: ({ row }) => (
              <Button
                variant="ghostPrimary"
                onClick={() =>
                  router.visit(`/admin/email-templates/${row.original?.id}`)
                }
              >
                {t('Update Template')}
                <CaretRightIcon weight="bold" className="size-4" />
              </Button>
            ),
          },
        ]}
      />
    </>
  );
};

EmailTemplates.title = 'Email Template';

export default EmailTemplates;