'use client';

import { AccordionItem, Flexbox, Text } from '@lobehub/ui';
import {
  Activity,
  Award,
  BarChart3,
  Gauge,
  LoaderPinwheel,
  Server,
  Target,
  TrendingUp,
  Trophy,
  Volleyball,
  Zap,
} from 'lucide-react';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';

import NavItem from '@/features/NavPanel/components/NavItem';
import SkeletonList from '@/features/NavPanel/components/SkeletonList';
import { useWorkspaceAwareNavigate } from '@/features/Workspace/useWorkspaceAwareNavigate';
import WorkspaceLink from '@/features/Workspace/WorkspaceLink';
import { useEvalStore } from '@/store/eval';
import { isModifierClick } from '@/utils/navigation';

const SYSTEM_ICONS = [
  LoaderPinwheel,
  Volleyball,
  Server,
  Target,
  Award,
  Trophy,
  Activity,
  BarChart3,
  TrendingUp,
  Gauge,
  Zap,
];

const getSystemIcon = (id: string) => {
  const hash = id.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
  return SYSTEM_ICONS[hash % SYSTEM_ICONS.length];
};

interface BenchmarkListProps {
  activeKey: string;
  itemKey: string;
}

const BenchmarkList = memo<BenchmarkListProps>(({ activeKey, itemKey }) => {
  const { t } = useTranslation('eval');
  const navigate = useWorkspaceAwareNavigate();
  const benchmarkList = useEvalStore((s) => s.benchmarkList);
  const isInit = useEvalStore((s) => s.benchmarkListInit);

  return (
    <AccordionItem
      itemKey={itemKey}
      paddingBlock={4}
      paddingInline={'8px 4px'}
      title={
        <Flexbox horizontal align="center" gap={4}>
          <Text ellipsis fontSize={12} type={'secondary'} weight={500}>
            {t('sidebar.benchmarks')}
          </Text>
          {benchmarkList.length > 0 && (
            <Text fontSize={11} type="secondary">
              {benchmarkList.length}
            </Text>
          )}
        </Flexbox>
      }
    >
      <Flexbox gap={1} paddingBlock={1}>
        {!isInit ? (
          <SkeletonList rows={3} />
        ) : benchmarkList.length > 0 ? (
          benchmarkList.map((b: any) => (
            <WorkspaceLink
              key={b.id}
              to={`/eval/bench/${b.id}`}
              onClick={(e) => {
                if (isModifierClick(e)) return;
                e.preventDefault();
                navigate(`/eval/bench/${b.id}`);
              }}
            >
              <NavItem
                active={activeKey === `bench-${b.id}`}
                icon={getSystemIcon(b.id)}
                iconSize={16}
                title={b.name}
              />
            </WorkspaceLink>
          ))
        ) : (
          <Text fontSize={12} style={{ padding: '8px 12px' }} type="secondary">
            {t('benchmark.empty')}
          </Text>
        )}
      </Flexbox>
    </AccordionItem>
  );
});

export default BenchmarkList;
