"use client";

import { Badge, Loader, Switch, Table, Text } from "@mantine/core";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { DashboardPage } from "@/components/dashboard/DashboardPage";
import { PageHeader } from "@/components/dashboard/PageHeader";
import { adminAppCreationService } from "@/services/adminAppCreationService";
import { useAuthStore } from "@/store/authStore";

export default function CriacaoAppModelosPage() {
  const token = useAuthStore((s) => s.token);
  const queryClient = useQueryClient();

  const { data, isLoading } = useQuery({
    queryKey: ["admin", "app-creation", "plans", "templates"],
    queryFn: () => adminAppCreationService.plans.list(token!),
    enabled: Boolean(token),
  });

  const templates = (data?.data ?? []).filter((p) => p.isTemplate);

  const toggleMutation = useMutation({
    mutationFn: ({ id, isTemplate }: { id: number; isTemplate: boolean }) =>
      adminAppCreationService.plans.update(token!, id, { is_template: !isTemplate }),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["admin", "app-creation", "plans"] }),
  });

  return (
    <DashboardPage title="Modelos Prontos">
      <PageHeader
        title="Modelos prontos"
        description="Planos marcados como template para reutilização rápida."
      />
      {isLoading ? (
        <Loader />
      ) : templates.length === 0 ? (
        <Text c="dimmed">
          Nenhum modelo marcado. Ative &quot;Modelo pronto&quot; na edição de um plano.
        </Text>
      ) : (
        <Table withTableBorder>
          <Table.Tbody>
            {templates.map((p) => (
              <Table.Tr key={p.id}>
                <Table.Td>{p.name}</Table.Td>
                <Table.Td>
                  <Badge>Template</Badge>
                </Table.Td>
                <Table.Td>
                  <Switch
                    checked={p.isTemplate}
                    onChange={() =>
                      toggleMutation.mutate({ id: p.id, isTemplate: p.isTemplate })
                    }
                  />
                </Table.Td>
              </Table.Tr>
            ))}
          </Table.Tbody>
        </Table>
      )}
    </DashboardPage>
  );
}