// screen-planner.jsx — Bankroll planner.
// Set bankroll → browse events → tap to add to plan → visual calendar overlay.

const { useState: pU, useEffect: pE, useMemo: pM } = React;

const PJ_PLAN_KEY = 'pj_plan_v1';
const PJ_BANKROLL_KEY = 'pj_bankroll_v1';

function PlannerScreen({ onNav }) {
  const { Footer, fmtMoney } = window.PJ_UI;

  // ---- State ----
  const [bankroll, setBankroll] = pU(() => {
    try { return Number(window.localStorage.getItem(PJ_BANKROLL_KEY) || '0'); }
    catch (_) { return 0; }
  });
  const [bankrollInput, setBankrollInput] = pU(bankroll ? String(bankroll) : '');
  const [editingBankroll, setEditingBankroll] = pU(!bankroll);

  const [plan, setPlan] = pU(() => {
    try { return JSON.parse(window.localStorage.getItem(PJ_PLAN_KEY) || '[]'); }
    catch (_) { return []; }
  });

  const [tournaments, setTournaments] = pU([]);
  const [loadingTourns, setLoadingTourns] = pU(true);
  const [loadErr, setLoadErr] = pU(null);

  const [filterBuyIn, setFilterBuyIn] = pU('all');
  const [filterVenue, setFilterVenue] = pU('all');
  const [filterSearch, setFilterSearch] = pU('');

  // ---- Persistence ----
  pE(() => {
    try { window.localStorage.setItem(PJ_PLAN_KEY, JSON.stringify(plan)); } catch (_) {}
  }, [plan]);

  pE(() => {
    try { window.localStorage.setItem(PJ_BANKROLL_KEY, String(bankroll || 0)); } catch (_) {}
  }, [bankroll]);

  // ---- Load tournaments from Supabase, fall back to data.js ----
  pE(() => {
    let cancelled = false;
    (async () => {
      try {
        if (window.pjDB) {
          const { data, error } = await window.pjDB
            .from('tournaments')
            .select('id, name, start_at, buy_in, location, structure')
            .eq('source', 'wsop_2026')
            .order('start_at', { ascending: true });
          if (error) throw error;
          if (!cancelled && data && data.length > 0) {
            setTournaments(data.map(t => ({
              id: t.id,
              name: t.name,
              startAt: t.start_at,
              buyIn: Number(t.buy_in) || 0,
              venue: t.location || 'TBD',
              structure: t.structure || ''
            })));
            setLoadingTourns(false);
            return;
          }
        }
        // Fallback to bundled data.js
        const fallback = (window.WSOP_2026 || []).map(t => ({
          id: t.id, name: t.name, startAt: t.startAt, buyIn: t.buyIn, venue: t.venue, structure: t.structure
        }));
        if (!cancelled) {
          setTournaments(fallback);
          setLoadingTourns(false);
        }
      } catch (e) {
        if (!cancelled) {
          // Use bundled data on any error
          const fallback = (window.WSOP_2026 || []).map(t => ({
            id: t.id, name: t.name, startAt: t.startAt, buyIn: t.buyIn, venue: t.venue, structure: t.structure
          }));
          setTournaments(fallback);
          setLoadErr(e.message || String(e));
          setLoadingTourns(false);
        }
      }
    })();
    return () => { cancelled = true; };
  }, []);

  // ---- Derived ----
  const planIds = pM(() => new Set(plan.map(p => p.id)), [plan]);

  const totalCommitted = pM(() =>
    plan.reduce((sum, p) => sum + (Number(p.buyIn) || 0), 0)
  , [plan]);

  const remaining = bankroll - totalCommitted;
  const pctUsed = bankroll > 0 ? Math.min(100, (totalCommitted / bankroll) * 100) : 0;
  const statusColor = bankroll === 0 ? 'var(--text-3)'
    : remaining < 0 ? 'var(--red)'
    : pctUsed >= 85 ? '#ffcc66'
    : 'var(--green)';

  const filtered = pM(() => {
    return tournaments.filter(t => {
      if (filterVenue !== 'all' && (t.venue || '').toLowerCase() !== filterVenue) return false;
      if (filterBuyIn !== 'all') {
        const b = Number(t.buyIn) || 0;
        if (filterBuyIn === 'under1k' && b >= 1000) return false;
        if (filterBuyIn === '1to5k' && (b < 1000 || b >= 5000)) return false;
        if (filterBuyIn === '5to25k' && (b < 5000 || b >= 25000)) return false;
        if (filterBuyIn === 'over25k' && b < 25000) return false;
      }
      if (filterSearch.trim()) {
        const q = filterSearch.toLowerCase();
        if (!(t.name || '').toLowerCase().includes(q) && !String(t.buyIn).includes(q)) return false;
      }
      return true;
    });
  }, [tournaments, filterVenue, filterBuyIn, filterSearch]);

  const toggleInPlan = (t) => {
    setPlan(prev => {
      if (prev.some(p => p.id === t.id)) {
        return prev.filter(p => p.id !== t.id);
      }
      return [...prev, { id: t.id, name: t.name, buyIn: t.buyIn, startAt: t.startAt, venue: t.venue }];
    });
  };

  const clearPlan = () => {
    if (window.confirm('Clear all events from your plan?')) setPlan([]);
  };

  // Calendar weeks for WSOP window (May 26 - July 15 2026)
  const weeks = pM(() => {
    const startMs = new Date('2026-05-25T00:00:00-07:00').getTime();
    const dayMs = 24 * 60 * 60 * 1000;
    const out = [];
    for (let w = 0; w < 8; w++) {
      const days = [];
      for (let d = 0; d < 7; d++) {
        const date = new Date(startMs + (w * 7 + d) * dayMs);
        const dayEvents = plan.filter(p => {
          const pd = new Date(p.startAt);
          return pd.getFullYear() === date.getFullYear()
            && pd.getMonth() === date.getMonth()
            && pd.getDate() === date.getDate();
        });
        const daySpend = dayEvents.reduce((s, e) => s + (Number(e.buyIn) || 0), 0);
        days.push({ date, events: dayEvents, spend: daySpend });
      }
      out.push(days);
    }
    return out;
  }, [plan]);

  // ---- Render ----
  return (
    <div className="page" style={{ padding: '32px 20px 120px' }}>
      <div className="container" style={{ maxWidth: 880 }}>
        <div className="mono green" style={{ marginBottom: 14 }}>◆ BANKROLL PLANNER · WSOP 2026</div>
        <h1 style={{ fontSize: 'clamp(36px, 7vw, 52px)', lineHeight: 1.02, letterSpacing: '-0.035em', marginBottom: 10, fontWeight: 700 }}>
          Plan your <span style={{ color: 'var(--green)', textShadow: '0 0 24px var(--green-glow)' }}>summer</span>.
        </h1>
        <p className="text-2" style={{ marginBottom: 32, fontSize: 16 }}>
          Set your bankroll. Browse the bracelets. Tap to add. See your spend across the calendar.
        </p>

        {/* ===== Bankroll panel ===== */}
        <div className="card-glow" style={{ marginBottom: 24 }}>
          {editingBankroll ? (
            <div>
              <div className="field-label" style={{ marginBottom: 8 }}>Your bankroll for WSOP 2026 (USD)</div>
              <div className="row" style={{ gap: 10 }}>
                <input
                  className="input input-xl"
                  type="number"
                  inputMode="numeric"
                  placeholder="50000"
                  value={bankrollInput}
                  onChange={e => setBankrollInput(e.target.value.replace(/[^0-9.]/g, ''))}
                  style={{ flex: 1 }}
                />
                <button
                  className="btn btn-secondary"
                  onClick={() => {
                    const n = Number(bankrollInput) || 0;
                    setBankroll(n);
                    setEditingBankroll(false);
                  }}
                >Set</button>
              </div>
              <div className="mono" style={{ fontSize: 10, color: 'var(--text-mute)', letterSpacing: '0.10em', marginTop: 8, textTransform: 'uppercase' }}>
                Stored on this device only. No account needed.
              </div>
            </div>
          ) : (
            <div>
              <div className="row between" style={{ marginBottom: 16, flexWrap: 'wrap', gap: 12 }}>
                <div>
                  <div className="field-label" style={{ marginBottom: 4 }}>Bankroll</div>
                  <div className="kpi">{fmtMoney(bankroll)}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div className="field-label" style={{ marginBottom: 4 }}>Committed</div>
                  <div className="kpi" style={{ color: statusColor }}>{fmtMoney(totalCommitted)}</div>
                </div>
              </div>

              {/* Progress bar */}
              <div style={{
                position: 'relative',
                height: 8,
                borderRadius: 4,
                background: 'rgba(255,255,255,0.06)',
                overflow: 'hidden',
                marginBottom: 12
              }}>
                <div style={{
                  position: 'absolute',
                  top: 0, left: 0, bottom: 0,
                  width: pctUsed + '%',
                  background: statusColor,
                  boxShadow: '0 0 12px ' + statusColor,
                  transition: 'width 240ms ease, background 240ms ease'
                }}/>
              </div>

              <div className="row between" style={{ alignItems: 'baseline' }}>
                <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-3)' }}>
                  {plan.length} event{plan.length === 1 ? '' : 's'} in plan
                </div>
                <div className="mono" style={{ fontSize: 13, color: statusColor, fontWeight: 600, textShadow: remaining >= 0 ? '0 0 10px ' + statusColor : 'none' }}>
                  {remaining >= 0 ? fmtMoney(remaining) + ' LEFT' : fmtMoney(-remaining) + ' OVER'}
                </div>
              </div>

              <div className="row" style={{ gap: 10, marginTop: 16, flexWrap: 'wrap' }}>
                <button className="btn btn-secondary" style={{ padding: '8px 14px', fontSize: 13 }} onClick={() => { setBankrollInput(String(bankroll)); setEditingBankroll(true); }}>
                  Edit bankroll
                </button>
                {plan.length > 0 && (
                  <button className="btn btn-ghost" style={{ padding: '8px 14px', fontSize: 13 }} onClick={clearPlan}>
                    Clear plan
                  </button>
                )}
              </div>
            </div>
          )}
        </div>

        {/* ===== Calendar overlay ===== */}
        {plan.length > 0 && (
          <section style={{ marginBottom: 32 }}>
            <div className="mono green" style={{ marginBottom: 14 }}>◆ YOUR CALENDAR</div>
            <div style={{
              border: '1px solid rgba(255,255,255,0.06)',
              borderRadius: 'var(--r-lg)',
              padding: 12,
              background: 'var(--bg-1)',
              overflowX: 'auto'
            }}>
              <div style={{ minWidth: 560 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '60px repeat(7, 1fr)', gap: 4, marginBottom: 4 }}>
                  <div></div>
                  {['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'].map(d => (
                    <div key={d} className="mono" style={{
                      fontSize: 9, color: 'var(--text-3)', letterSpacing: '0.14em',
                      textAlign: 'center', padding: '4px 0'
                    }}>{d}</div>
                  ))}
                </div>
                {weeks.map((week, wi) => (
                  <div key={wi} style={{ display: 'grid', gridTemplateColumns: '60px repeat(7, 1fr)', gap: 4, marginBottom: 4 }}>
                    <div className="mono" style={{
                      fontSize: 9, color: 'var(--text-mute)', letterSpacing: '0.10em',
                      display: 'flex', alignItems: 'center', justifyContent: 'flex-end', paddingRight: 6
                    }}>W{wi + 1}</div>
                    {week.map((day, di) => {
                      const hasEvents = day.events.length > 0;
                      return (
                        <div key={di} style={{
                          minHeight: 56,
                          padding: 6,
                          borderRadius: 6,
                          background: hasEvents ? 'var(--green-soft)' : 'rgba(255,255,255,0.02)',
                          border: '1px solid ' + (hasEvents ? 'var(--green-line)' : 'rgba(255,255,255,0.04)'),
                          boxShadow: hasEvents ? '0 0 12px var(--green-glow-2)' : 'none',
                          display: 'flex', flexDirection: 'column'
                        }}>
                          <div className="mono" style={{
                            fontSize: 9,
                            color: hasEvents ? 'var(--green)' : 'var(--text-mute)',
                            letterSpacing: '0.08em',
                            marginBottom: 2
                          }}>
                            {day.date.toLocaleString('en-US', { month: 'short', day: 'numeric' }).toUpperCase()}
                          </div>
                          {hasEvents && (
                            <>
                              <div style={{ fontSize: 11, color: 'var(--text)', fontWeight: 600, lineHeight: 1.2 }}>
                                {day.events.length}× ${day.spend.toLocaleString()}
                              </div>
                              {day.events.slice(0, 2).map((e, ei) => (
                                <div key={ei} className="mono" style={{
                                  fontSize: 8, color: 'var(--text-2)', letterSpacing: '0.04em',
                                  whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                                  marginTop: 2
                                }}>
                                  {(e.name.match(/Event #\d+|Main Event/i) || ['EVENT'])[0]}
                                </div>
                              ))}
                            </>
                          )}
                        </div>
                      );
                    })}
                  </div>
                ))}
              </div>
            </div>
          </section>
        )}

        {/* ===== Filters ===== */}
        <section style={{ marginBottom: 16 }}>
          <div className="mono green" style={{ marginBottom: 14 }}>◆ BROWSE EVENTS</div>

          <input
            className="input"
            placeholder="Search by name or buy-in…"
            value={filterSearch}
            onChange={e => setFilterSearch(e.target.value)}
            style={{ marginBottom: 12 }}
          />

          <div className="row wrap" style={{ gap: 6, marginBottom: 8 }}>
            <span className="mono" style={{ fontSize: 10, color: 'var(--text-3)', letterSpacing: '0.10em', textTransform: 'uppercase', marginRight: 4, alignSelf: 'center' }}>BUY-IN:</span>
            {[
              { k: 'all', label: 'All' },
              { k: 'under1k', label: '< $1k' },
              { k: '1to5k', label: '$1k–5k' },
              { k: '5to25k', label: '$5k–25k' },
              { k: 'over25k', label: '$25k+' }
            ].map(o => (
              <button key={o.k} className={'chip' + (filterBuyIn === o.k ? ' active' : '')} onClick={() => setFilterBuyIn(o.k)}>
                {o.label}
              </button>
            ))}
          </div>
          <div className="row wrap" style={{ gap: 6 }}>
            <span className="mono" style={{ fontSize: 10, color: 'var(--text-3)', letterSpacing: '0.10em', textTransform: 'uppercase', marginRight: 4, alignSelf: 'center' }}>VENUE:</span>
            {[
              { k: 'all', label: 'All' },
              { k: 'horseshoe', label: 'Horseshoe' },
              { k: 'paris', label: 'Paris' }
            ].map(o => (
              <button key={o.k} className={'chip' + (filterVenue === o.k ? ' active' : '')} onClick={() => setFilterVenue(o.k)}>
                {o.label}
              </button>
            ))}
          </div>
        </section>

        {/* ===== Tournament list ===== */}
        {loadingTourns && (
          <p className="mono text-center" style={{ fontSize: 11, color: 'var(--text-3)', letterSpacing: '0.18em', padding: '24px 0' }}>LOADING EVENTS…</p>
        )}

        {loadErr && (
          <div className="mono" style={{ fontSize: 10, color: 'var(--text-mute)', letterSpacing: '0.10em', textAlign: 'center', padding: 8 }}>
            (Live data unavailable — showing bundled schedule)
          </div>
        )}

        {!loadingTourns && filtered.length === 0 && (
          <div className="card text-center" style={{ padding: 32 }}>
            <p className="text-2">No events match those filters.</p>
          </div>
        )}

        <div className="stack-3" style={{ marginTop: 8 }}>
          {filtered.map(t => {
            const inPlan = planIds.has(t.id);
            const startDate = new Date(t.startAt);
            const startStr = startDate.toLocaleString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
            return (
              <div
                key={t.id}
                className="tournament-row"
                onClick={() => toggleInPlan(t)}
                style={{
                  borderColor: inPlan ? 'var(--green-line)' : 'rgba(255,255,255,0.06)',
                  background: inPlan ? 'var(--green-soft)' : 'var(--bg-2)',
                  boxShadow: inPlan ? '0 0 16px var(--green-glow-2)' : 'none'
                }}
              >
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div style={{ fontSize: 15, color: 'var(--text)', marginBottom: 6, fontWeight: 500, letterSpacing: '-0.01em', lineHeight: 1.3 }}>
                    {t.name}
                  </div>
                  <div className="meta">
                    {(t.venue || '').toUpperCase()} · {startStr.toUpperCase()} · {fmtMoney(t.buyIn)}
                  </div>
                </div>
                <div style={{ textAlign: 'right', minWidth: 80 }}>
                  <div style={{
                    display: 'inline-flex',
                    alignItems: 'center', justifyContent: 'center',
                    width: 36, height: 36,
                    borderRadius: 999,
                    background: inPlan ? 'var(--green)' : 'rgba(255,255,255,0.04)',
                    border: '1px solid ' + (inPlan ? 'var(--green)' : 'rgba(255,255,255,0.1)'),
                    color: inPlan ? '#000' : 'var(--text-2)',
                    fontFamily: 'var(--font-display)',
                    fontWeight: 700,
                    fontSize: 18,
                    boxShadow: inPlan ? '0 0 16px var(--green-glow)' : 'none',
                    transition: 'all 180ms ease'
                  }}>
                    {inPlan ? '✓' : '+'}
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        <Footer />
      </div>
    </div>
  );
}

window.PlannerScreen = PlannerScreen;