aiform_prod/frontend/src/components/form/Step3Payment.tsx

import { useState } from 'react';
import { Form, Input, Button, Select, message, Divider } from 'antd';
import { QrcodeOutlined } from '@ant-design/icons';

const { Option } = Select;

interface Props {
  formData: any;
  updateFormData: (data: any) => void;
  onPrev: () => void;
  onSubmit: () => void;
  isPhoneVerified: boolean;
  setIsPhoneVerified: (verified: boolean) => void;
  addDebugEvent?: (type: string, status: string, message: string, data?: any) => void;
}

export default function Step3Payment({ 
  formData, 
  updateFormData, 
  onPrev, 
  onSubmit,
  isPhoneVerified,
  setIsPhoneVerified,
  addDebugEvent
}: Props) {
  const [form] = Form.useForm();
  const [codeSent] = useState(false);
  const [loading] = useState(false);
  const [verifyLoading] = useState(false);
  const [submitting, setSubmitting] = useState(false);

  // Верификация телефона перенесена на шаг 1

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      updateFormData(values);
      
      setSubmitting(true);
      await onSubmit();
    } catch (error) {
      message.error('Заполните все обязательные поля');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <Form
      form={form}
      layout="vertical"
      initialValues={formData}
      style={{ marginTop: 24 }}
    >
      {/* Кнопка Назад вверху */}
      <div style={{ marginBottom: 16 }}>
        <Button onClick={onPrev} size="large">
          ← Назад
        </Button>
      </div>

      {/* Блок верификации телефона перенесен на шаг 1 */}
      {isPhoneVerified && (
        <div style={{ 
          padding: 12, 
          background: '#f0f9ff', 
          borderRadius: 8,
          border: '1px solid #91d5ff',
          marginBottom: 24 
        }}>
          ✅ Телефон подтвержден
        </div>
      )}

      {/* Блок выплаты (показывается только после верификации) */}
      {isPhoneVerified && (
        <>
          <Divider />
          
          <h3>💳 Способ получения выплаты</h3>

          <Form.Item
            label="Способ выплаты"
            name="paymentMethod"
            initialValue="sbp"
          >
            <div style={{ 
              padding: '12px', 
              background: '#f0f9ff', 
              borderRadius: '8px', 
              border: '1px solid #91d5ff' 
            }}>
              <QrcodeOutlined style={{ fontSize: 20, color: '#1890ff', marginRight: 8 }} />
              <strong>СБП (Система быстрых платежей)</strong>
              <p style={{ margin: '8px 0 0 0', color: '#666', fontSize: 13 }}>
                Выплата поступит на ваш счет в течение нескольких минут
              </p>
            </div>
          </Form.Item>

          <Form.Item
            label="Выберите ваш банк"
            name="bankName"
            rules={[{ required: true, message: 'Выберите банк для получения выплаты' }]}
          >
            <Select 
              placeholder="Выберите банк"
              size="large"
              showSearch
              filterOption={(input: string, option: any) => {
                const children = option?.children;
                if (typeof children === 'string') {
                  return children.toLowerCase().includes(input.toLowerCase());
                }
                return false;
              }}
            >
              <Option value="sberbank">🟢 Сбербанк</Option>
              <Option value="tinkoff">🟡 Тинькофф</Option>
              <Option value="vtb">🔵 ВТБ</Option>
              <Option value="alfabank">🔴 Альфа-Банк</Option>
              <Option value="raiffeisen">🟡 Райффайзенбанк</Option>
              <Option value="gazprombank">🔵 Газпромбанк</Option>
              <Option value="rosbank">🔴 Росбанк</Option>
              <Option value="sovcombank">🟢 Совкомбанк</Option>
              <Option value="otkritie">🔵 Открытие</Option>
              <Option value="other">💳 Другой банк</Option>
            </Select>
          </Form.Item>

          <Form.Item>
            <div style={{ display: 'flex', gap: 8, marginTop: 32 }}>
              <Button onClick={onPrev} size="large">Назад</Button>
              <Button
                type="primary"
                onClick={handleSubmit}
                loading={submitting}
                style={{ flex: 1 }}
                size="large"
              >
                Отправить заявку
              </Button>
            </div>
          </Form.Item>

          {/* 🔧 Технические кнопки для разработки */}
          <div style={{ 
            marginTop: 24, 
            padding: 16, 
            background: '#f0f0f0', 
            borderRadius: 8,
            border: '2px dashed #999'
          }}>
            <div style={{ marginBottom: 8, fontSize: 12, color: '#666', fontWeight: 'bold' }}>
              🔧 DEV MODE - Быстрая навигация (без валидации)
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <Button 
                onClick={onPrev} 
                size="small"
              >
                ← Назад (Step 2)
              </Button>
              <Button 
                type="dashed"
                onClick={() => {
                  // Пропускаем валидацию телефона
                  setIsPhoneVerified(true);
                  const devData = {
                    fullName: 'Тест Тестов',
                    email: 'test@test.ru',
                    phone: '+79991234567',
                    paymentMethod: 'sbp',
                    bankName: 'sberbank',
                  };
                  updateFormData(devData);
                  message.success('DEV: Телефон автоматически подтверждён');
                }}
                size="small"
                style={{ flex: 1 }}
              >
                ✅ Автоподтверждение телефона [dev]
              </Button>
              <Button 
                type="primary"
                onClick={() => {
                  // Автоматически отправляем заявку
                  setIsPhoneVerified(true);
                  const devData = {
                    fullName: 'Тест Тестов',
                    email: 'test@test.ru',
                    phone: '+79991234567',
                    paymentMethod: 'sbp',
                    bankName: 'sberbank',
                  };
                  updateFormData(devData);
                  onSubmit();
                }}
                size="small"
              >
                🚀 Отправить [пропустить]
              </Button>
            </div>
          </div>
        </>
      )}
    </Form>
  );
}