'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
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 [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();
  }, []);

  // If not logged in, render an access prompt directing them to sign in
  if (!currentUser && 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">
        <div className="max-w-md w-full bg-surface-container-low border border-outline-variant/30 rounded-3xl p-8 shadow-2xl text-center space-y-5">
          <div className="w-14 h-14 rounded-2xl bg-primary-container/20 text-primary-container mx-auto flex items-center justify-center">
            <span className="material-symbols-outlined text-[30px]">lock</span>
          </div>
          <div>
            <h1 className="font-headline-lg text-xl font-bold text-on-surface">
              Authentication Required
            </h1>
            <p className="font-body-sm text-xs text-on-surface-variant mt-2 leading-relaxed">
              The Group Rides Management Console allows riders to schedule, coordinate, and modify live squad pack runs. Please sign in to your rider account to proceed.
            </p>
          </div>
          <div className="flex flex-col gap-3 pt-2">
            <Link
              href="/login?redirect=/group-rides/manage"
              className="w-full py-3 rounded-xl bg-gradient-to-r from-primary-container to-primary-fixed text-on-primary-container font-headline-sm text-xs font-bold shadow-lg hover:shadow-[0_0_20px_rgba(0,242,254,0.4)] transition"
            >
              Sign In to Access Management
            </Link>
            <Link
              href="/group-rides/showcase"
              className="w-full py-2.5 rounded-xl bg-surface-container hover:bg-surface-container-high border border-outline-variant/30 text-xs font-semibold text-on-surface transition"
            >
              Explore Feature Showcase
            </Link>
          </div>
        </div>
      </div>
    );
  }

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