'use client'

import {
  Box,
  Container,
  Heading,
  Text,
  VStack,
  HStack,
  Button,
  SimpleGrid,
  useColorModeValue,
  Badge,
  List,
  ListItem,
  ListIcon,
  Tabs,
  TabList,
  TabPanels,
  Tab,
  TabPanel,
} from '@chakra-ui/react'
import { FiCheck, FiStar } from 'react-icons/fi'

interface PricingCardProps {
  title: string
  price: string
  period: string
  annualPrice?: string
  description: string
  features: string[]
  isPopular?: boolean
  buttonText: string
  href?: string
}

const PricingCard = ({ title, price, period, annualPrice, description, features, isPopular, buttonText, href }: PricingCardProps) => {
  return (
    <Box
      bg={useColorModeValue('white', 'gray.800')}
      rounded="3xl"
      p={8}
      shadow={isPopular ? '2xl' : 'xl'}
      border="1px"
      borderColor={isPopular ? 'brand.500' : useColorModeValue('gray.200', 'gray.700')}
      position="relative"
      transform={isPopular ? 'scale(1.05)' : 'none'}
      zIndex={isPopular ? 1 : 0}
    >
      {isPopular && (
        <Badge
          position="absolute"
          top={-3}
          left="50%"
          transform="translateX(-50%)"
          colorScheme="brand"
          variant="solid"
          px={4}
          py={1}
          rounded="full"
          fontSize="sm"
          display="flex"
          alignItems="center"
          gap={1}
        >
          <FiStar size="12px" />
          Najpopularniji
        </Badge>
      )}

      <VStack spacing={6} align="stretch">
        <VStack spacing={2} align="start">
          <Heading size="lg" color={useColorModeValue('gray.700', 'white')}>
            {title}
          </Heading>
          <Text color={useColorModeValue('gray.600', 'gray.400')}>
            {description}
          </Text>
        </VStack>

        <VStack spacing={2} align="start">
          <HStack align="baseline">
            <Text fontSize="4xl" fontWeight="bold" color={isPopular ? 'brand.500' : useColorModeValue('gray.700', 'white')}>
              {price}
            </Text>
            <Text color={useColorModeValue('gray.600', 'gray.400')}>
              {period}
            </Text>
          </HStack>
          {annualPrice && (
            <HStack align="baseline">
              <Text fontSize="2xl" fontWeight="600" color={useColorModeValue('gray.600', 'gray.300')}>
                {annualPrice}
              </Text>
              <Text color={useColorModeValue('gray.500', 'gray.400')} fontSize="sm">
                /godišnje
              </Text>
            </HStack>
          )}
        </VStack>

        <Button
          as="a"
          href={href}
          target="_blank"
          rel="noopener noreferrer"
          size="lg"
          colorScheme={isPopular ? 'brand' : 'gray'}
          variant={isPopular ? 'solid' : 'outline'}
          rounded="xl"
          py={6}
          fontSize="md"
          fontWeight={600}
          _hover={{
            transform: 'translateY(-2px)',
            shadow: 'lg'
          }}
        >
          {buttonText}
        </Button>

        <List spacing={3}>
          {features.map((feature, index) => (
            <ListItem key={index} display="flex" alignItems="flex-start">
              <ListIcon as={FiCheck} color="brand.500" mt={1} />
              <Text color={useColorModeValue('gray.600', 'gray.400')}>
                {feature}
              </Text>
            </ListItem>
          ))}
        </List>
      </VStack>
    </Box>
  )
}

