'use client';

import { FoxBadge } from '@fox/core/components/fox-badge';
import type { FoxListColumn } from '@fox/core/components/fox-list-container';
import {
  formatContentText,
  formatGradesLabel,
  formatKeywordsLabel,
  formatSchoolLevelLabel,
  formatVisibilityLabel,
  type ContentItem,
} from '@/lib/domain/content';
import type { ContentQuery } from '@/lib/domain/content-query';
import { ContentListShell } from '../../_components/content-list-shell';
import { ContentRowActions } from '../../_components/content-row-actions';

interface ComicsListProps {
  items: ContentItem[];
  query: ContentQuery;
  currentPage: number;
  totalPages: number;
  totalCount: number;
}

export function ComicsList({
  items,
  query,
  currentPage,
  totalPages,
  totalCount,
}: ComicsListProps) {
  const columns: FoxListColumn<ContentItem>[] = [
    {
      key: 'no',
      header: '번호',
      width: 80,
      render: (_row, index) => (currentPage - 1) * query.pageSize + index + 1,
    },
    {
      key: 'schoolLevel',
      header: '학교급',
      width: 120,
      render: (row) => formatSchoolLevelLabel(row.schoolLevel),
    },
    {
      key: 'grades',
      header: '학년',
      width: 100,
      render: (row) => formatGradesLabel(row.grades),
    },
    {
      key: 'name',
      header: '콘텐츠명',
      width: 320,
      emphasis: true,
      render: (row) => formatContentText(row.name || row.title),
    },
    {
      key: 'keywords',
      header: '키워드',
      width: 200,
      render: (row) => formatKeywordsLabel(row.keywords),
    },
    {
      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="comic"
          id={row.cntntsSn}
          name={row.name || row.title}
        />
      ),
    },
  ];

  return (
    <ContentListShell<ContentItem>
      kind="comic"
      columns={columns}
      rows={items}
      rowKey={(row) => row.cntntsSn}
      query={query}
      currentPage={currentPage}
      totalPages={totalPages}
      totalCount={totalCount}
    />
  );
}