'use client';

import React from 'react';
import { Card } from '@/ui/Card';
import { Button } from '@/ui/Button';
import { Heading } from '@/ui/Heading';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Link } from '@/ui/Link';
import { Container } from '@/ui/Container';
import { Grid } from '@/ui/Grid';
import { GridItem } from '@/ui/GridItem';
import { Surface } from '@/ui/Surface';
import { Icon } from '@/ui/Icon';
import { Badge } from '@/ui/Badge';
import { MetricCard } from '@/components/sponsors/MetricCard';
import { SponsorshipCategoryCard } from '@/components/sponsors/SponsorshipCategoryCard';
import { ActivityItem } from '@/components/sponsors/ActivityItem';
import { RenewalAlert } from '@/components/sponsors/RenewalAlert';
import {
  Eye,
  Users,
  Trophy,
  TrendingUp,
  DollarSign,
  Target,
  ExternalLink,
  Car,
  Flag,
  Megaphone,
  ChevronRight,
  Plus,
  Bell,
  Settings,
  CreditCard,
  FileText,
  RefreshCw,
  BarChart3,
  Calendar
} from 'lucide-react';
import type { SponsorDashboardViewData } from '@/lib/view-data/SponsorDashboardViewData';
import { routes } from '@/lib/routing/RouteConfig';

interface SponsorDashboardTemplateProps {
  viewData: SponsorDashboardViewData;
}

