"use client";

import { useState } from "react";
import {
  ActionIcon,
  Alert,
  Badge,
  Box,
  Button,
  Group,
  Modal,
  Select,
  Stack,
  Switch,
  Table,
  Text,
} from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Plus, Trash2, UserPlus } from "lucide-react";
import { HelpDeskAdminLayout } from "@/layouts/HelpDeskAdminLayout";
import { helpDeskAdminService } from "@/services/helpDeskAdminService";
import { useAuthStore } from "@/store/authStore";
import type { HelpAgentProfile } from "@/types/helpDeskAdmin";

const roleLabels: Record<string, string> = {
  super_admin: "Super Admin",
  manager: "Gerente",
  agent: "Atendente",
  moderator: "Moderador",
};

const roleOptions = Object.entries(roleLabels).map(([value, label]) => ({ value, label }));

export default function AdminTeamPage() {
  const token = useAuthStore((s) => s.token)!;
  const qc = useQueryClient();
  const [modalOpen, setModalOpen] = useState(false);
  const [newUserId, setNewUserId] = useState<string | null>(null);
  const [newRole, setNewRole] = useState("agent");
  const [newOnline, setNewOnline] = useState(true);

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

  const addAgent = useMutation({
    mutationFn: () =>
      helpDeskAdminService.saveAgent(token, {
        user_id: Number(newUserId),
        help_role: newRole,
        is_online: newOnline,
      }),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["hd-agents"] });
      setModalOpen(false);
      setNewUserId(null);
      setNewRole("agent");
      setNewOnline(true);
      notifications.show({ message: "Membro cadastrado na equipe de atendimento", color: "green" });
    },
    onError: (err: Error) => {
      notifications.show({ message: err.message || "Não foi possível cadastrar", color: "red" });
    },
  });

  const toggleOnline = useMutation({
    mutationFn: ({ id, is_online }: { id: number; is_online: boolean }) =>
      helpDeskAdminService.updateAgent(token, id, { is_online }),
    onSuccess: () => qc.invalidateQueries({ queryKey: ["hd-agents"] }),
  });

  const updateRole = useMutation({
    mutationFn: ({ id, help_role }: { id: number; help_role: string }) =>
      helpDeskAdminService.updateAgent(token, id, { help_role }),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["hd-agents"] });
      notifications.show({ message: "Cargo atualizado", color: "blue" });
    },
  });

  const removeAgent = useMutation({
    mutationFn: (id: number) => helpDeskAdminService.deleteAgent(token, id),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["hd-agents"] });
      notifications.show({ message: "Membro removido da equipe", color: "orange" });
    },
  });

  const agents = data?.agents ?? [];
  const availableUsers = data?.availableUsers ?? [];
  const canAdd = availableUsers.length > 0;

  return (
    <HelpDeskAdminLayout
      title="Equipe de atendimento"
      subtitle="Cadastre administradores que podem assumir tickets e responder clientes no chat"
    >
      <Stack gap="lg">
        <Group justify="space-between" align="flex-start" wrap="wrap">
          <Text size="sm" c="dimmed" maw={520}>
            Somente usuários com perfil <strong>Admin</strong> no sistema podem ser atendentes. Acesse pelo menu{" "}
            <strong>Central de Ajuda → Equipe</strong>.
          </Text>
          <Button
            leftSection={<UserPlus size={18} />}
            onClick={() => setModalOpen(true)}
            disabled={!canAdd && !isLoading}
          >
            Cadastrar membro
          </Button>
        </Group>

        {!isLoading && !canAdd && agents.length > 0 && (
          <Alert color="blue" variant="light" title="Equipe completa">
            Todos os administradores do sistema já estão cadastrados como atendentes.
          </Alert>
        )}

        {!isLoading && !canAdd && agents.length === 0 && (
          <Alert color="orange" variant="light" title="Nenhum atendente cadastrado">
            Crie um usuário com perfil <strong>Admin</strong> no painel (ou peça ao suporte técnico) e volte aqui para
            cadastrá-lo na equipe de atendimento.
          </Alert>
        )}

        {isLoading && <Text c="dimmed">Carregando equipe...</Text>}

        {!isLoading && (
          <Box className="hd-panel" style={{ overflowX: "auto" }}>
            <Table highlightOnHover>
              <Table.Thead>
                <Table.Tr>
                  <Table.Th>Nome</Table.Th>
                  <Table.Th>E-mail</Table.Th>
                  <Table.Th>Cargo no help desk</Table.Th>
                  <Table.Th>Tickets resolvidos</Table.Th>
                  <Table.Th>Online</Table.Th>
                  <Table.Th w={80} />
                </Table.Tr>
              </Table.Thead>
              <Table.Tbody>
                {agents.length === 0 ? (
                  <Table.Tr>
                    <Table.Td colSpan={6}>
                      <Text c="dimmed" ta="center" py="md">
                        Nenhum membro na equipe. Clique em &quot;Cadastrar membro&quot;.
                      </Text>
                    </Table.Td>
                  </Table.Tr>
                ) : (
                  agents.map((a) => (
                    <AgentRow
                      key={a.id}
                      agent={a}
                      onRoleChange={(help_role) => updateRole.mutate({ id: a.id, help_role })}
                      onToggleOnline={(is_online) => toggleOnline.mutate({ id: a.id, is_online })}
                      onRemove={() => {
                        if (window.confirm(`Remover ${a.user?.name ?? "este membro"} da equipe de atendimento?`)) {
                          removeAgent.mutate(a.id);
                        }
                      }}
                      removing={removeAgent.isPending}
                    />
                  ))
                )}
              </Table.Tbody>
            </Table>
          </Box>
        )}
      </Stack>

      <Modal
        opened={modalOpen}
        onClose={() => setModalOpen(false)}
        title="Cadastrar membro da equipe"
        size="md"
      >
        <Stack gap="md">
          {!canAdd ? (
            <Alert color="orange" variant="light">
              Não há administradores disponíveis. Todos já fazem parte da equipe ou não existem outros usuários Admin.
            </Alert>
          ) : (
            <>
              <Select
                label="Usuário (administrador)"
                description="Escolha quem poderá assumir tickets e responder no chat"
                placeholder="Selecione um usuário"
                data={availableUsers.map((u) => ({
                  value: String(u.id),
                  label: `${u.name} (${u.email})`,
                }))}
                value={newUserId}
                onChange={setNewUserId}
                searchable
                nothingFoundMessage="Nenhum admin disponível"
              />
              <Select
                label="Cargo na Central de Ajuda"
                data={roleOptions}
                value={newRole}
                onChange={(v) => v && setNewRole(v)}
              />
              <Switch
                label="Marcar como online ao cadastrar"
                description="Atendentes online aparecem disponíveis para distribuição de tickets"
                checked={newOnline}
                onChange={(e) => setNewOnline(e.currentTarget.checked)}
              />
              <Group justify="flex-end" mt="sm">
                <Button variant="default" onClick={() => setModalOpen(false)}>
                  Cancelar
                </Button>
                <Button
                  leftSection={<Plus size={16} />}
                  loading={addAgent.isPending}
                  disabled={!newUserId}
                  onClick={() => addAgent.mutate()}
                >
                  Cadastrar
                </Button>
              </Group>
            </>
          )}
        </Stack>
      </Modal>
    </HelpDeskAdminLayout>
  );
}

