// FartBet — Auth, Home (events list), Event card, Bet slip
const { useState: useStateS1, useEffect: useEffectS1, useMemo: useMemoS1, useRef: useRefS1 } = React;

// Countdown timer — local copy (Babel standalone doesn’t guarantee cross-file order)
function Countdown({ closesAt, fallback }) {
  const [left, setLeft] = useStateS1('');
  useEffectS1(() => {
    if (!closesAt) { setLeft(''); return; }
    const target = new Date(closesAt).getTime();
    const tick = () => {
      const diff = target - Date.now();
      if (diff <= 0) { setLeft('⏱ Время вышло'); return; }
      const h = Math.floor(diff / 3600000);
      const m = Math.floor((diff % 3600000) / 60000);
      const s = Math.floor((diff % 60000) / 1000);
      const pad = n => String(n).padStart(2, '0');
      setLeft(`⏱ ${h > 0 ? h + ':' : ''}${pad(m)}:${pad(s)}`);
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, [closesAt]);
  if (!closesAt) return fallback || null;
  return <span className={cx('countdown', left.includes('Время вышло') && 'countdown-expired')}>{left}</span>;
}

// ── AUTH MODAL ──────────────────────────────────────────────────────────────
function AuthModal({ open, onClose, onLogin, onDevLogin, users, config }) {
  const [phase, setPhase] = useStateS1('main'); // main | choose
  const [chosenId, setChosenId] = useStateS1(null);
  const tgWidgetRef = useRefS1(null);

  // Telegram Login Widget callback — pass raw TG data to parent, which calls the API
  useEffectS1(() => {
    window.__onTelegramAuth = (tgUser) => onLogin(tgUser);
    return () => { delete window.__onTelegramAuth; };
  }, [onLogin]);

  // Load Telegram widget
  useEffectS1(() => {
    if (phase !== 'main' || !open || !config?.telegramBotUsername || !tgWidgetRef.current) return;
    tgWidgetRef.current.innerHTML = '';
    const script = document.createElement('script');
    script.src = 'https://telegram.org/js/telegram-widget.js?22';
    script.setAttribute('data-telegram-login', config.telegramBotUsername);
    script.setAttribute('data-size', 'large');
    script.setAttribute('data-onauth', '__onTelegramAuth(user)');
    script.setAttribute('data-request-access', 'write');
    script.async = true;
    tgWidgetRef.current.appendChild(script);
  }, [phase, open, config?.telegramBotUsername]);

  useEffectS1(() => {
    if (!open) { setPhase('main'); setChosenId(null); }
  }, [open]);

  const adminUser = (users || []).find(u => u.role === 'admin');

  return (
    <Modal open={open} onClose={onClose} width={420}>
      <div className="auth-card">
        <button className="modal-x" onClick={onClose}>✕</button>

        <div className="auth-logo">
          <span className="logo-mark big">F</span>
          <div>
            <div className="auth-brand">FART<span className="logo-accent">BET</span></div>
            <div className="auth-sub">Внутренняя БК на PCOIN</div>
          </div>
        </div>

        {phase === 'main' && (
          <>
            <h3 className="auth-h">Вход в FartBet</h3>
            <p className="auth-p">
              Ставки на события дня компании. Реальные деньги не используются — только внутренний{' '}
              <CoinIcon size={13}/> <b>PCOIN</b>. Новичкам начисляется <b>1 000 PC</b> на старт.
            </p>

            {config?.telegramBotUsername ? (
              <div ref={tgWidgetRef} style={{ display:'flex', justifyContent:'center', margin:'12px 0' }}></div>
            ) : (
              <div className="auth-no-tg">Telegram бот не настроен</div>
            )}

            <div className="auth-divider"><span>нет доступа к Telegram?</span></div>
            <p className="auth-p auth-p-sm" style={{textAlign:'center'}}>
              Попроси админа прислать тебе персональную ссылку для входа
            </p>

            {config?.devMode && (
              <>
                <div className="auth-divider"><span>dev-вход</span></div>
                <button className="auth-secondary" onClick={() => setPhase('choose')}>
                  Выбрать пользователя из базы
                </button>
              </>
            )}

            <div className="auth-foot">
              Нажимая «Войти», вы соглашаетесь с <a href="#">правилами лиги</a>{' '}
              и тем, что коллеги увидят ваши ставки в Board.
            </div>
          </>
        )}

        {phase === 'choose' && (
          <>
            <h3 className="auth-h">Выбери, кто ты</h3>
            <p className="auth-p auth-p-sm">Dev-режим. Выбери профиль из базы данных.</p>
            <div className="auth-grid">
              {(users || []).filter(u => u.role !== 'admin').map(u => (
                <button key={u.id}
                  className={cx('auth-user', chosenId === u.id && 'sel')}
                  onClick={() => setChosenId(u.id)}>
                  <Avatar user={u} size={36} />
                  <div className="auth-user-meta">
                    <div className="auth-user-n">{u.name}</div>
                    <div className="auth-user-h">{u.handle}</div>
                  </div>
                </button>
              ))}
              {adminUser && (
                <button className={cx('auth-user auth-user-admin', chosenId === adminUser.id && 'sel')} onClick={() => setChosenId(adminUser.id)}>
                  <Avatar user={adminUser} size={36} />
                  <div className="auth-user-meta">
                    <div className="auth-user-n">Админ</div>
                    <div className="auth-user-h">@admin · может создавать события</div>
                  </div>
                </button>
              )}
            </div>
            <button className="btn btn-primary btn-full" disabled={!chosenId} onClick={() => onDevLogin(chosenId)}>
              Продолжить
            </button>
            <button className="auth-secondary" style={{marginTop:8}} onClick={() => setPhase('main')}>← Назад</button>
          </>
        )}
      </div>
    </Modal>
  );
}

// ── BET SLIP (right column) ─────────────────────────────────────────────────
function BetSlip({ selections, removeSel, clearSel, onPlace, user, onOpenAuth }) {
  const [stake, setStake] = useStateS1(100);

  const totalCoef = selections.reduce((a, s) => a * s.coef, 1);
  const potential = stake * totalCoef;
  const enough = user && stake <= user.balance;
  const empty = selections.length === 0;

  const quickStakes = [50, 100, 250, 500];

  return (
    <div className="slip">
      <div className="slip-hd">
        <div>
          <span className="slip-title">Купон</span>
          {selections.length > 0 && (
            <span className="slip-count">{selections.length}</span>
          )}
        </div>
        {selections.length > 0 && (
          <button className="slip-clear" onClick={clearSel}>Очистить</button>
        )}
      </div>

      {empty ? (
        <div className="slip-empty">
          <div className="slip-empty-icon">
            <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
              <path d="M3 8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2a2 2 0 0 0 0 4v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 0 0 0-4V8z"/>
              <path d="M12 6v12" strokeDasharray="2 2"/>
            </svg>
          </div>
          <div className="slip-empty-t">Купон пуст</div>
          <div className="slip-empty-s">Кликни по коэффициенту в любом событии, чтобы добавить в купон.</div>
        </div>
      ) : (
        <>
          <div className="slip-list">
            {selections.map((s, i) => (
              <div key={i} className="slip-row">
                <div className="slip-row-main">
                  <div className="slip-row-evt">{s.event.title}</div>
                  <div className="slip-row-pick">
                    <span className="slip-pick-label">{s.outcomeLabel}</span>
                    <span className="slip-pick-coef">{s.coef.toFixed(2)}</span>
                  </div>
                </div>
                <button className="slip-row-x" onClick={() => removeSel(i)}>✕</button>
              </div>
            ))}
          </div>

          {selections.length > 1 && (
            <div className="slip-express">
              <span>Экспресс ×{selections.length}</span>
              <span>Общий коэф · <b>{totalCoef.toFixed(2)}</b></span>
            </div>
          )}

          <div className="slip-stake">
            <label>Сумма ставки</label>
            <div className="slip-stake-input">
              <input type="number" min={1} value={stake} onChange={e => setStake(Math.max(0, +e.target.value || 0))} />
              <span className="slip-stake-unit"><CoinIcon size={14}/> PC</span>
            </div>
            <div className="slip-quick">
              {quickStakes.map(q => (
                <button key={q} onClick={() => setStake(q)}>{q}</button>
              ))}
              {user && <button onClick={() => setStake(user.balance)} className="slip-quick-max">MAX</button>}
            </div>
          </div>

          <div className="slip-summary">
            <div className="slip-sum-row">
              <span>Коэффициент</span>
              <b>×{totalCoef.toFixed(2)}</b>
            </div>
            <div className="slip-sum-row big">
              <span>Возможный выигрыш</span>
              <b className="slip-win"><CoinIcon size={15}/> {formatPC(potential)} PC</b>
            </div>
          </div>

          {!user ? (
            <button className="btn btn-primary btn-full btn-place" onClick={onOpenAuth}>
              Войти, чтобы поставить
            </button>
          ) : enough ? (
            <button className="btn btn-primary btn-full btn-place" onClick={() => onPlace(stake, totalCoef, potential)}>
              Поставить <CoinIcon size={14}/> {formatPC(stake)} PC
            </button>
          ) : (
            <button className="btn btn-disabled btn-full btn-place" disabled>
              Недостаточно PCOIN на балансе
            </button>
          )}
        </>
      )}
    </div>
  );
}

// ── EVENT CARD (used on Home & Event detail) ────────────────────────────────
function EventCard({ event, data, onSelect, isSelected, onOpen, compact = false, asRow = false, user }) {
  const subject = event.subject;
  const bettors = event.bettors;
  const isCreator = user && event.createdBy === user.id;

  return (
    <div className={cx('evt-card', `evt-${event.status}`, event.hot && 'evt-hot', compact && 'evt-compact', asRow && 'evt-row')}>
      <div className="evt-hd">
        <div className="evt-hd-l">
          <CategoryTag cat={event.cat} data={data} />
          <span className="evt-subject">{subject}</span>
          {event.hot && <span className="evt-fire">🔥 HOT</span>}
          {isCreator && <span className="evt-fire" style={{background:'var(--surface-3)',color:'var(--text-2)'}}>ваше событие</span>}
        </div>
        <StatusDot status={event.status} />
      </div>

      <button className="evt-title" onClick={onOpen}>
        {event.title}
      </button>

      <div className="evt-meta">
        <span className="evt-meta-i">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
          {event.startsAt}
        </span>
        <span className="evt-meta-i">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13A4 4 0 0 1 16 11"/></svg>
          {bettors} ставок
        </span>
        <span className="evt-meta-i">
          <CoinIcon size={11}/> пул {formatPC(event.pool)} PC
        </span>
        {event.status !== 'settled' && event.status !== 'closed' && (
          <span className="evt-meta-i evt-closes">
            <Countdown closesAt={event.closesAt} fallback={<span>до закрытия · {event.closesIn}</span>} />
          </span>
        )}
      </div>

      <div className={cx('evt-outs', event.outcomes.length === 3 && 'evt-outs-3')}>
        {event.outcomes.map(o => {
          const sel = isSelected && isSelected(event.id, o.id);
          const won = event.status === 'settled' && event.result === o.id;
          const lost = event.status === 'settled' && event.result !== o.id;
          return (
            <button key={o.id}
              className={cx('out-btn', sel && 'out-sel', won && 'out-won', lost && 'out-lost',
                            event.status === 'closed' && 'out-closed',
                            event.status === 'settled' && 'out-settled')}
              disabled={event.status === 'closed' || event.status === 'settled'}
              onClick={() => onSelect && onSelect(event, o)}>
              <span className="out-label">{o.label}</span>
              <span className="out-coef">{o.coef.toFixed(2)}</span>
              <div className="out-pop">
                <div className="out-pop-fill" style={{ width: `${Math.round(o.popularity * 100)}%` }}></div>
              </div>
              {won && <span className="out-flag">✓ ИТОГ</span>}
            </button>
          );
        })}
      </div>
    </div>
  );
}

// ── HOME SCREEN ─────────────────────────────────────────────────────────────
function HomeScreen({ data, route, setRoute, addSel, isSelected, recentBets, user, searchQuery }) {
  const [tab, setTab] = useStateS1(route.filter || 'all');
  const cat = route.cat;

  useEffectS1(() => { if (route.filter) setTab(route.filter); }, [route.filter]);

  // When user starts typing in search, switch to 'all' tab to show all results
  useEffectS1(() => { if (searchQuery) setTab('all'); }, [searchQuery]);

  const tabs = [
    { k: 'all',    l: 'Все',     n: data.EVENTS.length },
    { k: 'live',   l: 'Live',    n: data.EVENTS.filter(e => e.status === 'live').length },
    { k: 'open',   l: 'Сегодня', n: data.EVENTS.filter(e => e.status === 'open' && e.startsAt.includes('Сегодня')).length },
    { k: 'closed', l: 'Закрытые', n: data.EVENTS.filter(e => e.status === 'closed' || e.status === 'settled').length },
  ];

  const filtered = data.EVENTS.filter(e => {
    if (cat && e.cat !== cat) return false;
    if (tab === 'live') return e.status === 'live';
    if (tab === 'open') return e.status === 'open';
    if (tab === 'closed') return e.status === 'closed' || e.status === 'settled';
    if (searchQuery) {
      const q = searchQuery.toLowerCase();
      const titleMatch = e.title.toLowerCase().includes(q);
      const subjectMatch = e.subjectName && e.subjectName.toLowerCase().includes(q);
      const catMatch = data.CATEGORIES[e.cat] && data.CATEGORIES[e.cat].label.toLowerCase().includes(q);
      return titleMatch || subjectMatch || catMatch;
    }
    return true;
  });

  const liveEvents = data.EVENTS.filter(e => e.status === 'live' || e.hot).slice(0, 4);

  return (
    <div className="home">
      {/* Hero banner */}
      <div className="hero">
        <div className="hero-bg"></div>
        <div className="hero-content">
          <div className="hero-tag">КОРПОРАТИВ · ДЕНЬ 12</div>
          <h1 className="hero-h">События дня компании,<br/>на которые ты бы и так смотрел.</h1>
          <p className="hero-p">Серьёзная букмекерская конторка для несерьёзных вопросов. Ставь PCOIN на коллег.</p>
          <div className="hero-stats">
            <div><b>{data.EVENTS.length}</b><span>событий</span></div>
            <div><b>{data.BETS.length}</b><span>ставок сегодня</span></div>
            <div><b>{data.USERS.filter(u => u.role !== 'admin').length}</b><span>игроков</span></div>
          </div>
        </div>
        <div className="hero-ticker">
          <div className="ticker-track">
            {recentBets.slice(0, 8).map((b, i) => {
              const u = data.byId(b.userId);
              const e = data.EVENTS.find(x => x.id === b.eventId);
              if (!u || !e) return null;
              return (
                <span key={i} className="ticker-item">
                  <Avatar user={u} size={18} />
                  <b>{u.name.split(' ')[0]}</b>
                  <span>· {e.title.slice(0, 36)}{e.title.length > 36 ? '…' : ''}</span>
                  <span className="ticker-stake"><CoinIcon size={11}/> {b.stake} PC</span>
                </span>
              );
            })}
          </div>
        </div>
      </div>

      {/* Live row */}
      {liveEvents.length > 0 && (
        <div className="live-row">
          <div className="sect-hd">
            <span className="sect-dot pulse"></span>
            <h2>Сейчас идёт</h2>
            <span className="sect-sub">приём ставок ещё открыт</span>
          </div>
          <div className="live-grid">
            {liveEvents.map(e => (
              <EventCard key={e.id} event={e} data={data}
                onSelect={addSel} isSelected={isSelected}
                onOpen={() => setRoute({ name: 'event', id: e.id })}
                compact user={user} />
            ))}
          </div>
        </div>
      )}

      {/* Tabs */}
      <div className="line-tabs">
        {tabs.map(t => (
          <button key={t.k} className={cx('line-tab', tab === t.k && 'active')} onClick={() => setTab(t.k)}>
            {t.l} <span className="line-tab-n">{t.n}</span>
          </button>
        ))}
        {cat && (
          <div className="line-tab-cat">
            <span className="cat-tag">{data.CATEGORIES[cat].short}</span>
            {data.CATEGORIES[cat].label}
            <button onClick={() => setRoute({ name: 'home' })}>✕</button>
          </div>
        )}
        <div className="line-tabs-r">
          <button className="line-sort">Сортировка: <b>популярные</b> ↓</button>
        </div>
      </div>

      <div className="evt-list">
        {filtered.map(e => (
          <EventCard key={e.id} event={e} data={data}
            onSelect={addSel} isSelected={isSelected}
            onOpen={() => setRoute({ name: 'event', id: e.id })} user={user} />
        ))}
        {filtered.length === 0 && (
          <div className="empty-state">Нет событий по этому фильтру</div>
        )}
      </div>
    </div>
  );
}

// ── EVENT DETAIL ────────────────────────────────────────────────────────────
function EventScreen({ event, data, setRoute, addSel, isSelected, recentBets, user }) {
  if (!event) return <div className="empty-state">Событие не найдено</div>;

  const eventBets = recentBets.filter(b => b.eventId === event.id);
  const subject = data.USERS.find(u => u.name === event.subject);
  const isCreator = user && event.createdBy === user.id;

  // Stake distribution per outcome
  const totalStake = eventBets.reduce((a, b) => a + b.stake, 0) || 1;
  const distByOut = {};
  eventBets.forEach(b => { distByOut[b.outcome] = (distByOut[b.outcome] || 0) + b.stake; });

  return (
    <div className="evt-detail">
      <button className="back-btn" onClick={() => setRoute({ name: 'home' })}>← Назад к линии</button>

      <div className="evt-detail-hd">
        <div className="evt-detail-meta">
          <CategoryTag cat={event.cat} data={data} />
          <span>{event.subject}</span>
          <span className="dot-sep">·</span>
          <span>{event.startsAt}</span>
          <span className="dot-sep">·</span>
          <span>ID: {String(event.id).toUpperCase()}</span>
        </div>
        <StatusDot status={event.status} />
      </div>

      <h1 className="evt-detail-title">{event.title}</h1>

      <div className="evt-detail-stats">
        <div className="stat-card">
          <div className="stat-l">Призовой пул</div>
          <div className="stat-v"><CoinIcon size={20}/> {formatPC(event.pool)} <span>PC</span></div>
        </div>
        <div className="stat-card">
          <div className="stat-l">Ставок</div>
          <div className="stat-v">{event.bettors} <span>игроков</span></div>
        </div>
        <div className="stat-card">
          <div className="stat-l">До закрытия</div>
          <div className="stat-v stat-clock">
            <Countdown closesAt={event.closesAt} fallback={<span>{event.closesIn}</span>} />
          </div>
        </div>
        {subject && (
          <div className="stat-card">
            <div className="stat-l">Объект</div>
            <div className="stat-v stat-subject">
              <Avatar user={subject} size={26}/> <span>{subject.name}</span>
            </div>
          </div>
        )}
      </div>

      <div className="sect-hd"><h2>Исходы</h2><span className="sect-sub">кликни, чтобы добавить в купон</span></div>
      <div className={cx('evt-detail-outs', event.outcomes.length === 3 && 'evt-detail-outs-3')}>
        {event.outcomes.map(o => {
          const sel = isSelected && isSelected(event.id, o.id);
          const share = (distByOut[o.id] || 0) / totalStake;
          const won = event.status === 'settled' && event.result === o.id;
          return (
            <button key={o.id}
              className={cx('out-big', sel && 'out-sel', won && 'out-won',
                            (event.status === 'closed' || event.status === 'settled') && 'out-disabled')}
              disabled={event.status === 'closed' || event.status === 'settled'}
              onClick={() => addSel(event, o)}>
              <div className="out-big-l">{o.label}</div>
              <div className="out-big-c">{o.coef.toFixed(2)}</div>
              <div className="out-big-pop">
                <div className="out-pop">
                  <div className="out-pop-fill" style={{ width: `${Math.round(share * 100)}%` }}></div>
                </div>
                <span>{Math.round(share * 100)}% пула</span>
              </div>
              {won && <span className="out-flag">✓ ИТОГ</span>}
            </button>
          );
        })}
      </div>

      <div className="evt-bets">
        <div className="sect-hd">
          <h2>Ставки на это событие</h2>
          <span className="sect-sub">{eventBets.length} из {event.bettors}</span>
        </div>
        <div className="evt-bets-list">
          {eventBets.length === 0 && <div className="empty-state">Пока никто не поставил. Будь первым.</div>}
          {eventBets.map(b => {
            const u = data.byId(b.userId);
            const out = event.outcomes.find(x => x.id === b.outcome);
            if (!u || !out) return null;
            return (
              <div key={b.id} className="evt-bet-row">
                <Avatar user={u} size={28}/>
                <div className="evt-bet-name">{u.name}</div>
                <div className={cx('evt-bet-pick', `evt-bet-pick-${b.outcome}`)}>
                  <span>{out.label}</span><b>{b.coef.toFixed(2)}</b>
                </div>
                <div className="evt-bet-stake"><CoinIcon size={12}/> {b.stake} PC</div>
                <div className="evt-bet-ts">{b.ts}</div>
                {b.comment && <div className="evt-bet-cmt">«{b.comment}»</div>}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AuthModal, BetSlip, EventCard, HomeScreen, EventScreen });