'use client';

import React from 'react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { Surface } from '@/ui/Surface';
import { 
  LayoutDashboard, 
  RefreshCw, 
  Settings,
  Bell
} from 'lucide-react';
import { Link } from '@/ui/Link';
import { routes } from '@/lib/routing/RouteConfig';

interface SponsorDashboardHeaderProps {
  sponsorName: string;
  onRefresh?: () => void;
}

/**
 * SponsorDashboardHeader
 * 
 * Semantic header for the sponsor dashboard.
 * Orchestrates dashboard-level actions and identity.
 */
export function SponsorDashboardHeader({ sponsorName, onRefresh }: SponsorDashboardHeaderProps) {
  return (
    <Box mb={8}>
      <Stack direction={{ base: 'col', md: 'row' }} align="start" justify="between" gap={4}>
        <Stack direction="row" align="center" gap={4}>
          <Surface 
            variant="muted" 
            rounded="lg" 
            padding={3} 
            bg="bg-primary-blue/10" 
            border 
            borderColor="border-primary-blue/20"
          >
            <Icon icon={LayoutDashboard} size={6} color="text-primary-blue" />
          </Surface>
          <Box>
            <Heading level={1} fontSize="2xl" weight="bold" color="text-white">
              Sponsor Dashboard
            </Heading>
            <Text color="text-gray-400" size="sm">
              Welcome back, <Text color="text-white" weight="medium">{sponsorName}</Text>
            </Text>
          </Box>
        </Stack>

        <Stack direction="row" align="center" gap={3}>
          <Surface variant="muted" rounded="lg" padding={1} bg="bg-iron-gray/10" border borderColor="border-charcoal-outline/30">
            <Stack direction="row" align="center">
              {(['7d', '30d', '90d'] as const).map((range) => (
                <Button
                  key={range}
                  variant="ghost"
                  size="sm"
                  px={3}
                >
                  {range}
                </Button>
              ))}
            </Stack>
          </Surface>
          
          <Button variant="secondary" size="sm" onClick={onRefresh} icon={<Icon icon={RefreshCw} size={4} />}>
            Refresh
          </Button>
          
          <Link href={routes.sponsor.settings}>
            <Button variant="secondary" size="sm" icon={<Icon icon={Settings} size={4} />}>
              Settings
            </Button>
          </Link>
          
          <Button variant="secondary" size="sm" position="relative">
            <Icon icon={Bell} size={4} />
            <Box 
              position="absolute" 
              top={-1} 
              right={-1} 
              w={2} 
              h={2} 
              rounded="full" 
              bg="bg-racing-red" 
              border 
              borderColor="border-deep-graphite" 
            />
          </Button>
        </Stack>
      </Stack>
    </Box>
  );
}