'use client';

import { FoxBadge } from '@fox/core/components/fox-badge';
import type { FoxListColumn } from '@fox/core/components/fox-list-container';
import {
  CONTENT_KIND_LABEL,
  formatContentText,
  formatQuizLevelLabel,
  formatVisibilityLabel,
  type GradesBySchool,
  type QuizItem,
} from '@/lib/domain/content';
import type { CommonCode } from '@/lib/domain/common-code';
import type { ContentQuery } from '@/lib/domain/content-query';
import { ContentListShell } from '../../_components/content-list-shell';
import { ContentRowActions } from '../../_components/content-row-actions';
import { QuizExcelActions } from './quiz-excel-actions';

interface QuizzesListProps {
  items: QuizItem[];
  query: ContentQuery;
  currentPage: number;
  totalPages: number;
  totalCount: number;
  schools: readonly CommonCode[];
  gradesBySchool: GradesBySchool;
}

export function QuizzesList({
  items,
  query,
  currentPage,
  totalPages,
  totalCount,
  schools,
  gradesBySchool,
}: QuizzesListProps) {
  const columns: FoxListColumn<QuizItem>[] = [
    {
      key: 'no',
      header: '번호',
      width: 80,
      render: (_row, index) => (currentPage - 1) * query.pageSize + index + 1,
    },
    {
      key: 'type',
      header: '퀴즈유형',
      width: 110,
      // 백엔드에 유형 컬럼이 없다. 이 화면 자체가 O/X 퀴즈 전용이라 고정 문구로 둔다.
      render: () => 'O/X 퀴즈',
    },
    {
      key: 'level',
      header: '난이도',
      width: 100,
      render: (row) => formatQuizLevelLabel(row.level),
    },
    {
      key: 'question',
      header: '질문',
      width: 360,
      emphasis: true,
      render: (row) => formatContentText(row.question),
    },
    {
      key: 'answer',
      header: '정답',
      width: 80,
      render: (row) => formatContentText(row.answer),
    },
    {
      key: 'visibility',
      header: '비공개',
      width: 110,
      render: (row) => (
        <FoxBadge
          type="pastel"
          color={row.isVisible ? 'success' : 'neutral'}
          size="md"
        >
          {formatVisibilityLabel(row.isVisible)}
        </FoxBadge>
      ),
    },
    {
      key: 'modifiedAt',
      header: '수정일',
      width: 140,
      render: (row) => formatContentText(row.modifiedAt),
    },
    {
      key: 'actions',
      header: '관리',
      width: 120,
      render: (row) => (
        <ContentRowActions
          kind="quiz"
          id={row.quizSn}
          name={row.question || CONTENT_KIND_LABEL.quiz}
        />
      ),
    },
  ];

  return (
    <ContentListShell<QuizItem>
      kind="quiz"
      columns={columns}
      rows={items}
      rowKey={(row) => row.quizSn}
      query={query}
      currentPage={currentPage}
      totalPages={totalPages}
      totalCount={totalCount}
      schools={schools}
      gradesBySchool={gradesBySchool}
      extraActions={<QuizExcelActions />}
    />
  );
}