/* parts2.jsx — расписание с фильтрами, таблицы групп, паблы, бронирование */
const { useState: useState2, useMemo } = React;
const W2 = window.WC;
const U2 = window.U;

/* ════════ РАСПИСАНИЕ ════════ */
function Schedule({ cur, favs, toggleFav }) {
  const [mode, setMode] = useState2('group');
  const [day, setDay] = useState2(null); // null = все дни
  const [favOnly, setFavOnly] = useState2(false);

  const days = W2.groupDays;
  const byDay = useMemo(() => {
    const map = {};
    W2.matches.forEach((m) => {(map[m.date] = map[m.date] || []).push(m);});
    Object.values(map).forEach((arr) => arr.sort((a, b) => a.time.localeCompare(b.time)));
    return map;
  }, []);

  const passFav = (m) => !favOnly || favs.has(m.home) || favs.has(m.away);
  const shownDays = (day ? [day] : days).filter((d) => (byDay[d] || []).some(passFav));

  return (
    <section>
      <div className="sec-head">
        <div>
          <span className="eyebrow">Расписание</span>
          <h2 className="h-sec">Все матчи<br />турнира</h2>
        </div>
      </div>

      <div className="seg">
        <button className={mode === 'group' ? 'on' : ''} onClick={() => setMode('group')}>Групповой этап</button>
        <button className={mode === 'ko' ? 'on' : ''} onClick={() => setMode('ko')}>Плей-офф</button>
      </div>

      {mode === 'group' ?
      <>
          <div className="chips">
            <button className={'chip all' + (day === null ? ' on' : '')} onClick={() => setDay(null)}>Все</button>
            {days.map((d) =>
          <button key={d} className={'chip' + (day === d ? ' on' : '')} onClick={() => setDay(day === d ? null : d)}>
                <span className="d tnum">{U2.parts(d).d}</span>
                <span className="w">{U2.wdShort(d)}</span>
              </button>
          )}
          </div>

          <div className="favbar">
            <span className="sec-note">{day ? U2.fmtLong(day) : 'Туры 1–3 · 11–27 июня'}</span>
            <button className={'favtoggle' + (favOnly ? ' on' : '')} onClick={() => setFavOnly(!favOnly)}>
              <span className="ic"><Icon name="star" size={13} /></span>
              Избранное
            </button>
          </div>

          {shownDays.length === 0 ?
        <div className="b-empty" style={{ color: 'var(--muted)', paddingTop: 20 }}>
              Нет матчей с избранными командами в этот день. Отметьте команды звёздочкой ★ или снимите фильтр.
            </div> :
        shownDays.map((d) =>
        <div className="daygroup" key={d}>
              <div className="day-label">{U2.fmtLong(d)} · {U2.wdShort(d)}</div>
              <div className="mlist">
                {byDay[d].filter(passFav).map((m) =>
            <MatchCard key={m.id} m={m} favs={favs} toggleFav={toggleFav} />
            )}
              </div>
            </div>
        )}
        </> :

      <div className="ko" style={{ marginTop: 18 }}>
          {W2.knockout.map((r) =>
        <div key={r.key} className={'ko-card' + (r.key === 'final' ? ' final' : '')}>
              <div>
                <div className="ko-name">{r.name}</div>
                <div className="ko-meta">{r.dates}{r.city ? ' · ' + r.city : ''} · пары по итогам групп</div>
              </div>
              <div className="ko-cnt tnum">{r.count}<small>{matchWord(r.count)}</small></div>
            </div>
        )}
        </div>
      }
    </section>);

}

/* ════════ ТАБЛИЦЫ ГРУПП ════════ */
function Standings({ favs }) {
  const [g, setG] = useState2('A');
  const keys = Object.keys(W2.groups);
  const teams = W2.groups[g];
  return (
    <section style={{ background: 'transparent' }}>
      <div className="sec-head">
        <div>
          <span className="eyebrow">Турнирная таблица</span>
          <h2 className="h-sec">Группы<br />A — L</h2>
        </div>
      </div>
      <div className="gtabs">
        {keys.map((k) =>
        <button key={k} className={'gtab' + (k === g ? ' on' : '')} onClick={() => setG(k)}>{k}</button>
        )}
      </div>
      <div className="gtable">
        {teams.map((code, i) =>
        <div key={code} className={'grow' + (i < 2 ? ' qualify' : '')}>
            <span className="pos tnum">{i + 1}</span>
            <span className="tm">
              <Flag code={code} />
              <span className="nm">{U2.teamName(code)}</span>
              {favs.has(code) && <span className="star" style={{ color: 'var(--accent)' }}><Icon name="star" size={11} /></span>}
            </span>
            <span className="pts">0 матчей</span>
          </div>
        )}
      </div>
      <div className="glegend">
        <span className="k"><span className="sw"></span> 1–2 место — в плей-офф напрямую</span>
      </div>
      <div className="sec-note" style={{ marginTop: 10 }}>
        Плюс 8 лучших сборных с 3-го места проходят в 1/16 финала.
      </div>
    </section>);

}