function AgentRow({
  agent,
  onRoleChange,
  onToggleOnline,
  onRemove,
  removing,
}: {
  agent: HelpAgentProfile;
  onRoleChange: (role: string) => void;
  onToggleOnline: (online: boolean) => void;
  onRemove: () => void;
  removing: boolean;
}) {
  return (
    <Table.Tr>
      <Table.Td>{agent.user?.name ?? "—"}</Table.Td>
      <Table.Td>{agent.user?.email ?? "—"}</Table.Td>
      <Table.Td>
        <Select
          size="xs"
          data={roleOptions}
          value={agent.help_role}
          onChange={(v) => v && onRoleChange(v)}
          styles={{ input: { minWidth: 140 } }}
        />
      </Table.Td>
      <Table.Td>
        <Badge variant="light" color="gray">
          {agent.tickets_resolved}
        </Badge>
      </Table.Td>
      <Table.Td>
        <Switch checked={agent.is_online} onChange={(e) => onToggleOnline(e.currentTarget.checked)} />
      </Table.Td>
      <Table.Td>
        <ActionIcon
          variant="subtle"
          color="red"
          aria-label="Remover da equipe"
          loading={removing}
          onClick={onRemove}
        >
          <Trash2 size={16} />
        </ActionIcon>
      </Table.Td>
    </Table.Tr>
  );
}