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

const { Text } = Typography;

const planSteps = [
  { key: 'created', label: '등록', description: '게시판 요청이 접수되었습니다.' },
  { key: 'working', label: '작업중', description: '컴포넌트 구현과 문서를 작성합니다.' },
  { key: 'done', label: '작업완료', description: '기능 구현이 끝나고 검토를 기다립니다.' },
  { key: 'released', label: '릴리즈완료', description: 'release 반영 후 검증 대기 상태입니다.' },
  { key: 'completed', label: '완료', description: 'main 동기화까지 끝난 최종 상태입니다.' },
];

const releaseSteps = [
  { key: 'hotfix', label: 'hotfix 생성', status: 'complete' as const },
  { key: 'release', label: 'release 반영', status: 'current' as const },
  { key: 'verify', label: '검증', status: 'pending' as const },
  { key: 'main', label: 'main 동기화', status: 'pending' as const },
];

const failedSteps = [
  { key: 'board', label: 'Board 접수', status: 'complete' as const },
  { key: 'plan', label: 'Plan 생성', status: 'complete' as const },
  { key: 'apply', label: '자동 반영', status: 'failed' as const, description: '충돌로 재시도가 필요합니다.' },
  { key: 'summary', label: '상태 요약', status: 'pending' as const },
];

export const sampleMeta: SampleMeta = {
  id: 'process-flow-ui-base',
  componentId: 'process-flow-ui',
  title: 'Process Flow UI',
  description: '단계형 진행 상태를 가로/세로 흐름으로 공통 표시하는 Stepper 컴포넌트입니다.',
  category: 'Navigation',
  kind: 'base',
  variantLabel: 'Base',
  order: 63,
  features: ['docs'],
};

export function Sample() {
  return (
    <Flex vertical gap={16}>
      <Card size="small" title="Plan 상세 흐름">
        <ProcessFlowUI steps={planSteps} currentStepKey="working" />
      </Card>

      <Flex gap={16} wrap="wrap">
        <Card
          size="small"
          title="Release 반영 대기"
          style={{ flex: '1 1 280px', minWidth: 260 }}
        >
          <Flex vertical gap={10}>
            <Text type="secondary">세로 모드로 배치하면 긴 설명과 운영 단계가 더 읽기 쉽습니다.</Text>
            <ProcessFlowUI
              steps={releaseSteps}
              direction="vertical"
              compact
              statusLabels={{
                complete: '반영됨',
                current: '진행중',
                failed: '실패',
                pending: '대기',
              }}
            />
          </Flex>
        </Card>

        <Card
          size="small"
          title="Board 자동화 실패 예시"
          style={{ flex: '1 1 280px', minWidth: 260 }}
        >
          <Flex vertical gap={10}>
            <Text type="secondary">상태별 색상과 라벨만으로 현재 위치와 다음 작업을 빠르게 구분합니다.</Text>
            <ProcessFlowUI steps={failedSteps} compact />
          </Flex>
        </Card>
      </Flex>
    </Flex>
  );
}
