'use client';

import { useSponsorSponsorships } from "@/hooks/sponsor/useSponsorSponsorships";
import { SponsorCampaignsTemplate, SponsorshipType, SponsorCampaignsViewData } from "@/templates/SponsorCampaignsTemplate";
import { Box } from "@/ui/Box";
import { Button } from "@/ui/Button";
import { Text } from "@/ui/Text";
import { useState } from 'react';
import { CurrencyDisplay } from "@/lib/display-objects/CurrencyDisplay";
import { NumberDisplay } from "@/lib/display-objects/NumberDisplay";
import { DateDisplay } from "@/lib/display-objects/DateDisplay";
import { StatusDisplay } from "@/lib/display-objects/StatusDisplay";

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 totalInvestment = sponsorshipsData.sponsorships.filter((s: any) => s.status === 'active').reduce((sum: number, s: any) => sum + s.price, 0);
  const totalImpressions = sponsorshipsData.sponsorships.reduce((sum: number, s: any) => sum + s.impressions, 0);

  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,
    formattedTotalInvestment: CurrencyDisplay.format(totalInvestment),
    formattedTotalImpressions: NumberDisplay.formatCompact(totalImpressions),
  };

  const sponsorships = sponsorshipsData.sponsorships.map((s: any) => ({
    ...s,
    formattedInvestment: CurrencyDisplay.format(s.price),
    formattedImpressions: NumberDisplay.format(s.impressions),
    formattedStartDate: s.seasonStartDate ? DateDisplay.formatShort(s.seasonStartDate) : undefined,
    formattedEndDate: s.seasonEndDate ? DateDisplay.formatShort(s.seasonEndDate) : undefined,
  }));

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

  const filteredSponsorships = 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}
    />
  );
}