import { Box, Heading, Text, Stack, VStack, HStack, Badge, Link } from "@chakra-ui/react";
import { FiPhone, FiMail, FiMapPin, FiExternalLink } from "react-icons/fi";
import { createClient } from '@/utils/supabase/server';

export default async function ServicesList() {
    const supabase = await createClient();
    const { data:providers } = await supabase.from("service_providers").select();
    
    return (
        <VStack align="stretch" gap={4} h="full">
            <Box position="sticky" top={0} bg="white" zIndex={1} pb={2}>
                <Heading as="h3" size="lg" color="gray.800">
                    Service Providers ({providers?.length || 0})
                </Heading>
            </Box>
            
            {providers?.length === 0 ? (
                <Text color="gray.500">Ni vsebin</Text>
            ) : (
                <Box 
                    flex="1"
                    overflowY="auto"
                    h="full"
                    pr={2}
                    css={{
                        '&::-webkit-scrollbar': {
                            width: '6px',
                        },
                        '&::-webkit-scrollbar-track': {
                            background: '#f1f1f1',
                            borderRadius: '3px',
                        },
                        '&::-webkit-scrollbar-thumb': {
                            background: '#c1c1c1',
                            borderRadius: '3px',
                        },
                        '&::-webkit-scrollbar-thumb:hover': {
                            background: '#a8a8a8',
                        },
                    }}
                >
                    <Stack gap={3}>
                        {providers?.map((provider) => (
                            <Box
                                key={provider.id}
                                p={3}
                                borderWidth="1px"
                                borderColor="gray.200"
                                borderRadius="md"
                                bg="white"
                                shadow="sm"
                                _hover={{
                                    shadow: "md",
                                    borderColor: "blue.300"
                                }}
                                transition="all 0.2s"
                                cursor="pointer"
                            >
                                <VStack align="start" gap={1.5}>
                                    <HStack justify="space-between" w="full">
                                        <Heading 
                                            as="h4" 
                                            size="sm" 
                                            color="gray.800" 
                                            truncate
                                            maxW="60%"
                                        >
                                            {provider.name}
                                        </Heading>
                                        {provider.category && (
                                            <Badge colorScheme="blue" variant="subtle" fontSize="xs">
                                                {provider.category}
                                            </Badge>
                                        )}
                                    </HStack>
                                    
                                    {provider.address && (
                                        <HStack color="gray.600" fontSize="xs" gap={1}>
                                            <FiMapPin size={12} />
                                            <Text truncate>{provider.address}</Text>
                                        </HStack>
                                    )}
                                    
                                    <HStack gap={3} fontSize="xs" flexWrap="wrap">
                                        {provider.phone && (
                                            <HStack color="gray.600" gap={1}>
                                                <FiPhone size={10} />
                                                <Link href={`tel:${provider.phone}`} color="blue.500">
                                                    {provider.phone}
                                                </Link>
                                            </HStack>
                                        )}
                                        
                                        {provider.email && (
                                            <HStack color="gray.600" gap={1}>
                                                <FiMail size={10} />
                                                <Link href={`mailto:${provider.email}`} color="blue.500">
                                                    Email
                                                </Link>
                                            </HStack>
                                        )}
                                        
                                        {provider.website && (
                                            <HStack color="gray.600" gap={1}>
                                                <FiExternalLink size={10} />
                                                <Link 
                                                    href={provider.website} 
                                                    color="blue.500"
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                >
                                                    Website
                                                </Link>
                                            </HStack>
                                        )}
                                    </HStack>
                                </VStack>
                            </Box>
                        ))}
                    </Stack>
                </Box>
            )}
        </VStack>
    )
}