// Biertje — Main App (auth state machine + orchestration)
const { useState, useEffect, useCallback } = React;

function App() {
  // ── State ────────────────────────────────────────────────────
  // States: loading | landing | auth_screen | no_profile | no_group | ready
  const isMobile = useIsMobile();
  const [state, setState]       = useState('loading');
  const [session, setSession]   = useState(null);
  const [profile, setProfile]   = useState(null);
  const [groups, setGroups]     = useState([]);   // ALL groups user is in
  const [group, setGroup]       = useState(null); // ACTIVE group
  const [appTab, setAppTab]     = useState('Dashboard');
  const [showLogModal, setShowLogModal] = useState(false);
  const [prefillBeer, setPrefillBeer]   = useState(null);
  const [toast, setToast]       = useState(null);
  const [refreshKey, setRefreshKey] = useState(0);

  // ── Toast helper ─────────────────────────────────────────────
  const showToast = useCallback((t) => {
    setToast(t);
    setTimeout(() => setToast(null), 3800);
  }, []);

  // ── Load profile ─────────────────────────────────────────────
  const loadProfile = useCallback(async (userId) => {
    const { data, error } = await db
      .from('profiles').select('*').eq('id', userId).single();
    if (error || !data) { setState('no_profile'); return null; }
    setProfile(data);
    return data;
  }, []);

  // ── Load ALL groups user belongs to ──────────────────────────
  const loadGroups = useCallback(async (userId) => {
    const { data: memberships } = await db
      .from('group_members')
      .select('role, groups(*)')
      .eq('user_id', userId);

    if (!memberships || memberships.length === 0) {
      setState('no_group');
      return;
    }

    const allGroups = memberships
      .filter(m => m.groups)
      .map(m => ({ ...m.groups, myRole: m.role }));

    setGroups(allGroups);

    const savedId = localStorage.getItem('drankmaatje_group_id');
    const active  = allGroups.find(g => g.id === savedId) || allGroups[0];
    setGroup(active);
    localStorage.setItem('drankmaatje_group_id', active.id);
    setState('ready');
  }, []);

  // ── Boot: check existing session ─────────────────────────────
  useEffect(() => {
    const boot = async () => {
      const { data: { session: s } } = await db.auth.getSession();
      if (!s) { setState('landing'); return; }

      setSession(s);

      // Terugkerende gebruiker: profiel moet direct beschikbaar zijn.
      const { data: prof } = await db.from('profiles').select('*').eq('id', s.user.id).single();

      if (prof) {
        setProfile(prof);
        await loadGroups(s.user.id);
      } else {
        // Geen profiel gevonden → sessie is verouderd (bijv. data gewist).
        // Automatisch uitloggen zodat de gebruiker op de landingspagina belandt.
        await db.auth.signOut();
        // De onAuthStateChange SIGNED_OUT handler hieronder zet setState('landing').
      }
    };
    boot();

    const { data: { subscription } } = db.auth.onAuthStateChange(async (event, s) => {
      if (event === 'SIGNED_OUT') {
        setSession(null); setProfile(null); setGroup(null); setGroups([]);
        setState('landing');
        localStorage.removeItem('drankmaatje_group_id');
      }
    });

    return () => subscription.unsubscribe();
  }, []);

  // ── Auth callback ─────────────────────────────────────────────
  const handleAuth = useCallback(async (userId, sessionObj) => {
    setSession(sessionObj);

    // Poll tot het profiel zichtbaar is (trigger + replica-lag kan oplopen).
    // Maximaal 10 pogingen × 600 ms = 6 seconden wachttijd.
    let p = null;
    for (let attempt = 0; attempt < 10 && !p; attempt++) {
      await new Promise(r => setTimeout(r, 600));
      const { data } = await db.from('profiles').select('*').eq('id', userId).single();
      if (data) { p = data; }
    }

    if (p) {
      setProfile(p);
      await loadGroups(userId);
    } else {
      setState('no_profile');
    }
  }, [loadGroups]);

  // ── Profile created (fallback) ────────────────────────────────
  const handleProfileCreated = useCallback((prof) => {
    setProfile(prof);
    setState('no_group');
  }, []);

  // ── First group ever (onboarding) ─────────────────────────────
  const handleGroupSet = useCallback((g) => {
    const newGroup = { ...g, myRole: 'owner' };
    setGroups([newGroup]);
    setGroup(newGroup);
    localStorage.setItem('drankmaatje_group_id', g.id);
    setState('ready');
  }, []);

  // ── Switch active group ───────────────────────────────────────
  const handleSwitchGroup = useCallback((g) => {
    setGroup(g);
    localStorage.setItem('drankmaatje_group_id', g.id);
    setRefreshKey(k => k + 1);
    setAppTab('Dashboard');
  }, []);

  // ── Group added (create or join from within the app) ──────────
  const handleGroupAdded = useCallback((newGroup) => {
    setGroups(prev => {
      if (prev.find(g => g.id === newGroup.id)) return prev;
      return [...prev, newGroup];
    });
    setGroup(newGroup);
    localStorage.setItem('drankmaatje_group_id', newGroup.id);
    setRefreshKey(k => k + 1);
  }, []);

  // ── Group updated (name / emoji) ──────────────────────────────
  const handleGroupUpdated = useCallback((updatedGroup) => {
    setGroups(prev => prev.map(g =>
      g.id === updatedGroup.id ? { ...g, ...updatedGroup } : g
    ));
    setGroup(prev =>
      prev?.id === updatedGroup.id ? { ...prev, ...updatedGroup } : prev
    );
    showToast({ icon: updatedGroup.emoji || '🍺', name: 'Groep bijgewerkt', message: 'Wijzigingen opgeslagen!' });
  }, [showToast]);

  // ── Group removed (left or deleted) ──────────────────────────
  const handleGroupRemoved = useCallback((removedId) => {
    setGroups(prev => {
      const remaining = prev.filter(g => g.id !== removedId);
      if (group?.id === removedId) {
        const next = remaining[0] || null;
        setGroup(next);
        if (next) localStorage.setItem('drankmaatje_group_id', next.id);
        else { localStorage.removeItem('drankmaatje_group_id'); setState('no_group'); }
      }
      return remaining;
    });
  }, [group]);

  // ── Log beer ─────────────────────────────────────────────────
  const handleLogBeer = useCallback(async (beerData) => {
    if (!session || !group) return;

    const { error } = await db.from('beer_logs').insert({
      user_id: session.user.id,
      group_id: group.id,
      ...beerData,
    });

    if (error) {
      showToast({ icon: '❌', name: 'Fout', message: 'Kon drankje niet opslaan. Probeer opnieuw.' });
      return;
    }

    setRefreshKey(k => k + 1);

    // Check achievements (cross-group — all user logs)
    const [{ data: logs }, { data: allAchs }, { data: ua }] = await Promise.all([
      db.from('beer_logs').select('*').eq('user_id', session.user.id),
      db.from('achievements').select('*'),
      db.from('user_achievements').select('achievement_id').eq('user_id', session.user.id),
    ]);

    const unlockedIds = new Set((ua || []).map(u => u.achievement_id));
    const newUnlocks  = [];

    for (const ach of (allAchs || [])) {
      if (unlockedIds.has(ach.id)) continue;
      const { progress, total } = computeAchievementProgress(ach, logs || []);
      if (progress >= total) {
        const { error: insErr } = await db.from('user_achievements').insert({
          user_id: session.user.id, achievement_id: ach.id,
        });
        if (!insErr) newUnlocks.push(ach);
      }
    }

    if (newUnlocks.length > 0) {
      showToast({ icon: newUnlocks[0].icon, name: newUnlocks[0].name, message: '🎉 Achievement vrijgespeeld!' });
    } else {
      showToast({ icon: '🥂', name: 'Drankje gelogd!', message: 'Proost! 🎉' });
    }
  }, [session, group, showToast]);

  // ── Profile updated (bio / avatar) ───────────────────────────
  const handleProfileUpdated = useCallback((updatedFields) => {
    setProfile(prev => ({ ...prev, ...updatedFields }));
  }, []);

  // ── Sign out ─────────────────────────────────────────────────
  const handleSignOut = useCallback(async () => {
    await db.auth.signOut();
  }, []);

  // ── Render: Loading ──────────────────────────────────────────
  if (state === 'loading') return (
    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: T.cream }}>
      <div style={{ textAlign: 'center' }}>
        <div style={{ fontSize: 64, marginBottom: 14, display: 'inline-block', animation: 'floatBeer 2.2s ease-in-out infinite' }}>🍺</div>
        <div style={{ fontFamily: "'Fredoka', sans-serif", fontSize: 26, color: T.brownMid, fontWeight: 600 }}>Drankmaatje laden...</div>
      </div>
      <style>{`@keyframes floatBeer { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }`}</style>
    </div>
  );

  // ── Shared "no active group" placeholder ─────────────────────
  const NoGroupPlaceholder = () => (
    <div style={{ padding: '60px 20px', textAlign: 'center' }}>
      <div style={{ fontSize: 48, marginBottom: 12 }}>👥</div>
      <div style={{ fontFamily: "'Fredoka', sans-serif", fontSize: 22, color: T.brownMid, marginBottom: 16 }}>
        Geen actieve groep
      </div>
      <Button variant="primary" size="md" onClick={() => setAppTab('Groups')}>
        Groepen beheren →
      </Button>
    </div>
  );

  return (
    <div style={{ minHeight: '100vh' }}>

      {/* ── Public: Landing ─────────────────────────────── */}
      {state === 'landing' && (
        <LandingScreen
          onGetStarted={() => setState('auth_screen')}
          onLogin={() => setState('auth_screen')}
        />
      )}

      {/* ── Public: Auth form ───────────────────────────── */}
      {state === 'auth_screen' && (
        <AuthScreen onBack={() => setState('landing')} onAuth={handleAuth} />
      )}

      {/* ── Fallback: profile setup ─────────────────────── */}
      {state === 'no_profile' && session && (
        <ProfileSetupScreen userId={session.user.id} onDone={handleProfileCreated} />
      )}

      {/* ── Onboarding: first group ever ────────────────── */}
      {state === 'no_group' && profile && (
        <OnboardingScreen
          userId={session.user.id}
          profile={profile}
          onComplete={handleGroupSet}
        />
      )}

      {/* ── App: main screens ───────────────────────────── */}
      {state === 'ready' && profile && (
        <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh', background: T.cream }}>
          <NavBar
            screen={appTab}
            onNav={setAppTab}
            onLogBeer={(name) => { setPrefillBeer(name || null); setShowLogModal(true); }}
            profile={profile}
            group={group}
            groups={groups}
            isOwner={group?.created_by === session?.user?.id}
            onSwitchGroup={handleSwitchGroup}
            onSignOut={handleSignOut}
          />
          <div style={{ flex: 1, overflowY: 'auto', paddingBottom: isMobile ? 70 : 0 }}>

            {appTab === 'Dashboard' && (
              group
                ? <DashboardScreen profile={profile} group={group} groups={groups} onLogBeer={(name) => { setPrefillBeer(name || null); setShowLogModal(true); }} refreshKey={refreshKey} />
                : <NoGroupPlaceholder />
            )}

            {appTab === 'Feed' && (
              group
                ? <FeedScreen profile={profile} group={group} groups={groups} refreshKey={refreshKey} />
                : <NoGroupPlaceholder />
            )}

            {appTab === 'Achievements' && (
              <AchievementsScreen userId={session.user.id} group={group} refreshKey={refreshKey} />
            )}

            {appTab === 'Profile' && (
              <ProfileScreen
                profile={profile}
                userId={session.user.id}
                group={group}
                groups={groups}
                onSignOut={handleSignOut}
                onProfileUpdated={handleProfileUpdated}
                refreshKey={refreshKey}
              />
            )}

            {appTab === 'Groups' && (
              <GroupsScreen
                userId={session.user.id}
                profile={profile}
                groups={groups}
                activeGroup={group}
                onSwitchGroup={handleSwitchGroup}
                onGroupAdded={handleGroupAdded}
                onGroupRemoved={handleGroupRemoved}
                onGroupUpdated={handleGroupUpdated}
              />
            )}

          </div>
        </div>
      )}

      {/* ── Log Beer Modal ───────────────────────────────── */}
      {showLogModal && (
        <LogBeerModal
          profile={profile}
          prefillName={prefillBeer}
          onClose={() => { setShowLogModal(false); setPrefillBeer(null); }}
          onLog={async (data) => {
            setShowLogModal(false);
            setPrefillBeer(null);
            await handleLogBeer(data);
          }}
        />
      )}

      {/* ── Achievement Toast ────────────────────────────── */}
      {toast && (
        <UnlockToast
          show={!!toast}
          icon={toast.icon}
          name={toast.name}
          message={toast.message}
          onClose={() => setToast(null)}
        />
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);