/* Concerts View */
(function () {
  const { useState, useEffect } = React;
  const { uid, eventMetrics, formatDate } = window.AppStore;
  const { Modal, showToast, Field } = window.Common;

  const EMPTY_CONCERT = () => ({
    id: '',
    title: '',
    organizer: '',
    date: '',
    venue: '',
    url: '',
    flyers: [{ id: uid('f'), name: 'A4両面カラー', printed: 500, note: '' }],
  });

  function ConcertFormModal({ open, onClose, concert, onSave }) {
    const [form, setForm] = useState(concert ? { ...concert, flyers: concert.flyers.map((f) => ({ ...f })) } : EMPTY_CONCERT());

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

    function setFlyer(idx, key, val) {
      setForm((p) => {
        const flyers = [...p.flyers];
        flyers[idx] = { ...flyers[idx], [key]: val };
        return { ...p, flyers };
      });
    }

    function addFlyer() {
      setForm((p) => ({ ...p, flyers: [...p.flyers, { id: uid('f'), name: '', printed: 0, note: '' }] }));
    }

    function removeFlyer(idx) {
      setForm((p) => ({ ...p, flyers: p.flyers.filter((_, i) => i !== idx) }));
    }

    function handleSave() {
      if (!form.title.trim()) { showToast('タイトルを入力してください', 'error'); return; }
      if (!form.organizer.trim()) { showToast('主催団体を入力してください', 'error'); return; }
      if (!form.date) { showToast('開催日を入力してください', 'error'); return; }
      if (form.flyers.length === 0) { showToast('チラシ種別を1件以上登録してください', 'error'); return; }
      if (form.flyers.some((f) => !f.name.trim())) { showToast('チラシ名を入力してください', 'error'); return; }
      const saving = { ...form };
      if (!saving.id) saving.id = uid('c');
      onSave(saving);
      onClose();
    }

    return (
      <Modal
        open={open}
        onClose={onClose}
        title={concert ? 'イベント編集' : 'イベント追加'}
        wide
        actions={
          <>
            <button className="btn btn-secondary" onClick={onClose}>キャンセル</button>
            <button className="btn btn-primary" onClick={handleSave}>保存</button>
          </>
        }
      >
        <div className="form-grid">
          <div className="full-width">
            <Field label="タイトル" required>
              <input value={form.title} onChange={(e) => set('title', e.target.value)} placeholder="例: 第5回定期演奏会" />
            </Field>
          </div>
          <div className="full-width">
            <Field label="主催団体" required>
              <input value={form.organizer} onChange={(e) => set('organizer', e.target.value)} placeholder="例: 〇〇交響楽団実行委員会" />
            </Field>
          </div>
          <Field label="開催日" required>
            <input type="date" value={form.date} onChange={(e) => set('date', e.target.value)} />
          </Field>
          <Field label="会場">
            <input value={form.venue} onChange={(e) => set('venue', e.target.value)} placeholder="例: 東京文化会館" />
          </Field>
          <div className="full-width">
            <Field label="公演情報URL">
              <input value={form.url} onChange={(e) => set('url', e.target.value)} placeholder="https://..." />
            </Field>
          </div>
        </div>

        <div style={{ marginTop: 20 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
            <span style={{ fontWeight: 700, fontSize: 14 }}>チラシ種別</span>
            <button className="btn btn-secondary btn-sm" type="button" onClick={addFlyer}>+ 追加</button>
          </div>
          {form.flyers.map((f, i) => (
            <div key={f.id} className="flyer-form-row">
              <input
                value={f.name}
                onChange={(e) => setFlyer(i, 'name', e.target.value)}
                placeholder="例: A4両面カラー"
              />
              <input
                type="number"
                min="0"
                value={f.printed}
                onChange={(e) => setFlyer(i, 'printed', parseInt(e.target.value) || 0)}
                placeholder="部数"
              />
              <button className="btn-icon" type="button" onClick={() => removeFlyer(i)} aria-label="削除" title="削除">🗑</button>
            </div>
          ))}
          {form.flyers.map((f, i) => (
            <div key={f.id + '_note'} style={{ marginBottom: 8 }}>
              <input
                value={f.note}
                onChange={(e) => setFlyer(i, 'note', e.target.value)}
                placeholder={`「${f.name || '種別' + (i + 1)}」備考`}
                style={{ fontSize: 12 }}
              />
            </div>
          ))}
        </div>
      </Modal>
    );
  }

  function ReprintModal({ open, onClose, flyer, onSave }) {
    const [qty, setQty] = useState('');
    const [date, setDate] = useState('');
    const [dest, setDest] = useState('');

    useEffect(() => {
      if (open) { setQty(''); setDate(''); setDest(''); }
    }, [open]);

    function handleSave() {
      const n = parseInt(qty);
      if (!n || n <= 0) { showToast('追加枚数を入力してください', 'error'); return; }
      onSave({ qty: n, date, dest });
      onClose();
    }

    return (
      <Modal
        open={open}
        onClose={onClose}
        title={'増刷記録 — ' + (flyer?.name || '')}
        actions={
          <>
            <button className="btn btn-secondary" onClick={onClose}>キャンセル</button>
            <button className="btn btn-primary" onClick={handleSave}>記録する</button>
          </>
        }
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Field label="追加枚数" required>
            <input
              type="number"
              min="1"
              value={qty}
              onChange={(e) => setQty(e.target.value)}
              placeholder="例: 200"
              autoFocus
            />
          </Field>
          <Field label="発送予定日">
            <input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
          </Field>
          <Field label="発送先">
            <input value={dest} onChange={(e) => setDest(e.target.value)} placeholder="例: 東京印刷株式会社" />
          </Field>
        </div>
      </Modal>
    );
  }

  function ConcertsView({ state, onChange }) {
    const [modalOpen, setModalOpen] = useState(false);
    const [editing, setEditing] = useState(null);
    const [confirmDelete, setConfirmDelete] = useState(null);
    const [reprintTarget, setReprintTarget] = useState(null);

    function handleSave(ev) {
      const events = state.events.find((e) => e.id === ev.id)
        ? state.events.map((e) => e.id === ev.id ? ev : e)
        : [...state.events, ev];
      onChange({ ...state, events });
      showToast('保存しました', 'success');
    }

    function handleDelete(id) {
      const events = state.events.filter((e) => e.id !== id);
      const concerts = state.concerts.filter((c) => c.eventId !== id);
      onChange({ ...state, events, concerts });
      setConfirmDelete(null);
      showToast('削除しました');
    }

    function handleReprint({ qty, date, dest }) {
      const events = state.events.map((ev) => {
        if (ev.id !== reprintTarget.eventId) return ev;
        const flyers = ev.flyers.map((f) => {
          if (f.id !== reprintTarget.flyerId) return f;
          const parts = ['[増刷] +' + qty + '部'];
          if (date) parts.push(formatDate(date));
          if (dest) parts.push(dest);
          const logEntry = parts.join(' ');
          const newNote = f.note ? f.note + '\n' + logEntry : logEntry;
          return { ...f, printed: f.printed + qty, note: newNote };
        });
        return { ...ev, flyers };
      });
      onChange({ ...state, events });
      showToast('増刷を記録しました', 'success');
    }

    return (
      <div>
        <div className="page-header">
          <h1 className="page-title">イベント管理</h1>
          <button className="btn btn-primary" onClick={() => { setEditing(null); setModalOpen(true); }}>
            + イベント追加
          </button>
        </div>

        {state.events.length === 0 ? (
          <div className="empty-state">
            <div className="empty-state-icon">🎵</div>
            <div className="empty-state-text">イベントを登録してください</div>
          </div>
        ) : (
          <div className="concert-grid">
            {state.events.map((event) => {
              const m = eventMetrics(state, event.id);
              if (!m) return null;
              return (
                <div key={event.id} className="concert-card">
                  <div className="concert-card-header">
                    <div className="concert-card-title">{event.title}</div>
                    <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
                      <button className="btn-icon btn-sm" title="編集" onClick={() => { setEditing(event); setModalOpen(true); }}>✏️</button>
                      <button className="btn-icon btn-sm" title="削除" onClick={() => setConfirmDelete(event)}>🗑</button>
                    </div>
                  </div>
                  <div className="concert-card-meta">
                    <span>📅 {formatDate(event.date)}</span>
                    {event.venue && <span>📍 {event.venue}</span>}
                    {event.organizer && <span>🏢 {event.organizer}</span>}
                    {event.url && <a href={event.url} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--accent)', fontSize: 12 }}>🔗 URL</a>}
                  </div>

                  <div className="concert-card-stats">
                    <div className="concert-stat">
                      <div className="concert-stat-label">印刷</div>
                      <div className="concert-stat-value">{m.totalPrinted}</div>
                    </div>
                    <div className="concert-stat">
                      <div className="concert-stat-label">確定</div>
                      <div className="concert-stat-value">{m.totalCommitted}</div>
                    </div>
                    <div className="concert-stat">
                      <div className="concert-stat-label">予約</div>
                      <div className="concert-stat-value">{m.totalReserved}</div>
                    </div>
                    <div className="concert-stat">
                      <div className="concert-stat-label">残</div>
                      <div className={'concert-stat-value' + (m.totalRemaining < 0 ? ' danger' : '')}>{m.totalRemaining}</div>
                    </div>
                  </div>

                  <table className="flyer-table">
                    <thead>
                      <tr>
                        <th>チラシ</th>
                        <th>印刷</th>
                        <th>確定</th>
                        <th>予約</th>
                        <th>残</th>
                        <th></th>
                      </tr>
                    </thead>
                    <tbody>
                      {m.flyerMetrics.map((f) => (
                        <tr key={f.id}>
                          <td>{f.name}</td>
                          <td>{f.printed}</td>
                          <td>{f.committed}</td>
                          <td>{f.reserved}</td>
                          <td className={f.remaining < 0 ? 'danger' : ''}>{f.remaining}</td>
                          <td style={{ width: 32, padding: '2px 4px' }}>
                            <button
                              className="btn-icon btn-sm"
                              title="増刷を記録"
                              onClick={() => setReprintTarget({ eventId: event.id, flyerId: f.id, flyerName: f.name })}
                            >➕</button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              );
            })}
          </div>
        )}

        <ConcertFormModal
          key={editing?.id || 'new'}
          open={modalOpen}
          onClose={() => setModalOpen(false)}
          concert={editing}
          onSave={handleSave}
        />

        <ReprintModal
          open={!!reprintTarget}
          onClose={() => setReprintTarget(null)}
          flyer={reprintTarget}
          onSave={handleReprint}
        />

        <Modal
          open={!!confirmDelete}
          onClose={() => setConfirmDelete(null)}
          title="イベント削除"
          actions={
            <>
              <button className="btn btn-secondary" onClick={() => setConfirmDelete(null)}>キャンセル</button>
              <button className="btn btn-danger" onClick={() => handleDelete(confirmDelete.id)}>削除する</button>
            </>
          }
        >
          <p>「{confirmDelete?.title}」を削除します。関連するコンサートも削除されます。よろしいですか？</p>
        </Modal>
      </div>
    );
  }

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