'use client';

import { useCurrentDriver } from "@/lib/hooks/driver/useCurrentDriver";
import { useLeagueAdminStatus } from "@/lib/hooks/league/useLeagueAdminStatus";
import { useLeagueStewardingData } from "@/lib/hooks/league/useLeagueStewardingData";
import { useLeagueStewardingMutations } from "@/lib/hooks/league/useLeagueStewardingMutations";
import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';
import { StewardingTemplate } from './StewardingTemplate';
import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
import Card from '@/components/ui/Card';
import { AlertTriangle } from 'lucide-react';
import { useParams } from 'next/navigation';

export default function LeagueStewardingPage() {
  const params = useParams();
  const leagueId = params.id as string;
  const { data: currentDriver } = useCurrentDriver();
  const currentDriverId = currentDriver?.id || '';

  // Check admin status
  const { data: isAdmin, isLoading: adminLoading } = useLeagueAdminStatus(leagueId, currentDriverId);

  // Show loading for admin check
  if (adminLoading) {
    return <LoadingWrapper variant="full-screen" message="Checking permissions..." />;
  }

  // Show access denied if not admin
  if (!isAdmin) {
    return (
      <Card>
        <div className="text-center py-12">
          <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-iron-gray/50 flex items-center justify-center">
            <AlertTriangle className="w-8 h-8 text-warning-amber" />
          </div>
          <h3 className="text-lg font-medium text-white mb-2">Admin Access Required</h3>
          <p className="text-sm text-gray-400">
            Only league admins can access stewarding functions.
          </p>
        </div>
      </Card>
    );
  }

  // Load stewarding data using domain hook
  const { data, isLoading, error, refetch } = useLeagueStewardingData(leagueId);

  return (
    <StatefulPageWrapper
      data={data}
      isLoading={isLoading}
      error={error}
      retry={refetch}
      Template={({ data }) => (
        <StewardingTemplate
          data={data}
          leagueId={leagueId}
          currentDriverId={currentDriverId}
          onRefetch={refetch}
        />
      )}
      loading={{ variant: 'skeleton', message: 'Loading stewarding data...' }}
      errorConfig={{ variant: 'full-screen' }}
      empty={{
        icon: require('lucide-react').Flag,
        title: 'No stewarding data',
        description: 'There are no protests or penalties to review.',
      }}
    />
  );
}