export function SponsorDashboardTemplate({ viewData }: SponsorDashboardTemplateProps) {
  const categoryData = viewData.categoryData;

  return (
    <Container size="lg" py={8}>
      <Stack gap={8}>
        {/* Header */}
        <Stack direction="row" align="center" justify="between" wrap gap={4}>
          <Box>
            <Heading level={2}>Sponsor Dashboard</Heading>
            <Text color="text-gray-400" block mt={1}>Welcome back, {viewData.sponsorName}</Text>
          </Box>
          <Stack direction="row" align="center" gap={3}>
            {/* Time Range Selector */}
            <Surface variant="muted" rounded="lg" padding={1}>
              <Stack direction="row" align="center">
                {(['7d', '30d', '90d', 'all'] as const).map((range) => (
                  <Button
                    key={range}
                    variant="ghost"
                    size="sm"
                  >
                    {range === 'all' ? 'All' : range}
                  </Button>
                ))}
              </Stack>
            </Surface>

            <Button variant="secondary">
              <Icon icon={RefreshCw} size={4} />
            </Button>
            <Box>
              <Link href={routes.sponsor.settings} variant="ghost">
                <Button variant="secondary">
                  <Icon icon={Settings} size={4} />
                </Button>
              </Link>
            </Box>
          </Stack>
        </Stack>

        {/* Key Metrics */}
        <Grid cols={4} gap={4}>
          <MetricCard
            title="Total Impressions"
            value={viewData.totalImpressions}
            change={viewData.metrics.impressionsChange}
            icon={Eye}
            delay={0}
          />
          <MetricCard
            title="Unique Viewers"
            value="12.5k"
            change={viewData.metrics.viewersChange}
            icon={Users}
            delay={0.1}
          />
          <MetricCard
            title="Engagement Rate"
            value="4.2%"
            change={viewData.metrics.exposureChange}
            icon={TrendingUp}
            suffix="%"
            delay={0.2}
          />
          <MetricCard
            title="Total Investment"
            value={viewData.totalInvestment}
            icon={DollarSign}
            prefix="$"
            delay={0.3}
          />
        </Grid>

        {/* Sponsorship Categories */}
        <Box>
          <Stack direction="row" align="center" justify="between" mb={4}>
            <Heading level={3}>Your Sponsorships</Heading>
            <Box>
              <Link href={routes.sponsor.campaigns} variant="primary">
                <Button variant="secondary" size="sm" icon={<Icon icon={ChevronRight} size={4} />}>
                  View All
                </Button>
              </Link>
            </Box>
          </Stack>

          <Grid cols={5} gap={4}>
            <SponsorshipCategoryCard
              icon={Trophy}
              title="Leagues"
              count={categoryData.leagues.count}
              impressions={categoryData.leagues.impressions}
              color="#3b82f6"
              href="/sponsor/campaigns?type=leagues"
            />
            <SponsorshipCategoryCard
              icon={Users}
              title="Teams"
              count={categoryData.teams.count}
              impressions={categoryData.teams.impressions}
              color="#a855f7"
              href="/sponsor/campaigns?type=teams"
            />
            <SponsorshipCategoryCard
              icon={Car}
              title="Drivers"
              count={categoryData.drivers.count}
              impressions={categoryData.drivers.impressions}
              color="#10b981"
              href="/sponsor/campaigns?type=drivers"
            />
            <SponsorshipCategoryCard
              icon={Flag}
              title="Races"
              count={categoryData.races.count}
              impressions={categoryData.races.impressions}
              color="#f59e0b"
              href="/sponsor/campaigns?type=races"
            />
            <SponsorshipCategoryCard
              icon={Megaphone}
              title="Platform Ads"
              count={categoryData.platform.count}
              impressions={categoryData.platform.impressions}
              color="#ef4444"
              href="/sponsor/campaigns?type=platform"
            />
          </Grid>
        </Box>

        {/* Main Content Grid */}
        <Grid cols={12} gap={6}>
          <GridItem colSpan={12} lgSpan={8}>
            <Stack gap={6}>
              {/* Top Performing Sponsorships */}
              <Card p={0}>
                <Box p={4} borderBottom borderColor="border-neutral-800">
                  <Stack direction="row" align="center" justify="between">
                    <Heading level={3}>Top Performing</Heading>
                    <Box>
                      <Link href={routes.public.leagues} variant="primary">
                        <Button variant="secondary" size="sm" icon={<Icon icon={Plus} size={4} />}>
                          Find More
                        </Button>
                      </Link>
                    </Box>
                  </Stack>
                </Box>
                <Box p={4}>
                  <Surface variant="muted" rounded="lg" padding={4}>
                    <Stack direction="row" align="center" justify="between">
                      <Stack direction="row" align="center" gap={4}>
                        <Badge variant="primary">Main</Badge>
                        <Box>
                          <Stack direction="row" align="center" gap={2}>
                            <Icon icon={Trophy} size={4} color="#737373" />
                            <Text weight="medium" color="text-white">Sample League</Text>
                          </Stack>
                          <Text size="sm" color="text-gray-500" block mt={1}>Sample details</Text>
                        </Box>
                      </Stack>
                      <Stack direction="row" align="center" gap={4}>
                        <Box textAlign="right">
                          <Text weight="semibold" color="text-white" block>1.2k</Text>
                          <Text size="xs" color="text-gray-500">impressions</Text>
                        </Box>
                        <Button variant="secondary" size="sm">
                          <Icon icon={ExternalLink} size={3} />
                        </Button>
                      </Stack>
                    </Stack>
                  </Surface>
                </Box>
              </Card>

              {/* Upcoming Events */}
              <Card p={0}>
                <Box p={4} borderBottom borderColor="border-neutral-800">
                  <Heading level={3} icon={<Icon icon={Calendar} size={5} color="#f59e0b" />}>
                    Upcoming Sponsored Events
                  </Heading>
                </Box>
                <Box p={4}>
                  <Stack align="center" gap={2} py={8}>
                    <Icon icon={Calendar} size={8} color="#737373" />
                    <Text color="text-gray-400">No upcoming sponsored events</Text>
                  </Stack>
                </Box>
              </Card>
            </Stack>
          </GridItem>

          <GridItem colSpan={12} lgSpan={4}>
            <Stack gap={6}>
              {/* Quick Actions */}
              <Card>
                <Stack gap={4}>
                  <Heading level={3}>Quick Actions</Heading>
                  <Stack gap={2}>
                    <Box>
                      <Link href={routes.public.leagues} variant="ghost">
                        <Button variant="secondary" fullWidth icon={<Icon icon={Target} size={4} />}>
                          Find Leagues to Sponsor
                        </Button>
                      </Link>
                    </Box>
                    <Box>
                      <Link href={routes.public.teams} variant="ghost">
                        <Button variant="secondary" fullWidth icon={<Icon icon={Users} size={4} />}>
                          Browse Teams
                        </Button>
                      </Link>
                    </Box>
                    <Box>
                      <Link href={routes.public.drivers} variant="ghost">
                        <Button variant="secondary" fullWidth icon={<Icon icon={Car} size={4} />}>
                          Discover Drivers
                        </Button>
                      </Link>
                    </Box>
                    <Box>
                      <Link href={routes.sponsor.billing} variant="ghost">
                        <Button variant="secondary" fullWidth icon={<Icon icon={CreditCard} size={4} />}>
                          Manage Billing
                        </Button>
                      </Link>
                    </Box>
                    <Box>
                      <Link href={routes.sponsor.campaigns} variant="ghost">
                        <Button variant="secondary" fullWidth icon={<Icon icon={BarChart3} size={4} />}>
                          View Analytics
                        </Button>
                      </Link>
                    </Box>
                  </Stack>
                </Stack>
              </Card>

              {/* Renewal Alerts */}
              {viewData.upcomingRenewals.length > 0 && (
                <Card>
                  <Stack gap={4}>
                    <Heading level={3} icon={<Icon icon={Bell} size={5} color="#f59e0b" />}>
                      Upcoming Renewals
                    </Heading>
                    <Stack gap={3}>
                      {viewData.upcomingRenewals.map((renewal) => (
                        <RenewalAlert key={renewal.id} renewal={renewal} />
                      ))}
                    </Stack>
                  </Stack>
                </Card>
              )}

              {/* Recent Activity */}
              <Card>
                <Stack gap={4}>
                  <Heading level={3}>Recent Activity</Heading>
                  <Box>
                    {viewData.recentActivity.map((activity) => (
                      <ActivityItem key={activity.id} activity={activity} />
                    ))}
                  </Box>
                </Stack>
              </Card>

              {/* Investment Summary */}
              <Card>
                <Stack gap={4}>
                  <Heading level={3} icon={<Icon icon={FileText} size={5} color="#3b82f6" />}>
                    Investment Summary
                  </Heading>
                  <Stack gap={3}>
                    <Stack direction="row" align="center" justify="between">
                      <Text color="text-gray-400">Active Sponsorships</Text>
                      <Text weight="medium" color="text-white">{viewData.activeSponsorships}</Text>
                    </Stack>
                    <Stack direction="row" align="center" justify="between">
                      <Text color="text-gray-400">Total Investment</Text>
                      <Text weight="medium" color="text-white">{viewData.formattedTotalInvestment}</Text>
                    </Stack>
                    <Stack direction="row" align="center" justify="between">
                      <Text color="text-gray-400">Cost per 1K Views</Text>
                      <Text weight="medium" color="text-performance-green">
                        {viewData.costPerThousandViews}
                      </Text>
                    </Stack>
                    <Stack direction="row" align="center" justify="between">
                      <Text color="text-gray-400">Next Invoice</Text>
                      <Text weight="medium" color="text-white">Jan 1, 2026</Text>
                    </Stack>
                    <Box pt={3} borderTop borderColor="border-neutral-800">
                      <Box>
                        <Link href={routes.sponsor.billing} variant="ghost">
                          <Button variant="secondary" fullWidth size="sm" icon={<Icon icon={CreditCard} size={4} />}>
                            View Billing Details
                          </Button>
                        </Link>
                      </Box>
                    </Box>
                  </Stack>
                </Stack>
              </Card>
            </Stack>
          </GridItem>
        </Grid>
      </Stack>
    </Container>
  );
}