import { Button, Flex, Space, Tag, Typography } from 'antd';
import type { SampleMeta } from '../../../widgets/core';
import { DataStatePanel } from '../DataStatePanel';
import './BaseSample.css';

const { Paragraph, Text } = Typography;

export const sampleMeta: SampleMeta = {
  id: 'data-state-panel-base',
  componentId: 'data-state-panel',
  title: 'Data State Panel',
  description:
    'loading, empty, error, ready 상태를 공통 카드로 표현하고 title, description, actions 슬롯과 compact 변형을 함께 제공하는 상태 패널입니다.',
  category: 'Common',
  kind: 'base',
  variantLabel: 'Base',
  order: 38,
  features: ['docs', 'component-sample'],
};

function ReadyContent() {
  return (
    <Flex vertical gap={10}>
      <Space wrap>
        <Tag color="green">ready</Tag>
        <Tag color="blue">12 records</Tag>
        <Tag color="gold">synced 2m ago</Tag>
      </Space>
      <Paragraph style={{ marginBottom: 0 }}>
        추천 결과가 준비되면 본문 슬롯에 표, 설명, 메타 정보를 바로 넣을 수 있습니다.
      </Paragraph>
    </Flex>
  );
}

export function Sample() {
  return (
    <Flex vertical gap={24}>
      <div>
        <Text strong>Default States</Text>
        <div className="data-state-panel-sample-grid">
          <DataStatePanel
            state="loading"
            title="추천 데이터를 정리하고 있습니다."
            description="패널 높이를 유지한 상태로 로딩 스켈레톤을 보여줍니다."
            actions={<Button>백그라운드 실행 보기</Button>}
          />
          <DataStatePanel
            state="empty"
            title="추천 결과가 아직 없습니다."
            description="필터를 완화하거나 수집 범위를 넓히면 추천 항목이 표시됩니다."
            actions={
              <>
                <Button type="primary">조건 다시 계산</Button>
                <Button>데이터 추가</Button>
              </>
            }
          />
          <DataStatePanel
            state="error"
            title="추천 결과를 가져오지 못했습니다."
            description="API 응답이 지연되었거나 권한 검증에 실패했습니다."
            actions={
              <>
                <Button type="primary" danger>
                  다시 시도
                </Button>
                <Button>로그 확인</Button>
              </>
            }
          />
          <DataStatePanel
            state="ready"
            title="추천 결과 12건"
            description="상태가 ready면 children 슬롯에 실제 데이터 내용을 배치합니다."
            actions={
              <>
                <Button type="primary">결과 적용</Button>
                <Button>CSV 다운로드</Button>
              </>
            }
          >
            <ReadyContent />
          </DataStatePanel>
        </div>
      </div>

      <div>
        <Text strong>Compact + Mobile Sample</Text>
        <div className="data-state-panel-sample-mobile">
          <div className="data-state-panel-sample-mobile__frame">
            <Flex vertical gap={12}>
              <DataStatePanel
                state="loading"
                compact
                title="모바일 패널 동기화 중"
                description="작은 카드에서도 같은 정보 구조를 유지합니다."
              />
              <DataStatePanel
                state="ready"
                compact
                title="오늘의 추천 3건"
                description="액션은 모바일에서 자동 줄바꿈됩니다."
                actions={
                  <>
                    <Button type="primary" size="small">
                      적용
                    </Button>
                    <Button size="small">상세</Button>
                  </>
                }
              >
                <Space direction="vertical" size={6}>
                  <Text strong>Data State Panel</Text>
                  <Text type="secondary">공통 상태 UI를 카드 단위로 재사용</Text>
                </Space>
              </DataStatePanel>
              <DataStatePanel
                state="empty"
                compact
                title="표시할 카드가 없습니다."
                description="모바일 컬럼이나 보조 패널에 그대로 넣을 수 있습니다."
                actions={<Button size="small">필터 초기화</Button>}
              />
            </Flex>
          </div>
        </div>
      </div>
    </Flex>
  );
}
