"use client";

import Link from "next/link";
import { Box, Container, Stack, Text, Title } from "@mantine/core";
import { PrimaryButton } from "@/components/ui/PrimaryButton";
import { clearLegacyCheckoutStorage } from "@/store/checkoutStore";
import { colors, gradients } from "@/styles/tokens";

export default function ContratarError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  const handleRetry = () => {
    clearLegacyCheckoutStorage();
    reset();
  };

  return (
    <Box style={{ minHeight: "100vh", background: gradients.dark }} p="xl">
      <Container size="sm">
        <Stack gap="lg" ta="center" mt={80}>
          <Title order={2} c={colors.white}>
            Não foi possível carregar o cadastro
          </Title>
          <Text style={{ color: colors.grayMedium }}>
            {error.message || "Erro inesperado. Tente novamente."}
          </Text>
          <Stack gap="sm">
            <PrimaryButton onClick={handleRetry}>Tentar novamente</PrimaryButton>
            <Link href="/#planos" style={{ color: colors.primary, textAlign: "center" }}>
              Voltar aos planos
            </Link>
          </Stack>
        </Stack>
      </Container>
    </Box>
  );
}