aiform_prod/frontend/src/pages/ClaimForm.tsx

import { useState, useMemo, useCallback, useEffect } from 'react';
import { Steps, Card, message, Row, Col } from 'antd';
import Step1Phone from '../components/form/Step1Phone';
import StepDescription from '../components/form/StepDescription';
import Step1Policy from '../components/form/Step1Policy';
import StepDraftSelection from '../components/form/StepDraftSelection';
import StepWizardPlan from '../components/form/StepWizardPlan';
import Step2EventType from '../components/form/Step2EventType';
import StepDocumentUpload from '../components/form/StepDocumentUpload';
import Step3Payment from '../components/form/Step3Payment';
import DebugPanel from '../components/DebugPanel';
import { getDocumentsForEventType } from '../constants/documentConfigs';
import './ClaimForm.css';

// Используем относительные пути - Vite proxy перенаправит на backend

const { Step } = Steps;

interface FormData {
  // Шаг 1: Phone
  phone?: string;
  contact_id?: string;
  unified_id?: string;  // ✅ Unified ID пользователя из PostgreSQL
  is_new_contact?: boolean;
  smsCode?: string;
  clientIp?: string;
  smsDebugCode?: string;
  
  // Шаг 2: Policy
  voucher: string;
  claim_id?: string;
  session_id?: string;
  project_id?: string;          // ✅ ID проекта в vTiger (полис)
  is_new_project?: boolean;     // ✅ Флаг: создан новый проект
  problemDescription?: string;
  wizardPlan?: any;
  wizardPlanStatus?: 'pending' | 'ready' | 'answered';
  wizardAnswers?: Record<string, any>;
  wizardPrefill?: Record<string, any>;
  wizardPrefillArray?: Array<{ name: string; value: any }>;
  wizardCoverageReport?: any;
  wizardUploads?: Record<string, any>;
  wizardSkippedDocuments?: string[];
  
  // Шаг 3: Event Type
  eventType?: string;
  ticket_id?: string;           // ✅ ID заявки в vTiger (HelpDesk)
  ticket_number?: string;       // ✅ Номер заявки (HD001234)
  
  // Шаги 4+: Documents
  documents?: Record<string, {
    uploaded: boolean;
    data: any;
    file_type: string;
    skipped?: boolean;
  }>;
  
  // Последний шаг: Payment
  fullName?: string;
  email?: string;
  paymentMethod?: string;
  bankName?: string;
  cardNumber?: string;
  accountNumber?: string;
}

