import { Card, Space, Typography } from 'antd';
import type { ChatConversationRequest } from '../../app/main/mainChatPanel/types';
import { ChatActivityChecklist } from '../../app/main/mainChatPanel/ChatActivityChecklist';
import {
  describeExecutorCommand,
} from '../../app/main/mainChatPanel/executorActivitySummary';

const { Paragraph, Text } = Typography;

export function ExecutorActivityCardSample({
  title,
  focus,
  command,
  description,
}: {
  title: string;
  focus: string;
  command: string | null;
  description: string;
}) {
  const descriptor = describeExecutorCommand(command, focus);

  return (
    <Card title={title} extra={<Text code>활동 로그 문구 샘플</Text>}>
      <Paragraph>{description}</Paragraph>
      <section className="app-chat-activity-checklist app-chat-activity-checklist--ticker" aria-label={`${title} 상태`}>
        <div className="app-chat-activity-checklist__header">
          <div className="app-chat-activity-checklist__title-group">
            <span className="app-chat-activity-checklist__title">작업관리자(gpt-5.4) 실행기</span>
          </div>
        </div>
        <div className="app-chat-activity-ticker" title={[descriptor.focusLabel, descriptor.message].filter(Boolean).join(' · ')}>
          <div className="app-chat-activity-ticker__section">
            <span className="app-chat-activity-ticker__label">대상 작업</span>
            <p className="app-chat-activity-ticker__body">{descriptor.focusLabel}</p>
          </div>
          <div className="app-chat-activity-ticker__section">
            <span className="app-chat-activity-ticker__label">현재 단계</span>
            <p className="app-chat-activity-ticker__body">{descriptor.kindLabel}</p>
          </div>
          <div className="app-chat-activity-ticker__section">
            <span className="app-chat-activity-ticker__label">실행 내용</span>
            <p className="app-chat-activity-ticker__body">{descriptor.detailLabel}</p>
          </div>
        </div>
      </section>
    </Card>
  );
}

export function ChecklistActivityCardSample({
  title,
  request,
  lines,
  statusLabel,
  description,
}: {
  title: string;
  request: ChatConversationRequest;
  lines: string[];
  statusLabel: string;
  description: string;
}) {
  return (
    <Card title={title} extra={<Text code>Plan 체크리스트 샘플</Text>}>
      <Space direction="vertical" size={12} style={{ width: '100%' }}>
        <Paragraph>{description}</Paragraph>
        <ChatActivityChecklist lines={lines} request={request} title="시스템 Plan 체크리스트" statusLabel={statusLabel} />
      </Space>
    </Card>
  );
}
