/* On The Limit — Admin Dashboard */
(function(){
  const WORKER = 'https://otl-analytics.liambell2103.workers.dev';
  const USERNAME = 'admin';
  const PASSWORD = 'otl-admin-2024';

  const PAGE_LABELS = {
    'home':'Home', 'grit':'GRIT', 'hyrox':'HYROX', 'studio':'Studio Classes',
    'gym-floor':'Gym Floor', 'personal-training':'Personal Training',
    'students-juniors':'Students & Juniors', 'foundation':'6 Week Foundation',
    'timetable':'Timetable', 'pricing':'Pricing', 'team':'Fitness Team',
    'faqs':'FAQs', 'contact':'Contact', 'join':'Join', 'gallery':'Gallery',
  };

  function Stat({ label, value, accent }) {
    return (
      <div style={{ background:'var(--surface-card)', border: accent ? '1.5px solid var(--accent)' : '1px solid var(--border-subtle)', borderRadius:14, padding:'22px 24px' }}>
        <div style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:36, color: accent ? 'var(--accent)' : '#fff', lineHeight:1 }}>{value}</div>
        <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--text-muted)', marginTop:8 }}>{label}</div>
      </div>
    );
  }

  function Bar({ label, value, max }) {
    const pct = max > 0 ? Math.round((value / max) * 100) : 0;
    return (
      <div style={{ display:'flex', alignItems:'center', gap:12 }}>
        <div style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--fog-200)', minWidth:160, flexShrink:0 }}>{label}</div>
        <div style={{ flex:1, background:'var(--surface-raised)', borderRadius:99, height:8, overflow:'hidden' }}>
          <div style={{ width:`${pct}%`, height:'100%', background:'var(--accent)', borderRadius:99, transition:'width .6s ease' }}/>
        </div>
        <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:13, color:'var(--accent)', minWidth:32, textAlign:'right' }}>{value}</div>
      </div>
    );
  }

  function AdminPage() {
    const [authed, setAuthed] = React.useState(() => localStorage.getItem('otl_admin') === '1');
    const [user, setUser] = React.useState('');
    const [pw, setPw] = React.useState('');
    const [error, setError] = React.useState('');
    const [stats, setStats] = React.useState(null);
    const [loading, setLoading] = React.useState(false);
    const [fetchError, setFetchError] = React.useState('');

    function login(e) {
      e.preventDefault();
      if (user === USERNAME && pw === PASSWORD) { localStorage.setItem('otl_admin', '1'); setAuthed(true); setError(''); }
      else setError('Incorrect username or password.');
    }

    function loadStats() {
      setLoading(true);
      setFetchError('');
      fetch(WORKER + '/admin/stats', { headers: { Authorization: 'Bearer ' + PASSWORD } })
        .then(r => { if (!r.ok) throw new Error('Status ' + r.status); return r.json(); })
        .then(d => { setStats(d); setLoading(false); })
        .catch(e => { setFetchError('Could not load stats: ' + e.message); setLoading(false); });
    }

    React.useEffect(() => {
      if (!authed) return;
      loadStats();
    }, [authed]);

    if (!authed) return (
      <div style={{ minHeight:'80vh', display:'flex', alignItems:'center', justifyContent:'center', padding:24 }}>
        <div style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:20, padding:'40px 36px', width:'100%', maxWidth:380, display:'flex', flexDirection:'column', gap:20 }}>
          <div>
            <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--accent)', marginBottom:8 }}>On The Limit</div>
            <h2 style={{ margin:0, fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:26, color:'#fff' }}>Admin</h2>
          </div>
          <form onSubmit={login} style={{ display:'flex', flexDirection:'column', gap:12 }}>
            <input
              type="text" name="username" autoComplete="username" placeholder="Username" value={user}
              onChange={e => setUser(e.target.value)}
              style={{ fontFamily:'var(--font-body)', fontSize:15, background:'var(--surface-raised)', border:'1px solid var(--border-subtle)', borderRadius:10, padding:'14px 16px', color:'#fff', outline:'none', width:'100%', boxSizing:'border-box' }}
            />
            <input
              type="password" name="password" autoComplete="current-password" placeholder="Password" value={pw}
              onChange={e => setPw(e.target.value)}
              style={{ fontFamily:'var(--font-body)', fontSize:15, background:'var(--surface-raised)', border:'1px solid var(--border-subtle)', borderRadius:10, padding:'14px 16px', color:'#fff', outline:'none', width:'100%', boxSizing:'border-box' }}
            />
            {error && <div style={{ fontFamily:'var(--font-body)', fontSize:13, color:'#f87171' }}>{error}</div>}
            <button type="submit" style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:13, letterSpacing:'0.06em', textTransform:'uppercase', background:'var(--accent)', color:'#0d0d0d', border:'none', borderRadius:99, padding:'14px 24px', cursor:'pointer' }}>Sign In</button>
          </form>
        </div>
      </div>
    );

    if (loading || !stats) return (
      <div style={{ minHeight:'80vh', display:'flex', alignItems:'center', justifyContent:'center' }}>
        <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:13, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--text-muted)' }}>Loading…</div>
      </div>
    );

    if (fetchError) return (
      <div style={{ minHeight:'80vh', display:'flex', alignItems:'center', justifyContent:'center', padding:24 }}>
        <div style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:16, padding:'36px 32px', maxWidth:400, textAlign:'center', display:'flex', flexDirection:'column', gap:16 }}>
          <div style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:16, color:'#f87171' }}>Failed to load stats</div>
          <div style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--text-muted)', lineHeight:1.6 }}>{fetchError}</div>
          <button onClick={loadStats} style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:12, letterSpacing:'0.06em', textTransform:'uppercase', background:'var(--accent)', color:'#0d0d0d', border:'none', borderRadius:99, padding:'12px 24px', cursor:'pointer' }}>Try Again</button>
        </div>
      </div>
    );

    const topPageMax = stats.topPages[0]?.count || 1;
    const topClassMax = stats.topClasses[0]?.count || 1;
    const topJoinMax = stats.topJoinPages[0]?.count || 1;

    return (
      <div style={{ maxWidth:1100, margin:'0 auto', padding:'48px 24px' }}>
        <div style={{ marginBottom:36, display:'flex', alignItems:'flex-end', justifyContent:'space-between', flexWrap:'wrap', gap:16 }}>
          <div>
            <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--accent)', marginBottom:8 }}>On The Limit</div>
            <h1 style={{ margin:0, fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:'clamp(28px,4vw,42px)', color:'#fff', letterSpacing:'-0.02em' }}>Analytics Dashboard</h1>
          </div>
          <button onClick={loadStats} style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:12, letterSpacing:'0.06em', textTransform:'uppercase', background:'var(--surface-card)', color:'var(--fog-200)', border:'1px solid var(--border-subtle)', borderRadius:99, padding:'10px 20px', cursor:'pointer' }}>↻ Refresh</button>
        </div>

        {/* Top stats */}
        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(180px, 1fr))', gap:16, marginBottom:40 }}>
          <Stat label="Total Page Views" value={stats.pageViews.toLocaleString()} accent />
          <Stat label="Join Now Clicks" value={stats.joinClicks.toLocaleString()} />
          <Stat label="Contact Submissions" value={stats.contactSubmits.toLocaleString()} />
          <Stat label="Class Taps (Timetable)" value={stats.topClasses.reduce((a,c) => a + c.count, 0).toLocaleString()} />
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:24, marginBottom:24 }}>
          {/* Top pages */}
          <div style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:16, padding:'28px 28px' }}>
            <h3 style={{ margin:'0 0 24px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:14, color:'#fff', letterSpacing:'0.04em' }}>Most Visited Pages</h3>
            <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
              {stats.topPages.map(({ page, count }) => (
                <Bar key={page} label={PAGE_LABELS[page] || page || 'Home'} value={count} max={topPageMax} />
              ))}
              {stats.topPages.length === 0 && <div style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--text-faint)' }}>No data yet</div>}
            </div>
          </div>

          {/* Join Now by page */}
          <div style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:16, padding:'28px 28px' }}>
            <h3 style={{ margin:'0 0 24px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:14, color:'#fff', letterSpacing:'0.04em' }}>Join Now — Clicked From</h3>
            <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
              {stats.topJoinPages.map(({ page, count }) => (
                <Bar key={page} label={PAGE_LABELS[page] || page || 'Home'} value={count} max={topJoinMax} />
              ))}
              {stats.topJoinPages.length === 0 && <div style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--text-faint)' }}>No data yet</div>}
            </div>
          </div>
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:24, marginBottom:24 }}>
          {/* Top timetable classes */}
          <div style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:16, padding:'28px 28px' }}>
            <h3 style={{ margin:'0 0 24px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:14, color:'#fff', letterSpacing:'0.04em' }}>Most Tapped Classes</h3>
            <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
              {stats.topClasses.map(({ data, count }) => (
                <Bar key={data} label={data || 'Unknown'} value={count} max={topClassMax} />
              ))}
              {stats.topClasses.length === 0 && <div style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--text-faint)' }}>No data yet</div>}
            </div>
          </div>

          {/* Traffic sources */}
          <div style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:16, padding:'28px 28px' }}>
            <h3 style={{ margin:'0 0 24px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:14, color:'#fff', letterSpacing:'0.04em' }}>Traffic Sources</h3>
            <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
              {stats.referrers.map(({ source, count }) => (
                <Bar key={source} label={source.charAt(0).toUpperCase() + source.slice(1)} value={count} max={stats.referrers[0]?.count || 1} />
              ))}
              {stats.referrers.length === 0 && <div style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--text-faint)' }}>No data yet</div>}
            </div>
          </div>
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:24, marginBottom:24 }}>
          {/* Page views last 30 days */}
          <div style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:16, padding:'28px 28px' }}>
            <h3 style={{ margin:'0 0 24px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:14, color:'#fff', letterSpacing:'0.04em' }}>Daily Views (Last 30 Days)</h3>
            <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
              {stats.dailyViews.slice(0,10).map(({ day, count }) => (
                <Bar key={day} label={day} value={count} max={Math.max(...stats.dailyViews.map(d => d.count), 1)} />
              ))}
              {stats.dailyViews.length === 0 && <div style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--text-faint)' }}>No data yet</div>}
            </div>
          </div>

          {/* Contact form log */}
          <div style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:16, padding:'28px 28px' }}>
            <h3 style={{ margin:'0 0 24px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:14, color:'#fff', letterSpacing:'0.04em' }}>Contact Enquiries</h3>
            <div style={{ display:'flex', flexDirection:'column', gap:12, maxHeight:320, overflowY:'auto' }}>
              {stats.contactLog.map((ev, i) => {
                let d = {};
                try { d = JSON.parse(ev.data); } catch(e) {}
                return (
                  <div key={i} style={{ background:'var(--surface-raised)', border:'1px solid var(--border-subtle)', borderRadius:10, padding:'12px 14px', display:'flex', flexDirection:'column', gap:4 }}>
                    <div style={{ display:'flex', justifyContent:'space-between', gap:8 }}>
                      <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:13, color:'#fff' }}>{d.name || '—'}</span>
                      <span style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--text-faint)', whiteSpace:'nowrap' }}>{ev.created_at?.slice(0,10)}</span>
                    </div>
                    {d.email && <span style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--accent)' }}>{d.email}</span>}
                    {d.message && <span style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--text-muted)', lineHeight:1.5 }}>{d.message}</span>}
                  </div>
                );
              })}
              {stats.contactLog.length === 0 && <div style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--text-faint)' }}>No enquiries yet</div>}
            </div>
          </div>
        </div>

        {/* Recent events */}
        <div style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:16, padding:'28px 28px' }}>
          <h3 style={{ margin:'0 0 20px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:14, color:'#fff', letterSpacing:'0.04em' }}>Recent Activity</h3>
          <div style={{ display:'flex', flexDirection:'column', gap:0 }}>
            {stats.recentEvents.map((ev, i) => (
              <div key={i} style={{ display:'flex', alignItems:'center', gap:16, padding:'10px 0', borderBottom:'1px solid var(--border-subtle)' }}>
                <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:10, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--accent)', background:'rgba(114,221,158,0.1)', border:'1px solid rgba(114,221,158,0.2)', borderRadius:99, padding:'3px 10px', whiteSpace:'nowrap' }}>
                  {ev.event_type.replace(/_/g,' ')}
                </span>
                <span style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--fog-200)', flex:1 }}>
                  {PAGE_LABELS[ev.page] || ev.page || 'Home'}{ev.data ? ` — ${ev.data}` : ''}
                </span>
                <span style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--text-faint)', whiteSpace:'nowrap' }}>{ev.created_at?.replace('T',' ').slice(0,16)}</span>
              </div>
            ))}
            {stats.recentEvents.length === 0 && <div style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--text-faint)' }}>No activity yet</div>}
          </div>
        </div>

        <div style={{ marginTop:24, textAlign:'right' }}>
          <button onClick={() => { localStorage.removeItem('otl_admin'); setAuthed(false); setPw(''); setStats(null); }}
            style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--text-faint)', background:'none', border:'none', cursor:'pointer' }}>Sign out</button>
        </div>
      </div>
    );
  }

  window.OTL_AdminPage = AdminPage;
})();