'use client';

import React from 'react';
import { Trophy, Medal, Target, Users, Flag, User } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Image } from '@/ui/Image';
import { Button } from '@/ui/Button';
import { Link } from '@/ui/Link';
import { Surface } from '@/ui/Surface';
import { StatBox } from './StatBox';
import { routes } from '@/lib/routing/RouteConfig';

interface DashboardHeroProps {
  currentDriver: {
    name: string;
    avatarUrl: string;
    country: string;
    rating: string | number;
    rank: string | number;
    totalRaces: string | number;
    wins: string | number;
    podiums: string | number;
    consistency: string;
  };
  activeLeaguesCount: string | number;
}

export function DashboardHero({ currentDriver, activeLeaguesCount }: DashboardHeroProps) {
  return (
    <Box as="section" style={{ position: 'relative', overflow: 'hidden' }}>
      {/* Background Pattern */}
      <Box style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom right, rgba(59, 130, 246, 0.1), #0f1115, rgba(147, 51, 234, 0.05))' }} />
      
      <Box style={{ position: 'relative', maxWidth: '80rem', margin: '0 auto', padding: '2.5rem 1.5rem' }}>
        <Stack gap={8}>
          <Stack direction="row" align="center" justify="between" wrap gap={8}>
            {/* Welcome Message */}
            <Stack direction="row" align="start" gap={5}>
              <Box style={{ position: 'relative' }}>
                <Box style={{ width: '5rem', height: '5rem', borderRadius: '1rem', background: 'linear-gradient(to bottom right, #3b82f6, #9333ea)', padding: '0.125rem', boxShadow: '0 20px 25px -5px rgba(59, 130, 246, 0.2)' }}>
                  <Box style={{ width: '100%', height: '100%', borderRadius: '0.75rem', overflow: 'hidden', backgroundColor: '#262626' }}>
                    <Image
                      src={currentDriver.avatarUrl}
                      alt={currentDriver.name}
                      width={80}
                      height={80}
                      style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                    />
                  </Box>
                </Box>
                <Box style={{ position: 'absolute', bottom: '-0.25rem', right: '-0.25rem', width: '1.25rem', height: '1.25rem', borderRadius: '9999px', backgroundColor: '#10b981', border: '3px solid #0f1115' }} />
              </Box>
              <Box>
                <Text size="sm" color="text-gray-400" block mb={1}>Good morning,</Text>
                <Heading level={1} style={{ marginBottom: '0.5rem' }}>
                  {currentDriver.name}
                  <Text size="2xl" style={{ marginLeft: '0.75rem' }}>{currentDriver.country}</Text>
                </Heading>
                <Stack direction="row" align="center" gap={3} wrap>
                  <Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)', border: '1px solid rgba(59, 130, 246, 0.3)', paddingLeft: '0.75rem', paddingRight: '0.75rem' }}>
                    <Text size="sm" weight="semibold" color="text-primary-blue">{currentDriver.rating}</Text>
                  </Surface>
                  <Surface variant="muted" rounded="full" padding={1} style={{ backgroundColor: 'rgba(250, 204, 21, 0.1)', border: '1px solid rgba(250, 204, 21, 0.3)', paddingLeft: '0.75rem', paddingRight: '0.75rem' }}>
                    <Text size="sm" weight="semibold" style={{ color: '#facc15' }}>#{currentDriver.rank}</Text>
                  </Surface>
                  <Text size="xs" color="text-gray-500">{currentDriver.totalRaces} races completed</Text>
                </Stack>
              </Box>
            </Stack>

            {/* Quick Actions */}
            <Stack direction="row" gap={3} wrap>
              <Link href={routes.public.leagues} variant="ghost">
                <Button variant="secondary" icon={<Flag style={{ width: '1rem', height: '1rem' }} />}>
                  Browse Leagues
                </Button>
              </Link>
              <Link href={routes.protected.profile} variant="ghost">
                <Button variant="primary" icon={<User style={{ width: '1rem', height: '1rem' }} />}>
                  View Profile
                </Button>
              </Link>
            </Stack>
          </Stack>

          {/* Quick Stats Row */}
          <Box style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: '1rem' }}>
            {/* At md this should be 4 columns */}
            <StatBox icon={Trophy} label="Wins" value={currentDriver.wins} color="#10b981" />
            <StatBox icon={Medal} label="Podiums" value={currentDriver.podiums} color="#f59e0b" />
            <StatBox icon={Target} label="Consistency" value={currentDriver.consistency} color="#3b82f6" />
            <StatBox icon={Users} label="Active Leagues" value={activeLeaguesCount} color="#a855f7" />
          </Box>
        </Stack>
      </Box>
    </Box>
  );
}