import React, { useState } from 'react';

interface Props {
  onConfirm: (prompt: string) => void;
  onCancel: () => void;
}

const GUIDED_QUESTIONS = [
  {
    key: 'purpose',
    label: '1️⃣ 这个表是用来做什么的？',
    placeholder: '比如：记录订单 / 管理客户 / 记录库存',
    type: 'input',
    optional: false,
  },
  {
    key: 'fields',
    label: '2️⃣ 你会往里面"填写"哪些信息？',
    placeholder: '比如：姓名、电话、金额、时间…',
    type: 'textarea',
    optional: false,
  },
  {
    key: 'statuses',
    label: '3️⃣ 有没有"固定的几种状态"？',
    placeholder: '比如：订单有 未支付 / 已支付 / 已取消',
    type: 'input',
    optional: true,
  },
  {
    key: 'relations',
    label: '4️⃣ 这个数据和谁有关？',
    placeholder: '比如：订单属于某个用户？一个用户有多个订单？',
    type: 'input',
    optional: true,
  },
  {
    key: 'queries',
    label: '5️⃣ 你平时会怎么查这些数据？',
    placeholder: '比如：按用户名查、按时间查、看最近的记录',
    type: 'input',
    optional: true,
  },
  {
    key: 'scale',
    label: '6️⃣ 大概会有多少数据？',
    placeholder: '比如：每天几十条 / 每天几万条',
    type: 'input',
    optional: true,
  },
  {
    key: 'special',
    label: '7️⃣ 有没有特殊要求？',
    placeholder: '比如：可以删除吗？要不要保留历史记录？',
    type: 'textarea',
    optional: true,
  },
];

export default function AddDataModal({ onConfirm, onCancel }: Props) {
  const [activeTab, setActiveTab] = useState<'free' | 'guided'>('free');
  const [freeText, setFreeText] = useState('');
  const [answers, setAnswers] = useState<Record<string, string>>({});

  function handleConfirm() {
    if (activeTab === 'free') {
      const text = freeText.trim();
      if (!text) {
        alert('请输入数据描述');
        return;
      }
      onConfirm(
        '请帮我使用 prisma-schema-update skill 添加一个新的prisma model。\n\n以下是关于这个业务数据的描述：\n' +
          text,
      );
    } else {
      if (!answers.purpose?.trim()) {
        alert('请至少填写"这个表是用来做什么的"');
        return;
      }
      const lines = [
        '请帮我使用 prisma-schema-update skill 添加一个新的prisma model。\n\n以下是我对这个业务数据的描述：\n',
      ];
      GUIDED_QUESTIONS.forEach((q) => {
        if (answers[q.key]?.trim()) {
          lines.push(
            q.label.replace(/（可选）/g, '').trim() +
              '\n' +
              answers[q.key].trim(),
          );
        }
      });
      onConfirm(lines.join('\n\n'));
    }
  }

  return (
    <div
      id="add-data-modal-overlay"
      onClick={(e) => {
        if (e.target === e.currentTarget) onCancel();
      }}
    >
      <div id="add-data-modal-card">
        <div className="add-data-modal-header">
          <h3>🗄️ 添加新的业务数据</h3>
          <button className="add-data-modal-close" onClick={onCancel}>
            ×
          </button>
        </div>

        <div className="add-data-modal-tabs">
          {(['free', 'guided'] as const).map((tab) => (
            <button
              key={tab}
              className={
                'add-data-modal-tab' + (activeTab === tab ? ' active' : '')
              }
              onClick={() => setActiveTab(tab)}
            >
              {tab === 'free' ? '自由描述' : '引导式填写'}
            </button>
          ))}
        </div>

        <div className="add-data-modal-body">
          {activeTab === 'free' && (
            <div className="add-data-tab-panel active">
              <p className="add-data-hint">
                用日常语言描述你想要的数据表，你也可以使用其他AI工具帮你生成更详细的需求，然后再输入到这边。
              </p>
              <textarea
                className="add-data-free-textarea"
                value={freeText}
                onChange={(e) => setFreeText(e.target.value)}
                placeholder={
                  '我要一个订单表：\n- 用户可以下多个订单\n- 支持支付状态\n- 要能查用户订单列表\n- 未来可能有退款'
                }
              />
            </div>
          )}
          {activeTab === 'guided' && (
            <div className="add-data-tab-panel active">
              <p className="add-data-hint">
                我们来一起设计一个数据表 😊 用日常语言回答下面几个问题：
              </p>
              {GUIDED_QUESTIONS.map((q) => (
                <div className="guided-question" key={q.key}>
                  <label className="guided-question-label">
                    {q.label}
                    {q.optional && (
                      <span className="guided-optional-tag">（可选）</span>
                    )}
                  </label>
                  {q.type === 'textarea' ? (
                    <textarea
                      className="guided-question-textarea"
                      placeholder={q.placeholder}
                      rows={2}
                      value={answers[q.key] || ''}
                      onChange={(e) =>
                        setAnswers((prev) => ({
                          ...prev,
                          [q.key]: e.target.value,
                        }))
                      }
                    />
                  ) : (
                    <input
                      className="guided-question-input"
                      type="text"
                      placeholder={q.placeholder}
                      value={answers[q.key] || ''}
                      onChange={(e) =>
                        setAnswers((prev) => ({
                          ...prev,
                          [q.key]: e.target.value,
                        }))
                      }
                    />
                  )}
                </div>
              ))}
            </div>
          )}
        </div>

        <div className="add-data-modal-footer">
          <button className="add-data-btn-cancel" onClick={onCancel}>
            取消
          </button>
          <button className="add-data-btn-confirm" onClick={handleConfirm}>
            确认，开始生成
          </button>
        </div>
      </div>
    </div>
  );
}
