// app.jsx — shell: shared live-session store, Kiosk/Admin switch, Tweaks.
const { useState: appUseState } = React;

function App() {
  // Production location - can be configured via environment or API
  const location = "Workshop \u00b7 459 Newman Rd";

  // Check URL for admin mode
  const urlParams = new URLSearchParams(window.location.search);
  const isAdmin = urlParams.get('admin') === 'true';
  const locationId = urlParams.get('location') || 'workshop';

  const [present, setPresent] = appUseState([]);
  const [loading, setLoading] = appUseState(false);
  const [adminDataLoaded, setAdminDataLoaded] = appUseState(false);
  const [adminUser, setAdminUser] = appUseState(null);
  const [adminAuthChecked, setAdminAuthChecked] = appUseState(false);
  const [trend, setTrend] = appUseState(() => window.TREND || []);
  const [trendLabels, setTrendLabels] = appUseState(() => window.WEEK_LABELS || []);

  const [activities, setActivities] = appUseState(() => window.ALL_ACTIVITIES || []);

  // The kiosk must always use live attendance data, never the demo session seed.
  React.useEffect(() => {
    if (isAdmin || !window.apiAdapter) return;

    let cancelled = false;
    const loadKioskData = async () => {
      const data = await window.apiAdapter.loadInitialData();
      if (cancelled) return;

      window.ALL_ACTIVITIES = data.activities;
      window.STUDENTS = data.students;
      window.STUDENT_BY_ID = data.studentsById;
      window.PRESENT_SEED = data.present;
      setActivities(data.activities);
      setPresent(data.present.map(p => ({ ...p })));
    };

    loadKioskData().catch(error => console.error('Failed to refresh kiosk data:', error));
    const refreshTimer = setInterval(loadKioskData, 30000);
    window.addEventListener('focus', loadKioskData);

    return () => {
      cancelled = true;
      clearInterval(refreshTimer);
      window.removeEventListener('focus', loadKioskData);
    };
  }, [isAdmin]);

  // Check admin authentication when in admin mode
  React.useEffect(() => {
    if (isAdmin && !adminAuthChecked) {
      fetch('/api/auth/me', { credentials: 'include' })
        .then(response => response.json())
        .then(data => {
          if (data.user) {
            setAdminUser(data.user);
          }
          setAdminAuthChecked(true);
        })
        .catch(() => {
          setAdminAuthChecked(true);
        });
    }
  }, [isAdmin, adminAuthChecked]);

  // Load admin data if authenticated
  React.useEffect(() => {
    if (isAdmin && adminUser && !adminDataLoaded && window.apiAdapter) {
      window.apiAdapter.loadAdminData().then(data => {
        window.ALL_ACTIVITIES = data.activities;
        setActivities(data.activities);
        window.STUDENTS = data.students;
        window.STUDENT_BY_ID = data.studentsById;
        window.PRESENT_SEED = data.present;

        // Set real trend data from API
        window.TREND = data.trend || [];
        window.TREND_DATA = data.trendData || null;
        setTrend(data.trend || []);
        setTrendLabels(data.trendLabels || []);

        setPresent(data.present.map(p => ({ ...p })));
        setAdminDataLoaded(true);

        // Dispatch event for other components
        window.dispatchEvent(new CustomEvent('apiDataLoaded', { detail: data }));
      });
    }
  }, [isAdmin, adminUser, adminDataLoaded]);

  // Listen for API data updates
  React.useEffect(() => {
    const handleDataLoad = (event) => {
      const { present: apiPresent } = event.detail;
      setPresent(apiPresent.map((p) => ({ ...p })));
    };

    let reloadTimeout;
    const handleDataReload = () => {
      // Debounce rapid reload calls to prevent React DOM issues
      clearTimeout(reloadTimeout);
      reloadTimeout = setTimeout(() => {
        // Force reload admin data when a student is added
        if (isAdmin && adminUser && window.apiAdapter) {
          setAdminDataLoaded(false);
          window.apiAdapter.loadAdminData().then(data => {
            window.ALL_ACTIVITIES = data.activities;
            setActivities(data.activities);
            window.STUDENTS = data.students;
            window.STUDENT_BY_ID = data.studentsById;
            window.PRESENT_SEED = data.present;
            window.TREND = data.trend || [];
            window.TREND_DATA = data.trendData || null;
            setTrend(data.trend || []);
            setTrendLabels(data.trendLabels || []);

            setPresent(data.present.map(p => ({ ...p })));
            setAdminDataLoaded(true);

            // Dispatch event for other components
            window.dispatchEvent(new CustomEvent('apiDataLoaded', { detail: data }));
          });
        }
      }, 100); // 100ms debounce
    };

    window.addEventListener('apiDataLoaded', handleDataLoad);
    window.addEventListener('apiDataReload', handleDataReload);
    return () => {
      window.removeEventListener('apiDataLoaded', handleDataLoad);
      window.removeEventListener('apiDataReload', handleDataReload);
    };
  }, [isAdmin, adminUser]);

  async function signIn(studentId, activity) {
    if (!window.apiAdapter) {
      // Fallback to local state if API not available
      const selectedActivities = Array.isArray(activity) ? activity : [activity];
      setPresent((cur) => cur.some((p) => p.studentId === studentId)
        ? cur
        : [...cur, { studentId, activity: selectedActivities[0], activities: selectedActivities, inE: Date.now(), via: 'manual' }]);
      return;
    }

    setLoading(true);
    try {
      await window.apiAdapter.signIn(studentId, activity);
      // Update local state
      const selectedActivities = Array.isArray(activity) ? activity : [activity];
      setPresent((cur) => cur.some((p) => p.studentId === studentId)
        ? cur
        : [...cur, { studentId, activity: selectedActivities[0], activities: selectedActivities, inE: Date.now(), via: 'manual' }]);
    } catch (error) {
      console.error('Sign-in failed:', error);
      alert('Sign-in failed. Please try again.');
      throw error;
    } finally {
      setLoading(false);
    }
  }

  async function signOut(studentId) {
    if (!window.apiAdapter) {
      // Fallback to local state if API not available
      setPresent((cur) => cur.filter((p) => p.studentId !== studentId));
      return;
    }

    setLoading(true);
    try {
      await window.apiAdapter.signOut(studentId);
      // Update local state
      setPresent((cur) => cur.filter((p) => p.studentId !== studentId));
    } catch (error) {
      console.error('Sign-out failed:', error);
      alert('Sign-out failed. Please try again.');
    } finally {
      setLoading(false);
    }
  }

  function handleAdminLogin(user) {
    setAdminUser(user);
  }

  async function handleAdminLogout() {
    try {
      await fetch('/api/auth/logout', {
        method: 'POST',
        credentials: 'include'
      });
      setAdminUser(null);
      setAdminDataLoaded(false);
      // Redirect to kiosk mode
      window.location.href = '/';
    } catch (error) {
      console.error('Logout error:', error);
    }
  }

  if (isAdmin) {
    // Show loading while checking authentication
    if (!adminAuthChecked) {
      return (
        <div className="fullscreen-admin" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ textAlign: 'center' }}>
            <div>Loading...</div>
          </div>
        </div>
      );
    }

    // Show login form if not authenticated
    if (!adminUser) {
      return <window.AdminLogin onLoginSuccess={handleAdminLogin} />;
    }

    // Show admin dashboard if authenticated
    return (
      <div className="fullscreen-admin">
        <window.Admin
          activities={activities}
          present={present}
          students={window.STUDENTS || []}
          trend={trend}
          trendLabels={trendLabels}
          user={adminUser}
          onLogout={handleAdminLogout}
        />
      </div>
    );
  }

  return (
    <div className="fullscreen-kiosk">
      <window.Kiosk
        activities={activities}
        present={present}
        students={window.STUDENTS}
        onSignIn={signIn}
        onSignOut={signOut}
        location={location}
        locationId={locationId}
      />
    </div>
  );
}


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