"use client";

import Link from "next/link";
import { Stack, Text } from "@mantine/core";
import { ArrowRight } from "lucide-react";
import { ClientProposalView } from "@/components/client/ClientProposalView";
import { DashboardPage } from "@/components/dashboard/DashboardPage";
import { PageHeader } from "@/components/dashboard/PageHeader";
import { PrimaryButton } from "@/components/ui/PrimaryButton";
import { GlassCard } from "@/components/ui/GlassCard";
import { usePublicAddons } from "@/hooks/useAddons";
import { CONTRATAR_PATH } from "@/lib/authRedirect";
import { useClientProposalStore } from "@/store/clientProposalStore";
import { useCheckoutStore } from "@/store/checkoutStore";
import { colors } from "@/styles/tokens";

export default function PropostaDashboardPage() {
  const proposal = useClientProposalStore((s) => s.current);
  const planCatalog = useCheckoutStore((s) => s.planCatalog);
  const { data: addons = [] } = usePublicAddons(planCatalog);

  return (
    <DashboardPage title="Proposta">
      <PageHeader
        title="Sua proposta"
        description="Plano, funcionalidades, plataformas, add-ons e valores — visíveis após login."
      />

      {!proposal ? (
        <GlassCard p="xl">
          <Stack gap="md" maw={480}>
            <Text style={{ color: colors.grayMedium, lineHeight: 1.65 }}>
              Você ainda não gerou uma proposta. Complete o onboarding no
              configurador até a etapa Proposta para ver todos os valores aqui.
            </Text>
            <Link href={CONTRATAR_PATH} style={{ textDecoration: "none" }}>
              <PrimaryButton rightSection={<ArrowRight size={18} />}>
                Iniciar onboarding
              </PrimaryButton>
            </Link>
          </Stack>
        </GlassCard>
      ) : (
        <ClientProposalView
          proposal={proposal}
          catalogAddons={addons}
          showPrices
        />
      )}
    </DashboardPage>
  );
}