/*
  EntryForm — 採用エントリー
  送信先: Vercel Serverless Function /api/apply → Google スプレッドシートに蓄積
  （サービスアカウント認証。GASのデプロイ権限問題を回避）
  本番設定:
    RECAPTCHA_SITE_KEY をsiteキーに / HTML head の reCAPTCHA script を解除
*/
const API_ENDPOINT = "/api/apply";
const RECAPTCHA_SITE_KEY = "REPLACE_RECAPTCHA_SITE_KEY";

// 14日分の候補日を生成
const buildDateOptions = () => {
  const today = new Date();
  const arr = [];
  const dow = ['日','月','火','水','木','金','土'];
  for (let i = 1; i <= 14; i++) {
    const d = new Date(today);
    d.setDate(today.getDate() + i);
    arr.push({
      key: `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`,
      m: d.getMonth() + 1,
      d: d.getDate(),
      dow: dow[d.getDay()],
      isWeekend: d.getDay() === 0 || d.getDay() === 6,
    });
  }
  return arr;
};

// 面談時間スロット (1時間刻み, 10:00-20:00)
const TIME_SLOTS = ['10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00'];

const EntryForm = () => {
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState('');
  const [recaptchaToken, setRecaptchaToken] = React.useState('');
  const [activeDate, setActiveDate] = React.useState(null);
  const dateOptions = React.useMemo(buildDateOptions, []);
  const [form, setForm] = React.useState({
    lastName: '', firstName: '',
    lastKana: '', firstKana: '',
    birth: '',
    gender: '',
    email: '', tel: '',
    zip: '', address: '',
    interviewSlots: [],  // ['2026-05-23 14:00', ...]
    career: '',
    motivation: '',
    selfPr: '',
    referral: '',
    agree: false,
  });

  const update = (k, v) => setForm(s => ({ ...s, [k]: v }));
  const toggleSlot = (key) => setForm(s => ({
    ...s,
    interviewSlots: s.interviewSlots.includes(key)
      ? s.interviewSlots.filter(x => x !== key)
      : [...s.interviewSlots, key],
  }));
  const removeSlot = (key) => setForm(s => ({ ...s, interviewSlots: s.interviewSlots.filter(x => x !== key) }));

  // reCAPTCHA mounting (when sitekey is set)
  React.useEffect(() => {
    if (RECAPTCHA_SITE_KEY.includes('REPLACE_')) return;
    if (!window.grecaptcha) return;
    window.grecaptchaCallback = (token) => setRecaptchaToken(token);
    window.grecaptchaExpired = () => setRecaptchaToken('');
  }, []);

  const onSubmit = async (e) => {
    e.preventDefault();
    setError('');
    if (!form.agree) { setError('個人情報の取扱に同意してください。'); return; }
    if (!RECAPTCHA_SITE_KEY.includes('REPLACE_') && !recaptchaToken) {
      setError('reCAPTCHA認証を完了してください。'); return;
    }
    setSubmitting(true);
    try {
      const payload = { ...form, recaptchaToken };
      // 同一オリジンの Vercel Function へ POST。レスポンスで成否を確認できる。
      const res = await fetch(API_ENDPOINT, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      const json = await res.json().catch(() => ({}));
      if (!res.ok || json.result !== 'success') {
        throw new Error(json.message || `送信に失敗しました（${res.status}）`);
      }
      setSubmitted(true);
    } catch (err) {
      setError(err.message || '送信中にエラーが発生しました。時間をおいて再度お試しください。');
    } finally {
      setSubmitting(false);
    }
  };

  if (submitted) {
    return (
      <section className="sec-entry" id="entry">
        <div className="container">
          <div className="entry-done">
            <div className="entry-done-icon">✓</div>
            <h2>エントリーありがとうございました</h2>
            <p>
              ご記入いただいた内容を確認のうえ、3営業日以内に採用担当よりご連絡いたします。<br/>
              お急ぎの場合は下記までお電話ください。
            </p>
            <div className="entry-done-tel">
              <span className="entry-done-tel-label">採用専用フリーダイヤル</span>
              <span className="entry-done-tel-num">0120-879-869</span>
              <span className="entry-done-tel-hours">受付時間：平日 10:00〜20:00</span>
            </div>
            <button className="btn btn-outline" onClick={() => setSubmitted(false)}>
              <span>戻る</span>
            </button>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="sec-entry" id="entry">
      <div className="container">
        <div className="entry-head">
          <div className="sec-eyebrow">
            <span className="sec-eyebrow-num">05</span>
            <span className="sec-eyebrow-bar"/>
            <span>ENTRY</span>
          </div>
          <h2 className="big-jp-title" style={{fontSize:42}}>
            <span className="mark">応募</span>フォーム
          </h2>
          <p className="entry-lead">
            正学館の採用にご興味をお持ちいただきありがとうございます。<br/>
            下記フォームより必要事項をご記入ください。<br/>
            <strong>3営業日以内</strong>に採用担当より、面接日程のご連絡を差し上げます。
          </p>
        </div>

        <form className="entry-form" onSubmit={onSubmit} noValidate>
          {/* === 01 基本情報 === */}
          <div className="entry-block">
            <div className="entry-block-title">
              <span className="entry-block-num">01</span>
              <span>基本情報</span>
            </div>
            <div className="entry-grid">
              <div className="entry-field">
                <label>姓 <span className="req">必須</span></label>
                <input required value={form.lastName} onChange={e => update('lastName', e.target.value)} placeholder="田中" autoComplete="family-name"/>
              </div>
              <div className="entry-field">
                <label>名 <span className="req">必須</span></label>
                <input required value={form.firstName} onChange={e => update('firstName', e.target.value)} placeholder="太郎" autoComplete="given-name"/>
              </div>
              <div className="entry-field">
                <label>セイ <span className="req">必須</span></label>
                <input required value={form.lastKana} onChange={e => update('lastKana', e.target.value)} placeholder="タナカ"/>
              </div>
              <div className="entry-field">
                <label>メイ <span className="req">必須</span></label>
                <input required value={form.firstKana} onChange={e => update('firstKana', e.target.value)} placeholder="タロウ"/>
              </div>
              <div className="entry-field">
                <label>生年月日</label>
                <input type="date" value={form.birth} onChange={e => update('birth', e.target.value)}/>
              </div>
              <div className="entry-field">
                <label>性別</label>
                <div className="entry-radio-row">
                  {['女性','男性','回答しない'].map(g => (
                    <label key={g} className="entry-radio">
                      <input type="radio" name="gender" value={g} checked={form.gender === g} onChange={() => update('gender', g)}/>
                      <span>{g}</span>
                    </label>
                  ))}
                </div>
              </div>
            </div>
          </div>

          {/* === 02 ご連絡先 === */}
          <div className="entry-block">
            <div className="entry-block-title">
              <span className="entry-block-num">02</span>
              <span>ご連絡先</span>
            </div>
            <div className="entry-grid">
              <div className="entry-field entry-field-wide">
                <label>メールアドレス <span className="req">必須</span></label>
                <input required type="email" value={form.email} onChange={e => update('email', e.target.value)} placeholder="example@email.com" autoComplete="email"/>
              </div>
              <div className="entry-field">
                <label>電話番号 <span className="req">必須</span></label>
                <input required type="tel" value={form.tel} onChange={e => update('tel', e.target.value)} placeholder="090-1234-5678" autoComplete="tel"/>
              </div>
              <div className="entry-field">
                <label>郵便番号</label>
                <input value={form.zip} onChange={e => update('zip', e.target.value)} placeholder="272-0000" autoComplete="postal-code" inputMode="numeric"/>
              </div>
              <div className="entry-field entry-field-wide">
                <label>ご住所</label>
                <input value={form.address} onChange={e => update('address', e.target.value)} placeholder="千葉県市川市〇〇 1-2-3" autoComplete="street-address"/>
              </div>
            </div>
          </div>

          {/* === 03 経歴・志望動機・自己PR === */}
          <div className="entry-block">
            <div className="entry-block-title">
              <span className="entry-block-num">03</span>
              <span>あなたについて教えてください</span>
            </div>
            <div className="entry-grid">
              <div className="entry-field entry-field-wide">
                <label>(a) 経歴 <span className="req">必須</span></label>
                <textarea required rows="4" value={form.career} onChange={e => update('career', e.target.value)} placeholder="例：◯◯大学 経済学部 卒業／前職は人材会社の法人営業（3年）／メンバー5名のチームリーダー経験あり"/>
                <small className="entry-field-help">学歴・職歴などを箇条書きで構いません</small>
              </div>
              <div className="entry-field entry-field-wide">
                <label>(b) 志望動機 <span className="req">必須</span></label>
                <textarea required rows="5" value={form.motivation} onChange={e => update('motivation', e.target.value)} placeholder="例：正学館の『生徒と一緒に楽しむ』という理念に共感し、ぜひ自分も生徒の成長を支える存在になりたいと考えました。/ 教育を通じて地域に貢献したい気持ちが強く..."/>
                <small className="entry-field-help">なぜ正学館なのか、何を実現したいかをお書きください</small>
              </div>
              <div className="entry-field entry-field-wide">
                <label>(c) 自己PR <span className="req">必須</span></label>
                <textarea required rows="5" value={form.selfPr} onChange={e => update('selfPr', e.target.value)} placeholder="例：人の話を聞くのが好きで、相手に合わせた提案を考えるのが得意です。前職ではメンバーをマネジメントし、チームの数字を1年で◯倍に伸ばしました..."/>
                <small className="entry-field-help">強み・性格・得意なこと・実績などを自由に</small>
              </div>
            </div>
          </div>

          {/* === 04 面接希望日時 (TimeRex風) === */}
          <div className="entry-block">
            <div className="entry-block-title">
              <span className="entry-block-num">04</span>
              <span>面接希望日時</span>
            </div>
            <p className="entry-picker-note">
              面接が可能な日時を選択してください（複数選択可）。<br/>
              ※ 当社からこの中で都合の良い日程をお選びしてご連絡します。
            </p>

            <div className="datepicker">
              <div className="datepicker-dates" role="tablist">
                {dateOptions.map(d => {
                  const hasSelected = form.interviewSlots.some(s => s.startsWith(d.key));
                  return (
                    <button
                      key={d.key}
                      type="button"
                      className={`datepicker-date ${activeDate === d.key ? 'active' : ''} ${d.isWeekend ? 'weekend' : ''} ${hasSelected ? 'has-selected' : ''}`}
                      onClick={() => setActiveDate(activeDate === d.key ? null : d.key)}
                    >
                      <span className="dp-mon">{d.m}月</span>
                      <span className="dp-day">{d.d}</span>
                      <span className="dp-dow">{d.dow}</span>
                      {hasSelected && <span className="dp-badge">{form.interviewSlots.filter(s => s.startsWith(d.key)).length}</span>}
                    </button>
                  );
                })}
              </div>

              {activeDate && (
                <div className="datepicker-times">
                  <div className="dp-times-head">
                    {(() => {
                      const d = dateOptions.find(x => x.key === activeDate);
                      return d ? `${d.m}月${d.d}日 (${d.dow}) の希望時間` : '';
                    })()}
                  </div>
                  <div className="dp-times-grid">
                    {TIME_SLOTS.map(t => {
                      const key = `${activeDate} ${t}`;
                      const on = form.interviewSlots.includes(key);
                      return (
                        <button
                          key={t}
                          type="button"
                          className={`dp-time ${on ? 'active' : ''}`}
                          onClick={() => toggleSlot(key)}
                        >
                          {t}
                        </button>
                      );
                    })}
                  </div>
                </div>
              )}

              {form.interviewSlots.length > 0 && (
                <div className="dp-selected">
                  <div className="dp-selected-label">選択中の候補</div>
                  <div className="dp-selected-list">
                    {form.interviewSlots.sort().map(s => (
                      <span key={s} className="dp-chip">
                        {s.replace(/-/g, '/').replace(' ', ' ')}
                        <button type="button" onClick={() => removeSlot(s)} aria-label="削除">×</button>
                      </span>
                    ))}
                  </div>
                </div>
              )}
            </div>

            <div className="entry-field entry-field-wide" style={{marginTop:24}}>
              <label>当採用ページをどこで知りましたか？</label>
              <select value={form.referral} onChange={e => update('referral', e.target.value)}>
                <option value="">選択してください</option>
                {['Indeed','TikTok広告','Instagram広告','Google検索','Twitter/X','友人・知人の紹介','正学館の生徒/保護者','その他'].map(r => <option key={r} value={r}>{r}</option>)}
              </select>
            </div>
          </div>

          {/* === 05 同意 + reCAPTCHA === */}
          <div className="entry-block entry-block-final">
            <label className="entry-agree">
              <input type="checkbox" checked={form.agree} onChange={e => update('agree', e.target.checked)}/>
              <span>
                <a href="#privacy" target="_blank" rel="noopener" style={{color:'var(--green-700)', textDecoration:'underline'}}>個人情報の取扱について</a> を確認のうえ、同意します。<span className="req">必須</span>
              </span>
            </label>

            {!RECAPTCHA_SITE_KEY.includes('REPLACE_') && (
              <div className="entry-recaptcha">
                <div className="g-recaptcha"
                  data-sitekey={RECAPTCHA_SITE_KEY}
                  data-callback="grecaptchaCallback"
                  data-expired-callback="grecaptchaExpired"
                />
              </div>
            )}
            {RECAPTCHA_SITE_KEY.includes('REPLACE_') && (
              <div className="entry-recaptcha-placeholder">
                <div className="entry-recaptcha-box">
                  <span className="entry-recaptcha-row">
                    <span className="entry-recaptcha-check">☐</span>
                    <span>私はロボットではありません</span>
                  </span>
                  <span className="entry-recaptcha-brand">
                    <strong>reCAPTCHA</strong><br/>
                    <small>プライバシー - 利用規約</small>
                  </span>
                </div>
                <small style={{display:'block', marginTop:8, color:'var(--ink-700)', fontSize:11}}>
                  ※ 本番デプロイ前に reCAPTCHA v2 の sitekey をセットしてください
                </small>
              </div>
            )}

            {error && <div className="entry-error">{error}</div>}

            <button type="submit" className="entry-submit" disabled={submitting}>
              <span>{submitting ? '送信中...' : 'この内容で応募する'}</span>
              <span className="btn-arrow"/>
            </button>
            <p className="entry-note">
              ※ 送信いただいた個人情報は採用選考の目的にのみ使用し、それ以外の目的では使用いたしません。<br/>
              ※ ご記入内容に不備がある場合、確認のためご連絡することがあります。
            </p>
          </div>
        </form>
      </div>
    </section>
  );
};
window.EntryForm = EntryForm;