export default function ClaimForm() {
  // ✅ claim_id будет создан n8n в Step1Phone после SMS верификации
  // Не генерируем его локально!

  // Генерируем session_id и сохраняем в sessionStorage
  const [sessionId] = useState(() => {
    let sid = sessionStorage.getItem('session_id');
    if (!sid) {
      sid = `sess-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
      sessionStorage.setItem('session_id', sid);
    }
    return sid;
  });

  const [currentStep, setCurrentStep] = useState(0);
  const [formData, setFormData] = useState<FormData>({
    voucher: '',
    claim_id: undefined,  // ✅ Будет заполнен n8n в Step1Phone
    session_id: sessionId,
    paymentMethod: 'sbp',
  });
  const [isPhoneVerified, setIsPhoneVerified] = useState(false);
  const [debugEvents, setDebugEvents] = useState<any[]>([]);
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [showDraftSelection, setShowDraftSelection] = useState(false);
  const [selectedDraftId, setSelectedDraftId] = useState<string | null>(null);
  const [hasDrafts, setHasDrafts] = useState(false);

  useEffect(() => {
    // 🔥 VERSION CHECK: Если видишь это в консоли - фронт обновился!
    console.log('🔥 ClaimForm v2.0 - claim_id НЕ генерируется на фронте!');
  }, []);

  // Получаем IP клиента один раз при монтировании
  useEffect(() => {
    const fetchClientIp = async () => {
      try {
        const response = await fetch('/api/v1/utils/client-ip');
        if (!response.ok) return;
        const data = await response.json();
        if (data?.ip) {
          setFormData((prev) => ({ ...prev, clientIp: data.ip }));
        }
      } catch {
        // Тихо игнорируем, IP всегда можно взять на бэке из request
      }
    };
    fetchClientIp();
  }, []);

  // Динамически определяем список шагов на основе выбранного eventType
  const documentConfigs = formData.eventType ? getDocumentsForEventType(formData.eventType) : [];
  const totalDocumentSteps = documentConfigs.length;

  const addDebugEvent = (type: string, status: string, message: string, data?: any) => {
    const event = {
      timestamp: new Date().toLocaleTimeString('ru-RU'),
      type,
      status,
      message,
      data: {
        ...data,
        claim_id: formData.claim_id  // ✅ Используем claim_id из formData (от n8n)
      }
    };
    setDebugEvents(prev => [event, ...prev]);
  };

  // ✅ claim_id будет залогирован в Step1Phone после получения от n8n

  const updateFormData = useCallback((data: Partial<FormData>) => {
    setFormData((prev) => ({ ...prev, ...data }));
  }, []);

  const nextStep = useCallback(() => {
    console.log('⏩ nextStep called');
    setCurrentStep((prev) => {
      console.log('📍 Current step:', prev, '→ Next:', prev + 1);
      return prev + 1;
    });
  }, []);

  const prevStep = useCallback(() => {
    console.log('⏪ prevStep called');
    setCurrentStep((prev) => {
      console.log('📍 Current step:', prev, '→ Prev:', prev - 1);
      return prev - 1;
    });
  }, []);

  // Загрузка черновика
  const loadDraft = useCallback(async (claimId: string) => {
    try {
      const response = await fetch(`/api/v1/claims/drafts/${claimId}`);
      if (!response.ok) {
        throw new Error('Не удалось загрузить черновик');
      }

      const data = await response.json();
      const claim = data.claim;
      const payload = claim.payload || {};

      // Восстанавливаем данные формы из черновика
      updateFormData({
        claim_id: claim.claim_id,
        session_id: claim.session_token || sessionId,
        phone: payload.phone || formData.phone,
        email: payload.email || formData.email,
        problemDescription: payload.problem_description || formData.problemDescription,
        wizardPlan: payload.wizard_plan || formData.wizardPlan,
        wizardAnswers: payload.answers || formData.wizardAnswers,
        wizardPrefill: payload.answers_prefill ? 
          payload.answers_prefill.reduce((acc: any, item: any) => {
            acc[item.name] = item.value;
            return acc;
          }, {}) : formData.wizardPrefill,
        wizardPrefillArray: payload.answers_prefill || formData.wizardPrefillArray,
        wizardCoverageReport: payload.coverage_report || formData.wizardCoverageReport,
        wizardUploads: {
          documents: payload.documents_meta ? {} : formData.wizardUploads?.documents,
          custom: formData.wizardUploads?.custom || [],
        },
        wizardSkippedDocuments: payload.wizard_skipped_documents || formData.wizardSkippedDocuments,
        eventType: payload.event_type || formData.eventType,
        contact_id: payload.contact_id || formData.contact_id,
        project_id: payload.project_id || formData.project_id,
      });

      setSelectedDraftId(claimId);
      setShowDraftSelection(false);
      
      // Переходим к шагу с описанием, если оно есть, иначе к шагу с рекомендациями
      if (payload.problem_description) {
        // Если есть описание, переходим к шагу с рекомендациями
        setCurrentStep(2); // StepWizardPlan
      } else {
        // Если нет описания, переходим к шагу с описанием
        setCurrentStep(1); // StepDescription
      }
    } catch (error) {
      console.error('Ошибка загрузки черновика:', error);
      message.error('Не удалось загрузить черновик');
    }
  }, [formData, sessionId, updateFormData]);

  // Обработчик выбора черновика
  const handleSelectDraft = useCallback((claimId: string) => {
    loadDraft(claimId);
  }, [loadDraft]);

  // Проверка наличия черновиков
  const checkDrafts = useCallback(async (unified_id?: string, phone?: string, sessionId?: string) => {
    try {
      const params = new URLSearchParams();
      // Приоритет: unified_id > phone > session_id
      if (unified_id) {
        params.append('unified_id', unified_id);
      } else if (phone) {
        params.append('phone', phone);
      } else if (sessionId) {
        params.append('session_id', sessionId);
      } else {
        return false;
      }

      const url = `/api/v1/claims/drafts/list?${params.toString()}`;
      console.log('🔍 Запрос черновиков:', url);
      
      const response = await fetch(url);
      if (!response.ok) {
        console.error('❌ Ошибка запроса черновиков:', response.status, response.statusText);
        return false;
      }

      const data = await response.json();
      console.log('🔍 Ответ API черновиков:', data);
      const count = data.count || 0;
      console.log('🔍 Количество черновиков:', count);
      
      setHasDrafts(count > 0);
      setShowDraftSelection(count > 0);
      return count > 0;
    } catch (error) {
      console.error('Ошибка проверки черновиков:', error);
      return false;
    }
  }, []);

  // Обработчик создания новой заявки
  const handleNewClaim = useCallback(() => {
    setShowDraftSelection(false);
    setSelectedDraftId(null);
    // Очищаем данные формы, кроме телефона и session_id
    updateFormData({
      claim_id: undefined,
      problemDescription: undefined,
      wizardPlan: undefined,
      wizardAnswers: undefined,
      wizardPrefill: undefined,
      wizardPrefillArray: undefined,
      wizardCoverageReport: undefined,
      wizardUploads: undefined,
      wizardSkippedDocuments: undefined,
      eventType: undefined,
    });
    // Переходим к шагу с описанием
    setCurrentStep(1);
  }, [updateFormData]);

  const handleSubmit = useCallback(async () => {
    try {
      addDebugEvent('form', 'info', '📤 Отправка заявки в n8n через backend');

      const payload = {
        stage: 'final',
        form_id: 'ticket_form',
        session_id: formData.session_id ?? sessionId,
        client_ip: formData.clientIp,
        sms_code: formData.smsCode,

        // Базовые идентификаторы
        claim_id: formData.claim_id,
        contact_id: formData.contact_id,
        project_id: formData.project_id,
        ticket_id: formData.ticket_id,
        is_new_contact: formData.is_new_contact,
        is_new_project: formData.is_new_project,

        // Основные поля формы (для удобства в n8n)
        voucher: formData.voucher,
        phone: formData.phone,
        email: formData.email,
        event_type: formData.eventType,
        payment_method: formData.paymentMethod,
        bank_name: formData.bankName,
        card_number: formData.cardNumber,
        account_number: formData.accountNumber,

        // Старый блок документов + новые загрузки визарда (пока как есть)
        documents: formData.documents || {},
        wizard_uploads: formData.wizardUploads || {},

        // Всё состояние формы целиком — на всякий случай
        form: formData,
      };

      const response = await fetch('/api/v1/claims/create', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(payload),
      });

      const text = await response.text();
      let parsed: any = null;
      try {
        parsed = text ? JSON.parse(text) : null;
      } catch {
        parsed = null;
      }

      if (!response.ok) {
        message.error('Ошибка при создании заявки (n8n)');
        addDebugEvent('form', 'error', '❌ Ошибка создания заявки в n8n', {
          status: response.status,
          body: text,
        });
        return;
      }

      addDebugEvent('form', 'success', '✅ Финальный webhook в n8n отработал', {
        response: parsed ?? text,
      });
      // Помечаем, что заявка отправлена, и показываем заглушку.
      setIsSubmitted(true);
      message.success('Данные отправлены, заявка принята в обработку.');
    } catch (error) {
      message.error('Ошибка соединения с сервером');
      addDebugEvent('form', 'error', '❌ Ошибка соединения', { error: String(error) });
      console.error(error);
    }
  }, [formData, sessionId, addDebugEvent]);

  // Динамически генерируем шаги на основе выбранного eventType
  const steps = useMemo(() => {
    const stepsArray: any[] = [];

    // Шаг 0: Выбор черновика (показывается только если есть черновики и телефон верифицирован)
    if (showDraftSelection && isPhoneVerified && !selectedDraftId && hasDrafts) {
      stepsArray.push({
        title: 'Черновики',
        description: 'Выбор заявки',
        content: (
          <StepDraftSelection
            phone={formData.phone || ''}
            session_id={sessionId}
            onSelectDraft={handleSelectDraft}
            onNewClaim={handleNewClaim}
          />
        ),
      });
    }

    // Шаг 1: Phone (телефон + SMS верификация)
    stepsArray.push({
      title: 'Телефон',
      description: 'Подтверждение по SMS',
      content: (
        <Step1Phone
          formData={{ ...formData, session_id: sessionId }}  // ✅ claim_id будет создан n8n
          updateFormData={(data: any) => {
            updateFormData(data);
            // После верификации телефона проверяем черновики
            if (data.phone && isPhoneVerified && !selectedDraftId && !showDraftSelection) {
              setShowDraftSelection(true);
            }
          }}
          onNext={async (unified_id?: string) => {
            console.log('🔥 onNext вызван с unified_id:', unified_id);
            console.log('🔥 formData.unified_id:', formData.unified_id);
            console.log('🔥 isPhoneVerified:', isPhoneVerified);
            console.log('🔥 selectedDraftId:', selectedDraftId);
            
            // После верификации проверяем черновики
            // Используем unified_id из параметра (если передан) или из formData
            const finalUnifiedId = unified_id || formData.unified_id;
            console.log('🔥 finalUnifiedId:', finalUnifiedId);
            
            if (formData.phone && isPhoneVerified && !selectedDraftId) {
              console.log('🔍 Проверка черновиков с unified_id:', finalUnifiedId, 'phone:', formData.phone);
              const hasDraftsResult = await checkDrafts(finalUnifiedId, formData.phone, sessionId);
              console.log('🔍 Результат checkDrafts:', hasDraftsResult);
              if (hasDraftsResult) {
                console.log('✅ Есть черновики, переходим к шагу 0');
                setCurrentStep(0); // Переходим к шагу выбора черновика
              } else {
                console.log('❌ Нет черновиков, идем дальше');
                nextStep(); // Нет черновиков, идем дальше
              }
            } else {
              console.log('⚠️ Условие не выполнено, идем дальше');
              nextStep();
            }
          }}
          onPrev={prevStep}
          isPhoneVerified={isPhoneVerified}
          setIsPhoneVerified={async (verified: boolean) => {
            setIsPhoneVerified(verified);
            // После верификации проверяем черновики
            if (verified && formData.phone && !selectedDraftId) {
              const hasDraftsResult = await checkDrafts(formData.unified_id, formData.phone, sessionId);
              if (hasDraftsResult) {
                setCurrentStep(0); // Переходим к шагу выбора черновика
              }
            }
          }}
          addDebugEvent={addDebugEvent}
        />
      ),
    });

    // Шаг 2: свободное описание
    stepsArray.push({
      title: 'Описание',
      description: 'Что случилось?',
      content: (
        <StepDescription
          formData={formData}
          updateFormData={updateFormData}
          onPrev={prevStep}
          onNext={nextStep}
        />
      ),
    });

    // Шаг 3: AI Рекомендации
    stepsArray.push({
      title: 'Рекомендации',
      description: 'AI ассистент',
      content: (
        <StepWizardPlan
          formData={formData}
          updateFormData={updateFormData}
          onPrev={prevStep}
          onNext={nextStep}
          addDebugEvent={addDebugEvent}
        />
      ),
    });

    // Шаг 3: Policy (всегда)
    stepsArray.push({
      title: 'Проверка полиса',
      description: 'Полис ERV',
      content: (
        <Step1Policy 
          formData={{ ...formData, session_id: sessionId }}  // ✅ claim_id уже в formData от n8n
          updateFormData={updateFormData} 
          onNext={nextStep}
          addDebugEvent={addDebugEvent}
        />
      ),
    });

    // Шаг 4: Event Type Selection (всегда)
    stepsArray.push({
      title: 'Тип события',
      description: 'Выбор случая',
      content: (
        <Step2EventType
          formData={formData}
          updateFormData={updateFormData}
          onNext={nextStep}
          onPrev={prevStep}
          addDebugEvent={addDebugEvent}
        />
      ),
    });

    // Шаги 3+: Document Upload (динамически, если выбран eventType)
    if (formData.eventType && documentConfigs.length > 0) {
      documentConfigs.forEach((docConfig, index) => {
        stepsArray.push({
          title: `Документ ${index + 1}`,
          description: docConfig.name,
          content: (
            <StepDocumentUpload
              key={`doc-${docConfig.file_type}`}
              documentConfig={docConfig}
              formData={formData}
              updateFormData={updateFormData}
              onNext={nextStep}
              onPrev={prevStep}
              isLastDocument={index === documentConfigs.length - 1}
              currentDocNumber={index + 1}
              totalDocs={documentConfigs.length}
            />
          ),
        });
      });
    }

    // Последний шаг: Payment (всегда)
    stepsArray.push({
      title: 'Оплата',
      description: 'Контакты и выплата',
      content: (
        <Step3Payment
          formData={formData}  // ✅ claim_id уже в formData
          updateFormData={updateFormData}
          onPrev={prevStep}
          onSubmit={handleSubmit}
          isPhoneVerified={isPhoneVerified}
          setIsPhoneVerified={setIsPhoneVerified}
          addDebugEvent={addDebugEvent}
        />
      ),
    });

    return stepsArray;
  }, [formData, documentConfigs, isPhoneVerified, sessionId, nextStep, prevStep, updateFormData, handleSubmit, setIsPhoneVerified, addDebugEvent, showDraftSelection, selectedDraftId, hasDrafts, handleSelectDraft, handleNewClaim, checkDrafts]);

  const handleReset = () => {
    setIsSubmitted(false);
    setFormData({
      voucher: '',
      claim_id: undefined,  // ✅ Очищаем для новой заявки
      session_id: sessionId,
      paymentMethod: 'sbp',
    });
    setCurrentStep(0);
    setIsPhoneVerified(false);
    message.info('Форма сброшена');
    addDebugEvent('system', 'info', '🔄 Форма сброшена');
  };

  return (
    <div className="claim-form-container" style={{ padding: '20px', background: '#ffffff' }}>
      <Row gutter={16}>
        {/* Левая часть - Форма */}
        <Col xs={24} lg={14}>
          <Card 
            title="Подать заявку на выплату" 
            className="claim-form-card"
            extra={
              !isSubmitted && currentStep > 0 && (
                <button 
                  onClick={handleReset}
                  style={{
                    padding: '4px 12px',
                    background: '#fff',
                    border: '1px solid #d9d9d9',
                    borderRadius: '4px',
                    cursor: 'pointer',
                    fontSize: '14px'
                  }}
                >
                  🔄 Начать заново
                </button>
              )
            }
          >
            {isSubmitted ? (
              <div style={{ padding: '40px 0', textAlign: 'center' }}>
                <h3 style={{ fontSize: 22, marginBottom: 8 }}>Мы изучаем ваш вопрос и документы</h3>
                <p style={{ color: '#666666', maxWidth: 480, margin: '0 auto 24px' }}>
                  Заявка отправлена в работу. Юристы проверят информацию и свяжутся с вами по указанным контактам.
                </p>
              </div>
            ) : (
              <>
                <Steps current={currentStep} className="steps">
                  {steps.map((item, index) => (
                    <Step 
                      key={`step-${index}`} 
                      title={item.title} 
                      description={item.description}
                    />
                  ))}
                </Steps>
                <div className="steps-content">{steps[currentStep].content}</div>
              </>
            )}
          </Card>
        </Col>

        {/* Правая часть - Debug консоль */}
        <Col xs={24} lg={10}>
          <DebugPanel events={debugEvents} formData={formData} />
        </Col>
      </Row>
    </div>
  );
}