import { Form, Input, Button, Typography, message, Checkbox } from 'antd';
import { useEffect, useState } from 'react';
import wizardPlanSample from '../../mocks/wizardPlanSample';

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);
  const [useMockWizard, setUseMockWizard] = useState(true);

  const buildPrefillMap = (prefill?: Array<{ name: string; value: any }>) => {
    if (!prefill) {
      return {};
    }
    return prefill.reduce<Record<string, any>>((acc, item) => {
      if (item?.name) {
        acc[item.name] = item.value;
      }
      return acc;
    }, {});
  };

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

  const handleContinue = async () => {
    try {
      let problemDescription = form.getFieldValue('problemDescription');
      if (!useMockWizard) {
        const values = await form.validateFields();
        problemDescription = values.problemDescription;
      }
      const safeDescription = problemDescription || '';
      
      if (!formData.session_id) {
        message.error('Не найден session_id. Попробуйте обновить страницу.');
        return;
      }
      if (!formData.claim_id) {
        message.error('Не удалось определить номер обращения. Вернитесь на шаг с телефоном.');
        return;
      }

      setSubmitting(true);

      if (useMockWizard && wizardPlanSample?.wizard_plan) {
        const mockPrefill = buildPrefillMap(wizardPlanSample.answers_prefill);
        const mockClaimId = wizardPlanSample.claim_id || formData.claim_id;

        updateFormData({
          problemDescription: safeDescription,
          claim_id: mockClaimId,
          wizardPlan: wizardPlanSample.wizard_plan,
          wizardPlanStatus: 'ready',
          wizardPrefill: mockPrefill,
          wizardPrefillArray: wizardPlanSample.answers_prefill,
          wizardCoverageReport: wizardPlanSample.coverage_report,
          wizardAnswers: undefined,
        });

        message.success('Загружены сохранённые рекомендации (DEV).');
        onNext();
        return;
      }

      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: safeDescription,
        }),
      });

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

      message.success('Описание отправлено, подбираем рекомендации...');
      updateFormData({
        problemDescription: safeDescription,
        wizardPlan: undefined,
        wizardPlanStatus: 'pending',
        wizardAnswers: undefined,
        wizardPrefill: undefined,
        wizardPrefillArray: undefined,
      });
      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: 8,
          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={[
              {
                validator: (_, value) => {
                  if (useMockWizard) {
                    return Promise.resolve();
                  }
                  if (!value) {
                    return Promise.reject(new Error('Поле обязательно'));
                  }
                  if (value.length < 20) {
                    return Promise.reject(
                      new Error('Опишите, пожалуйста, минимум в пару предложений')
                    );
                  }
                  return Promise.resolve();
                },
              },
            ]}
          >
            <TextArea
              disabled={useMockWizard}
              autoSize={{ minRows: 6 }}
              maxLength={3000}
              showCount={!useMockWizard}
              placeholder="Например: заключил договор на оказание услуг..., деньги списали..., услугу не выполнили..."
            />
          </Form.Item>
        </Form>

        <div
          style={{
            marginTop: 12,
            padding: 12,
            borderRadius: 8,
            background: '#fafafa',
            border: '1px dashed #d9d9d9',
          }}
        >
          <Checkbox
            checked={useMockWizard}
            onChange={(e) => setUseMockWizard(e.target.checked)}
          >
            Использовать сохранённые рекомендации (DEV)
          </Checkbox>
          <Paragraph type="secondary" style={{ marginBottom: 0, marginTop: 4 }}>
            Если включено, план вопросов берётся из локального файла и не запускает модель.
          </Paragraph>
        </div>

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