'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 { Image } from '@/ui/Image';

interface TeamDetailsHeaderProps {
  teamId: string;
  name: string;
  tag?: string;
  description?: string;
  logoUrl?: string;
  memberCount: number;
  foundedDate?: string;
  isAdmin?: boolean;
  onAdminClick?: () => void;
}

export function TeamDetailsHeader({
  name,
  tag,
  description,
  logoUrl,
  memberCount,
  foundedDate,
  isAdmin,
  onAdminClick,
}: TeamDetailsHeaderProps) {
  return (
    <Box 
      bg="surface-charcoal" 
      border 
      borderColor="outline-steel" 
      p={8} 
      position="relative"
      overflow="hidden"
    >
      {/* Background accent */}
      <Box 
        position="absolute" 
        top="0" 
        right="0" 
        w="64" 
        h="64" 
        bg="primary-accent/5" 
        rounded="full" 
        blur="3xl" 
        translate="-1/2, -1/2"
      />

      <Stack direction="row" align="start" gap={8} position="relative">
        <Box 
          w="32" 
          h="32" 
          bg="base-black" 
          border 
          borderColor="outline-steel" 
          display="flex" 
          center
          overflow="hidden"
        >
          {logoUrl ? (
            <Image src={logoUrl} alt={name} width={128} height={128} />
          ) : (
            <Text size="2xl" weight="bold" color="text-gray-700">{name.substring(0, 2).toUpperCase()}</Text>
          )}
        </Box>

        <Box flex="1">
          <Stack direction="row" align="center" gap={3}>
            <Heading level={1} weight="bold">{name}</Heading>
            {tag && (
              <Box px={2} py={1} bg="base-black" border borderColor="outline-steel">
                <Text size="xs" font="mono" color="primary-accent" weight="bold">[{tag}]</Text>
              </Box>
            )}
          </Stack>

          <Text color="text-gray-400" mt={2} block maxWidth="2xl">
            {description || 'No mission statement provided.'}
          </Text>

          <Stack direction="row" gap={6} mt={6}>
            <Box>
              <Text size="xs" color="text-gray-500" uppercase font="mono" letterSpacing="widest">Personnel</Text>
              <Text block weight="bold" color="text-white">{memberCount} Units</Text>
            </Box>
            <Box>
              <Text size="xs" color="text-gray-500" uppercase font="mono" letterSpacing="widest">Established</Text>
              <Text block weight="bold" color="text-white">
                {foundedDate ? new Date(foundedDate).toLocaleDateString() : 'Unknown'}
              </Text>
            </Box>
          </Stack>
        </Box>

        <Stack gap={3}>
          {isAdmin && (
            <Button variant="secondary" size="sm" onClick={onAdminClick}>
              Configure
            </Button>
          )}
          <Button variant="primary" size="sm">
            Join Request
          </Button>
        </Stack>
      </Stack>
    </Box>
  );
}