"use client";

import { Box, Container, SimpleGrid, Stack, Text } from "@mantine/core";
import { Loader } from "@mantine/core";
import { ServiceBannerCarousel } from "@/components/commerce/ServiceBannerCarousel";
import { LandingPlanCard } from "@/components/commerce/LandingPlanCard";
import { OtherServicesButton } from "@/components/commerce/OtherServicesButton";
import { SectionHeader } from "@/components/ui/SectionHeader";
import { useContractAccess } from "@/hooks/useContractAccess";
import { buildContractAccessOptions } from "@/lib/servicePageContract";
import { useCatalogPlans } from "@/hooks/usePlans";
import { getPlanningDisplayPlans } from "@/lib/planDisplay";
import type { PlanCatalogId } from "@/lib/planCatalogs";
import { useThemeColors } from "@/hooks/useThemeColors";

export interface PricingSectionCopy {
  eyebrow?: string;
  title?: string;
  highlight?: string;
  footer?: string;
}

const DEFAULT_COPY: Required<PricingSectionCopy> = {
  eyebrow: "Planos de planejamento",
  title: "Selecione um plano para",
  highlight: "seu negócio",
  footer:
    "Crie sua conta para ver valores e contratar o planejamento. A NOGA CODE define toda a parte técnica.",
};

interface PricingSectionProps {
  catalog: PlanCatalogId;
  copy?: PricingSectionCopy;
  showBanner?: boolean;
  sectionId?: string;
}

export function PricingSection({
  catalog,
  copy,
  showBanner = true,
  sectionId = "planos",
}: PricingSectionProps) {
  const theme = useThemeColors();
  const requestContract = useContractAccess();
  const { data: plans, isLoading } = useCatalogPlans(catalog);
  const displayPlans = getPlanningDisplayPlans(plans ?? []);
  const text = { ...DEFAULT_COPY, ...copy };

  return (
    <Container component="section" size="xl" py={100} id={sectionId}>
      <Stack gap={56} align="center">
        <SectionHeader
          eyebrow={text.eyebrow}
          title={text.title}
          highlight={text.highlight}
        />

        {isLoading ? (
          <Loader color="nogahost" />
        ) : (
          <Stack gap="lg" w="100%" align="center">
            <SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg" w="100%">
              {displayPlans.map((plan) => (
                <LandingPlanCard
                  key={plan.slug}
                  plan={plan}
                  onAction={() =>
                    requestContract(plan.slug, buildContractAccessOptions(catalog, plan.slug))
                  }
                />
              ))}
            </SimpleGrid>

            <OtherServicesButton size="md" fullWidth={false} />

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

        {showBanner ? (
          <Box w="100%" id="criar-app-website-banner">
            <ServiceBannerCarousel />
          </Box>
        ) : null}
      </Stack>
    </Container>
  );
}