"use client";

import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { useCallback, useEffect, useMemo, useState } from "react";
import { Box, Container, Grid, Group, Stack, Text } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { motion, AnimatePresence } from "framer-motion";
import { ArrowLeft, ArrowRight, Lock, ShieldCheck } from "lucide-react";
import { Logo } from "@/components/brand/Logo";
import { CheckoutStepper } from "@/components/commerce/CheckoutStepper";
import { CheckoutPaymentPanel } from "@/components/commerce/CheckoutPaymentPanel";
import { PaymentMethodGrid } from "@/components/commerce/PaymentMethodGrid";
import { findPlanBySlug } from "@/lib/planDisplay";
import { PlanningPlansStep } from "@/components/commerce/planning/PlanningPlansStep";
import { WebsiteAppPlansStep } from "@/components/commerce/website-app/WebsiteAppPlansStep";
import { PlanningSummarySidebar } from "@/components/commerce/planning/PlanningSummarySidebar";
import { ProjectFeaturesStep } from "@/components/commerce/planning/ProjectFeaturesStep";
import { ProjectObjectiveStep } from "@/components/commerce/planning/ProjectObjectiveStep";
import { OptionalServicesStep } from "@/components/commerce/planning/OptionalServicesStep";
import { ProjectPlatformsStep } from "@/components/commerce/planning/ProjectPlatformsStep";
import { ProjectTypeStep } from "@/components/commerce/planning/ProjectTypeStep";
import { VisualReferencesStep } from "@/components/commerce/planning/VisualReferencesStep";
import { VisualStyleStep } from "@/components/commerce/planning/VisualStyleStep";
import { ModernFormShell } from "@/components/ui/ModernFormShell";
import { GlowOrb } from "@/components/ui/GlowOrb";
import { PrimaryButton } from "@/components/ui/PrimaryButton";
import { SecondaryButton } from "@/components/ui/SecondaryButton";
import { planningModalCopy } from "@/data/projectPlanning";
import { websiteToAppConfiguratorCopy } from "@/data/websiteToApp";
import {
  isWebsiteAppService,
  resolveContractContext,
} from "@/lib/contractService";
import {
  parsePlanCatalog,
  getPlanCatalogLabel,
  isPlanningCatalog,
  isProductCatalog,
  isSupportCatalog,
  isHiddenCreationCatalog,
  resolvePublicPlanningCatalog,
} from "@/lib/planCatalogs";
import { CONTRATAR_PATH } from "@/lib/authRedirect";
import { calculateCatalogQuote, catalogSlugExists } from "@/lib/catalogQuote";
import {
  calculateWebsiteAppQuote,
  websiteAppSlugExists,
} from "@/lib/websiteAppQuote";
import { useCatalogPlans } from "@/hooks/usePlans";
import { planningSlugExists } from "@/lib/planningPlans";
import { useContractModalStore } from "@/store/contractModalStore";
import { MERCADO_PAGO_SUBSCRIPTIONS_DOC, paymentMethods } from "@/data/commerce";
import { configuratorTaglines } from "@/data/onboarding";
import { createProposalSnapshot } from "@/lib/clientProposal";
import { planningService } from "@/services/planningService";
import { useClientProposalStore } from "@/store/clientProposalStore";
import {
  clearLegacyCheckoutStorage,
  useCheckoutStore,
} from "@/store/checkoutStore";
import { useAuthStore } from "@/store/authStore";
import { colors, gradients } from "@/styles/tokens";
import { formatCurrency } from "@/utils/format";
import { calculatePlanningQuote } from "@/utils/planningQuote";
import { easePremium } from "@/lib/motion";

