import {
  CloseOutlined,
  CopyOutlined,
  DownloadOutlined,
  FullscreenExitOutlined,
  FullscreenOutlined,
} from '@ant-design/icons';
import { App, Button, Card, Flex, Modal, Space, Switch, Typography } from 'antd';
import { useState } from 'react';
import type { SampleMeta } from '../../../widgets/core';
import {
  type EvidenceAttachmentItem,
  EvidenceAttachmentPreviewBody,
  EvidenceAttachmentStrip,
} from '../index';

const { Paragraph, Text } = Typography;

export const sampleMeta: SampleMeta = {
  id: 'evidence-attachment-strip-ui-showcase',
  componentId: 'evidence-attachment-strip-ui',
  title: 'Evidence Attachment Strip Showcase',
  description: '지원 타입별 카드와 모바일 compact 배치를 함께 확인하는 샘플입니다.',
  category: 'Components',
  kind: 'feature',
  variantLabel: 'Showcase',
  order: 59,
  features: ['docs', 'component-sample'],
};

const showcaseAttachments: EvidenceAttachmentItem[] = [
  {
    key: 'image',
    kind: 'image',
    title: '화면 캡처',
    description: '스크린샷 산출물',
    linkUrl: '/docs/assets/worklogs/2026-04-09/widget-gps-sample.png',
    value: '/docs/assets/worklogs/2026-04-09/widget-gps-sample.png',
  },
  {
    key: 'markdown',
    kind: 'markdown',
    title: '작업일지',
    description: '마크다운 문서',
    value: '# Summary\n- Preview strip 적용\n- 공통 액션 정리',
  },
  {
    key: 'code',
    kind: 'code',
    title: 'patch.diff',
    description: '코드 변경',
    language: 'diff',
    value: '- old card grid\n+ EvidenceAttachmentStrip',
  },
  {
    key: 'text',
    kind: 'text',
    title: 'memo.txt',
    description: '단순 텍스트',
    value: 'Plan/Board 공통 UI 후보 검토 메모',
  },
  {
    key: 'json',
    kind: 'json',
    title: 'meta.json',
    description: '메타 정보',
    value: '{\n  "kind": "json",\n  "count": 4\n}',
  },
  {
    key: 'video',
    kind: 'video',
    title: 'demo.mp4',
    description: '비디오 산출물',
    linkUrl: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
    value: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
  },
  {
    key: 'audio',
    kind: 'audio',
    title: 'voice.ogg',
    description: '오디오 산출물',
    linkUrl: 'https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3',
    value: 'https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3',
  },
  {
    key: 'pdf',
    kind: 'pdf',
    title: 'sample.pdf',
    description: 'PDF 문서',
    linkUrl: 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf',
    value: 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf',
  },
  {
    key: 'empty',
    kind: 'empty',
    title: 'unsupported.bin',
    description: '지원하지 않는 형식',
    value: '미리보기를 지원하지 않는 형식입니다.',
  },
];

export function Sample() {
  const { message } = App.useApp();
  const [compact, setCompact] = useState(false);
  const [selectedAttachment, setSelectedAttachment] = useState<EvidenceAttachmentItem | null>(null);
  const [isPreviewExpanded, setIsPreviewExpanded] = useState(false);

  return (
    <Flex vertical gap={16}>
      <Card
        title="Evidence Attachment Strip UI"
        extra={
          <Space align="center">
            <Text type="secondary">Compact</Text>
            <Switch checked={compact} onChange={setCompact} />
          </Space>
        }
      >
        <Paragraph>
          Plan/Board 상세 화면에서 반복되는 산출물 카드 그리드를 공통 컴포넌트로 치환하는 예시입니다.
        </Paragraph>
        <EvidenceAttachmentStrip
          title="지원 타입 전체"
          description="이미지, markdown, preview, 코드, 텍스트, json, video, audio, pdf, empty"
          attachments={showcaseAttachments}
          compact={compact}
          onPreview={(attachment) => {
            setSelectedAttachment(attachment);
          }}
          onCopy={async (attachment) => {
            await navigator.clipboard.writeText(attachment.copyValue ?? attachment.value);
            message.success(`${String(attachment.title)} 복사`);
          }}
        />
      </Card>

      <Modal
        open={Boolean(selectedAttachment)}
        title={selectedAttachment?.title ?? 'Attachment Preview'}
        footer={null}
        width={isPreviewExpanded ? 'calc(100vw - 32px)' : 1080}
        onCancel={() => {
          setSelectedAttachment(null);
          setIsPreviewExpanded(false);
        }}
      >
        {selectedAttachment ? (
          <Flex vertical gap={12}>
            <Flex justify="flex-end" gap={8}>
              <Button
                aria-label="복사"
                icon={<CopyOutlined />}
                onClick={async () => {
                  await navigator.clipboard.writeText(selectedAttachment.copyValue ?? selectedAttachment.value);
                  message.success(`${String(selectedAttachment.title)} 복사`);
                }}
              />
              {selectedAttachment.linkUrl ? (
                <Button
                  aria-label="다운로드"
                  icon={<DownloadOutlined />}
                  href={selectedAttachment.linkUrl}
                  target={selectedAttachment.kind === 'preview' ? '_blank' : undefined}
                  rel={selectedAttachment.kind === 'preview' ? 'noreferrer' : undefined}
                  download={selectedAttachment.kind === 'preview' ? undefined : true}
                />
              ) : null}
              <Button
                aria-label={isPreviewExpanded ? '최대화 해제' : '최대화'}
                icon={isPreviewExpanded ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
                onClick={() => {
                  setIsPreviewExpanded((previous) => !previous);
                }}
              />
              <Button
                aria-label="닫기"
                icon={<CloseOutlined />}
                onClick={() => {
                  setSelectedAttachment(null);
                  setIsPreviewExpanded(false);
                }}
              />
            </Flex>
            <EvidenceAttachmentPreviewBody attachment={selectedAttachment} />
          </Flex>
        ) : null}
      </Modal>
    </Flex>
  );
}
