"use client";

import Link from "next/link";
import { Badge, Group, List, Stack, Text, Title } from "@mantine/core";
import { ArrowRight, ShieldCheck } from "lucide-react";
import { ClientProposalView } from "@/components/client/ClientProposalView";
import { DashboardPage } from "@/components/dashboard/DashboardPage";
import { PageHeader } from "@/components/dashboard/PageHeader";
import { GlassCard } from "@/components/ui/GlassCard";
import { PrimaryButton } from "@/components/ui/PrimaryButton";
import { usePublicAddons } from "@/hooks/useAddons";
import { CONTRATAR_PATH } from "@/lib/authRedirect";
import { termsOfUse } from "@/data/legal";
import { useClientProposalStore } from "@/store/clientProposalStore";
import { useCheckoutStore } from "@/store/checkoutStore";
import { colors } from "@/styles/tokens";
import { formatCurrency } from "@/utils/format";

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

  const isContracted = proposal?.status === "contracted";

  return (
    <DashboardPage title="Contrato">
      <PageHeader
        title="Contrato e contratação"
        description="Termos do serviço e resumo do que será contratado."
      />

      <GlassCard p="lg" mb="lg">
        <Stack gap="md">
          <Group gap="sm">
            <ShieldCheck color={colors.primary} />
            <Title order={5} c={colors.white}>
              Status
            </Title>
            <Badge color={isContracted ? "green" : "yellow"} variant="light">
              {isContracted ? "Contratado" : "Aguardando confirmação"}
            </Badge>
          </Group>
          {proposal ? (
            <>
              <Text size="sm" c="dimmed">
                Plano {proposal.planName} · Total acordado na proposta:{" "}
                <strong style={{ color: colors.white }}>
                  {formatCurrency(proposal.quote.checkoutTotal)}
                </strong>
              </Text>
              {!isContracted && (
                <Link href={`${CONTRATAR_PATH}?step=7`} style={{ textDecoration: "none" }}>
                  <PrimaryButton rightSection={<ArrowRight size={18} />}>
                    Contratar imediatamente
                  </PrimaryButton>
                </Link>
              )}
            </>
          ) : (
            <Text size="sm" c="dimmed">
              Gere sua proposta no configurador para visualizar o contrato.
            </Text>
          )}
        </Stack>
      </GlassCard>

      <GlassCard p="lg" mb="xl">
        <Stack gap="sm">
          <Title order={5} c={colors.white}>
            {termsOfUse.title}
          </Title>
          <Text size="xs" c="dimmed">
            Atualizado em {termsOfUse.lastUpdated}
          </Text>
          <List size="sm" spacing="xs" styles={{ item: { color: colors.grayLight } }}>
            {termsOfUse.sections.slice(0, 4).map((section) => (
              <List.Item key={section.id}>{section.title}</List.Item>
            ))}
          </List>
          <Link href="/termos-de-uso" style={{ color: colors.primary, fontSize: 14 }}>
            Ler termos completos
          </Link>
        </Stack>
      </GlassCard>

      {proposal && (
        <ClientProposalView
          proposal={proposal}
          catalogAddons={addons}
          showPrices
          compact
        />
      )}
    </DashboardPage>
  );
}