// modal.jsx — inquiry form (2 steps: 入力 → 確認 → 完了)
function ConsultModal({ isOpen, onClose, initialTheme }) {
  const [step, setStep] = React.useState(0);
  const [submitting, setSubmitting] = React.useState(false);
  const [submitError, setSubmitError] = React.useState('');
  const openedAtRef = React.useRef(0);
  const [data, setData] = React.useState({
    theme: '',
    company: '',
    name: '',
    email: '',
    role: '',
    phone: '',
    detail: ''
  });

  React.useEffect(() => {
    if (isOpen) {
      setStep(0);
      setSubmitting(false);
      setSubmitError('');
      openedAtRef.current = Date.now(); // ボット対策（時間トラップ）の基準時刻
      setData(d => ({ ...d, theme: initialTheme || '' }));
    }
  }, [isOpen, initialTheme]);

  React.useEffect(() => {
    if (isOpen) document.body.style.overflow = 'hidden';
    else document.body.style.overflow = '';
    return () => { document.body.style.overflow = ''; };
  }, [isOpen]);

  const update = (k, v) => setData(d => ({ ...d, [k]: v }));

  const steps = ['お客様情報', '確認'];
  const SUCCESS = steps.length; // 2
  const themeMap = {
    ai: { ttl: 'DX / AX 推進' },
    sec: { ttl: '情報セキュリティ' },
    bcp: { ttl: 'BCP対策' },
    other: { ttl: '横断 / その他' }
  };
  const themeLabel = themeMap[data.theme] ? themeMap[data.theme].ttl : '';

  const canNext =
    (step === 0 && data.company && data.name && data.email && data.detail) ||
    step >= 1;

  // 当社サーバーの contact.php 経由で info@skyidea.co.jp へ送信。
  // 同一ドメインのため CORS の問題がなく、送信結果(JSON)を確実に判定できる。
  const submit = async () => {
    if (submitting) return;
    setSubmitting(true);
    setSubmitError('');
    try {
      const fd = new FormData();
      fd.append('company', data.company);
      fd.append('role', data.role);
      fd.append('name', data.name);
      fd.append('email', data.email);
      fd.append('phone', data.phone);
      fd.append('detail', data.detail);
      if (themeLabel) fd.append('theme', themeLabel);
      fd.append('_gotcha', ''); // ハニーポット（人間は空のまま）
      // フォーム表示から送信までの経過ミリ秒（極端に速い=ボットの判定に使用）
      fd.append('_elapsed', String(Date.now() - (openedAtRef.current || Date.now())));

      const res = await fetch('contact.php', { method: 'POST', body: fd });
      const json = await res.json().catch(() => null);
      if (res.ok && json && json.success) {
        setStep(SUCCESS);
      } else {
        throw new Error((json && json.message) || ('サーバー応答エラー (HTTP ' + res.status + ')'));
      }
    } catch (e) {
      const detail = (e && e.message && e.message !== 'Failed to fetch')
        ? '（詳細：' + e.message + '）'
        : '';
      setSubmitError('送信に失敗しました。' + detail + ' お手数ですが info@skyidea.co.jp 宛に直接メールでご連絡ください。');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className={`modal-backdrop ${isOpen ? 'is-open' : ''}`} onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <div>
            <h3>{step === SUCCESS ? 'ありがとうございます' : 'お問い合わせ'}</h3>
            <div className="sub">CONTACT — {step < SUCCESS ? `STEP ${step + 1} / ${steps.length}` : 'COMPLETED'}</div>
          </div>
          <button className="modal-close" onClick={onClose}>×</button>
        </div>
        <div className="modal-body">
          {step < SUCCESS && (
            <div className="modal-steps">
              {steps.map((_, i) => (
                <div
                  key={i}
                  className={`modal-step ${i === step ? 'active' : ''} ${i < step ? 'done' : ''}`}
                ></div>
              ))}
            </div>
          )}

          {step === 0 && (
            <div>
              <div style={{ marginBottom: 18, fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.7 }}>
                ご相談内容と連絡先をご記入ください。初回のご相談は無料です。無理な営業は一切いたしません。
              </div>
              <div className="field-row">
                <div className="field">
                  <label>会社・法人名 <span className="req">*</span></label>
                  <input
                    type="text"
                    value={data.company}
                    onChange={(e) => update('company', e.target.value)}
                    placeholder="株式会社..."
                  />
                </div>
                <div className="field">
                  <label>お役職</label>
                  <input
                    type="text"
                    value={data.role}
                    onChange={(e) => update('role', e.target.value)}
                    placeholder="情報システム部長 等"
                  />
                </div>
                <div className="field">
                  <label>お名前 <span className="req">*</span></label>
                  <input
                    type="text"
                    value={data.name}
                    onChange={(e) => update('name', e.target.value)}
                    placeholder="山田 太郎"
                  />
                </div>
                <div className="field">
                  <label>メールアドレス <span className="req">*</span></label>
                  <input
                    type="email"
                    value={data.email}
                    onChange={(e) => update('email', e.target.value)}
                    placeholder="name@example.com"
                  />
                </div>
                <div className="field full">
                  <label>電話番号<span className="opt">（任意）</span></label>
                  <input
                    type="tel"
                    value={data.phone}
                    onChange={(e) => update('phone', e.target.value)}
                    placeholder="03-1234-5678"
                  />
                </div>
                <div className="field full">
                  <label>ご質問・ご相談内容 <span className="req">*</span></label>
                  <textarea
                    value={data.detail}
                    onChange={(e) => update('detail', e.target.value)}
                    placeholder="現状の課題や検討段階など、可能な範囲でご記入ください。"
                  ></textarea>
                </div>
              </div>
            </div>
          )}

          {step === 1 && (
            <div>
              <div className="confirm-card">
                <h4>ご入力内容のご確認</h4>
                <dl>
                  {themeLabel && (<React.Fragment><dt>ご関心テーマ</dt><dd>{themeLabel}</dd></React.Fragment>)}
                  <dt>会社</dt>
                  <dd>{data.company}{data.role ? ` / ${data.role}` : ''}</dd>
                  <dt>お名前</dt>
                  <dd>{data.name}</dd>
                  <dt>メール</dt>
                  <dd>{data.email}</dd>
                  {data.phone && (<React.Fragment><dt>電話番号</dt><dd>{data.phone}</dd></React.Fragment>)}
                  <dt>内容</dt>
                  <dd>{data.detail}</dd>
                </dl>
              </div>
              <div style={{ fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.7 }}>
                送信後、内容を確認のうえ、1営業日以内にメールにてご連絡いたします。<br/>
                ご記入いただいた情報は、ご返信の目的にのみ使用いたします。
              </div>
              {submitError && (
                <div className="form-error" role="alert">{submitError}</div>
              )}
            </div>
          )}

          {step === SUCCESS && (
            <div className="success">
              <div className="check">✓</div>
              <h3>送信いたしました。</h3>
              <p>
                お問い合わせありがとうございます。<br/>
                1営業日以内に、ご担当より {data.email} 宛にご連絡いたします。
              </p>
            </div>
          )}

          {step < SUCCESS && (
            <div className="modal-foot">
              <span className="step-label">{`STEP ${step + 1} OF ${steps.length} — ${steps[step]}`}</span>
              <div style={{ display: 'flex', gap: 10 }}>
                {step > 0 && (
                  <button className="btn btn-ghost" onClick={() => setStep(s => s - 1)}>
                    戻る
                  </button>
                )}
                <button
                  className="btn btn-primary"
                  onClick={() => (step === steps.length - 1 ? submit() : setStep(s => s + 1))}
                  disabled={!canNext || submitting}
                  style={{ opacity: (canNext && !submitting) ? 1 : 0.4, cursor: (canNext && !submitting) ? 'pointer' : 'not-allowed' }}
                >
                  {step === steps.length - 1 ? (submitting ? '送信中…' : '送信する') : '次へ'}
                  {!submitting && <span className="arrow">→</span>}
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.ConsultModal = ConsultModal;