import React, { useState, useMemo, useEffect, useCallback, useRef } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useSfdaEntryList } from '../hooks/useSfdaEntries';
import ListPagination from '../components/ListPagination';
import {
  FaFilter,
  FaSync,
  FaEye,
  FaTimes,
  FaSave,
  FaStar,
  FaTrash,
  FaFileMedical,
  FaCheckCircle,
  FaTimesCircle,
} from 'react-icons/fa';

const SfdaEntriesList: React.FC = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();
  const setSearchParamsRef = useRef(setSearchParams);

  useEffect(() => {
    setSearchParamsRef.current = setSearchParams;
  }, [setSearchParams]);

  const currentPage = useMemo(() => {
    const p = parseInt(searchParams.get('page') || '1', 10);
    return Number.isNaN(p) || p < 1 ? 1 : p;
  }, [searchParams]);

  const setCurrentPage = useCallback(
    (pageOrUpdater: number | ((p: number) => number)) => {
      const next = typeof pageOrUpdater === 'function' ? pageOrUpdater(currentPage) : pageOrUpdater;
      setSearchParams((prev) => {
        const nextParams = new URLSearchParams(prev);
        nextParams.set('page', String(next));
        return nextParams;
      });
    },
    [currentPage, setSearchParams]
  );

  const pageSize = 20;
  const [initialLoadComplete, setInitialLoadComplete] = useState(false);
  const [isFilterExpanded, setIsFilterExpanded] = useState(true);
  const [activeFilterCount, setActiveFilterCount] = useState(0);
  const [savedFilters, setSavedFilters] = useState<Array<{ id: number; name: string; filters: Record<string, string> }>>([]);
  const [showSaveFilterModal, setShowSaveFilterModal] = useState(false);
  const [filterPresetName, setFilterPresetName] = useState('');

  const [titleFilter, setTitleFilter] = useState(() => searchParams.get('title') || '');
  const [passedFilter, setPassedFilter] = useState(() => searchParams.get('passed') || '');
  const [dateStart, setDateStart] = useState(() => searchParams.get('date_start') || '');
  const [dateEnd, setDateEnd] = useState(() => searchParams.get('date_end') || '');
  const [sortBy, setSortBy] = useState(() => searchParams.get('sort_by') || 'modified desc');

  useEffect(() => {
    const saved = localStorage.getItem('sfdaEntriesFilterPresets');
    if (saved) setSavedFilters(JSON.parse(saved));
  }, []);

  const hasDateFilter = !!(dateStart || dateEnd);

  useEffect(() => {
    const count = [titleFilter, passedFilter].filter(Boolean).length + (hasDateFilter ? 1 : 0);
    setActiveFilterCount(count);
  }, [titleFilter, passedFilter, hasDateFilter]);

  const apiFilters = useMemo(() => {
    const filters: Record<string, unknown> = {};
    if (titleFilter) filters.title = ['like', `%${titleFilter}%`];
    if (passedFilter === '1') filters.passed = 1;
    if (passedFilter === '0') filters.passed = 0;
    if (dateStart && dateEnd) filters.date = ['between', [dateStart, dateEnd]];
    else if (dateStart) filters.date = ['>=', dateStart];
    else if (dateEnd) filters.date = ['<=', dateEnd];
    return filters;
  }, [titleFilter, passedFilter, dateStart, dateEnd]);

  const orderBy = ['creation desc', 'creation asc', 'modified desc', 'modified asc', 'name asc', 'name desc', 'date desc', 'date asc'].includes(sortBy)
    ? sortBy
    : 'modified desc';

  const { entries, loading, error, totalCount, refetch } = useSfdaEntryList({
    filters: apiFilters,
    limit_start: (currentPage - 1) * pageSize,
    limit_page_length: pageSize,
    order_by: orderBy,
  });

  useEffect(() => {
    if (!loading && !initialLoadComplete) setInitialLoadComplete(true);
  }, [loading, initialLoadComplete]);

  const filtersChangedOnce = useRef(false);
  useEffect(() => {
    if (!filtersChangedOnce.current) {
      filtersChangedOnce.current = true;
      return;
    }
    setSearchParamsRef.current((prev) => {
      const next = new URLSearchParams(prev);
      if (titleFilter) next.set('title', titleFilter);
      else next.delete('title');
      if (passedFilter) next.set('passed', passedFilter);
      else next.delete('passed');
      if (dateStart) next.set('date_start', dateStart);
      else next.delete('date_start');
      if (dateEnd) next.set('date_end', dateEnd);
      else next.delete('date_end');
      if (sortBy && sortBy !== 'modified desc') next.set('sort_by', sortBy);
      else next.delete('sort_by');
      next.set('page', '1');
      return next;
    });
  }, [titleFilter, passedFilter, dateStart, dateEnd, sortBy]);

  const clearFilters = () => {
    setTitleFilter('');
    setPassedFilter('');
    setDateStart('');
    setDateEnd('');
    setSortBy('modified desc');
    setSearchParamsRef.current((prev) => {
      const next = new URLSearchParams(prev);
      next.delete('title');
      next.delete('passed');
      next.delete('date_start');
      next.delete('date_end');
      next.delete('sort_by');
      next.set('page', '1');
      return next;
    });
  };

  const hasActiveFilters = !!(titleFilter || passedFilter || hasDateFilter);

  const handleSaveFilterPreset = () => {
    if (!filterPresetName.trim()) return;
    const preset = {
      id: Date.now(),
      name: filterPresetName,
      filters: { titleFilter, passedFilter, dateStart, dateEnd, sortBy },
    };
    const updated = [...savedFilters, preset];
    setSavedFilters(updated);
    setFilterPresetName('');
    setShowSaveFilterModal(false);
    localStorage.setItem('sfdaEntriesFilterPresets', JSON.stringify(updated));
  };

  const handleLoadFilterPreset = (preset: { filters: Record<string, string> }) => {
    const f = preset.filters;
    setTitleFilter(f.titleFilter || '');
    setPassedFilter(f.passedFilter || '');
    setDateStart(f.dateStart || '');
    setDateEnd(f.dateEnd || '');
    setSortBy(f.sortBy || 'modified desc');
  };

  const handleDeleteFilterPreset = (id: number) => {
    const updated = savedFilters.filter((f) => f.id !== id);
    setSavedFilters(updated);
    localStorage.setItem('sfdaEntriesFilterPresets', JSON.stringify(updated));
  };

  const formatDate = (dateStr?: string) =>
    dateStr
      ? new Date(dateStr).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
      : '-';

  const passedCount = entries.filter((e) => e.passed === 1 || e.passed === true).length;

  if (loading && !initialLoadComplete) {
    return (
      <div className="flex items-center justify-center h-screen bg-gray-50 dark:bg-gray-900">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto" />
          <p className="mt-4 text-gray-600 dark:text-gray-400">{t('sfdaEntries.loading')}</p>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="p-6 bg-gray-50 dark:bg-gray-900 min-h-screen">
        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-6">
          <h2 className="text-xl font-bold text-red-800 dark:text-red-300 mb-4">{t('sfdaEntries.errorLoading')}</h2>
          <p className="text-red-700 dark:text-red-400 mb-4">{error}</p>
          <button onClick={refetch} className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">
            {t('common.tryAgain')}
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="p-6 bg-gray-50 dark:bg-gray-900 min-h-screen">
      <div className="mb-6 flex justify-between items-center">
        <div>
          <div className="flex items-center gap-3">
            <FaFileMedical className="text-3xl text-blue-600 dark:text-blue-400" />
            <div>
              <h1 className="text-2xl font-bold text-gray-800 dark:text-white">{t('sfdaEntries.title')}</h1>
              <p className="text-sm text-gray-500 dark:text-gray-400">
                {t('common.total')}: {totalCount}
                {loading && initialLoadComplete && (
                  <span className="ml-2 inline-flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400">
                    <div className="animate-spin rounded-full h-3 w-3 border-b-2 border-blue-500" />
                    Updating...
                  </span>
                )}
              </p>
            </div>
          </div>
        </div>
        <div className="flex gap-3">
          <button
            onClick={() => setIsFilterExpanded(!isFilterExpanded)}
            className={`px-4 py-2 rounded-lg flex items-center gap-2 transition-colors ${
              isFilterExpanded || hasActiveFilters
                ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
                : 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
            }`}
          >
            <FaFilter />
            {t('listPages.filters')}
            {activeFilterCount > 0 && (
              <span className="bg-blue-600 text-white text-xs px-1.5 py-0.5 rounded-full">{activeFilterCount}</span>
            )}
          </button>
          <button
            onClick={refetch}
            disabled={loading}
            className="px-4 py-2 rounded-lg bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center gap-2 disabled:opacity-50"
          >
            <FaSync className={loading ? 'animate-spin' : ''} />
            {t('listPages.refresh')}
          </button>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-4 border border-gray-200 dark:border-gray-700">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-500 dark:text-gray-400">{t('common.total')}</p>
              <p className="text-2xl font-bold text-gray-800 dark:text-white">{totalCount}</p>
            </div>
            <FaFileMedical className="text-3xl text-blue-500" />
          </div>
        </div>
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-4 border border-gray-200 dark:border-gray-700">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-500 dark:text-gray-400">{t('sfdaEntries.stats.passed')}</p>
              <p className="text-2xl font-bold text-green-600">{passedCount}</p>
            </div>
            <FaCheckCircle className="text-3xl text-green-500" />
          </div>
        </div>
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-4 border border-gray-200 dark:border-gray-700">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-500 dark:text-gray-400">{t('sfdaEntries.stats.notPassed')}</p>
              <p className="text-2xl font-bold text-orange-600">{entries.length - passedCount}</p>
            </div>
            <FaTimesCircle className="text-3xl text-orange-500" />
          </div>
        </div>
      </div>

      {isFilterExpanded && (
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 mb-4">
          <div className="bg-gradient-to-r from-blue-500 to-blue-600 dark:from-blue-600 dark:to-blue-700 px-4 py-3 rounded-t-lg">
            <div className="flex items-center justify-between gap-4">
              <div className="flex items-center gap-3">
                <FaFilter className="text-white" size={16} />
                <h3 className="text-white font-semibold text-sm">{t('listPages.filters')}</h3>
                {activeFilterCount > 0 && (
                  <span className="bg-white text-blue-600 px-2 py-0.5 rounded-full text-xs font-bold">{activeFilterCount}</span>
                )}
              </div>
              <div className="flex items-center gap-2 flex-shrink-0">
                {activeFilterCount > 0 && (
                  <button
                    onClick={() => setShowSaveFilterModal(true)}
                    className="px-3 py-1.5 bg-white text-blue-600 hover:bg-blue-50 rounded-md text-xs font-medium transition-all flex items-center gap-1.5"
                  >
                    <FaSave size={12} />
                    <span className="hidden sm:inline">{t('common.save')}</span>
                  </button>
                )}
                {hasActiveFilters && (
                  <button
                    onClick={clearFilters}
                    className="px-3 py-1.5 bg-red-500 hover:bg-red-600 text-white rounded-md text-xs font-medium transition-all flex items-center gap-1.5"
                  >
                    <FaTimes size={12} />
                    <span className="hidden sm:inline">{t('common.clearFilters')}</span>
                  </button>
                )}
              </div>
            </div>
          </div>
          <div className="p-4">
            {savedFilters.length > 0 && (
              <div className="mb-4 pb-4 border-b border-gray-200 dark:border-gray-700">
                <h4 className="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2 flex items-center gap-2">
                  <FaStar className="text-yellow-500" size={12} />
                  {t('sfdaEntries.savedFilters')}
                </h4>
                <div className="flex flex-wrap gap-2">
                  {savedFilters.map((preset) => (
                    <div
                      key={preset.id}
                      className="group relative inline-flex items-center gap-2 px-3 py-1.5 bg-gradient-to-r from-blue-100 to-indigo-100 dark:from-blue-900/30 dark:to-indigo-900/30 border border-blue-200 dark:border-blue-700 rounded-lg hover:shadow-md transition-all"
                    >
                      <button
                        onClick={() => handleLoadFilterPreset(preset)}
                        className="text-xs font-medium text-blue-700 dark:text-blue-300"
                      >
                        {preset.name}
                      </button>
                      <button
                        onClick={() => handleDeleteFilterPreset(preset.id)}
                        className="opacity-0 group-hover:opacity-100 text-red-500 hover:text-red-700 transition-opacity"
                      >
                        <FaTrash size={10} />
                      </button>
                    </div>
                  ))}
                </div>
              </div>
            )}
            <div className="bg-gray-50 dark:bg-gray-900/50 p-3 rounded-lg">
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
                <div>
                  <label className="block text-[10px] font-medium text-gray-700 dark:text-gray-300 mb-0.5">
                    {t('filters.sortBy')}
                  </label>
                  <select
                    value={sortBy}
                    onChange={(e) => {
                      setSortBy(e.target.value);
                      setCurrentPage(1);
                    }}
                    className="w-full px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                  >
                    <option value="modified desc">{t('filters.sortModifiedNewest')}</option>
                    <option value="modified asc">{t('filters.sortModifiedOldest')}</option>
                    <option value="creation desc">{t('filters.sortCreationNewest')}</option>
                    <option value="creation asc">{t('filters.sortCreationOldest')}</option>
                    <option value="date desc">{t('sfdaEntries.filters.dateNewest')}</option>
                    <option value="date asc">{t('sfdaEntries.filters.dateOldest')}</option>
                    <option value="name asc">{t('filters.sortNameAsc')}</option>
                    <option value="name desc">{t('filters.sortNameDesc')}</option>
                  </select>
                </div>
                <div>
                  <label className="block text-[10px] font-medium text-gray-700 dark:text-gray-300 mb-0.5">
                    {t('sfdaEntries.filters.title')}
                  </label>
                  <input
                    type="text"
                    value={titleFilter}
                    onChange={(e) => {
                      setTitleFilter(e.target.value);
                      setCurrentPage(1);
                    }}
                    placeholder={t('sfdaEntries.filters.titlePlaceholder')}
                    className="w-full px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                  />
                </div>
                <div>
                  <label className="block text-[10px] font-medium text-gray-700 dark:text-gray-300 mb-0.5">
                    {t('sfdaEntries.filters.dateStart')}
                  </label>
                  <input
                    type="date"
                    value={dateStart}
                    onChange={(e) => {
                      setDateStart(e.target.value);
                      setCurrentPage(1);
                    }}
                    className="w-full px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                  />
                </div>
                <div>
                  <label className="block text-[10px] font-medium text-gray-700 dark:text-gray-300 mb-0.5">
                    {t('sfdaEntries.filters.dateEnd')}
                  </label>
                  <input
                    type="date"
                    value={dateEnd}
                    onChange={(e) => {
                      setDateEnd(e.target.value);
                      setCurrentPage(1);
                    }}
                    min={dateStart || undefined}
                    className="w-full px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                  />
                </div>
                <div>
                  <label className="block text-[10px] font-medium text-gray-700 dark:text-gray-300 mb-0.5">
                    {t('sfdaEntries.filters.passed')}
                  </label>
                  <select
                    value={passedFilter}
                    onChange={(e) => {
                      setPassedFilter(e.target.value);
                      setCurrentPage(1);
                    }}
                    className="w-full px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                  >
                    <option value="">{t('listPages.all')}</option>
                    <option value="1">{t('common.yes')}</option>
                    <option value="0">{t('common.no')}</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {showSaveFilterModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full p-6 animate-scale-in">
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">{t('common.saveFilterPreset')}</h3>
            <input
              type="text"
              value={filterPresetName}
              onChange={(e) => setFilterPresetName(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === 'Enter') handleSaveFilterPreset();
              }}
              placeholder={t('common.enterFilterName')}
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white mb-4"
              autoFocus
            />
            <div className="flex gap-2 justify-end">
              <button
                onClick={() => {
                  setShowSaveFilterModal(false);
                  setFilterPresetName('');
                }}
                className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors"
              >
                {t('common.cancel')}
              </button>
              <button
                onClick={handleSaveFilterPreset}
                className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors flex items-center gap-2"
              >
                <FaSave size={12} />
                {t('common.saveFilter')}
              </button>
            </div>
          </div>
        </div>
      )}

      <div className="bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700 overflow-hidden relative">
        {loading && initialLoadComplete && (
          <div className="absolute inset-0 bg-white/60 dark:bg-gray-800/60 flex items-center justify-center z-10 backdrop-blur-[1px]">
            <div className="flex items-center gap-3 bg-white dark:bg-gray-700 px-4 py-2 rounded-lg shadow-lg">
              <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-500" />
              <span className="text-sm text-gray-600 dark:text-gray-300">{t('common.filtering')}</span>
            </div>
          </div>
        )}
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-gray-100 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
              <tr>
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  {t('sfdaEntries.columns.title')}
                </th>
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  {t('sfdaEntries.columns.date')}
                </th>
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  {t('sfdaEntries.columns.passed')}
                </th>
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  {t('listPages.actions')}
                </th>
              </tr>
            </thead>
            <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
              {entries.length === 0 ? (
                <tr>
                  <td colSpan={4} className="px-4 py-12 text-center text-gray-500 dark:text-gray-400">
                    <div className="flex flex-col items-center">
                      <FaFileMedical className="text-4xl text-gray-300 dark:text-gray-600 mb-2" />
                      <p>{t('sfdaEntries.noEntriesFound')}</p>
                      {hasActiveFilters && (
                        <button onClick={clearFilters} className="mt-4 text-blue-600 dark:text-blue-400 hover:underline">
                          {t('common.clearFilters')}
                        </button>
                      )}
                    </div>
                  </td>
                </tr>
              ) : (
                entries.map((entry) => (
                  <tr
                    key={entry.name}
                    className="hover:bg-gray-50 dark:hover:bg-gray-700/50 cursor-pointer transition-colors"
                    onClick={() => navigate(`/sfda-entries/${encodeURIComponent(entry.name)}`)}
                  >
                    <td className="px-4 py-3">
                      <span className="text-sm font-medium text-gray-900 dark:text-white line-clamp-2">{entry.title || '-'}</span>
                    </td>
                    <td className="px-4 py-3">
                      <span className="text-sm text-gray-600 dark:text-gray-300">{formatDate(entry.date)}</span>
                    </td>
                    <td className="px-4 py-3">
                      {entry.passed === 1 || entry.passed === true ? (
                        <span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-full bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300">
                          <FaCheckCircle size={10} />
                          {t('common.yes')}
                        </span>
                      ) : (
                        <span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
                          <FaTimesCircle size={10} />
                          {t('common.no')}
                        </span>
                      )}
                    </td>
                    <td className="px-4 py-3" onClick={(e) => e.stopPropagation()}>
                      <button
                        onClick={() => navigate(`/sfda-entries/${encodeURIComponent(entry.name)}`)}
                        className="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 p-2 hover:bg-blue-50 dark:hover:bg-blue-900/30 rounded transition-colors"
                        title={t('sfdaEntries.viewDetails')}
                      >
                        <FaEye />
                      </button>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>

        <ListPagination
          currentPage={currentPage}
          totalCount={totalCount}
          pageSize={pageSize}
          itemLabel={t('sfdaEntries.paginationLabel')}
          onPageChange={(p) => setCurrentPage(p)}
        />
      </div>

      <style>{`
        @keyframes scale-in { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
        .animate-scale-in { animation: scale-in 0.2s ease-out; }
        .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
        .scrollbar-hide::-webkit-scrollbar { display: none; }
      `}</style>
    </div>
  );
};

export default SfdaEntriesList;
