'use client'

import {
  Box,
  Container,
  Heading,
  Text,
  Button,
  VStack,
  HStack,
  SimpleGrid,
  useColorModeValue,
  Flex,
  Image,
  Link,
  FormControl,
  FormLabel,
  Input,
  Textarea,
  useToast,
  Stack,
} from '@chakra-ui/react'
import NextLink from 'next/link'
import { FiArrowRight, FiCheckCircle, FiHeadphones, FiBook, FiMessageCircle } from 'react-icons/fi'
import { useState } from 'react'
import Footer from '@/components/Footer'
import Header from '@/components/Header'
import SEO from '@/components/SEO'

interface ContactFormData {
  name: string
  lastname: string
  email: string
  phone: string
  message: string
}

export default function Homepage() {
  const bgColor = useColorModeValue('white', 'gray.900')
  const textColor = useColorModeValue('gray.700', 'white')
  const mutedColor = useColorModeValue('gray.600', 'gray.300')
  const accentColor = '#043F51' // Sherpa Blue
  const lightBg = useColorModeValue('gray.50', 'gray.800')

  const [formData, setFormData] = useState<ContactFormData>({
    name: '',
    lastname: '',
    email: '',
    phone: '',
    message: ''
  })
  const [isLoading, setIsLoading] = useState(false)
  const [errors, setErrors] = useState<any>({})
  const toast = useToast()

  const validate = () => {
    const errors: any = {}

    if (!formData.name.trim()) {
      errors.name = 'Ime je obavezno'
    }

    if (!formData.lastname.trim()) {
      errors.lastname = 'Prezime je obavezno'
    }

    if (!formData.email.trim()) {
      errors.email = 'Email je obavezan'
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      errors.email = 'Email format nije valjan'
    }

    if (!formData.phone.trim()) {
      errors.phone = 'Telefon je obavezan'
    }

    if (!formData.message.trim()) {
      errors.message = 'Poruka je obavezna'
    }

    return errors
  }

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData(prev => ({
      ...prev,
      [name]: value
    }))
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

    setIsLoading(true)

    const validationErrors = validate()
    if (Object.keys(validationErrors).length > 0) {
      setErrors(validationErrors)
      setIsLoading(false)
      return
    }

    setErrors({})

    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      })

      const responseData = await res.json()

      if (!res.ok) {
        throw new Error(responseData.error || responseData.message || "Failed to send message")
      }

      toast({
        title: 'Poruka je uspešno poslata!',
        description: 'Hvala na interesovanju, Aktiv tim će Vas kontaktirati uskoro.',
        status: 'success',
        duration: 5000,
        isClosable: true,
      })

      setFormData({ name: "", phone: "", email: "", message: "", lastname: "" })
    } catch (error) {
      console.error('Contact form error:', error)

      const errorMessage = error instanceof Error ? error.message : "Unknown error"

      toast({
        title: 'Poruka nije poslata!',
        description: `Greška: ${errorMessage}. Možete nas kontaktirati putem telefona: +381 60 62 62 844`,
        status: 'error',
        duration: 7000,
        isClosable: true,
      })
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <>
      <SEO
        title="AKTIV Program knjigovodstvo - Online knjigovodstveni program"
        description="Pouzdan partner knjigovodjama i preduzećima. Online knjigovodstveni program za efikasno poslovanje. Kompletan pristup svim funkcionalnostima."
        keywords="knjigovodstvo, računovodstvo, online knjigovodstvo, AKTIV program, cloud accounting, digitalno računovodstvo, e-fakture"
      />
      <Header />

      {/* Hero Section with Background Image */}
      <Box
        minH="90vh"
        position="relative"
        overflow="hidden"
        backgroundImage="url('/images/hero-woman-office.jpg')"
        backgroundSize="cover"
        backgroundPosition={{ base: '85% center', md: '50% center' }}
      >
        {/* Gradient Overlay */}
        <Box
          position="absolute"
          top={0}
          left={0}
          right={0}
          bottom={0}
          bg="linear-gradient(to bottom, rgba(4, 63, 81, 0.65), rgba(4, 63, 81, 0.75))"
          zIndex={1}
        />

        <Container maxW="7xl" position="relative" zIndex={2} h="90vh">
          <Flex h="full" align="center" justify="center">
            <VStack spacing={8} align="center" textAlign="center" maxW={{ base: '900px', lg: '1100px' }}>
              <Heading
                fontSize={{ base: '4xl', md: '6xl', lg: '7xl' }}
                fontWeight={700}
                color="white"
                lineHeight={1.1}
              >
                Pouzdan partner knjigovodjama i preduzećima
              </Heading>

              <Text
                fontSize={{ base: 'xl', md: '2xl' }}
                color="whiteAlpha.900"
                lineHeight="tall"
              >
                Napredna poslovna rešenja koja digitalizuju vaše procese
              </Text>

              <Button
                as="a"
                href="https://moj.aktiv.rs/register"
                target="_blank"
                rel="noopener noreferrer"
                size="lg"
                bg="white"
                color={accentColor}
                rightIcon={<FiArrowRight />}
                px={10}
                py={7}
                fontSize="lg"
                fontWeight={600}
                rounded="lg"
                _hover={{
                  transform: 'translateY(-2px)',
                  boxShadow: '0 20px 40px rgba(0,0,0,0.3)',
                }}
                transition="all 0.3s ease"
              >
                Započnite besplatno
              </Button>
            </VStack>
          </Flex>
        </Container>
      </Box>

      {/* Section 1: Za Knjigovodje - Image on Right */}
      <Box bg={bgColor} py={{ base: 16, md: 24 }}>
        <Container maxW="7xl">
          <SimpleGrid columns={{ base: 1, lg: 2 }} spacing={12} alignItems="center">
            {/* Text Content */}
            <VStack align="start" spacing={6} order={{ base: 1, lg: 1 }}>
              <Heading
                fontSize={{ base: '3xl', md: '4xl' }}
                color={textColor}
                fontWeight={700}
              >
                Za Knjigovodje
              </Heading>
              <Text fontSize="lg" color={mutedColor} lineHeight="tall">
                Profesionalno rešenje koje automatizuje sve računovodstvene procese.
                Vođenje poslovnih knjiga, izveštaji, bilans stanja i usklađenost sa
                zakonskim propisima - sve na jednom mestu.
              </Text>
              <VStack align="start" spacing={3} pt={2}>
                {[
                  'Automatska knjiženja',
                  'Finansijski izveštaji',
                  'Multi-klijent podrška',
                  'Brza razmena dokumenata',
                ].map((feature, index) => (
                  <HStack key={index} spacing={3}>
                    <Box color={accentColor}>
                      <FiCheckCircle size={20} />
                    </Box>
                    <Text color={mutedColor}>{feature}</Text>
                  </HStack>
                ))}
              </VStack>
              <Button
                as="a"
                href="https://moj.aktiv.rs/register"
                target="_blank"
                rel="noopener noreferrer"
                size="lg"
                bg={accentColor}
                color="white"
                px={8}
                _hover={{
                  bg: '#055468',
                }}
              >
                Saznajte više
              </Button>
            </VStack>

            {/* Image */}
            <Box
              position="relative"
              h={{ base: '300px', md: '400px', lg: '500px' }}
              rounded="2xl"
              overflow="hidden"
              boxShadow="2xl"
              order={{ base: 2, lg: 2 }}
            >
              <Image
                src="/images/hero-woman-office.jpg"
                alt="Profesionalna knjigovođa radi na računaru sa AKTIV programom za knjigovodstvo"
                w="full"
                h="full"
                objectFit="cover"
              />
            </Box>
          </SimpleGrid>
        </Container>
      </Box>

      {/* Section 2: Za Preduzeća - Image on Left */}
      <Box bg={lightBg} py={{ base: 16, md: 24 }}>
        <Container maxW="7xl">
          <SimpleGrid columns={{ base: 1, lg: 2 }} spacing={12} alignItems="center">
            {/* Image - Second on mobile, first on desktop */}
            <Box
              position="relative"
              h={{ base: '300px', md: '400px', lg: '500px' }}
              rounded="2xl"
              overflow="hidden"
              boxShadow="2xl"
              order={{ base: 2, lg: 1 }}
            >
              <Image
                src="/images/business-collaboration.jpg"
                alt="Moderni poslovni tim u preduzeću koristi AKTIV program za upravljanje poslovanjem"
                w="full"
                h="full"
                objectFit="cover"
              />
            </Box>

            {/* Text Content */}
            <VStack align="start" spacing={6} order={{ base: 1, lg: 2 }}>
              <Heading
                fontSize={{ base: '3xl', md: '4xl' }}
                color={textColor}
                fontWeight={700}
              >
                Za Preduzeća
              </Heading>
              <Text fontSize="lg" color={mutedColor} lineHeight="tall">
                Kompletno rešenje za upravljanje vašim poslovanjem. Fakturisanje,
                magacin, kadrovska evidencija i finansijski izveštaji u realnom vremenu.
              </Text>
              <VStack align="start" spacing={3} pt={2}>
                {[
                  'Fakturisanje i naplate',
                  'Upravljanje zalihama',
                  'Obračun plata',
                  'Proizvodnja',
                ].map((feature, index) => (
                  <HStack key={index} spacing={3}>
                    <Box color={accentColor}>
                      <FiCheckCircle size={20} />
                    </Box>
                    <Text color={mutedColor}>{feature}</Text>
                  </HStack>
                ))}
              </VStack>
              <Button
                as="a"
                href="https://moj.aktiv.rs/register"
                target="_blank"
                rel="noopener noreferrer"
                size="lg"
                bg={accentColor}
                color="white"
                px={8}
                _hover={{
                  bg: '#055468',
                }}
              >
                Saznajte više
              </Button>
            </VStack>
          </SimpleGrid>
        </Container>
      </Box>

      {/* Call to Action Section */}
      <Box
        bg={accentColor}
        py={{ base: 20, md: 28 }}
        position="relative"
        overflow="hidden"
      >
        {/* Decorative circles */}
        <Box
          position="absolute"
          top="-50px"
          right="-50px"
          w="300px"
          h="300px"
          bg="whiteAlpha.100"
          rounded="full"
          zIndex={0}
        />
        <Box
          position="absolute"
          bottom="-80px"
          left="-80px"
          w="400px"
          h="400px"
          bg="whiteAlpha.50"
          rounded="full"
          zIndex={0}
        />

        <Container maxW="5xl" position="relative" zIndex={1}>
          <VStack spacing={8} textAlign="center">
            <Heading
              fontSize={{ base: '3xl', md: '4xl', lg: '5xl' }}
              color="white"
              fontWeight={700}
              lineHeight={1.2}
            >
              Probajte 30 dana besplatno
            </Heading>
            <Text
              fontSize={{ base: 'lg', md: 'xl' }}
              color="whiteAlpha.900"
              maxW="2xl"
              lineHeight="tall"
            >
              Započnite svoju digitalnu transformaciju već danas. Bez obaveza, bez kreditne kartice.
              Kompletan pristup svim funkcionalnostima.
            </Text>

            <VStack spacing={4} pt={4}>
              <Button
                as="a"
                href="https://moj.aktiv.rs/register"
                target="_blank"
                rel="noopener noreferrer"
                size="lg"
                bg="white"
                color={accentColor}
                rightIcon={<FiArrowRight />}
                px={12}
                py={8}
                fontSize="xl"
                fontWeight={600}
                rounded="lg"
                boxShadow="2xl"
                _hover={{
                  transform: 'translateY(-4px)',
                  boxShadow: '0 30px 60px rgba(0,0,0,0.4)',
                }}
                transition="all 0.3s ease"
              >
                Počnite besplatno
              </Button>
              <Text fontSize="sm" color="whiteAlpha.800">
                ✓ 30 dana besplatno  •  ✓ Bez kreditne kartice  •  ✓ Potpuna podrška
              </Text>
            </VStack>
          </VStack>
        </Container>
      </Box>

      {/* Support Section */}
      <Box bg={bgColor} py={{ base: 16, md: 24 }}>
        <Container maxW="7xl">
          <VStack spacing={12}>
            {/* Section Header */}
            <VStack spacing={4} textAlign="center">
              <Heading
                fontSize={{ base: '3xl', md: '4xl', lg: '5xl' }}
                color={textColor}
                fontWeight={700}
              >
                Tehnička podrška uvek tu za vas
              </Heading>
              <Text
                fontSize={{ base: 'lg', md: 'xl' }}
                color={mutedColor}
                maxW="3xl"
                lineHeight="tall"
              >
                Naš fokus je da vam pružimo najbolju podršku i omogućimo da maksimalno iskoristite AKTIV program
              </Text>
            </VStack>

            {/* Three Support Cards */}
            <SimpleGrid columns={{ base: 1, md: 3 }} spacing={8} w="full">
              {/* Card 1: Brza podrška */}
              <Box
                bg={lightBg}
                p={8}
                rounded="2xl"
                textAlign="center"
                _hover={{
                  transform: 'translateY(-8px)',
                  boxShadow: 'xl',
                }}
                transition="all 0.3s ease"
              >
                <VStack spacing={5}>
                  <Box
                    bg={accentColor}
                    w={16}
                    h={16}
                    rounded="full"
                    display="flex"
                    alignItems="center"
                    justifyContent="center"
                    color="white"
                    fontSize="2xl"
                  >
                    <FiHeadphones />
                  </Box>
                  <Heading size="md" color={textColor}>
                    Brza i efikasna podrška
                  </Heading>
                  <Text color={mutedColor} lineHeight="tall">
                    Odgovaramo brzo i efikasno na sve vaše upite. Naš tim je dostupan
                    putem telefona, email-a i live chat-a da vam pomogne u svakom trenutku.
                  </Text>
                  <HStack spacing={2} pt={2}>
                    <Link
                      href="tel:+381606262844"
                      color={accentColor}
                      fontWeight={600}
                      fontSize="sm"
                      _hover={{ textDecoration: 'underline' }}
                    >
                      +381 60 62 62 844
                    </Link>
                    <Text color={mutedColor}>•</Text>
                    <Link
                      href="tel:+381606262877"
                      color={accentColor}
                      fontWeight={600}
                      fontSize="sm"
                      _hover={{ textDecoration: 'underline' }}
                    >
                      +381 60 62 62 877
                    </Link>
                  </HStack>
                </VStack>
              </Box>

              {/* Card 2: Uputstva */}
              <Box
                bg={lightBg}
                p={8}
                rounded="2xl"
                textAlign="center"
                _hover={{
                  transform: 'translateY(-8px)',
                  boxShadow: 'xl',
                }}
                transition="all 0.3s ease"
              >
                <VStack spacing={5}>
                  <Box
                    bg={accentColor}
                    w={16}
                    h={16}
                    rounded="full"
                    display="flex"
                    alignItems="center"
                    justifyContent="center"
                    color="white"
                    fontSize="2xl"
                  >
                    <FiBook />
                  </Box>
                  <Heading size="md" color={textColor}>
                    Pisana i video uputstva
                  </Heading>
                  <Text color={mutedColor} lineHeight="tall">
                    Detaljne obuke i kompletna dokumentacija su vam uvek dostupne.
                    Video tutorijali i pisana uputstva za sve funkcionalnosti programa.
                  </Text>
                  <Button
                    as="a"
                    href="https://moj.aktiv.rs/support/"
                    target="_blank"
                    rel="noopener noreferrer"
                    variant="link"
                    color={accentColor}
                    fontWeight={600}
                    rightIcon={<FiArrowRight />}
                  >
                    Pogledajte video uputstva
                  </Button>
                </VStack>
              </Box>

              {/* Card 3: Baza znanja */}
              <Box
                bg={lightBg}
                p={8}
                rounded="2xl"
                textAlign="center"
                _hover={{
                  transform: 'translateY(-8px)',
                  boxShadow: 'xl',
                }}
                transition="all 0.3s ease"
              >
                <VStack spacing={5}>
                  <Box
                    bg={accentColor}
                    w={16}
                    h={16}
                    rounded="full"
                    display="flex"
                    alignItems="center"
                    justifyContent="center"
                    color="white"
                    fontSize="2xl"
                  >
                    <FiMessageCircle />
                  </Box>
                  <Heading size="md" color={textColor}>
                    Blog i baza znanja
                  </Heading>
                  <Text color={mutedColor} lineHeight="tall">
                    Odgovori na najčešća pitanja, korisnim savetima i novostima iz oblasti knjigovodstva i poslovanja.
                  </Text>
                  <Button
                    as="a"
                    href="/blog"
                    variant="link"
                    color={accentColor}
                    fontWeight={600}
                    rightIcon={<FiArrowRight />}
                  >
                    Posetite naš blog
                  </Button>
                </VStack>
              </Box>
            </SimpleGrid>
          </VStack>
        </Container>
      </Box>

      {/* Contact Form Section */}
      <Box bg={lightBg} py={{ base: 16, md: 24 }} id="contact">
        <Container maxW="5xl">
          <VStack spacing={12}>
            {/* Section Header */}
            <VStack spacing={4} textAlign="center">
              <Heading
                fontSize={{ base: '3xl', md: '4xl', lg: '5xl' }}
                color={textColor}
                fontWeight={700}
              >
                Kontaktirajte nas
              </Heading>
              <Text
                fontSize={{ base: 'lg', md: 'xl' }}
                color={mutedColor}
                maxW="2xl"
                lineHeight="tall"
              >
                Imate pitanje ili želite da saznate više? Popunite formu i javićemo vam se u najkraćem roku.
              </Text>
            </VStack>

            {/* Contact Form */}
            <Box
              bg={bgColor}
              rounded="3xl"
              p={{ base: 6, md: 10 }}
              shadow="xl"
              border="1px"
              borderColor={useColorModeValue('gray.100', 'gray.700')}
              w="full"
            >
              <VStack spacing={6} as="form" onSubmit={handleSubmit}>
                <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4} w="full">
                  <FormControl isRequired>
                    <FormLabel color={textColor}>
                      Ime
                    </FormLabel>
                    <Input
                      name="name"
                      value={formData.name}
                      onChange={handleChange}
                      placeholder="Vaše ime"
                      size="lg"
                      rounded="xl"
                      border="1px"
                      borderColor={useColorModeValue('gray.300', 'gray.600')}
                      isInvalid={!!errors.name}
                      _focus={{
                        borderColor: accentColor,
                        boxShadow: `0 0 0 1px ${accentColor}`
                      }}
                    />
                    {errors.name && <Text color="red.500" fontSize="sm" mt={1}>{errors.name}</Text>}
                  </FormControl>

                  <FormControl isRequired>
                    <FormLabel color={textColor}>
                      Prezime
                    </FormLabel>
                    <Input
                      name="lastname"
                      value={formData.lastname}
                      onChange={handleChange}
                      placeholder="Vaše prezime"
                      size="lg"
                      rounded="xl"
                      border="1px"
                      borderColor={useColorModeValue('gray.300', 'gray.600')}
                      isInvalid={!!errors.lastname}
                      _focus={{
                        borderColor: accentColor,
                        boxShadow: `0 0 0 1px ${accentColor}`
                      }}
                    />
                    {errors.lastname && <Text color="red.500" fontSize="sm" mt={1}>{errors.lastname}</Text>}
                  </FormControl>
                </SimpleGrid>

                <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4} w="full">
                  <FormControl isRequired>
                    <FormLabel color={textColor}>
                      Email adresa
                    </FormLabel>
                    <Input
                      name="email"
                      type="email"
                      value={formData.email}
                      onChange={handleChange}
                      placeholder="vaš@email.com"
                      size="lg"
                      rounded="xl"
                      border="1px"
                      borderColor={useColorModeValue('gray.300', 'gray.600')}
                      isInvalid={!!errors.email}
                      _focus={{
                        borderColor: accentColor,
                        boxShadow: `0 0 0 1px ${accentColor}`
                      }}
                    />
                    {errors.email && <Text color="red.500" fontSize="sm" mt={1}>{errors.email}</Text>}
                  </FormControl>

                  <FormControl isRequired>
                    <FormLabel color={textColor}>
                      Telefon
                    </FormLabel>
                    <Input
                      name="phone"
                      value={formData.phone}
                      onChange={handleChange}
                      placeholder="+381 XX XXX XXXX"
                      size="lg"
                      rounded="xl"
                      border="1px"
                      borderColor={useColorModeValue('gray.300', 'gray.600')}
                      isInvalid={!!errors.phone}
                      _focus={{
                        borderColor: accentColor,
                        boxShadow: `0 0 0 1px ${accentColor}`
                      }}
                    />
                    {errors.phone && <Text color="red.500" fontSize="sm" mt={1}>{errors.phone}</Text>}
                  </FormControl>
                </SimpleGrid>

                <FormControl isRequired>
                  <FormLabel color={textColor}>
                    Poruka
                  </FormLabel>
                  <Textarea
                    name="message"
                    value={formData.message}
                    onChange={handleChange}
                    placeholder="Opišite vaše pitanje ili zahtev..."
                    rows={6}
                    resize="vertical"
                    rounded="xl"
                    border="1px"
                    borderColor={useColorModeValue('gray.300', 'gray.600')}
                    isInvalid={!!errors.message}
                    _focus={{
                      borderColor: accentColor,
                      boxShadow: `0 0 0 1px ${accentColor}`
                    }}
                  />
                  {errors.message && <Text color="red.500" fontSize="sm" mt={1}>{errors.message}</Text>}
                </FormControl>

                <Button
                  type="submit"
                  bg={accentColor}
                  color="white"
                  size="lg"
                  w="full"
                  rounded="xl"
                  isLoading={isLoading}
                  loadingText="Šalje se..."
                  _hover={{
                    bg: '#055468',
                    transform: 'translateY(-2px)',
                    boxShadow: 'lg'
                  }}
                  py={6}
                  fontSize="md"
                  fontWeight={600}
                >
                  Pošaljite poruku
                </Button>
              </VStack>
            </Box>
          </VStack>
        </Container>
      </Box>

      <Footer />
    </>
  )
}