import AddLanguage from '@/components/admin/site-settings/add-language';
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 { handleApiError } from '@/lib/error-handler';
import { request } from '@/lib/fetcher';
import { router } from '@inertiajs/react';
import { ArrowsClockwiseIcon, CaretRightIcon } from '@phosphor-icons/react';
import { SortingState } from '@tanstack/react-table';
import { useState, useTransition } from 'react';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';

const Language = () => {
  const { t } = useTranslation();
  const [sorting, setSorting] = useState<SortingState>([]);
  const { data, isLoading, refresh } = useTableData<string[]>(
    '/admin/translations',
  );
  const [isSyncing, startSync] = useTransition();

  const handleSync = () => {
    startSync(async () => {
      try {
        const res = await request.post('/api/admin/translations/sync');
        if (res.data?.success) {
          const summary = res.data.summary as Record<string, number>;
          const lines = Object.entries(summary).map(
            ([locale, count]) => `${locale}: ${count} key(s) added`,
          );
          toast.success(res.data.message, {
            description: lines.length ? lines.join('\n') : undefined,
          });
          refresh();
        }
      } catch (err) {
        handleApiError(err);
      }
    });
  };

  return (
    <>
      <PageHeading
        title={t('Language')}
        description={t(
          'Manage site languages and sync missing translations from English.',
        )}
      />
      <TableBar
        dateFilter={false}
        addButton={
          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              onClick={handleSync}
              loading={isSyncing}
              disabled={isSyncing}
            >
              <ArrowsClockwiseIcon weight="bold" className="size-4" />
              {t('Sync Languages')}
            </Button>
            <AddLanguage refresh={refresh} />
          </div>
        }
      />
      <DataTable
        data={data ?? []}
        sorting={sorting}
        setSorting={setSorting}
        isLoading={isLoading}
        structure={[
          {
            accessorKey: 'name',
            header: t('Code'),
            cell: ({ row }) => <span>{row.original}</span>,
          },
          {
            accessorKey: 'actions',
            header: t('Actions'),
            cell: ({ row }) => (
              <div className="flex space-x-2">
                <Button
                  variant="ghostPrimary"
                  onClick={() =>
                    router.visit(`/admin/language/${row.original}`)
                  }
                >
                  {t('Edit Translations')}
                  <CaretRightIcon weight="bold" className="size-4" />
                </Button>
                <ConfirmDeleteButton
                  url={`/api/admin/translations/${row.original}/delete-locale`}
                  onSuccess={refresh}
                  description={t('This will permanently delete this language.')}
                />
              </div>
            ),
          },
        ]}
      />
    </>
  );
};

Language.title = 'Language';

export default Language;