"use client";

import Link from "next/link";
import {
  Badge,
  Box,
  Container,
  Group,
  SimpleGrid,
  Stack,
  Text,
  Title,
} from "@mantine/core";
import { motion } from "framer-motion";
import {
  Apple,
  Check,
  Calendar,
  Code2,
  CreditCard,
  Eye,
  Globe,
  Headphones,
  Layers,
  ShoppingCart,
  Smartphone,
  Sparkles,
  Store,
  UtensilsCrossed,
  Zap,
  type LucideIcon,
} from "lucide-react";
import { AppsHeroVisual } from "@/components/apps/AppsHeroVisual";
import { AppsFloatingPhone3D } from "@/components/apps/AppsFloatingPhone3D";
import { WebsiteAppScreensCarousel } from "@/components/website-app/WebsiteAppScreensCarousel";
import { FeatureIcon } from "@/components/ui/FeatureIcon";
import { GlassCard } from "@/components/ui/GlassCard";
import { GlowOrb } from "@/components/ui/GlowOrb";
import { GradientText } from "@/components/ui/GradientText";
import { PrimaryButton } from "@/components/ui/PrimaryButton";
import { SecondaryButton } from "@/components/ui/SecondaryButton";
import { SectionHeader } from "@/components/ui/SectionHeader";
import {
  appsCustom,
  appsHero,
  appsPlatforms,
  appsPlatformsIntro,
  appsScreensIntro,
  appsTrustIntro,
  appsTrustReasons,
  appsTypes,
  appsTypesIntro,
} from "@/data/apps";
import { fadeUp, revealInViewProps } from "@/lib/motion";
import { useThemeColors } from "@/hooks/useThemeColors";
import { OtherServicesButton } from "@/components/commerce/OtherServicesButton";
import { useServicePageContract } from "@/hooks/useContractAccess";
import { colors, typography } from "@/styles/tokens";

const platformIcons: Record<string, LucideIcon> = {
  apple: Apple,
  smartphone: Smartphone,
  layers: Layers,
  globe: Globe,
};

const trustIcons: Record<string, LucideIcon> = {
  "credit-card": CreditCard,
  eye: Eye,
  headphones: Headphones,
  store: Store,
};

const typeIcons: Record<string, LucideIcon> = {
  "shopping-cart": ShoppingCart,
  utensils: UtensilsCrossed,
  layers: Layers,
  calendar: Calendar,
  code: Code2,
  zap: Zap,
};

function AppsTypeCard({
  icon,
  title,
  description,
}: {
  icon: LucideIcon;
  title: string;
  description: string;
}) {
  const theme = useThemeColors();
  const Icon = icon;

  return (
    <Box
      h="100%"
      p="xl"
      style={{
        borderRadius: 16,
        background: theme.isDark ? "rgba(255, 255, 255, 0.04)" : "rgba(255, 255, 255, 0.95)",
        border: `1px solid ${theme.surfaceBorder}`,
        transition: "border-color 0.25s ease, transform 0.25s ease",
      }}
      className="noga-apps-type-card"
    >
      <Stack gap="lg">
        <Box
          w={44}
          h={44}
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            borderRadius: 12,
            background: `linear-gradient(135deg, ${colors.secondary} 0%, ${colors.primary} 100%)`,
            boxShadow: theme.isDark
              ? "0 8px 24px rgba(0, 155, 255, 0.25)"
              : "0 4px 16px rgba(0, 155, 255, 0.2)",
          }}
        >
          <Icon size={22} color="#ffffff" strokeWidth={2} />
        </Box>
        <Stack gap="sm">
          <Title order={4} fw={700} style={{ color: theme.heading, letterSpacing: "-0.02em" }}>
            {title}
          </Title>
          <Text size="sm" style={{ color: theme.muted, lineHeight: 1.65 }}>
            {description}
          </Text>
        </Stack>
      </Stack>
    </Box>
  );
}

