"use client";

import { Badge, Button, Group, Loader, Stack, Table, Text } from "@mantine/core";
import Link from "next/link";
import { useQuery } from "@tanstack/react-query";
import { FileText } from "lucide-react";
import { DashboardPage } from "@/components/dashboard/DashboardPage";
import { PageHeader } from "@/components/dashboard/PageHeader";
import { GlassCard } from "@/components/ui/GlassCard";
import { adminMailService } from "@/services/adminMailService";
import { useAuthStore } from "@/store/authStore";
import { colors } from "@/styles/tokens";

export default function EmailTemplatesPage() {
  const token = useAuthStore((s) => s.token);
  const user = useAuthStore((s) => s.user);

  const { data, isLoading } = useQuery({
    queryKey: ["admin", "email-templates"],
    queryFn: () => adminMailService.listTemplates(token!),
    enabled: Boolean(token) && user?.role === "admin",
  });

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

  return (
    <DashboardPage title="Modelos de e-mail">
      <PageHeader
        title="Modelos de e-mail"
        description="Edite HTML, preview e variáveis dinâmicas dos e-mails transacionais."
        action={
          <Button component={Link} href="/dashboard/configuracoes/email" variant="light" color="nogahost">
            SMTP
          </Button>
        }
      />

      <GlassCard>
        {isLoading ? (
          <Loader color="nogahost" />
        ) : (
          <Table highlightOnHover>
            <Table.Thead>
              <Table.Tr>
                <Table.Th>Modelo</Table.Th>
                <Table.Th>Categoria</Table.Th>
                <Table.Th>Assunto</Table.Th>
                <Table.Th>Status</Table.Th>
                <Table.Th />
              </Table.Tr>
            </Table.Thead>
            <Table.Tbody>
              {templates.map((t) => (
                <Table.Tr key={t.slug}>
                  <Table.Td>
                    <Group gap="xs">
                      <FileText size={16} color={colors.primary} />
                      <Text fw={600} c={colors.white}>
                        {t.name}
                      </Text>
                    </Group>
                  </Table.Td>
                  <Table.Td>{t.category}</Table.Td>
                  <Table.Td>
                    <Text size="sm" lineClamp={1}>
                      {t.subject}
                    </Text>
                  </Table.Td>
                  <Table.Td>
                    <Badge color={t.is_active ? "green" : "gray"} variant="light">
                      {t.is_active ? "Ativo" : "Inativo"}
                    </Badge>
                  </Table.Td>
                  <Table.Td>
                    <Button
                      component={Link}
                      href={`/dashboard/configuracoes/modelos-email/${t.slug}`}
                      size="xs"
                      variant="light"
                      color="nogahost"
                    >
                      Editar
                    </Button>
                  </Table.Td>
                </Table.Tr>
              ))}
            </Table.Tbody>
          </Table>
        )}
      </GlassCard>

      <Stack mt="md" gap="xs">
        <Text size="sm" c="dimmed">
          Variáveis suportadas: {"{{client_name}}"}, {"{{client_email}}"}, {"{{reset_url}}"}, {"{{login_url}}"},
          {"{{ticket_id}}"}, {"{{date}}"}, {"{{year}}"} e outras documentadas no editor.
        </Text>
      </Stack>
    </DashboardPage>
  );
}