import { Space, Typography } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { SampleMeta } from '../../../widgets/core';
import { StatusBadgeUI } from '../../status-badge';
import { DataListTable } from '../DataListTable';

const { Text } = Typography;

type BoardItem = {
  id: string;
  title: string;
  owner: string;
  status: 'ready' | 'working' | 'done';
  progress: number;
};

const data: BoardItem[] = [
  { id: 'board-1', title: '컴포넌트 구성 추가 제안', owner: 'Board', status: 'working', progress: 45 },
  { id: 'plan-1', title: 'Plan 목록 정리', owner: 'Plan', status: 'ready', progress: 15 },
  { id: 'docs-1', title: 'Docs preview 연결', owner: 'Docs', status: 'done', progress: 100 },
];

const columns: ColumnsType<BoardItem> = [
  {
    title: '제목',
    dataIndex: 'title',
    sorter: (left, right) => left.title.localeCompare(right.title),
  },
  {
    title: '담당',
    dataIndex: 'owner',
    filters: Array.from(new Set(data.map((item) => item.owner))).map((owner) => ({
      text: owner,
      value: owner,
    })),
    onFilter: (value, record) => record.owner === value,
  },
  {
    title: '상태',
    dataIndex: 'status',
    render: (status: BoardItem['status']) => (
      <StatusBadgeUI
        label={status}
        tone={status === 'done' ? 'success' : status === 'working' ? 'processing' : 'default'}
      />
    ),
  },
  {
    title: '진행률',
    dataIndex: 'progress',
    sorter: (left, right) => left.progress - right.progress,
    render: (progress: number) => `${progress}%`,
  },
];

export const sampleMeta: SampleMeta = {
  id: 'data-list-table-base',
  componentId: 'data-list-table',
  title: 'Data List Table',
  description: '검색, 필터, 정렬, 페이지네이션과 모바일 카드 전환을 함께 제공하는 목록형 화면 컴포넌트입니다.',
  category: 'Common',
  kind: 'base',
  variantLabel: 'Base',
  order: 40,
  features: ['docs', 'component-sample'],
};

export function Sample() {
  return (
    <DataListTable
      data={data}
      columns={columns}
      getRowKey={(item) => item.id}
      searchFields={['title', 'owner', 'status']}
      searchPlaceholder="제목, 담당, 상태 검색"
      pageSize={2}
      filters={[
        {
          value: 'active',
          label: '진행 중',
          predicate: (item) => item.status !== 'done',
        },
      ]}
      mobileCardRender={(item) => (
        <Space direction="vertical" size={6}>
          <Text strong>{item.title}</Text>
          <Text type="secondary">{item.owner}</Text>
          <StatusBadgeUI
            label={item.status}
            tone={item.status === 'done' ? 'success' : item.status === 'working' ? 'processing' : 'default'}
          />
          <Text>{item.progress}%</Text>
        </Space>
      )}
    />
  );
}
