"use client";

import { Loader, Stack, Text } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useRouter } from "next/navigation";
import { PlanEditorForm } from "@/components/admin/plans/PlanEditorForm";
import { DashboardPage } from "@/components/dashboard/DashboardPage";
import { PageHeader } from "@/components/dashboard/PageHeader";
import { adminPlansService } from "@/services/adminPlansService";
import { useAuthStore } from "@/store/authStore";
import type { PlanFormValues } from "@/types/plan";

export default function NovoPlanoPage() {
  const router = useRouter();
  const queryClient = useQueryClient();
  const token = useAuthStore((s) => s.token);
  const user = useAuthStore((s) => s.user);

  const createMutation = useMutation({
    mutationFn: (values: PlanFormValues) => adminPlansService.create(token!, values),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["admin", "plans"] });
      notifications.show({ message: "Plano criado.", color: "green" });
      router.push("/dashboard/planos");
    },
    onError: (e: Error) => {
      notifications.show({ message: e.message || "Erro ao criar plano", color: "red" });
    },
  });

  if (user?.role !== "admin") {
    return (
      <DashboardPage title="Novo plano">
        <Text c="dimmed">Acesso restrito.</Text>
      </DashboardPage>
    );
  }

  if (!token) {
    return (
      <Stack align="center" py="xl">
        <Loader color="nogahost" />
      </Stack>
    );
  }

  return (
    <DashboardPage title="Novo plano">
      <PageHeader
        title="Criar plano"
        description="Configure preços, benefícios, limites e SEO."
      />
      <PlanEditorForm
        loading={createMutation.isPending}
        onCancel={() => router.push("/dashboard/planos")}
        onSubmit={async (values) => {
          await createMutation.mutateAsync(values);
          await queryClient.invalidateQueries({ queryKey: ["plans", "public"] });
        }}
      />
    </DashboardPage>
  );
}