'use client';

import { useState } from 'react';
import { useSponsorSponsorships } from "@/hooks/sponsor/useSponsorSponsorships";
import { SponsorCampaignsTemplate, SponsorshipType } from "@/templates/SponsorCampaignsTemplate";
import { Box } from "@/ui/primitives/Box";
import { Text } from "@/ui/Text";
import { Button } from "@/ui/Button";

export default function SponsorCampaignsPage() {
  const [typeFilter, setTypeFilter] = useState<SponsorshipType>('all');
  const [searchQuery, setSearchQuery] = useState('');
  const { data: sponsorshipsData, isLoading, error, retry } = useSponsorSponsorships('demo-sponsor-1');

  if (isLoading) {
    return (
      <Box maxWidth="7xl" mx="auto" py={8} px={4} display="flex" alignItems="center" justifyContent="center" minHeight="400px">
        <Box textAlign="center">
          <Box w="8" h="8" border borderTop={false} borderColor="border-primary-blue" rounded="full" animate="spin" mx="auto" mb={4} />
          <Text color="text-gray-400">Loading sponsorships...</Text>
        </Box>
      </Box>
    );
  }

  if (error || !sponsorshipsData) {
    return (
      <Box maxWidth="7xl" mx="auto" py={8} px={4} display="flex" alignItems="center" justifyContent="center" minHeight="400px">
        <Box textAlign="center">
          <Text color="text-gray-400">{error?.getUserMessage() || 'No sponsorships data available'}</Text>
          {error && (
            <Button variant="secondary" onClick={retry} mt={4}>
              Retry
            </Button>
          )}
        </Box>
      </Box>
    );
  }

  // Calculate stats
  const stats = {
    total: sponsorshipsData.sponsorships.length,
    active: sponsorshipsData.sponsorships.filter((s: any) => s.status === 'active').length,
    pending: sponsorshipsData.sponsorships.filter((s: any) => s.status === 'pending_approval').length,
    approved: sponsorshipsData.sponsorships.filter((s: any) => s.status === 'approved').length,
    rejected: sponsorshipsData.sponsorships.filter((s: any) => s.status === 'rejected').length,
    totalInvestment: sponsorshipsData.sponsorships.filter((s: any) => s.status === 'active').reduce((sum: number, s: any) => sum + s.price, 0),
    totalImpressions: sponsorshipsData.sponsorships.reduce((sum: number, s: any) => sum + s.impressions, 0),
  };

  const viewData = {
    sponsorships: sponsorshipsData.sponsorships as any,
    stats,
  };

  const filteredSponsorships = sponsorshipsData.sponsorships.filter((s: any) => {
    // For now, we only have leagues in the DTO
    if (typeFilter !== 'all' && typeFilter !== 'leagues') return false;
    if (searchQuery && !s.leagueName.toLowerCase().includes(searchQuery.toLowerCase())) return false;
    return true;
  });

  return (
    <SponsorCampaignsTemplate 
      viewData={viewData} 
      filteredSponsorships={filteredSponsorships as any}
      typeFilter={typeFilter}
      setTypeFilter={setTypeFilter}
      searchQuery={searchQuery}
      setSearchQuery={setSearchQuery}
    />
  );
}