export default function Pricing() {
  // Pricing data for different categories
  const knjigovodstveneAgencije = [
    {
      title: 'Agencija Start',
      price: '3.990 RSD',
      period: '/mesečno',
      description: 'Za početne agencije do 10 klijenata',
      features: [
        'Do 10 organizacija',
        'Celokupno knjigovodstvo',
        'Osnovno izveštavanje',
        '1 korisnik',
        'Email podrška'
      ],
      buttonText: 'Detaljnije',
      href: '/pdfs/Cenovnik-Aktiv-Knjig-Agenc-2024-12.pdf'
    },
    {
      title: 'Agencija Standard',
      price: '7.990 RSD',
      period: '/mesečno',
      description: 'Za srednje agencije do 50 klijenata',
      features: [
        'Do 50 organizacija',
        'Celokupno knjigovodstvo',
        'Napredni izveštaji',
        'Masovno procesiranje',
        '2 korisnika',
        'Prioritetna podrška'
      ],
      isPopular: true,
      buttonText: 'Detaljnije',
      href: '/pdfs/Cenovnik-Aktiv-Knjig-Agenc-2024-12.pdf'
    },
    {
      title: 'Agencija Pro',
      price: '12.990 RSD',
      period: '/mesečno',
      description: 'Za velike agencije preko 50 klijenata',
      features: [
        'Neograničen broj organizacija',
        'Svi moduli uključeni',
        'Dedicirani account manager',
        'API pristup',
        '5 korisnika',
        '24/7 podrška'
      ],
      buttonText: 'Detaljnije',
      href: '/pdfs/Cenovnik-Aktiv-Knjig-Agenc-2024-12.pdf'
    }
  ]

  const preduzeca = [
    {
      title: 'Preduzeće do 2 zaposlena',
      price: '3.000 RSD',
      period: '/mesečno',
      annualPrice: '33.000 RSD',
      description: 'Za mala preduzeća do 2 zaposlena',
      features: [
        'Celokupno knjigovodstvo',
        'Bilans stanja i uspeha',
        'PD i DDV prijave',
        'Cash register',
        'Do 2 zaposlena',
        'Email podrška'
      ],
      buttonText: 'Detaljnije',
      href: '/pdfs/Cenovnik_Aktiv_Preduzeca.pdf'
    },
    {
      title: 'Preduzeće od 3 do 15 zaposlena',
      price: '4.000 RSD',
      period: '/mesečno',
      annualPrice: '44.000 RSD',
      description: 'Za srednja preduzeća od 3 do 15 zaposlena',
      features: [
        'Celokupno knjigovodstvo',
        'Bilans stanja i uspeha',
        'PD i DDV prijave',
        'Cash register',
        'Od 3 do 15 zaposlena',
        'Prioritetna podrška',
        'Napredni izveštaji'
      ],
      isPopular: true,
      buttonText: 'Detaljnije',
      href: '/pdfs/Cenovnik_Aktiv_Preduzeca.pdf'
    },
    {
      title: 'Preduzeće preko 15 zaposlenih',
      price: '5.000 RSD',
      period: '/mesečno',
      annualPrice: '55.000 RSD',
      description: 'Za velika preduzeća preko 15 zaposlenih',
      features: [
        'Celokupno knjigovodstvo',
        'Bilans stanja i uspeha',
        'PD i DDV prijave',
        'Cash register',
        'Preko 15 zaposlenih',
        'Prioritetna podrška',
        'Napredni izveštaji',
        'Dedicirani account manager'
      ],
      buttonText: 'Detaljnije',
      href: '/pdfs/Cenovnik_Aktiv_Preduzeca.pdf'
    }
  ]

  const eFakture = [
    {
      title: 'E-Fakture Basic',
      price: '990 RSD',
      period: '/mesečno',
      description: 'Osnovno elektronsko fakturisanje',
      features: [
        'Do 100 e-faktura mesečno',
        'Osnovni SEF format',
        'Email podrška',
        'Osnovno izveštavanje',
        '1 korisnik'
      ],
      buttonText: 'Detaljnije',
      href: '/pdfs/Cenovnik_E_Fakture.pdf'
    },
    {
      title: 'E-Fakture Standard',
      price: '1.990 RSD',
      period: '/mesečno',
      description: 'Napredne funkcije elektronskog fakturisanja',
      features: [
        'Do 500 e-faktura mesečno',
        'Svi SEF formati',
        'Automatska obrada',
        'Napredni izveštaji',
        'Prioritetna podrška'
      ],
      isPopular: true,
      buttonText: 'Detaljnije',
      href: '/pdfs/Cenovnik_E_Fakture.pdf'
    },
    {
      title: 'E-Fakture Pro',
      price: '3.990 RSD',
      period: '/mesečno',
      description: 'Neograničeno elektronsko fakturisanje',
      features: [
        'Neograničen broj e-faktura',
        'API integracija',
        'Bulk operacije',
        'Dedicirani support',
        'Custom razvoj'
      ],
      buttonText: 'Detaljnije',
      href: '/pdfs/Cenovnik_E_Fakture.pdf'
    }
  ]

  const dodatneUsluge = [
    {
      title: 'Obuka korisnika',
      price: '4.990 RSD',
      period: '/jednokratno',
      description: 'Kompletna obuka za korišćenje programa',
      features: [
        'Individualna obuka (2h)',
        'Grupna obuka (do 5 osoba)',
        'Online ili uživo',
        'Materijali za učenje',
        'Sertifikat o obuci'
      ],
      buttonText: 'Detaljnije',
      href: '/pdfs/Cenovnik-Dodatne-usluge.pdf'
    },
    {
      title: 'Migracija podataka',
      price: '9.990 RSD',
      period: '/jednokratno',
      description: 'Prenos podataka iz drugog sistema',
      features: [
        'Analiza postojećih podataka',
        'Konverzija formata',
        'Import u AKTIV sistem',
        'Verifikacija podataka',
        'Podrška nakon migracije'
      ],
      isPopular: true,
      buttonText: 'Detaljnije',
      href: '/pdfs/Cenovnik-Dodatne-usluge.pdf'
    },
    {
      title: 'Održavanje sistema',
      price: '2.990 RSD',
      period: '/mesečno',
      description: 'Mesečno održavanje i optimizacija',
      features: [
        'Redovno ažuriranje',
        'Backup podataka',
        'Monitoring performansi',
        'Prioritetna podrška',
        'Preventivno održavanje'
      ],
      buttonText: 'Detaljnije',
      href: '/pdfs/Cenovnik-Dodatne-usluge.pdf'
    }
  ]

  return (
    <Box id="pricing" py={20} bg={useColorModeValue('gray.50', 'gray.900')}>
      <Container maxW="7xl">
        <VStack spacing={8} mb={16} textAlign="center">
          <Heading
            fontSize={{ base: '3xl', md: '4xl', lg: '5xl' }}
            fontWeight={700}
            color={useColorModeValue('gray.700', 'white')}
            lineHeight="shorter"
          >
            Transparentne{' '}
            <Text as="span" color="brand.500">
              cene za sve
            </Text>
          </Heading>
          <Text
            fontSize={{ base: 'lg', md: 'xl' }}
            color={useColorModeValue('gray.600', 'gray.400')}
            maxW="3xl"
            lineHeight="tall"
          >
            Izaberite paket koji odgovara vašim potrebama. Bez skrivenih troškova, bez dugih ugovora.
          </Text>
        </VStack>

        <Tabs variant="enclosed" colorScheme="brand" align="center">
          <TabList mb={8} bg={useColorModeValue('white', 'gray.800')} rounded="xl" p={2}>
            <Tab fontWeight={600} _selected={{ bg: 'brand.500', color: 'white' }}>
              Knjigovodstvene agencije
            </Tab>
            <Tab fontWeight={600} _selected={{ bg: 'brand.500', color: 'white' }}>
              Preduzeća
            </Tab>
            <Tab fontWeight={600} _selected={{ bg: 'brand.500', color: 'white' }}>
              E-Fakture
            </Tab>
            <Tab fontWeight={600} _selected={{ bg: 'brand.500', color: 'white' }}>
              Dodatne usluge
            </Tab>
          </TabList>

          <TabPanels>
            <TabPanel>
              <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={8}>
                {knjigovodstveneAgencije.map((plan, index) => (
                  <PricingCard key={index} {...plan} />
                ))}
              </SimpleGrid>
            </TabPanel>

            <TabPanel>
              <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={8}>
                {preduzeca.map((plan, index) => (
                  <PricingCard key={index} {...plan} />
                ))}
              </SimpleGrid>
            </TabPanel>

            <TabPanel>
              <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={8}>
                {eFakture.map((plan, index) => (
                  <PricingCard key={index} {...plan} />
                ))}
              </SimpleGrid>
            </TabPanel>

            <TabPanel>
              <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={8}>
                {dodatneUsluge.map((plan, index) => (
                  <PricingCard key={index} {...plan} />
                ))}
              </SimpleGrid>
            </TabPanel>
          </TabPanels>
        </Tabs>

        <Box mt={16} textAlign="center">
          <Text color={useColorModeValue('gray.600', 'gray.400')} fontSize="sm">
            Svi planovi uključuju 30-dnevnu garanciju povraćaja novca • Bez obaveza
          </Text>
        </Box>
      </Container>
    </Box>
  )
}