MotorSignal-App/website/app/clubs/[clubId]/manage/rides/page.tsx

'use client';

import React, { useEffect, useState, use } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import {
  fetchFounderClubContext,
  FounderClubContext,
  fetchClubRides,
  fetchClubApplications,
  sanitizePortalError,
} from '../../../../../lib/club-data';
import { ClubUpcomingRide } from '../../../../../components/founder-portal/types';
import { FounderPortalShell } from '../../../../../components/founder-portal/founder-portal-shell';
import { FounderRides } from '../../../../../components/founder-portal/founder-rides';
import { OverviewSkeleton } from '../../../../../components/founder-portal/skeleton-state';
import { SafeErrorState } from '../../../../../components/founder-portal/safe-error-state';
import { firebaseAuth } from '../../../../../lib/firebase-client';

interface PageProps {
  params: Promise<{ clubId: string }>;
}

export default function ClubFounderRidesPage({ params }: PageProps) {
  const { clubId } = use(params);
  const router = useRouter();
  const searchParams = useSearchParams();

  const [context, setContext] = useState<FounderClubContext | null>(null);
  const [upcomingRides, setUpcomingRides] = useState<ClubUpcomingRide[]>([]);
  const [pastRides, setPastRides] = useState<ClubUpcomingRide[]>([]);
  const [pendingApplicationsCount, setPendingApplicationsCount] = useState(0);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [unauthenticated, setUnauthenticated] = useState(false);
  const [unauthorized, setUnauthorized] = useState(false);

  const isDemoPreview = searchParams?.get('preview') === 'demo';

  async function loadData() {
    setLoading(true);
    setError(null);
    setUnauthenticated(false);
    setUnauthorized(false);

    try {
      await firebaseAuth.authStateReady();
      const currentUser = firebaseAuth.currentUser;

      // Unauthenticated Guard: Direct access without demo preview requires authentication
      if (!isDemoPreview && !currentUser) {
        setUnauthenticated(true);
        setLoading(false);
        return;
      }

      const ctx = await fetchFounderClubContext(clubId, currentUser?.uid, {
        allowDemoPreview: isDemoPreview,
      });

      // Authorization Guard: Owner and Admin can access Rides management; Members cannot
      if (!isDemoPreview && (!ctx.permissions.canManageSettings && !ctx.permissions.canPlanRides)) {
        setUnauthorized(true);
        setLoading(false);
        return;
      }

      setContext(ctx);

      // Fetch pending applications count for sidebar badge
      try {
        const apps = await fetchClubApplications(ctx.club.id, currentUser?.uid, {
          allowDemoPreview: isDemoPreview,
        });
        setPendingApplicationsCount(apps.length);
      } catch {
        setPendingApplicationsCount(0);
      }

      // Load club rides for upcoming and past management views
      const ridesResult = await fetchClubRides(ctx.club.id, currentUser?.uid, {
        allowDemoPreview: isDemoPreview,
      });
      setUpcomingRides(ridesResult.upcomingRides);
      setPastRides(ridesResult.pastRides);
    } catch (err) {
      setError(sanitizePortalError(err, "Club rides couldn't be loaded."));
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    void loadData();
  }, [clubId]);

  if (loading) {
    return (
      <div className="min-h-screen bg-brand-bg telemetry-grid-bg p-6">
        <div className="max-w-5xl mx-auto">
          <OverviewSkeleton />
        </div>
      </div>
    );
  }

  // Unauthenticated safe error state
  if (unauthenticated) {
    return (
      <div className="min-h-screen bg-surface flex items-center justify-center p-6">
        <SafeErrorState
          title="Authentication Required"
          message="Sign in with your rider account to access club rides."
          actionLabel="Sign In"
          onAction={() => router.push('/login')}
        />
      </div>
    );
  }

  // Unauthorized (Member or non-admin) safe error state
  if (unauthorized) {
    return (
      <div className="min-h-screen bg-surface flex items-center justify-center p-6">
        <SafeErrorState
          title="Management Access Restricted"
          message="You must be an Owner or Admin of this Club to manage Club Rides."
          actionLabel="Return to Clubs"
          onAction={() => router.push('/clubs')}
        />
      </div>
    );
  }

  // Error or missing context
  if (error || !context) {
    return (
      <div className="min-h-screen bg-surface flex items-center justify-center p-6">
        <SafeErrorState
          title="Rides Unavailable"
          message={error ?? "Club rides couldn't be loaded."}
          actionLabel="Return to Clubs"
          onAction={() => router.push('/clubs')}
          onRetry={loadData}
        />
      </div>
    );
  }

  // Renders authoritative Founder Portal rides management view
  return (
    <FounderPortalShell
      club={context.club}
      permissions={context.permissions}
      activeNav="rides"
      pendingApplicationsCount={pendingApplicationsCount}
      upcomingRidesCount={upcomingRides.length}
    >
      <FounderRides
        club={context.club}
        permissions={context.permissions}
        upcomingRides={upcomingRides}
        pastRides={pastRides}
        isLoading={false}
        error={null}
      />
    </FounderPortalShell>
  );
}