/*
  EntryForm — 採用エントリー
  送信先: 同ディレクトリの api/entry.php
    → 採用担当へメール通知 ＋ data/entries.csv へ自動記録
  設定は api/config.php の上部2行（宛先メール・送信元メール）のみ。
  ※ PHPが動かない環境（Vercelプレビュー等）では自動的にデモ動作になります。
*/
const ENTRY_ENDPOINT = "api/entry.php";
const RECAPTCHA_SITE_KEY = "6LcTJL0tAAAAAMYKuslQ8K-bOBRmOWQYwaAQvhbS";

// 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;
};

const TIME_SLOTS = ['09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18: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 [honeypot, setHoneypot] = React.useState(''); // ボット対策（人には見えない項目）
  const [activeDate, setActiveDate] = React.useState(null);
  const dateOptions = React.useMemo(buildDateOptions, []);
  const recaptchaBoxRef = React.useRef(null);
  const recaptchaWidgetIdRef = React.useRef(null);
  const [form, setForm] = React.useState({
    lastName: '', firstName: '',
    lastKana: '', firstKana: '',
    birth: '',
    gender: '',
    email: '', tel: '',
    zip: '', address: '',
    license: '',
    interviewSlots: [],
    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スクリプトは非同期読込のため、Reactが<div>を描画する前に
  // 暗黙的レンダリング（class="g-recaptcha"の自動スキャン）が走ってしまい
  // チェックボックスが表示されないことがある。マウント後に明示的に
  // grecaptcha.render() を呼び出すことで確実に描画する。
  React.useEffect(() => {
    if (RECAPTCHA_SITE_KEY.includes('REPLACE_')) return;
    let cancelled = false;
    const tryRender = () => {
      if (cancelled || recaptchaWidgetIdRef.current !== null) return;
      if (window.grecaptcha && window.grecaptcha.render && recaptchaBoxRef.current) {
        recaptchaWidgetIdRef.current = window.grecaptcha.render(recaptchaBoxRef.current, {
          sitekey: RECAPTCHA_SITE_KEY,
          callback: (token) => setRecaptchaToken(token),
          'expired-callback': () => setRecaptchaToken(''),
        });
      } else {
        setTimeout(tryRender, 300);
      }
    };
    tryRender();
    return () => { cancelled = true; };
  }, []);

  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, website: honeypot, recaptchaToken };
      const res = await fetch(ENTRY_ENDPOINT, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json;charset=utf-8' },
        body: JSON.stringify(payload),
      });

      // PHPが配置されていない環境（Vercelプレビュー等）はデモ動作にする
      if (res.status === 404 || res.status === 405) {
        console.warn('[EntryForm] api/entry.php が見つかりません（デモ表示）:', payload);
        setSubmitted(true);
        return;
      }

      let data = null;
      try { data = await res.json(); } catch (_) { /* JSON以外が返った場合 */ }

      if (res.ok && data && data.ok) {
        setSubmitted(true);
      } else {
        setError(
          (data && data.message) ||
          '送信に失敗しました。お手数ですが、お電話（0120-444-317）にてご連絡ください。'
        );
      }
    } catch (err) {
      setError('通信エラーが発生しました。電波状況をご確認のうえ、再度お試しください。');
    } 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>
              ご記入いただいた内容を確認のうえ、採用担当よりご連絡いたします。<br/>
              お急ぎの場合は、下記までお気軽にお電話ください。
            </p>
            <div className="entry-done-tel">
              <span className="entry-done-tel-label">採用・お問い合わせ フリーダイヤル</span>
              <span className="entry-done-tel-num">0120-444-317</span>
              <span className="entry-done-tel-hours">受付：24時間365日</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">07</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>0120-444-317</strong>（24時間365日）へお電話ください。
          </p>
        </div>

        <form className="entry-form" onSubmit={onSubmit} noValidate>
          {/* ボット対策：人には見えない項目。ここに入力があると送信を破棄します */}
          <div style={{position:'absolute', left:'-9999px', width:1, height:1, overflow:'hidden'}} aria-hidden="true">
            <label htmlFor="website-url">ウェブサイト（入力不要）</label>
            <input id="website-url" name="website" type="text" tabIndex={-1} autoComplete="off"
                   value={honeypot} onChange={e=>setHoneypot(e.target.value)}/>
          </div>
          {/* === 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="861-5522" 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 className="entry-field">
                <label>普通二種免許</label>
                <select value={form.license} onChange={e => update('license', e.target.value)}>
                  <option value="">面談で相談したい</option>
                  <option>保有している</option>
                  <option>保有していない（取得を相談したい）</option>
                </select>
                <small className="entry-field-help">※ 未取得でも、取得についてご相談いただけます</small>
              </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="例：普通自動車免許を保有（運転歴15年）／前職は配送ドライバー（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</label>
                <textarea rows="4" value={form.selfPr} onChange={e => update('selfPr', e.target.value)} placeholder="例：人と話すのが好きで、安全運転には自信があります。体力にも自信があり、長く続けられると思います..."/>
                <small className="entry-field-help">強み・性格・得意なことなどを自由に（任意）</small>
              </div>
            </div>
          </div>

          {/* === 04 面談希望日時 === */}
          <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','ハローワーク','Google検索','Instagram/SNS','友人・知人の紹介','松村タクシーの利用者','その他'].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="https://matsumura-taxi.com/" 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 ref={recaptchaBoxRef} />
              </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 と送信先（GAS）をセットしてください
                </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/>
              ※ お急ぎの方・フォーム入力が難しい方は、0120-444-317 へお電話ください。
            </p>
          </div>
        </form>
      </div>
    </section>
  );
};
window.EntryForm = EntryForm;