import { EmptyType } from '@/components/empty/constant';
import Empty from '@/components/empty/empty';
import { FilterButton } from '@/components/list-filter-bar';
import { FilterPopover } from '@/components/list-filter-bar/filter-popover';
import { FilterCollection } from '@/components/list-filter-bar/interface';
import { Card } from '@/components/ui/card';
import { useTranslate } from '@/hooks/common-hooks';
import { useTestRetrieval } from '@/hooks/use-knowledge-request';
import { ITestingChunk } from '@/interfaces/database/dataset';
import { t } from 'i18next';
import camelCase from 'lodash/camelCase';
import { useMemo } from 'react';

const similarityList: Array<{ field: keyof ITestingChunk; label: string }> = [
  { field: 'similarity', label: 'Hybrid Similarity' },
  { field: 'term_similarity', label: 'Term Similarity' },
  { field: 'vector_similarity', label: 'Vector Similarity' },
];

const ChunkTitle = ({ item }: { item: ITestingChunk }) => {
  const { t } = useTranslate('knowledgeDetails');
  return (
    <div className="text-xs text-text-sub-title-invert italic space-x-4 rtl:space-x-reverse">
      {similarityList.map((x) => (
        <p key={x.field} className="inline">
          {((item[x.field] as number) * 100).toFixed(2)}{' '}
          <dfn>{t(camelCase(x.field))}</dfn>
        </p>
      ))}
    </div>
  );
};

type TestingResultProps = Pick<
  ReturnType<typeof useTestRetrieval>,
  'data' | 'filterValue' | 'handleFilterSubmit' | 'loading'
>;

export function TestingResult({
  filterValue,
  handleFilterSubmit,
  loading,
  data,
}: TestingResultProps) {
  const filters: FilterCollection[] = useMemo(() => {
    return [
      {
        field: 'doc_ids',
        label: 'File',
        list:
          data.doc_aggs?.map((x) => ({
            id: x.doc_id,
            label: x.doc_name,
            count: x.count,
          })) ?? [],
      },
    ];
  }, [data.doc_aggs]);

  return (
    <article className="size-full flex flex-col">
      <header className="flex-0 px-5 py-3 flex justify-between items-center">
        <h2 className="font-semibold text-base leading-8">
          {t('knowledgeDetails.testResults')}
        </h2>
        <span className="mr-auto text-sm text-text-secondary pl-2">
          {t('common.total')}: {data.total}
        </span>

        <FilterPopover
          filters={filters}
          onChange={handleFilterSubmit}
          value={filterValue}
        >
          <FilterButton></FilterButton>
        </FilterPopover>
      </header>

      <>
        {data.chunks?.length > 0 && !loading && (
          <>
            <section className="px-5 pb-5 flex flex-col gap-5 overflow-auto scrollbar-thin min-h-0">
              {data.chunks?.map((x) => (
                <article key={x.chunk_id}>
                  <Card className="px-5 py-2.5 bg-transparent shadow-none">
                    <ChunkTitle item={x}></ChunkTitle>
                    <p className="!mt-2.5"> {x.content_with_weight}</p>
                  </Card>
                </article>
              ))}
            </section>
          </>
        )}
        {!data.chunks?.length && !loading && (
          <div className="size-full p-5 flex justify-center items-center">
            <div>
              <Empty type={EmptyType.SearchData} iconWidth={80}>
                <div className="text-text-secondary text-sm">
                  {t(
                    data.isRuned
                      ? 'knowledgeDetails.noTestResultsForRuned'
                      : 'knowledgeDetails.noTestResultsForNotRuned',
                  )}
                </div>
              </Empty>
            </div>
          </div>
        )}
      </>
    </article>
  );
}
