import { Flex, Typography } from 'antd';
import type { SampleMeta } from '../../../widgets/core';
import { ChatPromptCard } from '../../../app/main/mainChatPanel/ChatPromptCard';

const { Paragraph } = Typography;

export const sampleMeta: SampleMeta = {
  id: 'chat-prompt-card',
  componentId: 'chat-prompt-card',
  title: 'Chat Prompt Card',
  description: '채팅방 안에서 선택형 시안과 시간초과 자동선택 결과를 읽기 전용으로 보여주는 prompt 카드입니다.',
  category: 'Chat',
  kind: 'feature',
  variantLabel: 'Prompt',
  order: 95,
  features: ['docs'],
};

export function Sample() {
  return (
    <Flex vertical gap={16}>
      <Paragraph>
        첫 카드는 사용자가 직접 선택할 수 있는 상태이고, 두 번째 카드는 시간 초과 뒤 자동 선택된 결과를 읽기 전용으로 보여줍니다.
      </Paragraph>
      <ChatPromptCard
        target={{
          type: 'prompt',
          title: 'UI 수정 흐름 선택',
          description: '단계형 prompt를 통해 시안과 후속 작업 범위를 순서대로 정합니다.',
          submitLabel: '흐름 전달',
          mode: 'queue',
          options: [
            {
              label: '기본안',
              value: 'default',
              description: 'steps가 없을 때를 위한 fallback 옵션',
            },
          ],
          steps: [
            {
              key: 'layout',
              title: '시안 선택',
              description: '아래 시안 중 하나를 골라 기본 레이아웃을 정합니다.',
              options: [
                {
                  label: 'A안',
                  value: 'option-a',
                  description: '상단 헤더 강조와 큰 썸네일 중심 레이아웃',
                  preview: {
                    type: 'image',
                    url: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=900&q=80',
                    alt: '대시보드 와이어프레임 샘플',
                    title: 'A안 시안',
                  },
                },
                {
                  label: 'B안',
                  value: 'option-b',
                  description: '중간 요약 카드와 탭 전환 중심 레이아웃',
                  preview: {
                    type: 'markdown',
                    title: 'B안 요약',
                    content: '## B안 핵심\n- 상단에 상태 요약 카드\n- 중간에 탭 3개\n- 하단 액션은 최소화',
                  },
                },
                {
                  label: 'C안',
                  value: 'option-c',
                  description: '하단 고정 액션과 짧은 설명 중심 레이아웃',
                  preview: {
                    type: 'html',
                    title: 'C안 레이아웃',
                    content:
                      '<section style="font-family:system-ui;padding:16px;background:linear-gradient(135deg,#0f172a,#1d4ed8);color:#fff;border-radius:16px"><h3 style="margin:0 0 8px">C안</h3><p style="margin:0 0 12px">하단 고정 액션과 짧은 설명 중심</p><div style="display:grid;gap:8px"><div style="height:64px;background:rgba(255,255,255,.14);border-radius:12px"></div><div style="height:64px;background:rgba(255,255,255,.14);border-radius:12px"></div></div></section>',
                  },
                },
              ],
              responseTemplate: '{{selection_label}} 시안을 기본 레이아웃으로 채택했습니다.',
            },
            {
              key: 'scope',
              title: '후속 작업 범위',
              description: '선택 시안 기준으로 어떤 후속 작업을 이어갈지 고릅니다.',
              multiple: true,
              optional: true,
              options: [
                {
                  label: '모바일 여백 정리',
                  value: 'mobile-spacing',
                  description: '모바일 화면 여백과 버튼 배치를 먼저 다듬습니다.',
                },
                {
                  label: '상태 요약 추가',
                  value: 'summary-card',
                  description: '상단 요약 카드와 상태 문구를 함께 추가합니다.',
                },
                {
                  label: '미리보기 문서 생성',
                  value: 'preview-doc',
                  description: '세션 리소스에 HTML/Markdown 시안을 같이 생성합니다.',
                },
              ],
              freeTextLabel: '세부 요청',
              freeTextPlaceholder: '예: 첫 단계는 시안만 정하고 구현은 다음 응답에서 이어가세요.',
            },
          ],
          responseTemplate: '사용자가 다음 단계형 흐름을 선택했습니다.\n{{step_summaries}}\n{{custom_text_block}}',
        }}
        onSubmit={async () => true}
      />
      <ChatPromptCard
        target={{
          type: 'prompt',
          title: '작업 결과안 자동 선택',
          description: '응답 시간이 지나 시스템이 기본안을 선택했습니다.',
          readOnly: true,
          selectedValues: ['result-b'],
          resolvedBy: 'timeout',
          resultText: 'B안이 기본 시안으로 채택되었고, 다음 응답부터 이 흐름을 기준으로 이어갑니다.',
          options: [
            {
              label: '결과안 A',
              value: 'result-a',
              description: '카드형 설명을 크게 보여주는 결과안',
              preview: {
                type: 'image',
                url: 'https://images.unsplash.com/photo-1558655146-9f40138edfeb?auto=format&fit=crop&w=900&q=80',
                alt: '결과안 A 샘플',
              },
            },
            {
              label: '결과안 B',
              value: 'result-b',
              description: '선택 요약과 다음 액션을 한 줄로 정리한 결과안',
              preview: {
                type: 'markdown',
                content: '### 결과안 B\n선택 요약과 다음 액션을 한 줄로 정리합니다.',
              },
            },
            {
              label: '결과안 C',
              value: 'result-c',
              description: '추가 제안 링크를 함께 노출하는 결과안',
              preview: {
                type: 'resource',
                url: '/docs/index.md',
                title: '문서 리소스 예시',
              },
            },
          ],
        }}
        onSubmit={async () => false}
        readOnly
      />
      <ChatPromptCard
        target={{
          type: 'prompt',
          title: '기타 요청만 전달된 상태',
          description: '선택 없이 추가 요청만 전달된 경우에는 모든 preview를 바로 확인할 수 있습니다.',
          readOnly: true,
          resolvedBy: 'user',
          resultText: '선택 없이 기타 요청만 전달되어 다음 응답에서 범위를 다시 좁히기로 했습니다.',
          options: [
            {
              label: '확인안 A',
              value: 'free-text-a',
              description: '레이아웃 비교 이미지를 먼저 보여주는 안',
              preview: {
                type: 'image',
                url: 'https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=900&q=80',
                alt: '확인안 A 샘플',
              },
            },
            {
              label: '확인안 B',
              value: 'free-text-b',
              description: '설명 문서를 바로 읽을 수 있는 안',
              preview: {
                type: 'markdown',
                content: '### 확인안 B\n선택 없이 요청이 들어오면 모든 preview를 펼쳐 놓고 비교합니다.',
              },
            },
            {
              label: '확인안 C',
              value: 'free-text-c',
              description: '외부 리소스 미리보기를 함께 여는 안',
              preview: {
                type: 'resource',
                url: '/docs/index.md',
                title: '문서 리소스 예시',
              },
            },
          ],
        }}
        onSubmit={async () => false}
        readOnly
      />
    </Flex>
  );
}
