/* AI Concert Search Modal */
(function () {
  const { useState, useEffect } = React;
  const { uid } = window.AppStore;
  const { Modal, showToast, Field } = window.Common;

  function AiSearchModal({ open, onClose, state, onBulkAdd }) {
    const [step, setStep] = useState('form'); // 'form' | 'loading' | 'results'
    const [form, setForm] = useState({
      region: '東京都・千葉県・埼玉県',
      startMonth: '',
      endMonth: '',
      genre: '',
      eventId: '',
      flyerId: '',
    });
    const [results, setResults] = useState([]);
    const [selected, setSelected] = useState(new Set());
    const [error, setError] = useState('');

    useEffect(() => {
      if (!open) return;
      setStep('form');
      setResults([]);
      setSelected(new Set());
      setError('');
      const now = new Date();
      const pad = (n) => String(n).padStart(2, '0');
      const thisMonth = now.getFullYear() + '-' + pad(now.getMonth() + 1);
      const end = new Date(now.getFullYear(), now.getMonth() + 2, 1);
      const endMonth = end.getFullYear() + '-' + pad(end.getMonth() + 1);
      const defaultEventId = state.events[0]?.id || '';
      const defaultFlyerId = state.events[0]?.flyers[0]?.id || '';
      setForm((f) => ({ ...f, startMonth: thisMonth, endMonth, eventId: defaultEventId, flyerId: defaultFlyerId }));
    }, [open]);

    function setF(key, val) { setForm((p) => ({ ...p, [key]: val })); }

    const selectedEvent = state.events.find((e) => e.id === form.eventId);
    const flyers = selectedEvent ? selectedEvent.flyers : [];

    async function handleSearch() {
      if (!form.region.trim()) { showToast('地域を入力してください', 'error'); return; }
      if (!form.startMonth) { showToast('開始月を入力してください', 'error'); return; }
      if (!form.endMonth) { showToast('終了月を入力してください', 'error'); return; }
      if (form.startMonth > form.endMonth) { showToast('開始月は終了月より前にしてください', 'error'); return; }
      if (!form.eventId) { showToast('登録先イベントを選択してください', 'error'); return; }
      if (!form.flyerId) { showToast('チラシ種別を選択してください', 'error'); return; }

      setStep('loading');
      setError('');

      try {
        const res = await fetch('/api/ai-search', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            region: form.region,
            startMonth: form.startMonth,
            endMonth: form.endMonth,
            genre: form.genre,
          }),
        });

        const data = await res.json();

        if (!res.ok) {
          setError(data.error || 'エラーが発生しました');
          setStep('form');
          return;
        }

        if (!Array.isArray(data) || data.length === 0) {
          setError('条件に合うコンサートが見つかりませんでした。条件を変えて再試行してください。');
          setStep('form');
          return;
        }

        setResults(data);
        setSelected(new Set(data.map((_, i) => i)));
        setStep('results');
      } catch (e) {
        setError('通信エラー: ' + e.message);
        setStep('form');
      }
    }

    function toggleAll() {
      if (selected.size === results.length) {
        setSelected(new Set());
      } else {
        setSelected(new Set(results.map((_, i) => i)));
      }
    }

    function toggleOne(i) {
      setSelected((prev) => {
        const next = new Set(prev);
        if (next.has(i)) next.delete(i); else next.add(i);
        return next;
      });
    }

    function updateResult(i, key, val) {
      setResults((prev) => prev.map((r, idx) => idx === i ? { ...r, [key]: val } : r));
    }

    function handleBulkAdd() {
      const toAdd = results
        .filter((_, i) => selected.has(i))
        .map((c) => ({
          id: uid('c'),
          eventId: form.eventId,
          flyerId: form.flyerId,
          eventName: c.eventName || '',
          date: c.date || '',
          venue: c.venue || '',
          meetTime: '',
          meetPlace: '',
          deliveryMethod: 'bring',
          contactName: '',
          contactOrg: c.contactOrg || '',
          contactPhone: '',
          contactEmail: '',
          staff: [],
          quantity: Number(c.quantity) || 0,
          status: 'proposed',
          note: c.note || '',
          flyerLink: '',
        }));

      if (toAdd.length === 0) { showToast('1件以上選択してください', 'error'); return; }
      onBulkAdd(toAdd);
      showToast(toAdd.length + ' 件を登録しました', 'success');
      onClose();
    }

    const modalTitle =
      step === 'loading' ? 'AI検索中...' :
      step === 'results' ? 'AI検索結果' :
      'AIでコンサートを検索';

    return (
      <Modal
        open={open}
        onClose={onClose}
        title={modalTitle}
        wide
        actions={
          step === 'form' ? (
            <>
              <button className="btn btn-secondary" onClick={onClose}>キャンセル</button>
              <button className="btn btn-primary" onClick={handleSearch}>検索する</button>
            </>
          ) : step === 'results' ? (
            <>
              <button className="btn btn-secondary" onClick={() => setStep('form')}>← 条件に戻る</button>
              <button className="btn btn-primary" onClick={handleBulkAdd} disabled={selected.size === 0}>
                選択した {selected.size} 件を登録
              </button>
            </>
          ) : null
        }
      >
        {step === 'form' && (
          <div>
            {error && (
              <div style={{ background: 'var(--danger)', color: '#fff', padding: '10px 14px', borderRadius: 8, marginBottom: 16, fontSize: 13 }}>
                {error}
              </div>
            )}
            <div className="form-grid">
              <div className="full-width">
                <Field label="開催地域" required>
                  <input
                    value={form.region}
                    onChange={(e) => setF('region', e.target.value)}
                    placeholder="例: 東京都・千葉県・埼玉県"
                  />
                </Field>
              </div>
              <Field label="開始月" required>
                <input type="month" value={form.startMonth} onChange={(e) => setF('startMonth', e.target.value)} />
              </Field>
              <Field label="終了月" required>
                <input type="month" value={form.endMonth} onChange={(e) => setF('endMonth', e.target.value)} />
              </Field>
              <div className="full-width">
                <Field label="ジャンル">
                  <input
                    value={form.genre}
                    onChange={(e) => setF('genre', e.target.value)}
                    placeholder="例: 室内楽（空欄の場合はクラシック全般）"
                  />
                </Field>
              </div>
              <div className="full-width">
                <Field label="登録先イベント" required>
                  <select
                    value={form.eventId}
                    onChange={(e) => { setF('eventId', e.target.value); setF('flyerId', ''); }}
                  >
                    <option value="">-- 選択 --</option>
                    {state.events.map((ev) => <option key={ev.id} value={ev.id}>{ev.title}</option>)}
                  </select>
                </Field>
              </div>
              <div className="full-width">
                <Field label="チラシ種別" required>
                  <select value={form.flyerId} onChange={(e) => setF('flyerId', e.target.value)}>
                    <option value="">-- 選択 --</option>
                    {flyers.map((f) => <option key={f.id} value={f.id}>{f.name}</option>)}
                  </select>
                </Field>
              </div>
            </div>
            <p style={{ fontSize: 12, color: 'var(--muted)', marginTop: 12 }}>
              ※ Google検索を使用してコンサート情報を収集します。挟み込み可否は各主催者への確認が必要です。
            </p>
          </div>
        )}

        {step === 'loading' && (
          <div style={{ textAlign: 'center', padding: '48px 0' }}>
            <div style={{ fontSize: 36, marginBottom: 16 }}>🔍</div>
            <div style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.8 }}>
              {form.region} のコンサートを検索しています...<br />
              <span style={{ fontSize: 12 }}>Google検索を使用しています。10〜30秒かかる場合があります。</span>
            </div>
          </div>
        )}

        {step === 'results' && (
          <div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
              <span style={{ fontSize: 13, color: 'var(--muted)' }}>
                {results.length} 件取得 / {selected.size} 件選択中
              </span>
              <button className="btn btn-ghost btn-sm" onClick={toggleAll}>
                {selected.size === results.length ? '全解除' : '全選択'}
              </button>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, maxHeight: 420, overflowY: 'auto' }}>
              {results.map((c, i) => (
                <div
                  key={i}
                  style={{
                    display: 'flex',
                    gap: 10,
                    alignItems: 'flex-start',
                    padding: '10px 12px',
                    borderRadius: 8,
                    background: selected.has(i) ? 'var(--surface2)' : 'var(--surface)',
                    border: '1px solid ' + (selected.has(i) ? 'var(--accent)' : 'var(--border)'),
                    cursor: 'pointer',
                  }}
                  onClick={() => toggleOne(i)}
                >
                  <input
                    type="checkbox"
                    checked={selected.has(i)}
                    onChange={() => toggleOne(i)}
                    onClick={(e) => e.stopPropagation()}
                    style={{ marginTop: 4, flexShrink: 0 }}
                  />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontWeight: 700, fontSize: 14, marginBottom: 4 }}>{c.eventName}</div>
                    <div style={{ fontSize: 12, color: 'var(--muted)', display: 'flex', flexWrap: 'wrap', gap: '2px 12px', marginBottom: 6 }}>
                      <span>📅 {c.date}</span>
                      {c.venue && <span>📍 {c.venue}</span>}
                      {c.contactOrg && <span>🏢 {c.contactOrg}</span>}
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }} onClick={(e) => e.stopPropagation()}>
                      <span style={{ fontSize: 12, color: 'var(--muted)', whiteSpace: 'nowrap' }}>挟み込み部数（推定）:</span>
                      <input
                        type="number"
                        min="1"
                        value={c.quantity}
                        onChange={(e) => updateResult(i, 'quantity', parseInt(e.target.value) || 0)}
                        style={{ width: 80, fontSize: 13 }}
                      />
                      <span style={{ fontSize: 12, color: 'var(--muted)' }}>部</span>
                    </div>
                    {c.note && (
                      <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 6 }}>{c.note}</div>
                    )}
                  </div>
                </div>
              ))}
            </div>
            <p style={{ fontSize: 11, color: 'var(--muted)', marginTop: 12 }}>
              ※ AIが推定した情報です。日程・主催団体・挟み込み可否は各主催者への確認をお願いします。
            </p>
          </div>
        )}
      </Modal>
    );
  }

  window.AiSearchModal = { AiSearchModal };
})();