"use client";

import { useState } from "react";
import { Group, Loader, Modal, Stack, Switch, Table, Text, TextInput } from "@mantine/core";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Plus } from "lucide-react";
import { DashboardPage } from "@/components/dashboard/DashboardPage";
import { PageHeader } from "@/components/dashboard/PageHeader";
import { PrimaryButton } from "@/components/ui/PrimaryButton";
import { adminAppCreationService } from "@/services/adminAppCreationService";
import { useAuthStore } from "@/store/authStore";

export default function CriacaoAppCategoriasPage() {
  const token = useAuthStore((s) => s.token);
  const queryClient = useQueryClient();
  const [opened, setOpened] = useState(false);
  const [name, setName] = useState("");

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

  const categories = data?.data ?? [];

  const createMutation = useMutation({
    mutationFn: () =>
      adminAppCreationService.categories.create(token!, { name }),
    onSuccess: () => {
      setOpened(false);
      setName("");
      queryClient.invalidateQueries({ queryKey: ["admin", "app-creation", "categories"] });
    },
  });

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

  return (
    <DashboardPage title="Categorias">
      <PageHeader
        title="Categorias de opcionais"
        description="IA, Delivery, CRM, ERP, APIs, Marketing, Cloud, Segurança, Automação."
        actions={
          <PrimaryButton leftSection={<Plus size={16} />} onClick={() => setOpened(true)}>
            Nova categoria
          </PrimaryButton>
        }
      />
      {isLoading ? (
        <Loader />
      ) : (
        <Table withTableBorder>
          <Table.Thead>
            <Table.Tr>
              <Table.Th>Nome</Table.Th>
              <Table.Th>Slug</Table.Th>
              <Table.Th>Ativo</Table.Th>
            </Table.Tr>
          </Table.Thead>
          <Table.Tbody>
            {categories.map((c) => (
              <Table.Tr key={c.id}>
                <Table.Td>{c.name}</Table.Td>
                <Table.Td>{c.slug}</Table.Td>
                <Table.Td>
                  <Switch
                    checked={c.active}
                    onChange={() => toggleMutation.mutate(c.id)}
                  />
                </Table.Td>
              </Table.Tr>
            ))}
          </Table.Tbody>
        </Table>
      )}
      <Modal opened={opened} onClose={() => setOpened(false)} title="Nova categoria">
        <Stack>
          <TextInput label="Nome" value={name} onChange={(e) => setName(e.target.value)} />
          <Group justify="flex-end">
            <PrimaryButton loading={createMutation.isPending} onClick={() => createMutation.mutate()}>
              Criar
            </PrimaryButton>
          </Group>
        </Stack>
      </Modal>
    </DashboardPage>
  );
}