/* global React, CSDAArrow */

// Reusable contact form — 会社名 required, works (shows confirmation on submit)
function CSDAContactForm({ compact = false }) {
  const { useState } = React;
  const [topics, setTopics] = useState([]);
  const [submitted, setSubmitted] = useState(false);
  const [sending, setSending] = useState(false);
  const [error, setError] = useState("");
  const allTopics = ["コンプライアンス", "ハラスメント", "離職防止", "サーバントリーダーシップ", "その他研修", "個別キャリア相談"];
  const toggle = t => setTopics(prev => prev.includes(t) ? prev.filter(x => x !== t) : [...prev, t]);

  if (submitted) {
    return (
      <div className="cf-success">
        <div className="cf-success__icon">✓</div>
        <h3>お問い合わせを承りました</h3>
        <p>通常2〜3営業日以内に、担当よりご連絡いたします。<br />お急ぎの場合は LINE からもお気軽にどうぞ。</p>
      </div>
    );
  }

  async function handleSubmit(e) {
    e.preventDefault();
    setError("");
    setSending(true);
    const fd = new FormData(e.currentTarget);
    const payload = {
      company: fd.get("company"),
      name: fd.get("name"),
      email: fd.get("email"),
      phone: fd.get("phone"),
      topics,
      message: fd.get("message"),
      pageUrl: window.location.href,
    };
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify(payload),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok || !data.ok) throw new Error(data.error || "送信に失敗しました。");
      setSubmitted(true);
    } catch (err) {
      setError(err.message || "送信に失敗しました。時間をおいて再度お試しください。");
    } finally {
      setSending(false);
    }
  }

  return (
    <form className={`cf ${compact ? "cf--compact" : ""}`} onSubmit={handleSubmit}>
      <div className="cf-row">
        <div className="cf-field">
          <label>会社・団体名 <span className="cf-req">必須</span></label>
          <input name="company" type="text" required placeholder="株式会社○○" />
        </div>
        <div className="cf-field">
          <label>お名前 <span className="cf-req">必須</span></label>
          <input name="name" type="text" required placeholder="山田 太郎" />
        </div>
      </div>
      <div className="cf-row">
        <div className="cf-field">
          <label>メールアドレス <span className="cf-req">必須</span></label>
          <input name="email" type="email" required placeholder="example@company.com" />
        </div>
        <div className="cf-field">
          <label>電話番号</label>
          <input name="phone" type="tel" placeholder="052-XXX-XXXX" />
        </div>
      </div>
      <div className="cf-field">
        <label>関心のある研修（複数選択可）</label>
        <div className="cf-topics">
          {allTopics.map(t => (
            <label key={t} className={`cf-topic ${topics.includes(t) ? "is-checked" : ""}`}>
              <input type="checkbox" checked={topics.includes(t)} onChange={() => toggle(t)} />
              {t}
            </label>
          ))}
        </div>
      </div>
      <div className="cf-field">
        <label>お問い合わせ内容 <span className="cf-req">必須</span></label>
        <textarea name="message" required placeholder="現状の課題感やご要望をお書きください。"></textarea>
      </div>
      {error && <p className="cf-error" role="alert">{error}</p>}
      <button type="submit" className="csda-btn csda-btn--primary cf-submit" disabled={sending}>
        <span>{sending ? "送信中..." : "この内容で送信する"}</span>
        <span className="csda-btn__arrow"><CSDAArrow color="#fff" /></span>
      </button>
    </form>
  );
}

Object.assign(window, { CSDAContactForm });