'use client';

import React, { useState, useEffect } from 'react';
import { onAuthStateChanged, User } from 'firebase/auth';
import { firebaseAuth } from '../../lib/firebase-client';
import { GroupRidesShowcase } from '../../components/group-rides/group-rides-showcase';
import { GroupRidesManagement } from '../../components/group-rides/group-rides-management';

export default function GroupRidesPage() {
  const [currentUser, setCurrentUser] = useState<User | null>(firebaseAuth?.currentUser ?? null);
  const [authChecked, setAuthChecked] = useState(Boolean(firebaseAuth?.currentUser));

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(firebaseAuth, (user) => {
      setCurrentUser(user);
      setAuthChecked(true);
    });

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

  // Loading skeleton to eliminate page flickering while auth state resolves
  if (!authChecked) {
    return (
      <div
        className="flagship-page min-h-screen bg-surface text-on-surface flex flex-col justify-center items-center px-4 py-16"
        data-testid="group-rides-skeleton"
      >
        <div className="flex flex-col items-center gap-4 text-center max-w-sm w-full">
          <div className="w-12 h-12 rounded-full border-2 border-primary-container border-t-transparent animate-spin" />
          <div className="w-48 h-4 bg-surface-container-high rounded animate-pulse" />
          <div className="w-32 h-3 bg-surface-container rounded animate-pulse" />
        </div>
      </div>
    );
  }

  // If user is authenticated: render Group Rides Hub / Management Console
  if (currentUser) {
    return <GroupRidesManagement currentUser={currentUser} />;
  }

  // If user is not authenticated: render Group Rides Feature Showcase Page
  return <GroupRidesShowcase isLoggedIn={false} />;
}