export function AppsHeroSection() {
  const theme = useThemeColors();
  const requestContract = useServicePageContract("apps");

  return (
    <Box component="section" pos="relative" py={{ base: 48, md: 80 }} style={{ overflow: "hidden" }}>
      <GlowOrb size={480} top="0%" left="70%" opacity={0.28} />
      <Container size="xl">
        <SimpleGrid cols={{ base: 1, lg: 2 }} spacing="xl" style={{ alignItems: "center" }}>
          <Stack gap="xl" maw={600}>
            <motion.div initial={false} animate="visible" variants={fadeUp(0)}>
              <Badge
                size="lg"
                radius="xl"
                variant="outline"
                leftSection={<Sparkles size={14} color={colors.primary} />}
                styles={{
                  root: {
                    borderColor: "rgba(0, 155, 255, 0.35)",
                    background: "rgba(0, 155, 255, 0.12)",
                    color: colors.blueLight,
                  },
                }}
              >
                {appsHero.eyebrow}
              </Badge>
            </motion.div>

            <motion.div initial={false} animate="visible" variants={fadeUp(0.08)}>
              <Title order={1} fw={800} style={{ ...typography.hero, color: theme.heading }}>
                {appsHero.title}
              </Title>
            </motion.div>

            <motion.div initial={false} animate="visible" variants={fadeUp(0.12)}>
              <Text size="lg" fw={500} style={{ color: theme.body, lineHeight: 1.65 }}>
                {appsHero.subtitle}
              </Text>
            </motion.div>

            <motion.div initial={false} animate="visible" variants={fadeUp(0.16)}>
              <Group gap="md" wrap="wrap">
                <PrimaryButton size="lg" onClick={() => requestContract()}>
                  {appsHero.ctaPrimary}
                </PrimaryButton>
                <OtherServicesButton size="lg" variant="secondary" />
              </Group>
            </motion.div>
          </Stack>

          <AppsHeroVisual />
        </SimpleGrid>

        <motion.div initial={false} animate="visible" variants={fadeUp(0.24)}>
          <SimpleGrid cols={{ base: 2, sm: 4 }} spacing="md" mt={{ base: 48, md: 64 }}>
            {appsHero.trust.map((item) => (
              <Box
                key={item.label}
                p="md"
                ta="center"
                style={{
                  borderRadius: 16,
                  background: theme.isDark ? "rgba(255,255,255,0.04)" : "rgba(255,255,255,0.8)",
                  border: `1px solid ${theme.surfaceBorder}`,
                }}
              >
                <Text size="lg" fw={800} style={{ color: theme.heading, letterSpacing: "-0.02em" }}>
                  {item.value}
                </Text>
                <Text
                  size="xs"
                  tt="uppercase"
                  fw={600}
                  mt={4}
                  style={{ color: theme.muted, letterSpacing: "0.06em" }}
                >
                  {item.label}
                </Text>
              </Box>
            ))}
          </SimpleGrid>
        </motion.div>
      </Container>
    </Box>
  );
}

export function AppsScreensSection() {
  return (
    <Box component="section" py={80} style={{ overflow: "hidden" }}>
      <Container size="xl">
        <Stack gap="xl" align="center">
          <SectionHeader
            eyebrow={appsScreensIntro.eyebrow}
            title={appsScreensIntro.title}
            highlight={appsScreensIntro.highlight}
            description={appsScreensIntro.description}
          />
          <Box w="100%">
            <WebsiteAppScreensCarousel />
          </Box>
        </Stack>
      </Container>
    </Box>
  );
}

export function AppsPlatformsSection() {
  const theme = useThemeColors();

  return (
    <Box component="section" py={100} id="apps-plataformas" className="noga-grid-bg">
      <Container size="xl">
        <Stack gap={56} align="center">
          <SectionHeader
            eyebrow={appsPlatformsIntro.eyebrow}
            title={appsPlatformsIntro.title}
            highlight={appsPlatformsIntro.highlight}
            description={appsPlatformsIntro.description}
          />
          <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg" w="100%">
            {appsPlatforms.map((platform, i) => {
              const Icon = platformIcons[platform.icon] ?? Smartphone;
              return (
                <motion.div key={platform.id} {...revealInViewProps(i * 0.08, 20)}>
                  <GlassCard h="100%">
                    <Stack gap="md">
                      <Text
                        size="xs"
                        fw={700}
                        tt="uppercase"
                        style={{ color: colors.primary, letterSpacing: "0.1em" }}
                      >
                        {platform.stack}
                      </Text>
                      <FeatureIcon icon={Icon} size={48} />
                      <Title order={3} style={{ color: theme.heading, ...typography.sectionLabel }}>
                        {platform.title}
                      </Title>
                      <Text size="md" style={{ color: theme.muted, lineHeight: 1.65 }}>
                        {platform.description}
                      </Text>
                    </Stack>
                  </GlassCard>
                </motion.div>
              );
            })}
          </SimpleGrid>
        </Stack>
      </Container>
    </Box>
  );
}