/* ════════ ПАБЫ ════════ */
function BarMonogram({ name }) {
  return <span style={{ fontFamily: 'var(--font-head)', fontWeight: 700, fontSize: 22, lineHeight: 1 }}>{name[0]}</span>;
}

function Bars({ cur, onBook }) {
  return (
    <section>
      <div className="sec-head">
        <div>
          <span className="eyebrow">Где смотреть</span>
          <h2 className="h-sec">ПАБЫ</h2>
        </div>
      </div>
      <div className="sec-note" style={{ marginBottom: 16 }}>
        Гастрономические пабы Петербурга. Выбирайте ближайший и бронируйте стол под нужный матч.
      </div>
      <div className="bars">
        {W2.bars.map((b) =>
        <div className="bar-card" key={b.id}>
            <div className="bar-top">
              <div className="bar-mark"><BarMonogram name={b.name} /></div>
              <div>
                <div className="bar-name">{b.name}</div>
                <div className="bar-kind">Гастрономический паб</div>
              </div>
            </div>
            <div className="bar-info">
              <div className="bar-line"><span className="ic"><Icon name="pin" size={16} /></span>{b.addr}</div>
              {b.phones.map((p) =>
            <div className="bar-line" key={p}><span className="ic"><Icon name="phone" size={15} /></span><span className="ph">{p}</span></div>
            )}
            </div>
            <button className="bar-btn" onClick={() => onBook(b)}>
              Забронировать стол <Icon name="arrow" size={16} />
            </button>
          </div>
        )}
      </div>
    </section>);

}

/* ════════ МОДАЛКА БРОНИРОВАНИЯ ════════ */
function BookingModal({ bar, cur, onClose }) {
  const futureDays = W2.groupDays.filter((d) => d >= cur);
  const days = futureDays.length ? futureDays : W2.groupDays;
  const [date, setDate] = useState2(days[0]);
  const [matchId, setMatchId] = useState2('');
  const [guests, setGuests] = useState2(2);
  const [name, setName] = useState2('');
  const [phone, setPhone] = useState2('');
  const [done, setDone] = useState2(false);

  const dayMatches = U2.matchesOn(date).sort((a, b) => a.time.localeCompare(b.time));

  function submit(e) {
    e.preventDefault();
    setDone(true);
  }

  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-grab"></div>
        {done ?
        <div className="modal-ok">
            <div className="check"><Icon name="check" size={26} /></div>
            <h3>Заявка принята</h3>
            <p className="sub" style={{ marginBottom: 0 }}>
              {bar.name} · {U2.fmtLong(date)} · {guests} {guestWord(guests)}.<br />
              Мы перезвоним для подтверждения на {phone || 'указанный номер'}.
            </p>
            <div className="modal-actions" style={{ marginTop: 22 }}>
              <button className="btn-primary" onClick={onClose}>Готово</button>
            </div>
            <div className="modal-note">Демо-форма. Реальная отправка не выполняется.</div>
          </div> :

        <form onSubmit={submit}>
            <h3>Бронь · {bar.name}</h3>
            <div className="sub">{bar.addr} · {bar.phones[0]}</div>
            <div className="field-row">
              <div className="field">
                <label>Дата матча</label>
                <select value={date} onChange={(e) => {setDate(e.target.value);setMatchId('');}}>
                  {days.map((d) => <option key={d} value={d}>{U2.fmtLong(d)}, {U2.wdShort(d)}</option>)}
                </select>
              </div>
              <div className="field" style={{ maxWidth: 120 }}>
                <label>Гостей</label>
                <select value={guests} onChange={(e) => setGuests(+e.target.value)}>
                  {[1, 2, 3, 4, 5, 6, 8, 10, 12].map((n) => <option key={n} value={n}>{n}</option>)}
                </select>
              </div>
            </div>
            <div className="field">
              <label>Матч (необязательно)</label>
              <select value={matchId} onChange={(e) => setMatchId(e.target.value)}>
                <option value="">Любой / весь вечер</option>
                {dayMatches.map((m) =>
              <option key={m.id} value={m.id}>
                    {m.time} · {U2.teamName(m.home)} — {U2.teamName(m.away)}
                  </option>
              )}
              </select>
            </div>
            <div className="field-row">
              <div className="field"><label>Имя</label><input value={name} onChange={(e) => setName(e.target.value)} placeholder="Как к вам обращаться" /></div>
            </div>
            <div className="field"><label>Телефон</label><input value={phone} onChange={(e) => setPhone(e.target.value)} placeholder="+7 (___) ___-__-__" inputMode="tel" /></div>
            <div className="modal-actions">
              <button type="button" className="btn-ghost" onClick={onClose}>Отмена</button>
              <button type="submit" className="btn-primary">Забронировать</button>
            </div>
            <div className="modal-note">Демонстрационная форма для прототипа.</div>
          </form>
        }
      </div>
    </div>);

}

function guestWord(n) {
  const a = n % 10,b = n % 100;
  if (a === 1 && b !== 11) return 'гость';
  if (a >= 2 && a <= 4 && (b < 10 || b >= 20)) return 'гостя';
  return 'гостей';
}

Object.assign(window, { Schedule, Standings, Bars, BookingModal, guestWord });