'use client';

import React from 'react';
import { Users, Calendar, Shield, Settings, Globe } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Button } from '@/ui/Button';
import { Surface } from '@/ui/Surface';
import { Icon } from '@/ui/Icon';

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

export function TeamDetailsHeader({
  name,
  tag,
  description,
  logoUrl,
  memberCount,
  foundedDateLabel,
  isAdmin,
  onAdminClick,
}: TeamDetailsHeaderProps) {
  return (
    <Box marginBottom={12}>
      <Surface variant="precision" padding="none">
        <Box padding={10}>
          <Box display="flex" alignItems="start" gap={10} flexWrap="wrap">
            {/* Logo Container */}
            <Box 
              width={48} 
              height={48} 
              rounded="xl" 
              bg="var(--ui-color-bg-base)" 
              display="flex" 
              alignItems="center" 
              justifyContent="center"
              overflow="hidden"
              border="1px solid var(--ui-color-border-muted)"
              flexShrink={0}
              shadow="xl"
            >
              {logoUrl ? (
                <Box as="img" src={logoUrl} alt={name} width="100%" height="100%" objectFit="cover" />
              ) : (
                <Box display="flex" flexDirection="col" alignItems="center" gap="xs">
                  <Icon icon={Users} size={12} intent="low" />
                  <Text size="sm" variant="low" weight="bold" mono>{name.substring(0, 3).toUpperCase()}</Text>
                </Box>
              )}
            </Box>

            {/* Info Section */}
            <Box flex={1} minWidth="300px">
              <Stack gap="lg">
                <Box>
                  <Box display="flex" alignItems="center" gap="md" flexWrap="wrap" marginBottom={4}>
                    <Heading level={1} weight="bold" style={{ fontSize: '3rem' }}>{name}</Heading>
                    {tag && (
                      <Box paddingX={3} paddingY={1} bg="rgba(25, 140, 255, 0.1)" border="1px solid var(--ui-color-intent-primary)" rounded="md">
                        <Text variant="primary" size="sm" weight="bold" mono>{tag}</Text>
                      </Box>
                    )}
                  </Box>
                  <Box maxWidth="800px">
                    <Text variant="med" size="xl" leading="relaxed">
                      {description || 'No mission statement provided.'}
                    </Text>
                  </Box>
                </Box>

                {/* Metadata Grid */}
                <Box display="flex" gap={12} flexWrap="wrap" paddingTop={6} borderTop="1px solid var(--ui-color-border-muted)">
                  <Stack direction="row" align="center" gap="md">
                    <Box width={12} height={12} rounded="lg" bg="rgba(25, 140, 255, 0.05)" display="flex" alignItems="center" justifyContent="center" border="1px solid rgba(25, 140, 255, 0.1)">
                      <Icon icon={Users} size={5} intent="primary" />
                    </Box>
                    <Stack gap="none">
                      <Box>
                        <Text size="xs" variant="low" uppercase>Personnel</Text>
                      </Box>
                      <Text weight="bold" mono size="lg">{memberCount} UNITS</Text>
                    </Stack>
                  </Stack>

                  <Stack direction="row" align="center" gap="md">
                    <Box width={12} height={12} rounded="lg" bg="rgba(78, 212, 224, 0.05)" display="flex" alignItems="center" justifyContent="center" border="1px solid rgba(78, 212, 224, 0.1)">
                      <Icon icon={Calendar} size={5} intent="telemetry" />
                    </Box>
                    <Stack gap="none">
                      <Box>
                        <Text size="xs" variant="low" uppercase>Established</Text>
                      </Box>
                      <Text weight="bold" mono size="lg">{foundedDateLabel || 'UNKNOWN'}</Text>
                    </Stack>
                  </Stack>

                  <Stack direction="row" align="center" gap="md">
                    <Box width={12} height={12} rounded="lg" bg="rgba(255, 255, 255, 0.02)" display="flex" alignItems="center" justifyContent="center" border="1px solid var(--ui-color-border-muted)">
                      <Icon icon={Globe} size={5} intent="low" />
                    </Box>
                    <Stack gap="none">
                      <Box>
                        <Text size="xs" variant="low" uppercase>Region</Text>
                      </Box>
                      <Text weight="bold" mono size="lg">GLOBAL</Text>
                    </Stack>
                  </Stack>
                </Box>
              </Stack>
            </Box>

            {/* Action Buttons */}
            <Box>
              <Stack direction="row" gap="md">
                {isAdmin && (
                  <Button variant="secondary" onClick={onAdminClick} icon={<Settings size={18} />}>
                    Configure
                  </Button>
                )}
                <Button variant="primary" icon={<Shield size={18} />}>
                  Join Request
                </Button>
              </Stack>
            </Box>
          </Box>
        </Box>
      </Surface>
    </Box>
  );
}