export default function ContratarPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const step = useCheckoutStore((s) => s.step);
  const setStep = useCheckoutStore((s) => s.setStep);
  const planning = useCheckoutStore((s) => s.planning);
  const paymentGateway = useCheckoutStore((s) => s.paymentGateway);
  const nextStep = useCheckoutStore((s) => s.nextStep);
  const prevStep = useCheckoutStore((s) => s.prevStep);
  const contractService = useCheckoutStore((s) => s.contractService);
  const planCatalog = useCheckoutStore((s) => s.planCatalog);
  const catalogPlanSlug = useCheckoutStore((s) => s.catalogPlanSlug);
  const websiteAppPlanSlug = useCheckoutStore((s) => s.websiteAppPlanSlug);
  const setPlanningPlanSlug = useCheckoutStore((s) => s.setPlanningPlanSlug);
  const setWebsiteAppPlanSlug = useCheckoutStore((s) => s.setWebsiteAppPlanSlug);
  const setPlanCatalog = useCheckoutStore((s) => s.setPlanCatalog);
  const setCatalogPlanSlug = useCheckoutStore((s) => s.setCatalogPlanSlug);
  const setContractService = useCheckoutStore((s) => s.setContractService);
  const setPlansCache = useCheckoutStore((s) => s.setPlansCache);
  const refreshPlanningInsights = useCheckoutStore((s) => s.refreshPlanningInsights);
  const openContractModal = useContractModalStore((s) => s.open);
  const catalogFromUrl = parsePlanCatalog(
    searchParams.get("catalog"),
    searchParams.get("servico"),
  );
  const { data: catalogPlans = [] } = useCatalogPlans(catalogFromUrl);
  const plans = catalogPlans;
  const user = useAuthStore((s) => s.user);
  const token = useAuthStore((s) => s.token);

  const setProposal = useClientProposalStore((s) => s.setProposal);
  const markContracted = useClientProposalStore((s) => s.markContracted);
  const addPayment = useClientProposalStore((s) => s.addPayment);
  const [, setPaying] = useState(false);
  const [saving, setSaving] = useState(false);

  const isWebsiteApp = isWebsiteAppService(contractService);
  const isProductCheckout = isProductCatalog(planCatalog);
  const isSupportCheckout = isSupportCatalog(planCatalog);
  const directCheckout = step === 9;
  const serviceCopy = isWebsiteApp ? websiteToAppConfiguratorCopy : planningModalCopy;
  const activeProductSlug = isWebsiteApp
    ? websiteAppPlanSlug
    : isProductCheckout
      ? catalogPlanSlug
      : planning.planningPlanSlug;

  const quote = useMemo(() => {
    if (isProductCheckout && catalogPlanSlug) {
      return calculateCatalogQuote(planCatalog, catalogPlanSlug, catalogPlans);
    }
    if (isWebsiteApp) {
      return calculateWebsiteAppQuote(websiteAppPlanSlug, catalogPlans);
    }
    return calculatePlanningQuote(planning, catalogPlans);
  }, [
    isProductCheckout,
    isWebsiteApp,
    planCatalog,
    catalogPlanSlug,
    catalogPlans,
    websiteAppPlanSlug,
    planning,
  ]);
  const showSidebar = step >= 1 && step <= 8 && !directCheckout;

  useEffect(() => {
    clearLegacyCheckoutStorage();
    const stepParam = searchParams.get("step");
    const { catalog, service } = resolveContractContext(
      searchParams.get("catalog"),
      searchParams.get("servico"),
    );

    if (isSupportCatalog(catalog)) {
      if (user && token) {
        router.replace("/dashboard/assinaturas?tab=plano");
        return;
      }
      const planningCatalog = resolvePublicPlanningCatalog(catalog);
      const params = new URLSearchParams(searchParams.toString());
      params.set("catalog", planningCatalog);
      params.delete("servico");
      if (!params.has("step")) params.set("step", "1");
      router.replace(`${CONTRATAR_PATH}?${params.toString()}`);
      return;
    }

    if (isHiddenCreationCatalog(catalog)) {
      if (user && token) {
        router.replace("/dashboard/criar-meu-app");
        return;
      }
      const planningCatalog = resolvePublicPlanningCatalog(catalog);
      const params = new URLSearchParams(searchParams.toString());
      params.set("catalog", planningCatalog);
      params.delete("servico");
      if (!params.has("step")) params.set("step", "1");
      router.replace(`${CONTRATAR_PATH}?${params.toString()}`);
      return;
    }

    setPlanCatalog(catalog);
    setContractService(service);

    if (stepParam) {
      const n = Number(stepParam);
      if (n >= 1 && n <= 9) setStep(n);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps -- plan slug aplicado quando catalogPlans carregar
  }, [searchParams, user, token, router]);

  useEffect(() => {
    const plan = searchParams.get("plan");
    const catalog = parsePlanCatalog(
      searchParams.get("catalog"),
      searchParams.get("servico"),
    );
    if (!plan || isHiddenCreationCatalog(catalog) || !catalogPlans.length) return;

    setCatalogPlanSlug(plan);
    const service = contractServiceFromCatalog(catalog);
    if (service === "website-app" && websiteAppSlugExists(plan, catalogPlans)) {
      setWebsiteAppPlanSlug(plan);
    } else if (isPlanningCatalog(catalog) && planningSlugExists(plan, catalogPlans)) {
      setPlanningPlanSlug(plan);
    } else if (isProductCatalog(catalog) && catalogSlugExists(plan, catalogPlans)) {
      setCatalogPlanSlug(plan);
    }
    refreshPlanningInsights();
  }, [
    searchParams,
    catalogPlans,
    setCatalogPlanSlug,
    setWebsiteAppPlanSlug,
    setPlanningPlanSlug,
    refreshPlanningInsights,
  ]);

  useEffect(() => {
    if (plans.length) {
      setPlansCache(plans);
      refreshPlanningInsights();
    }
  }, [plans, setPlansCache, refreshPlanningInsights]);

  const persistProposal = useCallback(
    (status: "proposal" | "contracted", paymentStatus: "pending" | "paid") => {
      if (!user) return null;
      const state = useCheckoutStore.getState();
      const websiteFlow = isWebsiteAppService(state.contractService);
      const snapshot = createProposalSnapshot({
        userId: user.id,
        discovery: state.discovery,
        subscriptionSlug: websiteFlow
          ? state.websiteAppPlanSlug
          : isProductCatalog(state.planCatalog)
            ? state.catalogPlanSlug
            : planning.planningPlanSlug,
        appFormatId: websiteFlow ? "website-app" : "planning",
        developmentModuleIds: [],
        optionalAddonIds: [],
        billingCycle: "monthly",
        includeStrategicPlanning: true,
        planning,
        quote,
        status,
        paymentGateway,
        paymentStatus,
        projectStatus: status === "contracted" ? "planning" : "draft",
      });
      setProposal(snapshot);
      return snapshot;
    },
    [user, planning, quote, paymentGateway, setProposal, isWebsiteApp],
  );

  const handleSaveQuote = useCallback(async () => {
    if (!token) {
      openContractModal({
        service: contractService,
        catalog: planCatalog,
        step: 9,
        planSlug: activeProductSlug || undefined,
      });
      return;
    }
    if (isProductCheckout && !catalogPlanSlug) {
      notifications.show({
        color: "red",
        title: "Plano",
        message: "Selecione um plano para continuar.",
      });
      return;
    }
    if (isWebsiteApp && !websiteAppPlanSlug) {
      notifications.show({
        color: "red",
        title: "Plano",
        message: "Selecione um pacote de transformação.",
      });
      return;
    }
    if (!isWebsiteApp && !isProductCheckout && !planning.planningPlanSlug) {
      notifications.show({
        color: "red",
        title: "Plano",
        message: "Selecione um plano de planejamento.",
      });
      return;
    }
    setSaving(true);
    try {
      persistProposal("proposal", "pending");
      if (token) {
        await planningService.save(token, planning, {
          statusPagamento: "pending",
          statusProjeto: "draft",
          valor: isWebsiteApp ? quote.checkoutTotal : quote.planningTotal,
        });
      }
      notifications.show({
        color: "green",
        title: "Orçamento salvo",
        message: isWebsiteApp
          ? "Seu orçamento de transformação foi salvo. Acesse em Proposta no painel."
          : "Seu planejamento foi salvo. Acesse em Proposta no painel.",
      });
      router.push("/dashboard/proposta");
    } catch (err) {
      notifications.show({
        color: "yellow",
        title: "Salvo localmente",
        message:
          err instanceof Error
            ? `${err.message} — dados disponíveis no painel.`
            : "Dados salvos no navegador.",
      });
      router.push("/dashboard/proposta");
    } finally {
      setSaving(false);
    }
  }, [
    planning,
    persistProposal,
    token,
    router,
    quote.planningTotal,
    quote.checkoutTotal,
    isWebsiteApp,
    websiteAppPlanSlug,
    contractService,
    openContractModal,
  ]);

  const checkoutPlan = useMemo(
    () => findPlanBySlug(catalogPlans, activeProductSlug ?? ""),
    [catalogPlans, activeProductSlug],
  );

  const checkoutBillingCycle = isSupportCatalog(planCatalog) ? "monthly" : "monthly";

  const finalizeContract = useCallback(async () => {
    if (!token || !user) return;
    setPaying(true);
    try {
      await planningService.save(token, planning, {
        statusPagamento: "paid",
        statusProjeto: "planning",
        valor: isWebsiteApp ? quote.checkoutTotal : quote.planningTotal,
      });

      const snapshot = persistProposal("contracted", "paid");
      if (snapshot) {
        markContracted(snapshot.id, paymentGateway);
        addPayment({
          id: snapshot.id,
          date: new Date().toISOString(),
          amount: quote.checkoutTotal,
          method:
            paymentMethods.find((m) => m.gateway === paymentGateway)?.label ??
            paymentGateway,
          status: "paid",
        });
      }

      notifications.show({
        color: "green",
        title: isWebsiteApp ? "Transformação contratada" : "Planejamento contratado",
        message: isWebsiteApp
          ? "Pagamento registrado. Nossa equipe dará sequência ao projeto."
          : "Pagamento confirmado. Briefing e documento técnico serão gerados pela equipe NOGA CODE.",
      });
      router.push("/dashboard/proposta?contracted=1");
    } catch (err) {
      const message =
        err instanceof Error ? err.message : "Não foi possível concluir a contratação.";
      notifications.show({ color: "red", title: "Pagamento", message });
    } finally {
      setPaying(false);
    }
  }, [
    token,
    user,
    planning,
    persistProposal,
    markContracted,
    addPayment,
    quote.checkoutTotal,
    quote.planningTotal,
    paymentGateway,
    router,
    isWebsiteApp,
  ]);

  const goToPayment = () => {
    if (!token) {
      openContractModal({
        service: contractService,
        catalog: planCatalog,
        step: 9,
        planSlug: activeProductSlug || undefined,
      });
      return;
    }
    if (isProductCheckout && !catalogPlanSlug) {
      notifications.show({
        color: "red",
        title: "Plano",
        message: "Selecione um plano para continuar.",
      });
      return;
    }
    if (isWebsiteApp && !websiteAppPlanSlug) {
      notifications.show({
        color: "red",
        title: "Plano",
        message: "Selecione um pacote de transformação.",
      });
      return;
    }
    if (!isWebsiteApp && !isProductCheckout && !planning.planningPlanSlug) {
      notifications.show({
        color: "red",
        title: "Plano",
        message: "Selecione um plano de planejamento.",
      });
      return;
    }
    setStep(9);
  };

  const handleContinue = () => {
    if (step === 1 && !planning.projectType) {
      notifications.show({
        color: "red",
        title: "Aplicativo",
        message: "Selecione o tipo de aplicativo.",
      });
      return;
    }
    if (step === 2 && planning.projectObjective.trim().length < 20) {
      notifications.show({
        color: "red",
        title: "Objetivo",
        message: "Descreva o objetivo com pelo menos 20 caracteres.",
      });
      return;
    }
    if (step === 3 && planning.featureIds.length === 0) {
      notifications.show({
        color: "red",
        title: "Funcionalidades",
        message: "Selecione ao menos uma funcionalidade.",
      });
      return;
    }
    if (step === 4 && planning.platformIds.length === 0) {
      notifications.show({
        color: "red",
        title: "Plataformas",
        message: "Selecione ao menos uma plataforma.",
      });
      return;
    }
    if (step === 6 && !planning.visualStyle) {
      notifications.show({
        color: "red",
        title: "Estilo visual",
        message: "Escolha um estilo visual.",
      });
      return;
    }
    if (step === 8) {
      goToPayment();
      return;
    }
    nextStep();
  };

  return (
    <Box
      style={{ minHeight: "100vh", background: gradients.dark }}
      className="noga-grid-bg"
      pos="relative"
    >
      <GlowOrb size={500} top="-10%" left="30%" opacity={0.25} />
      <GlowOrb size={320} top="85%" right="-5%" opacity={0.15} />

      <Container size="xl" py="xl" pos="relative">
        <Group justify="space-between" mb="md">
          <Logo />
          <Group gap="sm">
            {user && (
              <Text size="sm" style={{ color: colors.grayMedium }}>
                Olá, <strong style={{ color: colors.white }}>{user.name}</strong>
              </Text>
            )}
            <Link href="/" style={{ textDecoration: "none" }}>
              <SecondaryButton leftSection={<ArrowLeft size={16} />}>
                Voltar
              </SecondaryButton>
            </Link>
          </Group>
        </Group>

        <Text size="sm" mb="lg" style={{ color: colors.grayMedium }}>
          {configuratorTaglines.subline}
        </Text>

        <CheckoutStepper currentStep={step} />

        <Grid gutter="xl" mt="xl">
          <Grid.Col span={{ base: 12, lg: showSidebar ? 8 : 12 }}>
            <AnimatePresence mode="wait">
              <motion.div
                key={step}
                initial={{ opacity: 0, x: 20, filter: "blur(4px)" }}
                animate={{ opacity: 1, x: 0, filter: "blur(0px)" }}
                exit={{ opacity: 0, x: -20, filter: "blur(2px)" }}
                transition={{ duration: 0.35, ease: easePremium }}
              >
                <ModernFormShell>
                  {step === 1 && <ProjectTypeStep />}
                  {step === 2 && <ProjectObjectiveStep />}
                  {step === 3 && <ProjectFeaturesStep />}
                  {step === 4 && <ProjectPlatformsStep />}
                  {step === 5 && <OptionalServicesStep />}
                  {step === 6 && <VisualStyleStep />}
                  {step === 7 && <VisualReferencesStep />}
                  {step === 8 &&
                    (isWebsiteApp ? <WebsiteAppPlansStep /> : <PlanningPlansStep />)}
                  {step === 9 && (
                    <Stack gap="xl">
                      <Stack gap="xs">
                        <Text size="xs" tt="uppercase" fw={700} c={colors.primary}>
                          Etapa 9 · Pagamento
                        </Text>
                        <Text fw={700} size="xl" c={colors.white}>
                          {isProductCheckout
                            ? `Contratar ${getPlanCatalogLabel(planCatalog)}`
                            : isWebsiteApp
                              ? "Contratar transformação agora"
                              : directCheckout
                                ? "Finalizar contratação"
                                : "Contratar planejamento agora"}
                        </Text>
                        <Group gap="xs">
                          <Lock size={14} color={colors.primary} />
                          <Text size="sm" style={{ color: colors.grayMedium }}>
                            {isSupportCheckout
                              ? `Assinatura mensal recorrente · ${getPlanCatalogLabel(planCatalog)}`
                              : isProductCheckout
                              ? `Pagamento do pacote selecionado · ${getPlanCatalogLabel(planCatalog)}`
                              : isWebsiteApp
                                ? "Pagamento único do pacote site → aplicativo"
                                : "Pagamento único do planejamento digital"}
                          </Text>
                        </Group>
                      </Stack>
                      <PaymentMethodGrid />
                      {token && user && checkoutPlan ? (
                        <>
                          <Box
                            p="lg"
                            style={{
                              borderRadius: 12,
                              border: "1px dashed rgba(0, 155, 255, 0.3)",
                              background: "rgba(0, 155, 255, 0.04)",
                            }}
                          >
                            <Group gap="sm" mb="md">
                              <ShieldCheck color={colors.primary} />
                              <Text fw={600} c={colors.white}>
                                Total · {formatCurrency(quote.checkoutTotal)}
                              </Text>
                            </Group>
                            {!isWebsiteApp && (
                              <Text size="sm" style={{ color: colors.grayMedium }}>
                                O valor do planejamento poderá ser abatido no desenvolvimento do
                                aplicativo.
                              </Text>
                            )}
                            <Text size="xs" mt="sm" style={{ color: colors.grayMedium }}>
                              Pagamento seguro via Mercado Pago (chaves configuradas no painel
                              admin). Escolha PIX ou cartão abaixo.
                            </Text>
                          </Box>
                          <CheckoutPaymentPanel
                            token={token}
                            userEmail={user.email}
                            userName={user.name}
                            planId={checkoutPlan.id}
                            billingCycle={checkoutBillingCycle}
                            amount={quote.checkoutTotal}
                            onSuccess={() => void finalizeContract()}
                            onError={(message) =>
                              notifications.show({
                                color: "red",
                                title: "Pagamento",
                                message,
                              })
                            }
                          />
                        </>
                      ) : token && !checkoutPlan ? (
                        <Text size="sm" c="red">
                          Plano não encontrado. Volte e selecione um plano válido.
                        </Text>
                      ) : (
                        <Text size="sm" style={{ color: colors.grayMedium }}>
                          Entre na sua conta para ver o total e concluir o pagamento.
                        </Text>
                      )}
                    </Stack>
                  )}
                </ModernFormShell>

                <Group justify="space-between" mt="lg" wrap="wrap">
                  <SecondaryButton
                    onClick={directCheckout ? () => router.push("/") : prevStep}
                    disabled={step === 1 && !directCheckout}
                  >
                    Voltar
                  </SecondaryButton>
                  {step < 9 && (
                    <Group gap="sm">
                      {step === 8 && token && (
                        <SecondaryButton onClick={handleSaveQuote} disabled={saving}>
                          {saving ? "Salvando…" : serviceCopy.saveQuote}
                        </SecondaryButton>
                      )}
                      <PrimaryButton
                        onClick={step === 8 ? goToPayment : handleContinue}
                        rightSection={<ArrowRight size={16} />}
                      >
                        {step === 8 ? serviceCopy.hireCta : "Continuar"}
                      </PrimaryButton>
                    </Group>
                  )}
                </Group>
              </motion.div>
            </AnimatePresence>
          </Grid.Col>

          {showSidebar && (
            <Grid.Col span={{ base: 12, lg: 4 }}>
              <PlanningSummarySidebar />
            </Grid.Col>
          )}
        </Grid>
      </Container>
    </Box>
  );
}