"use client";

import { Badge, Box, Button, Group, Stack, Switch, Text } from "@mantine/core";
import { useQuery } from "@tanstack/react-query";
import { HelpDeskAdminLayout } from "@/layouts/HelpDeskAdminLayout";
import { helpDeskAdminService } from "@/services/helpDeskAdminService";
import { useAuthStore } from "@/store/authStore";

export default function AdminAutomationsPage() {
  const token = useAuthStore((s) => s.token)!;

  const { data, isLoading } = useQuery({
    queryKey: ["hd-automations"],
    queryFn: () => helpDeskAdminService.listAutomations(token).then((r) => r.data),
  });

  return (
    <HelpDeskAdminLayout title="Automações" subtitle="Regras, SLA e distribuição automática">
      <Group justify="flex-end" mb="md">
        <Button variant="light">Nova regra</Button>
      </Group>
      {isLoading && <Text c="dimmed">Carregando...</Text>}
      <Stack gap="md">
        {(data ?? []).map((rule) => (
          <Box key={rule.id} className="hd-panel" p="lg">
            <Group justify="space-between">
              <Box>
                <Text fw={700}>
                  {rule.name}
                </Text>
                <Text size="sm" c="dimmed">
                  Gatilho: {rule.trigger_event}
                </Text>
              </Box>
              <Group gap="sm">
                <Badge color={rule.active ? "green" : "gray"}>{rule.active ? "Ativa" : "Inativa"}</Badge>
                <Switch checked={rule.active} readOnly />
              </Group>
            </Group>
          </Box>
        ))}
      </Stack>
    </HelpDeskAdminLayout>
  );
}