import { Card, Flex, Typography } from 'antd';
import type { SampleMeta } from '../../../widgets/core';
import { TimelinePanelUI, type TimelinePanelEvent } from '../TimelinePanelUI';

const { Text } = Typography;

const timelineEvents: TimelinePanelEvent[] = [
  {
    id: 'requested',
    timeLabel: '09:10',
    title: '추천 컴포넌트 요청 접수',
    meta: 'Plan Board · #new-comp-timeline-panel',
    description: 'release 기준 자동화 작업이 접수되어 신규 패널 스펙과 샘플 범위를 정리합니다.',
    status: 'completed',
  },
  {
    id: 'design',
    timeLabel: '10:00',
    title: '레이아웃 시안 확정',
    meta: 'UI Review · 모바일 우선 점검',
    description: '상태 배지와 아이콘, 컴팩트 변형, 빈 상태 배치를 동일한 규칙으로 묶습니다.',
    status: 'inProgress',
  },
  {
    id: 'mobile',
    timeLabel: '11:20',
    title: '모바일 세로 레이아웃 검토',
    meta: 'Viewport · 360px',
    description: '좁은 폭에서는 시간 레이블과 카드가 세로로 자연스럽게 재배치되도록 확인합니다.',
    status: 'warning',
    badgeLabel: '모바일 점검',
  },
  {
    id: 'release',
    timeLabel: '13:00',
    title: 'release 반영 대기',
    meta: 'Ops Queue · 검증 전',
    description: '샘플과 스타일 정리가 끝나면 release 검증 큐로 이동합니다.',
    status: 'planned',
  },
];

export const sampleMeta: SampleMeta = {
  id: 'timeline-panel-base',
  componentId: 'timeline-panel',
  title: 'Timeline Panel',
  description: '시간순 이벤트 목록을 상태 배지와 함께 보여주는 패널형 타임라인 컴포넌트입니다.',
  category: 'Display',
  kind: 'base',
  variantLabel: 'Base',
  order: 64,
  features: ['docs', 'component-sample'],
};

export function Sample() {
  return (
    <Flex vertical gap={16}>
      <Card size="small" title="기본 타임라인">
        <TimelinePanelUI
          eyebrow="Release Timeline"
          title="추천 컴포넌트 자동화 진행"
          description="시간순 이벤트, 상태 배지, 설명 텍스트를 한 패널에 모아 운영 흐름을 빠르게 읽게 합니다."
          events={timelineEvents}
        />
      </Card>

      <Flex gap={16} wrap="wrap" align="stretch">
        <Card size="small" title="Compact 변형" style={{ flex: '1 1 320px', minWidth: 280 }}>
          <TimelinePanelUI
            eyebrow="Compact"
            title="간결한 이력 보기"
            description="보조 설명과 카드 여백을 줄여 대시보드 사이드 패널에도 맞춥니다."
            events={timelineEvents.slice(0, 3)}
            compact
          />
        </Card>

        <Card size="small" title="Empty 상태" style={{ flex: '1 1 320px', minWidth: 280 }}>
          <TimelinePanelUI
            eyebrow="Empty State"
            title="오늘 이벤트 없음"
            description="필터 결과가 없을 때도 패널 구조를 유지한 채 안내 메시지를 보여줍니다."
            events={[]}
            emptyTitle="기록된 이벤트가 없습니다."
            emptyDescription="새 작업이 생성되면 시간순 항목이 자동으로 채워집니다."
          />
        </Card>
      </Flex>

      <Card size="small" title="모바일 세로 레이아웃 샘플">
        <Flex vertical gap={10}>
          <Text type="secondary">
            아래 패널은 모바일 폭을 가정한 컨테이너에 배치한 예시입니다. 좁은 화면에서는 시간축이 좌측에 고정되고 콘텐츠 카드가 세로로 정렬됩니다.
          </Text>
          <div style={{ width: '100%', maxWidth: 360 }}>
            <TimelinePanelUI
              eyebrow="Mobile"
              title="세로 레이아웃"
              description="모바일에서 읽기 순서가 끊기지 않도록 자동 스택합니다."
              events={timelineEvents}
            />
          </div>
        </Flex>
      </Card>
    </Flex>
  );
}