export function AppsTypesSection() {
  const theme = useThemeColors();

  return (
    <Box component="section" py={100}>
      <Container size="xl">
        <Stack gap={56} align="center">
          <motion.div {...revealInViewProps(0, 20)}>
            <Title
              order={2}
              fw={800}
              ta="center"
              style={{ ...typography.h2, color: theme.heading }}
            >
              {appsTypesIntro.title}{" "}
              <GradientText fw={800} style={typography.h2}>
                {appsTypesIntro.highlight}
              </GradientText>{" "}
              {appsTypesIntro.titleSuffix}
            </Title>
          </motion.div>

          <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="lg" w="100%">
            {appsTypes.map((type, i) => {
              const Icon = typeIcons[type.icon] ?? Smartphone;
              return (
                <motion.div key={type.id} {...revealInViewProps(i * 0.06, 16)}>
                  <AppsTypeCard icon={Icon} title={type.title} description={type.description} />
                </motion.div>
              );
            })}
          </SimpleGrid>
        </Stack>
      </Container>
    </Box>
  );
}

export function AppsTrustSection() {
  const theme = useThemeColors();

  return (
    <Box component="section" py={100}>
      <Container size="xl">
        <Stack gap={56} align="center">
          <SectionHeader
            eyebrow={appsTrustIntro.eyebrow}
            title={appsTrustIntro.title}
            highlight={appsTrustIntro.highlight}
          />
          <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="lg" w="100%">
            {appsTrustReasons.map((reason, i) => {
              const Icon = trustIcons[reason.icon] ?? Sparkles;
              return (
                <motion.div key={reason.title} {...revealInViewProps(i * 0.08, 20)}>
                  <GlassCard h="100%">
                    <Stack gap="md">
                      <Text
                        size="2.5rem"
                        fw={800}
                        lh={1}
                        style={{ color: colors.primary, letterSpacing: "-0.04em" }}
                      >
                        {reason.stat}
                      </Text>
                      <FeatureIcon icon={Icon} size={44} />
                      <Title order={4} style={{ color: theme.heading }}>
                        {reason.title}
                      </Title>
                      <Text size="sm" style={{ color: theme.muted, lineHeight: 1.65 }}>
                        {reason.description}
                      </Text>
                    </Stack>
                  </GlassCard>
                </motion.div>
              );
            })}
          </SimpleGrid>
        </Stack>
      </Container>
    </Box>
  );
}

export function AppsCustomSection() {
  const theme = useThemeColors();

  return (
    <Box component="section" py={100} pos="relative" style={{ overflow: "hidden" }}>
      <Box
        style={{
          position: "absolute",
          inset: 0,
          background: theme.isDark
            ? `linear-gradient(135deg, ${colors.secondary} 0%, ${colors.bgMain} 60%, rgba(0, 155, 255, 0.12) 100%)`
            : `linear-gradient(135deg, #EEF2FF 0%, #F8FAFC 60%, rgba(0, 155, 255, 0.08) 100%)`,
        }}
      />
      <Container size="xl" pos="relative" style={{ zIndex: 1 }}>
        <SimpleGrid cols={{ base: 1, lg: 2 }} spacing="xl" style={{ alignItems: "center" }}>
          <motion.div {...revealInViewProps(0, 24)}>
            <Stack gap="xl" maw={720}>
              <Title order={2} fw={800} style={{ ...typography.h2, color: theme.heading }}>
                {appsCustom.title}{" "}
                <GradientText fw={800} style={typography.h2}>
                  {appsCustom.highlight}
                </GradientText>
              </Title>
              <Text size="lg" style={{ color: theme.body, lineHeight: 1.7 }}>
                {appsCustom.description}
              </Text>
              <Stack gap="sm">
                {appsCustom.bullets.map((bullet) => (
                  <Group key={bullet} gap="sm" wrap="nowrap" align="flex-start">
                    <Check
                      size={18}
                      color={colors.primary}
                      strokeWidth={2.5}
                      style={{ flexShrink: 0, marginTop: 3 }}
                    />
                    <Text size="md" style={{ color: theme.muted, lineHeight: 1.6 }}>
                      {bullet}
                    </Text>
                  </Group>
                ))}
              </Stack>
            </Stack>
          </motion.div>

          <motion.div {...revealInViewProps(0.1, 24)}>
            <AppsFloatingPhone3D />
          </motion.div>
        </SimpleGrid>
      </Container>
    </Box>
  );
}