// Supabase client + data helpers
const sb = window.supabase.createClient(window.SB_URL, window.SB_KEY);
window.sb = sb;

const db = {
  async fetchTrails() {
    const { data, error } = await sb
      .from('trails')
      .select('*')
      .eq('is_published', true)
      .order('sort_order', { ascending: true })
      .order('created_at', { ascending: true });
    if (error) { console.error('fetchTrails', error); return []; }
    return data || [];
  },

  async fetchEvents() {
    const { data, error } = await sb
      .from('events')
      .select('*')
      .eq('is_published', true)
      .order('event_date', { ascending: true, nullsFirst: false });
    if (error) { console.error('fetchEvents', error); return []; }
    return data || [];
  },

  async fetchCompetitors(eventId) {
    const { data, error } = await sb
      .from('event_competitors')
      .select('*')
      .eq('event_id', eventId)
      .order('created_at', { ascending: true });
    if (error) { console.error('fetchCompetitors', error); return []; }
    return data || [];
  },

  async registerForEvent(reg) {
    const { error } = await sb.from('event_registrations').insert(reg);
    if (error) return { ok: false, error };
    db.notifyAdmin('event_registration', reg);
    return { ok: true };
  },

  async submitMembership(member) {
    const { error } = await sb.from('members').insert(member);
    if (error) return { ok: false, error };
    db.notifyAdmin('member', member);
    return { ok: true };
  },

  // Fire-and-forget email notification to the club admin
  notifyAdmin(kind, data) {
    sb.functions.invoke('notify-admin', { body: { kind, data } }).catch(e => console.warn('notify-admin failed', e));
  },

  gpxPublicUrl(path) {
    return sb.storage.from('gpx').getPublicUrl(path).data.publicUrl;
  },
};
window.db = db;

// Small hook: load data once per mount
function useFetch(fn, deps) {
  const [state, setState] = React.useState({ loading: true, data: null });
  React.useEffect(() => {
    let alive = true;
    setState({ loading: true, data: null });
    fn().then(data => { if (alive) setState({ loading: false, data }); });
    return () => { alive = false; };
  }, deps || []);
  return state;
}
window.useFetch = useFetch;

// Shared "Coming Soon" block
function ComingSoon({ label, note }) {
  return (
    <div style={{
      border: '1px solid var(--border)', background: 'var(--bg-2)',
      padding: '90px 40px', textAlign: 'center', position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'repeating-linear-gradient(135deg, transparent 0 26px, rgba(255,255,255,0.02) 26px 27px)',
      }}></div>
      <div className="mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.24em', marginBottom: 18 }}>[ ÎN CURÂND ]</div>
      <div className="display display-lg" style={{ marginBottom: 14 }}>COMING SOON</div>
      {note && <p style={{ color: 'var(--fg-dim)', fontSize: 16, maxWidth: 520, margin: '0 auto' }}>{note}</p>}
      {label && <div className="mono" style={{ marginTop: 22, fontSize: 11, color: 'var(--fg-dimmer)', letterSpacing: '0.18em' }}>{label}</div>}
    </div>
  );
}
window.ComingSoon = ComingSoon;