'use client';

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

export default function GroupRidesManageRoute() {
  const router = useRouter();
  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);
      if (!user) {
        router.replace('/login?redirect=/group-rides/manage');
      }
    });
    return () => unsubscribe();
  }, [router]);

  // If auth is still checking or user is not logged in (and redirecting), show clean loading skeleton
  if (!authChecked || !currentUser) {
    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="manage-auth-loading"
      >
        <div className="flex flex-col items-center gap-4 text-center">
          <div className="w-12 h-12 rounded-full border-2 border-primary-container border-t-transparent animate-spin" />
          <span className="font-mono text-xs text-on-surface-variant">
            Verifying rider credentials &amp; permissions...
          </span>
        </div>
      </div>
    );
  }

  return <GroupRidesManagement currentUser={currentUser} />;
}