import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Button, Card, Form, Input, Radio, Result, Select, Skeleton, Space, Tag, Typography, Upload, message, Progress } from 'antd';
import { LoadingOutlined, PlusOutlined, ThunderboltOutlined } from '@ant-design/icons';
import AiWorkingIllustration from '../../assets/ai-working.svg';
import type { UploadFile } from 'antd/es/upload/interface';

const { Paragraph, Title, Text } = Typography;
const { TextArea } = Input;
const { Dragger } = Upload;
const { Option } = Select;

interface WizardQuestion {
  order: number;
  name: string;
  label: string;
  control: string;
  input_type: string;
  required: boolean;
  priority?: number;
  rationale?: string;
  ask_if?: {
    field: string;
    op: '==' | '!=' | '>' | '<' | '>=' | '<=';
    value: any;
  } | null;
  options?: { label: string; value: string }[];
}

interface WizardDocument {
  id: string;
  name: string;
  required: boolean;
  priority?: number;
  hints?: string;
  accept?: string[];
}

interface FileBlock {
  id: string;
  fieldName: string;
  description: string;
  category?: string;
  files: UploadFile[];
  required?: boolean;
  docLabel?: string;
}

interface Props {
  formData: any;
  updateFormData: (data: any) => void;
  onNext: () => void;
  onPrev: () => void;
  addDebugEvent?: (type: string, status: string, message: string, data?: any) => void;
}

const evaluateCondition = (condition: WizardQuestion['ask_if'], values: Record<string, any>) => {
  if (!condition) return true;
  const left = values?.[condition.field];
  const right = condition.value;
  switch (condition.op) {
    case '==':
      return left === right;
    case '!=':
      return left !== right;
    case '>':
      return left > right;
    case '<':
      return left < right;
    case '>=':
      return left >= right;
    case '<=':
      return left <= right;
    default:
      return true;
  }
};

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

const YES_VALUES = ['да', 'yes', 'true', '1'];

const isAffirmative = (value: any) => {
  if (typeof value === 'boolean') {
    return value;
  }
  if (typeof value === 'string') {
    return YES_VALUES.includes(value.toLowerCase());
  }
  return false;
};

