aiform_dev/frontend/src/components/form/StepDraftSelection.tsx

/**
 * StepDraftSelection.tsx
 * 
 * Выбор черновика с поддержкой разных статусов:
 * - draft_new: только описание
 * - draft_docs_progress: часть документов загружена  
 * - draft_docs_complete: все документы, ждём заявление
 * - draft_claim_ready: заявление готово
 * - awaiting_sms: ждёт SMS подтверждения
 * - legacy: старый формат (без documents_required)
 * 
 * @version 2.0
 * @date 2025-11-26
 */

import { useEffect, useState } from 'react';
import { Button, Card, List, Typography, Space, Empty, Popconfirm, message, Spin, Tag, Alert, Progress, Tooltip } from 'antd';
import { 
  FileTextOutlined, 
  DeleteOutlined, 
  PlusOutlined, 
  ReloadOutlined,
  ClockCircleOutlined,
  CheckCircleOutlined,
  LoadingOutlined,
  UploadOutlined,
  FileSearchOutlined,
  MobileOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons';

const { Title, Text, Paragraph } = Typography;

// Форматирование даты
const formatDate = (dateStr: string) => {
  try {
    const date = new Date(dateStr);
    const day = date.getDate();
    const month = date.toLocaleDateString('ru-RU', { month: 'long' });
    const year = date.getFullYear();
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    return `${day} ${month} ${year}, ${hours}:${minutes}`;
  } catch {
    return dateStr;
  }
};

// Относительное время
const getRelativeTime = (dateStr: string) => {
  try {
    const date = new Date(dateStr);
    const now = new Date();
    const diffMs = now.getTime() - date.getTime();
    const diffMins = Math.floor(diffMs / 60000);
    const diffHours = Math.floor(diffMins / 60);
    const diffDays = Math.floor(diffHours / 24);
    
    if (diffMins < 1) return 'только что';
    if (diffMins < 60) return `${diffMins} мин. назад`;
    if (diffHours < 24) return `${diffHours} ч. назад`;
    if (diffDays < 7) return `${diffDays} дн. назад`;
    return formatDate(dateStr);
  } catch {
    return dateStr;
  }
};

interface Draft {
  id: string;
  claim_id: string;
  session_token: string;
  status_code: string;
  channel: string;
  created_at: string;
  updated_at: string;
  problem_description?: string;
  wizard_plan: boolean;
  wizard_answers: boolean;
  has_documents: boolean;
  // Новые поля для нового флоу
  documents_total?: number;
  documents_uploaded?: number;
  documents_skipped?: number;
  wizard_ready?: boolean;
  claim_ready?: boolean;
  is_legacy?: boolean;  // Старый формат без documents_required
}

interface Props {
  phone?: string;
  session_id?: string;
  unified_id?: string;
  onSelectDraft: (claimId: string) => void;
  onNewClaim: () => void;
  onRestartDraft?: (claimId: string, description: string) => void;  // Для legacy черновиков
}

// === Конфиг статусов ===
const STATUS_CONFIG: Record<string, {
  color: string;
  icon: React.ReactNode;
  label: string;
  description: string;
  action: string;
}> = {
  draft: {
    color: 'default',
    icon: <FileTextOutlined />,
    label: 'Черновик',
    description: 'Начато заполнение',
    action: 'Продолжить',
  },
  draft_new: {
    color: 'blue',
    icon: <FileTextOutlined />,
    label: 'Новый',
    description: 'Только описание проблемы',
    action: 'Загрузить документы',
  },
  draft_docs_progress: {
    color: 'processing',
    icon: <UploadOutlined />,
    label: 'Загрузка документов',
    description: 'Часть документов загружена',
    action: 'Продолжить загрузку',
  },
  draft_docs_complete: {
    color: 'orange',
    icon: <LoadingOutlined />,
    label: 'Обработка',
    description: 'Формируется заявление...',
    action: 'Ожидайте',
  },
  draft_claim_ready: {
    color: 'green',
    icon: <CheckCircleOutlined />,
    label: 'Готово к отправке',
    description: 'Заявление готово',
    action: 'Просмотреть и отправить',
  },
  awaiting_sms: {
    color: 'volcano',
    icon: <MobileOutlined />,
    label: 'Ожидает подтверждения',
    description: 'Введите SMS код',
    action: 'Подтвердить',
  },
  in_work: {
    color: 'cyan',
    icon: <FileSearchOutlined />,
    label: 'В работе',
    description: 'Заявка на рассмотрении',
    action: 'Просмотреть',
  },
  legacy: {
    color: 'warning',
    icon: <ExclamationCircleOutlined />,
    label: 'Устаревший формат',
    description: 'Требуется обновление',
    action: 'Начать заново',
  },
};

export default function StepDraftSelection({
  phone,
  session_id,
  unified_id,
  onSelectDraft,
  onNewClaim,
  onRestartDraft,
}: Props) {
  const [drafts, setDrafts] = useState<Draft[]>([]);
  const [loading, setLoading] = useState(true);
  const [deletingId, setDeletingId] = useState<string | null>(null);

  const loadDrafts = async () => {
    try {
      setLoading(true);
      const params = new URLSearchParams();
      
      if (unified_id) {
        params.append('unified_id', unified_id);
        console.log('🔍 StepDraftSelection: загружаем черновики по unified_id:', unified_id);
      } else if (phone) {
        params.append('phone', phone);
        console.log('🔍 StepDraftSelection: загружаем черновики по phone:', phone);
      } else if (session_id) {
        params.append('session_id', session_id);
        console.log('🔍 StepDraftSelection: загружаем черновики по session_id:', session_id);
      }

      const url = `/api/v1/claims/drafts/list?${params.toString()}`;
      console.log('🔍 StepDraftSelection: запрос:', url);
      
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error('Не удалось загрузить черновики');
      }

      const data = await response.json();
      console.log('🔍 StepDraftSelection: ответ API:', data);
      
      // Определяем legacy черновики (без documents_required в payload)
      const processedDrafts = (data.drafts || []).map((draft: Draft) => {
        // Legacy только если:
        // 1. Статус 'draft' (старый формат) ИЛИ
        // 2. Нет новых статусов (draft_new, draft_docs_progress, draft_docs_complete, draft_claim_ready)
        // И есть wizard_plan (старый формат)
        const isNewFlowStatus = ['draft_new', 'draft_docs_progress', 'draft_docs_complete', 'draft_claim_ready'].includes(draft.status_code || '');
        const isLegacy = !isNewFlowStatus && draft.wizard_plan && draft.status_code === 'draft';
        return {
          ...draft,
          is_legacy: isLegacy,
        };
      });
      
      setDrafts(processedDrafts);
    } catch (error) {
      console.error('Ошибка загрузки черновиков:', error);
      message.error('Не удалось загрузить список черновиков');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadDrafts();
  }, [phone, session_id, unified_id]);

  const handleDelete = async (claimId: string) => {
    try {
      setDeletingId(claimId);
      const response = await fetch(`/api/v1/claims/drafts/${claimId}`, {
        method: 'DELETE',
      });

      if (!response.ok) {
        throw new Error('Не удалось удалить черновик');
      }

      message.success('Черновик удален');
      await loadDrafts();
    } catch (error) {
      console.error('Ошибка удаления черновика:', error);
      message.error('Не удалось удалить черновик');
    } finally {
      setDeletingId(null);
    }
  };

  // Получение конфига статуса
  const getStatusConfig = (draft: Draft) => {
    if (draft.is_legacy) {
      return STATUS_CONFIG.legacy;
    }
    return STATUS_CONFIG[draft.status_code] || STATUS_CONFIG.draft;
  };

  // Прогресс документов
  const getDocsProgress = (draft: Draft) => {
    if (!draft.documents_total) return null;
    const uploaded = draft.documents_uploaded || 0;
    const skipped = draft.documents_skipped || 0;
    const total = draft.documents_total;
    const percent = Math.round(((uploaded + skipped) / total) * 100);
    return { uploaded, skipped, total, percent };
  };

  // Обработка клика на черновик
  const handleDraftAction = (draft: Draft) => {
    const draftId = draft.claim_id || draft.id;
    
    if (draft.is_legacy && onRestartDraft) {
      // Legacy черновик - предлагаем начать заново с тем же описанием
      onRestartDraft(draftId, draft.problem_description || '');
    } else if (draft.status_code === 'draft_docs_complete') {
      // Всё ещё обрабатывается - показываем сообщение
      message.info('Заявление формируется. Пожалуйста, подождите.');
    } else {
      // Обычный переход
      onSelectDraft(draftId);
    }
  };

  // Кнопка действия
  const getActionButton = (draft: Draft) => {
    const config = getStatusConfig(draft);
    const isProcessing = draft.status_code === 'draft_docs_complete';
    
    return (
      <Button
        type={isProcessing ? 'default' : 'primary'}
        onClick={() => handleDraftAction(draft)}
        icon={config.icon}
        disabled={isProcessing}
        loading={isProcessing}
      >
        {config.action}
      </Button>
    );
  };

  return (
    <div style={{ maxWidth: 800, margin: '0 auto', padding: '24px 0' }}>
      <Card
        style={{
          borderRadius: 8,
          border: '1px solid #d9d9d9',
          background: '#fff',
        }}
      >
        <Space direction="vertical" size="large" style={{ width: '100%' }}>
          <div>
            <Title level={2} style={{ marginBottom: 8, color: '#1890ff' }}>
              📋 Ваши заявки
            </Title>
            <Paragraph type="secondary" style={{ fontSize: 14, marginBottom: 16 }}>
              Выберите заявку для продолжения или создайте новую.
            </Paragraph>
          </div>

          {loading ? (
            <div style={{ textAlign: 'center', padding: '40px 0' }}>
              <Spin size="large" />
            </div>
          ) : drafts.length === 0 ? (
            <Empty
              description="У вас нет незавершенных заявок"
              image={Empty.PRESENTED_IMAGE_SIMPLE}
            >
              <Button type="primary" icon={<PlusOutlined />} onClick={onNewClaim} size="large">
                Создать новую заявку
              </Button>
            </Empty>
          ) : (
            <>
              <List
                dataSource={drafts}
                renderItem={(draft) => {
                  const config = getStatusConfig(draft);
                  const docsProgress = getDocsProgress(draft);
                  
                  return (
                    <List.Item
                      style={{
                        padding: '16px',
                        border: `1px solid ${draft.is_legacy ? '#faad14' : '#d9d9d9'}`,
                        borderRadius: 8,
                        marginBottom: 12,
                        background: draft.is_legacy ? '#fffbe6' : '#fff',
                        overflow: 'hidden',
                      }}
                      actions={[
                        getActionButton(draft),
                        <Popconfirm
                          key="delete"
                          title="Удалить заявку?"
                          description="Это действие нельзя отменить"
                          onConfirm={() => handleDelete(draft.claim_id || draft.id)}
                          okText="Да, удалить"
                          cancelText="Отмена"
                        >
                          <Button
                            danger
                            icon={<DeleteOutlined />}
                            loading={deletingId === (draft.claim_id || draft.id)}
                            disabled={deletingId === (draft.claim_id || draft.id)}
                          >
                            Удалить
                          </Button>
                        </Popconfirm>,
                      ]}
                    >
                      <List.Item.Meta
                        avatar={
                          <div style={{ 
                            width: 40, 
                            height: 40, 
                            borderRadius: '50%', 
                            background: draft.is_legacy ? '#fff7e6' : '#f0f0f0',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            fontSize: 20,
                            color: draft.is_legacy ? '#faad14' : '#595959',
                            flexShrink: 0,
                          }}>
                            {config.icon}
                          </div>
                        }
                        title={
                          <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                            <Tag color={config.color} style={{ margin: 0 }}>{config.label}</Tag>
                          </div>
                        }
                        description={
                          <Space direction="vertical" size="small" style={{ width: '100%' }}>
                            {/* Описание проблемы */}
                            {draft.problem_description && (
                              <Text 
                                style={{ 
                                  fontSize: 14, 
                                  display: 'block',
                                  whiteSpace: 'nowrap',
                                  overflow: 'hidden',
                                  textOverflow: 'ellipsis',
                                  maxWidth: '100%',
                                }}
                                title={draft.problem_description}
                              >
                                {draft.problem_description.length > 60 
                                  ? draft.problem_description.substring(0, 60) + '...' 
                                  : draft.problem_description
                                }
                              </Text>
                            )}
                            
                            {/* Время обновления */}
                            <Space size="small">
                              <ClockCircleOutlined style={{ color: '#8c8c8c' }} />
                              <Tooltip title={formatDate(draft.updated_at)}>
                                <Text type="secondary" style={{ fontSize: 12 }}>
                                  {getRelativeTime(draft.updated_at)}
                                </Text>
                              </Tooltip>
                            </Space>
                            
                            {/* Legacy предупреждение */}
                            {draft.is_legacy && (
                              <Alert
                                message="Черновик в старом формате. Нажмите 'Начать заново'."
                                type="warning"
                                showIcon
                                style={{ fontSize: 12, padding: '4px 8px' }}
                              />
                            )}
                            
                            {/* Прогресс документов */}
                            {docsProgress && (
                              <div>
                                <Text type="secondary" style={{ fontSize: 12 }}>
                                  📎 Документы: {docsProgress.uploaded} из {docsProgress.total} загружено
                                  {docsProgress.skipped > 0 && ` (${docsProgress.skipped} пропущено)`}
                                </Text>
                                <Progress 
                                  percent={docsProgress.percent} 
                                  size="small" 
                                  showInfo={false}
                                  strokeColor="#52c41a"
                                />
                              </div>
                            )}
                            
                            {/* Старые теги прогресса (для обратной совместимости) */}
                            {!docsProgress && !draft.is_legacy && (
                              <Space size="small" wrap>
                                <Tag color={draft.problem_description ? 'green' : 'default'}>
                                  {draft.problem_description ? '✓ Описание' : 'Описание'}
                                </Tag>
                                <Tag color={draft.wizard_plan ? 'green' : 'default'}>
                                  {draft.wizard_plan ? '✓ План' : 'План'}
                                </Tag>
                                <Tag color={draft.has_documents ? 'green' : 'default'}>
                                  {draft.has_documents ? '✓ Документы' : 'Документы'}
                                </Tag>
                              </Space>
                            )}
                            
                            {/* Описание статуса */}
                            <Text type="secondary" style={{ fontSize: 12 }}>
                              {config.description}
                            </Text>
                          </Space>
                        }
                      />
                    </List.Item>
                  );
                }}
              />

              <div style={{ textAlign: 'center', marginTop: 24 }}>
                <Button
                  type="dashed"
                  icon={<PlusOutlined />}
                  onClick={onNewClaim}
                  size="large"
                  style={{ width: '100%' }}
                >
                  Создать новую заявку
                </Button>
              </div>

              <div style={{ textAlign: 'center' }}>
                <Button
                  type="link"
                  icon={<ReloadOutlined />}
                  onClick={loadDrafts}
                  loading={loading}
                >
                  Обновить список
                </Button>
              </div>
            </>
          )}
        </Space>
      </Card>
    </div>
  );
}