import DataTable from '@/components/common/data-table';
import PageHeading from '@/components/common/page-heading';
import { Input } from '@/components/ui/input';
import { updateRequest } from '@/data/request/update-request';
import { useTableData } from '@/data/useTableData';
import debounce from '@/lib/debaoune';
import { usePage } from '@inertiajs/react';
import { MagnifyingGlassIcon } from '@phosphor-icons/react';
import { SortingState } from '@tanstack/react-table';
import { useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';

const Translations = () => {
  const page = usePage();
  const langId = page.url.split('/')[3];
  const { t } = useTranslation();

  const [sorting, setSorting] = useState<SortingState>([]);
  const [searchTerm, setSearchTerm] = useState('');
  const { data, isLoading } = useTableData(`/admin/translations/${langId}`);

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const handleTranslationUpdate = useCallback(
    debounce((key: string, value: string) => {
      updateRequest({
        url: `/api/admin/translations/${langId}`,
        formData: { [key]: value },
      });
    }, 600),
    [langId],
  );

  const entries = useMemo(() => {
    if (!data) return [];
    const all = Object.entries(data as Record<string, string>).map(
      ([key, value]) => ({ key, value }),
    );
    if (!searchTerm.trim()) return all;
    const lower = searchTerm.toLowerCase();
    return all.filter(
      ({ key, value }) =>
        key.toLowerCase().includes(lower) ||
        String(value).toLowerCase().includes(lower),
    );
  }, [data, searchTerm]);

  return (
    <>
      <PageHeading
        backButton
        title={t('{{lang}} Update', { lang: langId.toUpperCase() })}
        description={t('Edit translation strings for the selected language.')}
      />

      <div className="relative z-10 flex items-center gap-2.5 rounded-t-xl bg-white p-2">
        <div className="relative w-full max-w-80">
          <MagnifyingGlassIcon className="absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground" />
          <Input
            placeholder={t('Search by key or value...')}
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="pl-9"
          />
        </div>
        {searchTerm && (
          <span className="text-sm text-muted-foreground">
            {entries.length} {t('result(s)')}
          </span>
        )}
      </div>

      <DataTable
        data={entries}
        sorting={sorting}
        setSorting={setSorting}
        isLoading={isLoading}
        structure={[
          {
            accessorKey: 'key',
            header: t('Key'),
            cell: ({ row }) => (
              <span className="font-medium">{row.original.key}</span>
            ),
          },
          {
            accessorKey: 'value',
            header: t('Value'),
            cell: ({ row }) => (
              <Input
                defaultValue={row.original.value}
                onChange={(e) =>
                  handleTranslationUpdate(row.original.key, e.target.value)
                }
              />
            ),
          },
        ]}
      />
    </>
  );
};

Translations.title = 'Translations';

export default Translations;