"use client";

import { Alert, Avatar, Badge, Group, Loader, Stack, Text, TextInput } from "@mantine/core";
import { useDebouncedValue } from "@mantine/hooks";
import { useQuery } from "@tanstack/react-query";
import { ChevronRight } from "lucide-react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { DashboardPage } from "@/components/dashboard/DashboardPage";
import { DataTable } from "@/components/dashboard/DataTable";
import { PageHeader } from "@/components/dashboard/PageHeader";
import { adminDashboardService } from "@/services/adminDashboardService";
import { useAuthStore } from "@/store/authStore";
import { API_BASE_URL } from "@/utils/constants";

function avatarUrl(avatar?: string) {
  if (!avatar) return undefined;
  if (avatar.startsWith("http")) return avatar;
  const base = API_BASE_URL.replace(/\/api\/?$/, "");
  return `${base}${avatar.startsWith("/") ? "" : "/"}${avatar}`;
}

export default function ClientesDashboardPage() {
  const router = useRouter();
  const token = useAuthStore((s) => s.token);
  const [search, setSearch] = useState("");
  const [debounced] = useDebouncedValue(search, 300);

  const { data, isLoading, isError, refetch } = useQuery({
    queryKey: ["admin-dashboard-clients", debounced],
    queryFn: () => adminDashboardService.clients(token!, { search: debounced || undefined }),
    enabled: Boolean(token),
    select: (r) => r.data,
  });

  return (
    <DashboardPage title="Clientes">
      <PageHeader
        title="Clientes"
        description="Clique em um cliente para abrir o perfil completo — dados, planos, propostas e gestão da conta."
      />
      <TextInput
        placeholder="Buscar por nome, e-mail ou empresa..."
        value={search}
        onChange={(e) => setSearch(e.currentTarget.value)}
        mb="lg"
        maw={400}
      />
      {isError && (
        <Alert color="red" mb="md" title="Erro ao carregar clientes">
          Confirme que o backend está ativo.{" "}
          <button type="button" onClick={() => refetch()} style={{ color: "var(--mantine-color-blue-filled)" }}>
            Tentar novamente
          </button>
        </Alert>
      )}
      {isLoading ? (
        <Stack align="center" py="xl">
          <Loader color="blue" />
        </Stack>
      ) : (
        <DataTable
          columns={[
            {
              key: "name",
              label: "Cliente",
              render: (row) => (
                <Group gap="sm" wrap="nowrap">
                  <Avatar src={avatarUrl((row as { avatar?: string }).avatar)} radius="xl" size={36}>
                    {(row as { name: string }).name?.charAt(0)}
                  </Avatar>
                  <div>
                    <Text size="sm" fw={600}>
                      {(row as { name: string }).name}
                    </Text>
                    <Text size="xs" c="dimmed">
                      {(row as { email: string }).email}
                    </Text>
                  </div>
                </Group>
              ),
            },
            { key: "company", label: "Empresa" },
            { key: "plan", label: "Plano" },
            {
              key: "status",
              label: "Status",
              render: (row) => {
                const status = (row as { status: string }).status;
                return (
                  <Badge color={status === "Ativo" ? "green" : "red"} variant="light" size="sm">
                    {status}
                  </Badge>
                );
              },
            },
            {
              key: "id",
              label: "",
              render: () => <ChevronRight size={18} style={{ opacity: 0.5 }} />,
            },
          ]}
          data={data ?? []}
          rowKey="id"
          emptyMessage="Nenhum cliente cadastrado. Novos usuários aparecem aqui após o registro."
          onRowClick={(row) => router.push(`/dashboard/clientes/${row.id}`)}
        />
      )}
    </DashboardPage>
  );
}