import { Form, Input, Button, Typography, message } from 'antd';
import { useEffect, useState } from 'react';

const { TextArea } = Input;
const { Paragraph } = Typography;

interface Props {
  formData: any;
  updateFormData: (data: any) => void;
  onPrev: () => void;
  onNext: () => void;
}

export default function StepDescription({
  formData,
  updateFormData,
  onPrev,
  onNext,
}: Props) {
  const [form] = Form.useForm();
  const [submitting, setSubmitting] = useState(false);

  useEffect(() => {
    form.setFieldsValue({
      problemDescription: formData.problemDescription ?? '',
    });
  }, [form, formData.problemDescription]);

  const handleContinue = async () => {
    try {
      const values = await form.validateFields();
      
      if (!formData.session_id) {
        message.error('Не найден session_id. Попробуйте обновить страницу.');
        return;
      }

      setSubmitting(true);

      const response = await fetch('/api/v1/claims/description', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          session_id: formData.session_id,
          claim_id: formData.claim_id,
          phone: formData.phone,
          email: formData.email,
          problem_description: values.problemDescription,
        }),
      });

      if (!response.ok) {
        throw new Error(`Ошибка API: ${response.status}`);
      }

      message.success('Описание отправлено, продолжаем заполнение');
      updateFormData(values);
      onNext();
    } catch (error) {
      console.error(error);
      message.error('Не получилось сохранить описание. Попробуйте ещё раз.');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div style={{ marginTop: 24 }}>
      <Button onClick={onPrev} size="large">
        ← Назад
      </Button>

      <div
        style={{
          marginTop: 24,
          padding: 24,
          background: '#f6f8fa',
          borderRadius: 12,
          border: '1px solid #e0e6ed',
        }}
      >
        <Paragraph style={{ fontSize: 18, fontWeight: 600, marginBottom: 8 }}>
          📄 Опишите проблему
        </Paragraph>
        <Paragraph type="secondary" style={{ marginBottom: 24 }}>
          Расскажите, что произошло, в свободной форме. Чем больше деталей —
          тем быстрее команда сможет разобраться, какие документы нужны и куда
          направить заявку.
        </Paragraph>

        <Form layout="vertical" form={form}>
          <Form.Item
            label="Описание ситуации"
            name="problemDescription"
            rules={[
              { required: true, message: 'Поле обязательно' },
              {
                min: 20,
                message: 'Опишите, пожалуйста, минимум в пару предложений',
              },
            ]}
          >
            <TextArea
              autoSize={{ minRows: 6 }}
              maxLength={3000}
              showCount
              placeholder="Например: заключил договор на оказание услуг..., деньги списали..., услугу не выполнили..."
            />
          </Form.Item>
        </Form>

        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12 }}>
          <Button type="primary" size="large" onClick={handleContinue} loading={submitting}>
            Продолжить →
          </Button>
        </div>
      </div>
    </div>
  );
}