'use client';

import { ReadonlyLeagueInfo } from '@/components/leagues/ReadonlyLeagueInfo';
import LeagueOwnershipTransfer from '@/components/leagues/LeagueOwnershipTransfer';
import Card from '@/components/ui/Card';
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
import { useServices } from '@/lib/services/ServiceProvider';
import { LeagueSettingsViewModel } from '@/lib/view-models/LeagueSettingsViewModel';
import { AlertTriangle, Settings } from 'lucide-react';
import { useParams, useRouter } from 'next/navigation';

// Shared state components
import { useDataFetching } from '@/components/shared/hooks/useDataFetching';
import { StateContainer } from '@/components/shared/state/StateContainer';
import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';

export default function LeagueSettingsPage() {
  const params = useParams();
  const leagueId = params.id as string;
  const currentDriverId = useEffectiveDriverId();
  const { leagueMembershipService, leagueSettingsService } = useServices();
  const router = useRouter();

  // Check admin status
  const { data: isAdmin, isLoading: adminLoading } = useDataFetching({
    queryKey: ['leagueMembership', leagueId, currentDriverId],
    queryFn: async () => {
      const membership = leagueMembershipService.getMembership(leagueId, currentDriverId);
      return membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false;
    },
  });

  // Load settings (only if admin)
  const { data: settings, isLoading: settingsLoading, error, retry } = useDataFetching({
    queryKey: ['leagueSettings', leagueId],
    queryFn: () => leagueSettingsService.getLeagueSettings(leagueId),
    enabled: !!isAdmin,
  });

  const handleTransferOwnership = async (newOwnerId: string) => {
    try {
      await leagueSettingsService.transferOwnership(leagueId, currentDriverId, newOwnerId);
      router.refresh();
    } catch (err) {
      throw err; // Let the component handle the error
    }
  };

  // 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 settings.
          </p>
        </div>
      </Card>
    );
  }

  return (
    <StateContainer
      data={settings}
      isLoading={settingsLoading}
      error={error}
      retry={retry}
      config={{
        loading: { variant: 'spinner', message: 'Loading settings...' },
        error: { variant: 'full-screen' },
        empty: {
          icon: Settings,
          title: 'No settings available',
          description: 'Unable to load league configuration.',
        }
      }}
    >
      {(settingsData) => (
        <div className="space-y-6">
          {/* Header */}
          <div className="flex items-center gap-3">
            <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-blue/10">
              <Settings className="w-6 h-6 text-primary-blue" />
            </div>
            <div>
              <h1 className="text-2xl font-bold text-white">League Settings</h1>
              <p className="text-sm text-gray-400">Manage your league configuration</p>
            </div>
          </div>

          {/* READONLY INFORMATION SECTION - Compact */}
          <div className="space-y-4">
            <ReadonlyLeagueInfo league={settingsData.league} configForm={settingsData.config} />

            <LeagueOwnershipTransfer
              settings={settingsData}
              currentDriverId={currentDriverId}
              onTransferOwnership={handleTransferOwnership}
            />
          </div>
        </div>
      )}
    </StateContainer>
  );
}