"use client";

import { Button, Group, Stack, Switch, Text } from "@mantine/core";
import { CreditCard, ChevronRight, FileText, Mail } from "lucide-react";
import Link from "next/link";
import { DashboardPage } from "@/components/dashboard/DashboardPage";
import { PageHeader } from "@/components/dashboard/PageHeader";
import { GlassCard } from "@/components/ui/GlassCard";
import { useAuthStore } from "@/store/authStore";
import { colors } from "@/styles/tokens";

export default function ConfiguracoesPage() {
  const role = useAuthStore((s) => s.user?.role);

  return (
    <DashboardPage title="Configurações">
      <PageHeader title="Configurações" description="Preferências da plataforma." />

      {role === "admin" && (
        <Stack gap="md" mb="lg">
          <GlassCard>
            <Group justify="space-between" wrap="nowrap">
              <Group gap="md" wrap="nowrap">
                <Mail size={28} color={colors.primary} />
                <Stack gap={2}>
                  <Text fw={700} c={colors.white}>
                    E-mail / SMTP
                  </Text>
                  <Text size="sm" c="dimmed">
                    SMTP, teste de conexão, envio de teste e logs transacionais.
                  </Text>
                </Stack>
              </Group>
              <Button
                component={Link}
                href="/dashboard/configuracoes/email"
                variant="light"
                color="nogahost"
                rightSection={<ChevronRight size={16} />}
              >
                Configurar
              </Button>
            </Group>
          </GlassCard>
          <GlassCard>
            <Group justify="space-between" wrap="nowrap">
              <Group gap="md" wrap="nowrap">
                <FileText size={28} color={colors.primary} />
                <Stack gap={2}>
                  <Text fw={700} c={colors.white}>
                    Modelos de e-mail
                  </Text>
                  <Text size="sm" c="dimmed">
                    Cadastro, recuperação de senha, cobrança, tickets e mais.
                  </Text>
                </Stack>
              </Group>
              <Button
                component={Link}
                href="/dashboard/configuracoes/modelos-email"
                variant="light"
                color="nogahost"
                rightSection={<ChevronRight size={16} />}
              >
                Editar modelos
              </Button>
            </Group>
          </GlassCard>
          <GlassCard>
            <Group justify="space-between" wrap="nowrap">
              <Group gap="md" wrap="nowrap">
                <CreditCard size={28} color={colors.primary} />
                <Stack gap={2}>
                  <Text fw={700} c={colors.white}>
                    Pagamentos e Mercado Pago
                  </Text>
                  <Text size="sm" c="dimmed">
                    Chaves, webhook, métodos PIX/cartão/boleto e assinaturas recorrentes.
                  </Text>
                </Stack>
              </Group>
              <Button
                component={Link}
                href="/dashboard/configuracoes/pagamentos"
                variant="light"
                color="nogahost"
                rightSection={<ChevronRight size={16} />}
              >
                Configurar
              </Button>
            </Group>
          </GlassCard>
        </Stack>
      )}

      <GlassCard maw={480}>
        <Stack gap="lg">
          {[
            { label: "Notificações por e-mail", defaultChecked: true },
            { label: "Modo manutenção", defaultChecked: false },
            { label: "Logs de API", defaultChecked: true },
          ].map((item) => (
            <Switch
              key={item.label}
              label={item.label}
              defaultChecked={item.defaultChecked}
              styles={{ label: { color: colors.grayLight } }}
            />
          ))}
          <Text size="xs" style={{ color: colors.grayMedium }}>
            Alterações aplicadas em tempo real na sua empresa.
          </Text>
        </Stack>
      </GlassCard>
    </DashboardPage>
  );
}