"use client";

import { Container, Group, Loader, SimpleGrid, Stack, Text } from "@mantine/core";
import { Check, X } from "lucide-react";
import { LandingPlanCard } from "@/components/commerce/LandingPlanCard";
import { SectionHeader } from "@/components/ui/SectionHeader";
import { useContractAccess } from "@/hooks/useContractAccess";
import { useCatalogPlans } from "@/hooks/usePlans";
import { getPlanningDisplayPlans } from "@/lib/planDisplay";
import { contractServiceFromCatalog } from "@/lib/contractService";
import { useThemeColors } from "@/hooks/useThemeColors";
import {
  technicalSupportCovers,
  technicalSupportExcludes,
  technicalSupportSectionCopy,
} from "@/data/technicalSupport";

function BulletList({
  items,
  variant,
  theme,
}: {
  items: string[];
  variant: "check" | "x";
  theme: ReturnType<typeof useThemeColors>;
}) {
  const Icon = variant === "check" ? Check : X;
  const iconColor = variant === "check" ? "#34D399" : "#F87171";

  return (
    <Stack gap={8}>
      {items.map((item) => (
        <Group key={item} gap="sm" align="flex-start" wrap="nowrap">
          <Icon size={16} color={iconColor} style={{ flexShrink: 0, marginTop: 2 }} />
          <Text size="sm" style={{ color: theme.body, lineHeight: 1.5 }}>
            {item}
          </Text>
        </Group>
      ))}
    </Stack>
  );
}

export function TechnicalSupportPlansSection({
  sectionId = "suporte-tecnico",
}: {
  sectionId?: string;
}) {
  const theme = useThemeColors();
  const requestContract = useContractAccess();
  const { data: plans, isLoading, isError } = useCatalogPlans("suporte-tecnico");
  const displayPlans = getPlanningDisplayPlans(plans ?? []);
  const service = contractServiceFromCatalog("suporte-tecnico");
  const copy = technicalSupportSectionCopy;

  return (
    <Container component="section" size="xl" py={100} id={sectionId}>
      <Stack gap={56} align="center">
        <Stack gap="md" align="center" maw={720}>
          <SectionHeader
            eyebrow={copy.eyebrow}
            title={copy.title}
            highlight={copy.highlight}
          />
          <Text size="md" ta="center" style={{ color: theme.muted, lineHeight: 1.65 }}>
            {copy.intro}
          </Text>
        </Stack>

        {isLoading ? (
          <Loader color="nogahost" />
        ) : (
          <Stack gap="xl" w="100%" align="center">
            {isError ? (
              <Text size="sm" ta="center" style={{ color: theme.muted }}>
                Planos de suporte indisponíveis no momento. Tente atualizar a página.
              </Text>
            ) : null}

            {displayPlans.length > 0 ? (
              <SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg" w="100%">
                {displayPlans.map((plan) => (
                  <LandingPlanCard
                    key={plan.slug}
                    plan={plan}
                    actionLabel="Assinar suporte mensal"
                    onAction={() =>
                      requestContract(plan.slug, {
                        catalog: "suporte-tecnico",
                        service,
                        step: 9,
                      })
                    }
                  />
                ))}
              </SimpleGrid>
            ) : null}

            <SimpleGrid cols={{ base: 1, md: 2 }} spacing="xl" w="100%" maw={900}>
              <Stack gap="sm">
                <Text size="sm" fw={700} style={{ color: theme.heading }}>
                  O suporte cobre
                </Text>
                <BulletList items={technicalSupportCovers} variant="check" theme={theme} />
              </Stack>
              <Stack gap="sm">
                <Text size="sm" fw={700} style={{ color: theme.heading }}>
                  Não inclui
                </Text>
                <BulletList items={technicalSupportExcludes} variant="x" theme={theme} />
              </Stack>
            </SimpleGrid>

            <Text size="sm" ta="center" maw={560} style={{ color: theme.muted }}>
              {copy.footer}
            </Text>
          </Stack>
        )}
      </Stack>
    </Container>
  );
}