const generateBlockId = (prefix: string) =>
  `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;

export default function StepWizardPlan({
  formData,
  updateFormData,
  onNext,
  onPrev,
  addDebugEvent,
}: Props) {
  const [form] = Form.useForm();
  const eventSourceRef = useRef<EventSource | null>(null);
  const debugLoggerRef = useRef<typeof addDebugEvent>(addDebugEvent);
  const [isWaiting, setIsWaiting] = useState(!formData.wizardPlan);
  const [connectionError, setConnectionError] = useState<string | null>(null);
  const [plan, setPlan] = useState<any>(formData.wizardPlan || null);
  const [prefillMap, setPrefillMap] = useState<Record<string, any>>(
    formData.wizardPrefill || buildPrefillMap(formData.wizardPrefillArray)
  );
  const [questionFileBlocks, setQuestionFileBlocks] = useState<Record<string, FileBlock[]>>(
    formData.wizardUploads?.documents || {}
  );
  const [customFileBlocks, setCustomFileBlocks] = useState<FileBlock[]>(
    formData.wizardUploads?.custom || []
  );
  const [progressState, setProgressState] = useState<{ done: number; total: number }>({
    done: 0,
    total: 0,
  });
  const formValues = Form.useWatch([], form);
  const progressPercent = useMemo(() => {
    if (!progressState.total) return 0;
    return Math.round((progressState.done / progressState.total) * 100);
  }, [progressState]);
  const persistUploads = useCallback(
    (nextDocuments: Record<string, FileBlock[]>, nextCustom: FileBlock[]) => {
      updateFormData({
        wizardUploads: {
          documents: nextDocuments,
          custom: nextCustom,
        },
      });
    },
    [updateFormData]
  );

  useEffect(() => {
    if (formData.wizardUploads?.documents) {
      setQuestionFileBlocks(formData.wizardUploads.documents);
    }
    if (formData.wizardUploads?.custom) {
      setCustomFileBlocks(formData.wizardUploads.custom);
    }
  }, [formData.wizardUploads]);

  useEffect(() => {
    debugLoggerRef.current = addDebugEvent;
  }, [addDebugEvent]);

  const questions: WizardQuestion[] = useMemo(() => plan?.questions || [], [plan]);
  const documents: WizardDocument[] = plan?.documents || [];

  const documentGroups = useMemo(() => {
    const groups: Record<string, WizardDocument[]> = {};
    documents.forEach((doc) => {
      const id = doc.id?.toLowerCase() || '';
      let key = 'docs_exist';
      if (id.includes('correspondence') || id.includes('chat')) {
        key = 'correspondence_exist';
      }
      if (!groups[key]) {
        groups[key] = [];
      }
      groups[key].push(doc);
    });
    return groups;
  }, [documents]);

  const documentCategoryOptions = useMemo(() => {
    const map = new Map<string, string>();
    documents.forEach((doc) => {
      const key = doc.id || doc.name || '';
      const label = doc.name || doc.id || '';
      if (key) {
        map.set(key, label);
      }
    });
    map.set('other', 'Другое');
    return Array.from(map.entries()).map(([value, label]) => ({ value, label }));
  }, [documents]);
  const customCategoryOptions = useMemo(() => documentCategoryOptions, [documentCategoryOptions]);

  const handleDocumentBlocksChange = useCallback(
    (docId: string, updater: (blocks: FileBlock[]) => FileBlock[]) => {
      setQuestionFileBlocks((prev) => {
        const nextDocs = { ...prev };
        const currentBlocks = nextDocs[docId] || [];
        const updated = updater(currentBlocks);
        nextDocs[docId] = updated;
        persistUploads(nextDocs, customFileBlocks);
        return nextDocs;
      });
    },
    [customFileBlocks, persistUploads]
  );

  const handleCustomBlocksChange = useCallback(
    (updater: (blocks: FileBlock[]) => FileBlock[]) => {
      setCustomFileBlocks((prev) => {
        const updated = updater(prev);
        persistUploads(questionFileBlocks, updated);
        return updated;
      });
    },
    [persistUploads, questionFileBlocks]
  );

  const addDocumentBlock = (docId: string, docLabel?: string) => {
    handleDocumentBlocksChange(docId, (blocks) => [
      ...blocks,
      {
        id: generateBlockId(docId),
        fieldName: docId,
        description: '',
        category: docId,
        docLabel: docLabel,
        files: [],
      },
    ]);
  };

  const updateDocumentBlock = (
    docId: string,
    blockId: string,
    patch: Partial<Omit<FileBlock, 'id' | 'fieldName'>>
  ) => {
    handleDocumentBlocksChange(docId, (blocks) =>
      blocks.map((block) => (block.id === blockId ? { ...block, ...patch } : block))
    );
  };

  const removeDocumentBlock = (docId: string, blockId: string) => {
    handleDocumentBlocksChange(docId, (blocks) => blocks.filter((block) => block.id !== blockId));
  };

  const addCustomBlock = () => {
    handleCustomBlocksChange((blocks) => [
      ...blocks,
      {
        id: generateBlockId('custom'),
        fieldName: 'custom',
        description: '',
        category: undefined,
        files: [],
      },
    ]);
  };

  const updateCustomBlock = (blockId: string, patch: Partial<FileBlock>) => {
    handleCustomBlocksChange((blocks) =>
      blocks.map((block) => (block.id === blockId ? { ...block, ...patch } : block))
    );
  };

  const removeCustomBlock = (blockId: string) => {
    handleCustomBlocksChange((blocks) => blocks.filter((block) => block.id !== blockId));
  };

  useEffect(() => {
    if (plan) {
      const existingAnswers = formData.wizardAnswers || {};
      const initialValues = { ...prefillMap, ...existingAnswers };
      form.setFieldsValue(initialValues);
    }
  }, [plan, prefillMap, formData.wizardAnswers, form]);

  useEffect(() => {
    if (!questions.length) {
      setProgressState({ done: 0, total: 0 });
      return;
    }
    const values = formValues || {};
    let total = 0;
    let done = 0;

    questions.forEach((question) => {
      const visible = evaluateCondition(question.ask_if, values);
      if (question.required && visible) {
        total += 1;
        const value = values?.[question.name];
        let filled = false;
        if (Array.isArray(value)) {
          filled = value.length > 0;
        } else if (typeof value === 'boolean') {
          filled = value;
        } else {
          filled = value !== undefined && value !== null && String(value).trim().length > 0;
        }
        if (filled) {
          done += 1;
        }
      }
    });

    setProgressState({ done, total });
  }, [formValues, questions]);

  useEffect(() => {
    if (!isWaiting || !formData.claim_id || plan) {
      return;
    }

    const claimId = formData.claim_id;
    const source = new EventSource(`/events/${claimId}`);
    eventSourceRef.current = source;
    debugLoggerRef.current?.('wizard', 'info', '🔌 Подключаемся к SSE для плана вопросов', { claim_id: claimId });

    source.onopen = () => {
      setConnectionError(null);
      debugLoggerRef.current?.('wizard', 'info', '✅ SSE соединение открыто', { claim_id: claimId });
    };

    source.onerror = (error) => {
      console.error('❌ Wizard SSE error:', error);
      setConnectionError('Не удалось получить ответ от AI. Попробуйте ещё раз.');
      source.close();
      eventSourceRef.current = null;
      debugLoggerRef.current?.('wizard', 'error', '❌ SSE ошибка (wizard)', { claim_id: claimId });
    };

    const extractWizardPayload = (incoming: any): any => {
      if (!incoming || typeof incoming !== 'object') return null;
      if (incoming.wizard_plan) return incoming;

      const candidates = [
        incoming.data,
        incoming.redis_value,
        incoming.event,
        incoming.payload,
      ];

      for (const candidate of candidates) {
        if (!candidate) continue;
        const unwrapped = extractWizardPayload(candidate);
        if (unwrapped) return unwrapped;
      }

      return null;
    };

    source.onmessage = (event) => {
      try {
        const payload = JSON.parse(event.data);
        const eventType =
          payload.event_type ||
          payload.type ||
          payload?.event?.event_type ||
          payload?.data?.event_type ||
          payload?.redis_value?.event_type;

        const wizardPayload = extractWizardPayload(payload);
        const hasWizardPlan = Boolean(wizardPayload);

        if (eventType?.includes('wizard') || hasWizardPlan) {
          const wizardPlan = wizardPayload?.wizard_plan;
          const answersPrefill = wizardPayload?.answers_prefill;
          const coverageReport = wizardPayload?.coverage_report;

          debugLoggerRef.current?.('wizard', 'success', '✨ Получен план вопросов', {
            claim_id: claimId,
            questions: wizardPlan?.questions?.length || 0,
          });

          const prefill = buildPrefillMap(answersPrefill);
          setPlan(wizardPlan);
          setPrefillMap(prefill);
          setIsWaiting(false);
          setConnectionError(null);

          updateFormData({
            wizardPlan: wizardPlan,
            wizardPrefill: prefill,
            wizardPrefillArray: answersPrefill,
            wizardCoverageReport: coverageReport,
            wizardPlanStatus: 'ready',
          });

          source.close();
          eventSourceRef.current = null;
        }
      } catch (err) {
        console.error('❌ Ошибка разбора события wizard:', err);
      }
    };

    return () => {
      if (eventSourceRef.current) {
        eventSourceRef.current.close();
        eventSourceRef.current = null;
      }
    };
  }, [isWaiting, formData.claim_id, plan, updateFormData]);

  const handleRefreshPlan = () => {
    if (!formData.claim_id) {
      message.error('Не найден claim_id для подписки на события.');
      return;
    }
    setIsWaiting(true);
    setPlan(null);
    setConnectionError(null);
    updateFormData({
      wizardPlan: null,
      wizardPlanStatus: 'pending',
    });
  };

  const validateUploads = (values: Record<string, any>) => {
    for (const [questionName, docs] of Object.entries(documentGroups)) {
      if (!docs.length) continue;
      const answer = values?.[questionName];
      if (!isAffirmative(answer)) continue;
      const blocks = questionFileBlocks[questionName] || [];
      for (const doc of docs) {
        const matched = blocks.some((block) => {
          if (!block.files.length) return false;
          if (!block.category) return true;
          const normalizedCategory = block.category.toLowerCase();
          const normalizedId = (doc.id || '').toLowerCase();
          const normalizedName = (doc.name || '').toLowerCase();
          return (
            normalizedCategory === normalizedId ||
            normalizedCategory === normalizedName ||
            (normalizedCategory.includes('contract') && normalizedId.includes('contract')) ||
            (normalizedCategory.includes('payment') && normalizedId.includes('payment')) ||
            (normalizedCategory.includes('correspondence') && normalizedId.includes('correspondence'))
          );
        });
        if (doc.required && !matched) {
          return `Добавьте файлы для документа "${doc.name}"`;
        }
      }
      const missingDescription = blocks.some(
        (block) => block.files.length > 0 && !block.description?.trim()
      );
      if (missingDescription) {
        return 'Заполните описание для каждого блока документов';
      }
    }
    const customMissingDescription = customFileBlocks.some(
      (block) => block.files.length > 0 && !block.description?.trim()
    );
    if (customMissingDescription) {
      return 'Заполните описание для дополнительных документов';
    }
    return null;
  };

  const handleFinish = (values: Record<string, any>) => {
    const uploadError = validateUploads(values);
    if (uploadError) {
      message.error(uploadError);
      return;
    }

    updateFormData({
      wizardPlan: plan,
      wizardAnswers: values,
      wizardPlanStatus: 'answered',
      wizardUploads: {
        documents: questionFileBlocks,
        custom: customFileBlocks,
      },
    });
    addDebugEvent?.('wizard', 'info', '📝 Ответы на вопросы сохранены', {
      answers: values,
    });
    onNext();
  };

  const renderQuestionField = (question: WizardQuestion) => {
    switch (question.control) {
      case 'textarea':
      case 'input[type="textarea"]':
        return (
          <TextArea
            rows={4}
            placeholder="Ответ"
            autoSize={{ minRows: 3, maxRows: 6 }}
          />
        );
      case 'input[type="radio"]':
        return (
          <Radio.Group>
            <Space direction="vertical">
              {question.options?.map((option) => (
                <Radio key={option.value} value={option.value}>
                  {option.label}
                </Radio>
              ))}
            </Space>
          </Radio.Group>
        );
      default:
        return <Input size="large" placeholder="Ответ" />;
    }
  };

  const renderDocumentBlocks = (docId: string, docList: WizardDocument[]) => {
    const currentBlocks = questionFileBlocks[docId] || [];
    const docLabel = docList.map((doc) => doc.name).join(', ');
    const accept = docList.flatMap((doc) => doc.accept || []);
    const uniqueAccept = Array.from(new Set(accept.length ? accept : ['pdf', 'jpg', 'png']));

    return (
      <Space direction="vertical" style={{ width: '100%' }}>
        {currentBlocks.map((block, idx) => (
          <Card
            key={block.id}
            size="small"
            style={{
              borderRadius: 12,
              border: '1px solid #e0e7ff',
              background: '#fff',
            }}
            title={`${docLabel} — группа #${idx + 1}`}
            extra={
              <Button
                type="link"
                danger
                size="small"
                onClick={() => removeDocumentBlock(docId, block.id)}
              >
                Удалить
              </Button>
            }
          >
            <Space direction="vertical" style={{ width: '100%' }}>
              <Input
                placeholder="Описание документов (например: договор от 12.05, платёжка №123)"
                value={block.description}
                onChange={(e) =>
                  updateDocumentBlock(docId, block.id, { description: e.target.value })
                }
              />
              <Select
                value={block.category || docId}
                onChange={(value) => updateDocumentBlock(docId, block.id, { category: value })}
                placeholder="Категория блока"
              >
                {documentCategoryOptions.map((option) => (
                  <Option key={`${docId}-${option.value}`} value={option.value}>
                    {option.label}
                  </Option>
                ))}
              </Select>
              <Dragger
                multiple
                beforeUpload={() => false}
                fileList={block.files}
                onChange={({ fileList }) =>
                  updateDocumentBlock(docId, block.id, { files: fileList })
                }
                accept={uniqueAccept.map((ext) => `.${ext}`).join(',')}
                style={{ background: '#f8f9ff' }}
              >
                <p className="ant-upload-drag-icon">
                  <LoadingOutlined style={{ color: '#6366f1' }} />
                </p>
                <p className="ant-upload-text">Перетащите файлы или нажмите для загрузки</p>
                <p className="ant-upload-hint">
                  Допустимые форматы: {uniqueAccept.join(', ')}. До 5 файлов, максимум 20 МБ каждый.
                </p>
              </Dragger>
            </Space>
          </Card>
        ))}
        <Button
          icon={<PlusOutlined />}
          onClick={() => addDocumentBlock(docId, docLabel)}
          style={{ width: '100%' }}
        >
          Добавить документы ({docLabel})
        </Button>
      </Space>
    );
  };

  const renderCustomUploads = () => (
    <Card
      size="small"
      style={{ marginTop: 24, borderRadius: 12, border: '1px solid #e0e7ff' }}
      title="Дополнительные документы"
      extra={
        <Button type="link" onClick={addCustomBlock} icon={<PlusOutlined />}>
          Добавить блок
        </Button>
      }
    >
      {customFileBlocks.length === 0 && (
        <Paragraph type="secondary" style={{ marginBottom: 16 }}>
          Можно добавить произвольные группы документов — например, переписку, дополнительные акты
          или фото.
        </Paragraph>
      )}
      <Space direction="vertical" style={{ width: '100%' }}>
        {customFileBlocks.map((block, idx) => (
          <Card
            key={block.id}
            size="small"
            type="inner"
            title={`Группа #${idx + 1}`}
            extra={
              <Button type="link" danger size="small" onClick={() => removeCustomBlock(block.id)}>
                Удалить
              </Button>
            }
          >
            <Space direction="vertical" style={{ width: '100%' }}>
              <Select
                value={block.category}
                placeholder="Категория"
                onChange={(value) => updateCustomBlock(block.id, { category: value })}
                allowClear
              >
                {customCategoryOptions.map((option) => (
                  <Option key={`custom-${option.value}`} value={option.value}>
                    {option.label}
                  </Option>
                ))}
              </Select>
              <TextArea
                placeholder="Описание (например: переписка в WhatsApp с менеджером)"
                autoSize={{ minRows: 2, maxRows: 4 }}
                value={block.description}
                onChange={(e) => updateCustomBlock(block.id, { description: e.target.value })}
              />
              <Dragger
                multiple
                beforeUpload={() => false}
                fileList={block.files}
                onChange={({ fileList }) => updateCustomBlock(block.id, { files: fileList })}
                accept=".pdf,.jpg,.jpeg,.png,.doc,.docx,.heic"
              >
                <p className="ant-upload-drag-icon">
                  <LoadingOutlined style={{ color: '#6366f1' }} />
                </p>
                <p className="ant-upload-text">Перетащите файлы или нажмите для загрузки</p>
                <p className="ant-upload-hint">Максимум 10 файлов, до 20 МБ каждый.</p>
              </Dragger>
            </Space>
          </Card>
        ))}
        {customFileBlocks.length > 0 && (
          <Button onClick={addCustomBlock} icon={<PlusOutlined />}>
            Добавить ещё документы
          </Button>
        )}
      </Space>
    </Card>
  );

  const renderQuestions = () => (
    <>
      <Card
        size="small"
        style={{ marginBottom: 16, borderRadius: 12, border: '1px solid #e0e7ff' }}
      >
        <Space direction="vertical" style={{ width: '100%' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <Text strong>Прогресс заполнения</Text>
            <Text type="secondary">
              {progressState.done}/{progressState.total} обязательных ответов
            </Text>
          </div>
          <Progress percent={progressPercent} showInfo={false} />
        </Space>
      </Card>
      <Form
        form={form}
        layout="vertical"
        onFinish={handleFinish}
        initialValues={{ ...prefillMap, ...formData.wizardAnswers }}
      >
      {questions.map((question) => (
        <Form.Item shouldUpdate key={question.name}>
          {() => {
            const values = form.getFieldsValue(true);
            if (!evaluateCondition(question.ask_if, values)) {
              return null;
            }
            const questionDocs = documentGroups[question.name] || [];
            const questionValue = values?.[question.name];
            return (
              <>
                <Form.Item
                  label={question.label}
                  name={question.name}
                  rules={[
                    {
                      required: question.required,
                      message: 'Поле обязательно для заполнения',
                    },
                  ]}
                >
                  {renderQuestionField(question)}
                </Form.Item>
                {questionDocs.length > 0 && isAffirmative(questionValue) && (
                  <div style={{ marginBottom: 24 }}>
                    <Text strong>Загрузите документы:</Text>
                    {renderDocumentBlocks(question.name, questionDocs)}
                  </div>
                )}
              </>
            );
          }}
        </Form.Item>
      ))}

      <Space style={{ marginTop: 24 }}>
        <Button onClick={onPrev}>← Назад</Button>
        <Button type="primary" htmlType="submit">
          Сохранить и продолжить →
        </Button>
      </Space>
      </Form>
      {renderCustomUploads()}
    </>
  );

  if (!formData.claim_id) {
    return (
      <Result
        status="warning"
        title="Нет claim_id"
        subTitle="Не удалось определить идентификатор заявки. Вернитесь на предыдущий шаг и попробуйте снова."
        extra={<Button onClick={onPrev}>Вернуться</Button>}
      />
    );
  }

  return (
    <div style={{ marginTop: 24 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
        <Button onClick={onPrev}>← Назад</Button>
        {plan && (
          <Button type="link" onClick={handleRefreshPlan}>
            Обновить рекомендации
          </Button>
        )}
      </div>

      <Card
        style={{
          borderRadius: 16,
          border: '1px solid #dbeafe',
          background: '#f8fbff',
        }}
      >
        {isWaiting && (
          <div style={{ textAlign: 'center', padding: '40px 0' }}>
            <img
              src={AiWorkingIllustration}
              alt="AI работает"
              style={{ maxWidth: 320, width: '100%', marginBottom: 24 }}
            />
            <Title level={4}>Мы собираем рекомендации для вашего случая</Title>
            <Paragraph type="secondary" style={{ maxWidth: 420, margin: '0 auto 24px' }}>
              Наш AI-ассистент анализирует ваше описание и подбирает вопросы и список документов,
              которые помогут быстро решить проблему.
            </Paragraph>
            <Space direction="vertical">
              <Skeleton.Button active size="large" style={{ width: 220 }} />
              <Skeleton.Input active size="large" style={{ width: 260 }} />
            </Space>
            <div style={{ marginTop: 32, color: '#94a3b8' }}>
              <LoadingOutlined style={{ fontSize: 28 }} spin /> Подождите несколько секунд…
            </div>
            {connectionError && (
              <div style={{ marginTop: 16 }}>
                <Text type="danger">{connectionError}</Text>
                <div>
                  <Button onClick={handleRefreshPlan} style={{ marginTop: 12 }}>
                    Попробовать снова
                  </Button>
                </div>
              </div>
            )}
          </div>
        )}

        {!isWaiting && plan && (
          <div>
            <Title level={4} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <ThunderboltOutlined style={{ color: '#6366f1' }} /> План действий
            </Title>
            <Paragraph type="secondary" style={{ marginBottom: 24 }}>
              {plan.user_text || 'Ответьте на вопросы и подготовьте документы, чтобы мы могли продолжить.'}
            </Paragraph>

            {documents.length > 0 && (
              <Card
                size="small"
                style={{
                  borderRadius: 12,
                  background: '#fff',
                  border: '1px solid #e0e7ff',
                  marginBottom: 24,
                }}
                title="Документы, которые понадобятся"
              >
                <Space direction="vertical" style={{ width: '100%' }}>
                  {documents.map((doc: any) => (
                    <div
                      key={doc.id}
                      style={{
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                        gap: 8,
                        flexWrap: 'wrap',
                      }}
                    >
                      <div>
                        <Text strong>{doc.name}</Text>
                        <Paragraph type="secondary" style={{ marginBottom: 0 }}>
                          {doc.hints}
                        </Paragraph>
                      </div>
                      <Tag color={doc.required ? 'volcano' : 'geekblue'}>
                        {doc.required ? 'Обязательно' : 'Опционально'}
                      </Tag>
                    </div>
                  ))}
                </Space>
              </Card>
            )}

            {renderQuestions()}
          </div>
        )}
      </Card>
    </div>
  );
}