import { useEffect, useMemo, useRef, useState, type ChangeEventHandler } from "react";
import { Building2, Edit, Image as ImageIcon, Loader2, Plus, Power, Upload } from "lucide-react";
import { toast } from "sonner";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Textarea } from "@/components/ui/textarea";
import {
  fechamentoParceirosService,
  type ParceiroItem,
  type ParceiroStatusFiltro,
  type ParceiroTipoPessoa,
} from "@/services/fechamento/parceiros";
import { fechamentoUploadsService } from "@/services/fechamento/uploads";
import { fechamentoConfiguracoesService } from "@/services/fechamento/configuracoes";
import {
  fechamentoAsanaWorkspaceUsersService,
  type AsanaWorkspaceUser,
} from "@/services/fechamento/asanaWorkspaceUsers";

const MAX_FILE_SIZE = 5 * 1024 * 1024;
const ALLOWED_IMAGE_TYPES = new Set(["image/jpeg", "image/png", "image/webp"]);

type ParceiroForm = {
  nome: string;
  codinome: string;
  tipoPessoa: ParceiroTipoPessoa;
  cpf: string;
  cnpj: string;
  email: string;
  whatsapp: string;
  asanaId: string;
  logoUrl: string;
  observacoes: string;
  pontuacaoMeta: string;
};

const FORM_INICIAL: ParceiroForm = {
  nome: "",
  codinome: "",
  tipoPessoa: "juridica",
  cpf: "",
  cnpj: "",
  email: "",
  whatsapp: "",
  asanaId: "",
  logoUrl: "",
  observacoes: "",
  pontuacaoMeta: "0",
};

function normalizeOptionalText(value: string): string | null {
  const normalized = value.trim();
  return normalized.length > 0 ? normalized : null;
}

function onlyDigits(value: string): string {
  return value.replace(/\D/g, "");
}

function formatCpf(value: string): string {
  const digits = onlyDigits(value).slice(0, 11);
  const p1 = digits.slice(0, 3);
  const p2 = digits.slice(3, 6);
  const p3 = digits.slice(6, 9);
  const p4 = digits.slice(9, 11);
  if (digits.length <= 3) return p1;
  if (digits.length <= 6) return `${p1}.${p2}`;
  if (digits.length <= 9) return `${p1}.${p2}.${p3}`;
  return `${p1}.${p2}.${p3}-${p4}`;
}

function formatCnpj(value: string): string {
  const digits = onlyDigits(value).slice(0, 14);
  const p1 = digits.slice(0, 2);
  const p2 = digits.slice(2, 5);
  const p3 = digits.slice(5, 8);
  const p4 = digits.slice(8, 12);
  const p5 = digits.slice(12, 14);
  if (digits.length <= 2) return p1;
  if (digits.length <= 5) return `${p1}.${p2}`;
  if (digits.length <= 8) return `${p1}.${p2}.${p3}`;
  if (digits.length <= 12) return `${p1}.${p2}.${p3}/${p4}`;
  return `${p1}.${p2}.${p3}/${p4}-${p5}`;
}

function formatWhatsapp(value: string): string {
  const digits = onlyDigits(value).slice(0, 11);
  const ddd = digits.slice(0, 2);
  const part1 = digits.slice(2, 7);
  const part2 = digits.slice(7, 11);

  if (digits.length <= 2) return ddd;
  if (digits.length <= 7) return `${ddd} ${part1}`;
  return `${ddd} ${part1}-${part2}`;
}

function isRepeatedDigits(value: string): boolean {
  return /^(\d)\1+$/.test(value);
}

function isValidCpf(value: string): boolean {
  const cpf = onlyDigits(value);
  if (cpf.length !== 11 || isRepeatedDigits(cpf)) return false;

  let sum = 0;
  for (let i = 0; i < 9; i += 1) {
    sum += Number(cpf[i]) * (10 - i);
  }
  let check = (sum * 10) % 11;
  if (check === 10) check = 0;
  if (check !== Number(cpf[9])) return false;

  sum = 0;
  for (let i = 0; i < 10; i += 1) {
    sum += Number(cpf[i]) * (11 - i);
  }
  check = (sum * 10) % 11;
  if (check === 10) check = 0;
  return check === Number(cpf[10]);
}

function isValidCnpj(value: string): boolean {
  const cnpj = onlyDigits(value);
  if (cnpj.length !== 14 || isRepeatedDigits(cnpj)) return false;

  const calc = (base: string, factors: number[]) => {
    const sum = base
      .split("")
      .reduce((acc, digit, idx) => acc + Number(digit) * factors[idx], 0);
    const remainder = sum % 11;
    return remainder < 2 ? 0 : 11 - remainder;
  };

  const check1 = calc(cnpj.slice(0, 12), [5, 4, 3, 2, 9, 8, 7, 6, 5, 4, 3, 2]);
  if (check1 !== Number(cnpj[12])) return false;

  const check2 = calc(cnpj.slice(0, 13), [6, 5, 4, 3, 2, 9, 8, 7, 6, 5, 4, 3, 2]);
  return check2 === Number(cnpj[13]);
}

function validateLogoFile(file: File): string | null {
  if (!ALLOWED_IMAGE_TYPES.has(file.type)) {
    return "Arquivo inválido. Use JPG, PNG ou WEBP.";
  }
  if (file.size > MAX_FILE_SIZE) {
    return "Arquivo excede 5MB. Escolha uma imagem menor.";
  }
  return null;
}

function getParceiroNome(parceiro: ParceiroItem): string {
  return parceiro.nome?.trim() || "—";
}

function getTipoPessoaLabel(tipoPessoa: ParceiroTipoPessoa): string {
  return tipoPessoa === "fisica" ? "Física" : "Jurídica";
}

export default function Parceiros() {
  const logoFileInputRef = useRef<HTMLInputElement | null>(null);
  const [parceiros, setParceiros] = useState<ParceiroItem[]>([]);
  const [loadingList, setLoadingList] = useState(true);
  const [saving, setSaving] = useState(false);
  const [toggling, setToggling] = useState(false);
  const [uploadingLogo, setUploadingLogo] = useState(false);

  const [busca, setBusca] = useState("");
  const [filtroStatus, setFiltroStatus] = useState<ParceiroStatusFiltro>("all");
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(10);
  const [totalRegistros, setTotalRegistros] = useState(0);
  const [totalPaginas, setTotalPaginas] = useState(1);
  const [reloadNonce, setReloadNonce] = useState(0);

  const [isFormOpen, setIsFormOpen] = useState(false);
  const [isEditMode, setIsEditMode] = useState(false);
  const [isToggleOpen, setIsToggleOpen] = useState(false);
  const [selectedParceiro, setSelectedParceiro] = useState<ParceiroItem | null>(null);
  const [form, setForm] = useState<ParceiroForm>(FORM_INICIAL);
  const [selectedLogoFile, setSelectedLogoFile] = useState<File | null>(null);
  const [logoPreviewUrl, setLogoPreviewUrl] = useState<string | null>(null);
  const [asanaUsers, setAsanaUsers] = useState<AsanaWorkspaceUser[]>([]);
  const [loadingAsanaUsers, setLoadingAsanaUsers] = useState(false);
  const [asanaWorkspaceId, setAsanaWorkspaceId] = useState("");
  const [asanaWorkspaceNome, setAsanaWorkspaceNome] = useState("");

  const totalPages = Math.max(1, totalPaginas);
  const hasActiveFilters = busca.trim().length > 0 || filtroStatus !== "all";
  const isPessoaFisica = form.tipoPessoa === "fisica";
  const logoDisplayUrl = logoPreviewUrl ?? normalizeOptionalText(form.logoUrl);
  const formTitle = isEditMode ? "Editar parceiro" : "Novo parceiro";
  const formActionLabel = saving ? "Salvando..." : isEditMode ? "Salvar alterações" : "Criar parceiro";
  const hasAsanaWorkspace = asanaWorkspaceId.trim().length > 0;
  const asanaSelectValue = form.asanaId || "__none__";

  const logoStatusLabel = useMemo(() => {
    if (uploadingLogo) {
      return "Enviando logo...";
    }
    if (selectedLogoFile) {
      return `Arquivo selecionado: ${selectedLogoFile.name}`;
    }
    return "Nenhum arquivo novo selecionado.";
  }, [selectedLogoFile, uploadingLogo]);

  const asanaUserOptions = useMemo(() => {
    if (!form.asanaId) {
      return asanaUsers;
    }
    if (asanaUsers.some((item) => item.id === form.asanaId)) {
      return asanaUsers;
    }
    return [{ id: form.asanaId, name: `Usuário atual (${form.asanaId})` }, ...asanaUsers];
  }, [asanaUsers, form.asanaId]);

  useEffect(() => {
    let cancelled = false;
    setLoadingList(true);

    fechamentoParceirosService
      .listarParceiros({
        busca: busca.trim() || undefined,
        estaAtivo: filtroStatus,
        page: currentPage,
        perPage: itemsPerPage,
      })
      .then((res) => {
        if (!cancelled) {
          setParceiros(res.data ?? []);
          setTotalRegistros(res.meta?.total ?? 0);
          setTotalPaginas(res.meta?.totalPaginas ?? 1);
        }
      })
      .catch((error) => {
        if (!cancelled) {
          const message = error instanceof Error ? error.message : "Erro ao listar parceiros.";
          toast.error(message);
          setParceiros([]);
          setTotalRegistros(0);
          setTotalPaginas(1);
        }
      })
      .finally(() => {
        if (!cancelled) {
          setLoadingList(false);
        }
      });

    return () => {
      cancelled = true;
    };
  }, [busca, filtroStatus, currentPage, itemsPerPage, reloadNonce]);

  useEffect(() => {
    setCurrentPage(1);
  }, [busca, filtroStatus]);

  useEffect(() => {
    return () => {
      if (logoPreviewUrl) {
        URL.revokeObjectURL(logoPreviewUrl);
      }
    };
  }, [logoPreviewUrl]);

  useEffect(() => {
    if (!isFormOpen) {
      return;
    }

    let cancelled = false;
    const loadAsanaUsers = async () => {
      try {
        setLoadingAsanaUsers(true);
        const config = await fechamentoConfiguracoesService.getConfiguracoes();
        const workspaceId = config?.asanaWorkspaceId?.trim() ?? "";
        const workspaceNome = config?.asanaWorkspaceNome?.trim() ?? "";

        if (cancelled) {
          return;
        }

        setAsanaWorkspaceId(workspaceId);
        setAsanaWorkspaceNome(workspaceNome);

        if (!workspaceId) {
          setAsanaUsers([]);
          return;
        }

        const users = await fechamentoAsanaWorkspaceUsersService.listarUsuariosDoWorkspace(workspaceId);
        if (!cancelled) {
          setAsanaUsers(users);
        }
      } catch (error) {
        if (!cancelled) {
          const message =
            error instanceof Error ? error.message : "Erro ao carregar usuários do workspace do Asana.";
          toast.error(message);
          setAsanaUsers([]);
        }
      } finally {
        if (!cancelled) {
          setLoadingAsanaUsers(false);
        }
      }
    };

    void loadAsanaUsers();

    return () => {
      cancelled = true;
    };
  }, [isFormOpen]);

  const clearFilters = () => {
    setBusca("");
    setFiltroStatus("all");
    setCurrentPage(1);
  };

  const resetFormState = () => {
    if (logoPreviewUrl) {
      URL.revokeObjectURL(logoPreviewUrl);
    }
    setForm(FORM_INICIAL);
    setSelectedLogoFile(null);
    setLogoPreviewUrl(null);
    setSelectedParceiro(null);
    setIsEditMode(false);
    setAsanaUsers([]);
    setAsanaWorkspaceId("");
    setAsanaWorkspaceNome("");
  };

  const openCreateDialog = () => {
    resetFormState();
    setIsFormOpen(true);
  };

  const openEditDialog = (parceiro: ParceiroItem) => {
    resetFormState();
    setSelectedParceiro(parceiro);
    setIsEditMode(true);
    setForm({
      nome: parceiro.nome ?? "",
      codinome: parceiro.codinome ?? "",
      tipoPessoa: parceiro.tipoPessoa,
      cpf: onlyDigits(parceiro.cpf ?? ""),
      cnpj: onlyDigits(parceiro.cnpj ?? ""),
      email: parceiro.email ?? "",
      whatsapp: onlyDigits(parceiro.whatsapp ?? ""),
      asanaId: parceiro.asanaId ?? "",
      logoUrl: parceiro.logoUrl ?? "",
      observacoes: parceiro.observacoes ?? "",
      pontuacaoMeta: String(parceiro.pontuacaoMeta ?? 0),
    });
    setIsFormOpen(true);
  };

  const openToggleDialog = (parceiro: ParceiroItem) => {
    setSelectedParceiro(parceiro);
    setIsToggleOpen(true);
  };

  const handleItemsPerPageChange = (value: string) => {
    setItemsPerPage(Number(value));
    setCurrentPage(1);
  };

  const onChangeTipoPessoa = (value: ParceiroTipoPessoa) => {
    setForm((prev) => ({
      ...prev,
      tipoPessoa: value,
      cpf: value === "fisica" ? prev.cpf : "",
      cnpj: value === "juridica" ? prev.cnpj : "",
    }));
  };

  const handleLogoFileChange: ChangeEventHandler<HTMLInputElement> = (event) => {
    const file = event.target.files?.[0];
    if (!file) {
      return;
    }

    const validationMessage = validateLogoFile(file);
    if (validationMessage) {
      toast.error(validationMessage);
      event.currentTarget.value = "";
      return;
    }

    if (logoPreviewUrl) {
      URL.revokeObjectURL(logoPreviewUrl);
    }
    setSelectedLogoFile(file);
    setLogoPreviewUrl(URL.createObjectURL(file));
  };

  const clearLogoSelection = () => {
    if (logoPreviewUrl) {
      URL.revokeObjectURL(logoPreviewUrl);
    }
    setSelectedLogoFile(null);
    setLogoPreviewUrl(null);
    if (logoFileInputRef.current) {
      logoFileInputRef.current.value = "";
    }
    setForm((prev) => ({ ...prev, logoUrl: "" }));
  };

  const validateForm = (): boolean => {
    if (!form.nome.trim()) {
      toast.error("Nome é obrigatório.");
      return false;
    }
    if (!form.codinome.trim()) {
      toast.error("Codinome é obrigatório.");
      return false;
    }
    if (!form.email.trim()) {
      toast.error("E-mail é obrigatório.");
      return false;
    }
    if (!onlyDigits(form.whatsapp).trim()) {
      toast.error("WhatsApp é obrigatório.");
      return false;
    }
    if (!form.asanaId.trim()) {
      toast.error("Asana ID é obrigatório.");
      return false;
    }
    if (isPessoaFisica) {
      if (form.cpf.trim().length !== 11) {
        toast.error("CPF deve conter 11 dígitos.");
        return false;
      }
      if (!isValidCpf(form.cpf)) {
        toast.error("CPF inválido.");
        return false;
      }
    } else {
      if (form.cnpj.trim().length !== 14) {
        toast.error("CNPJ deve conter 14 dígitos.");
        return false;
      }
      if (!isValidCnpj(form.cnpj)) {
        toast.error("CNPJ inválido.");
        return false;
      }
    }

    const pontuacao = Number(form.pontuacaoMeta);
    if (!Number.isInteger(pontuacao) || pontuacao < 0) {
      toast.error("Pontuação meta deve ser um número inteiro maior ou igual a zero.");
      return false;
    }

    return true;
  };

  const uploadLogoIfNeeded = async (): Promise<string | null> => {
    if (!selectedLogoFile) {
      return normalizeOptionalText(form.logoUrl);
    }

    setUploadingLogo(true);
    try {
      const signed = await fechamentoUploadsService.presignUploadParceiroLogo({
        fileName: selectedLogoFile.name,
        contentType: selectedLogoFile.type as "image/jpeg" | "image/png" | "image/webp",
      });
      await fechamentoUploadsService.uploadFileToSignedUrl(signed.uploadUrl, selectedLogoFile);
      return signed.publicUrl;
    } catch (error) {
      const message = error instanceof Error ? error.message : "Erro ao enviar logo.";
      toast.error(message);
      throw error;
    } finally {
      setUploadingLogo(false);
    }
  };

  const buildPayload = async () => {
    const logoUrl = await uploadLogoIfNeeded();
    return {
      nome: form.nome.trim(),
      codinome: normalizeOptionalText(form.codinome),
      tipoPessoa: form.tipoPessoa,
      cpf: form.tipoPessoa === "fisica" ? form.cpf.trim() : null,
      cnpj: form.tipoPessoa === "juridica" ? form.cnpj.trim() : null,
      email: form.email.trim(),
      whatsapp: normalizeOptionalText(formatWhatsapp(form.whatsapp)),
      asanaId: normalizeOptionalText(form.asanaId),
      logoUrl,
      observacoes: normalizeOptionalText(form.observacoes),
      pontuacaoMeta: Number(form.pontuacaoMeta),
    };
  };

  const handleSaveParceiro = async () => {
    if (!validateForm()) {
      return;
    }

    try {
      setSaving(true);
      const payload = await buildPayload();

      if (isEditMode && selectedParceiro) {
        await fechamentoParceirosService.editarParceiro(selectedParceiro.id, payload);
        toast.success("Parceiro atualizado com sucesso.");
      } else {
        await fechamentoParceirosService.criarParceiro({ ...payload, estaAtivo: true });
        toast.success("Parceiro criado com sucesso.");
      }

      setIsFormOpen(false);
      resetFormState();
      setReloadNonce((prev) => prev + 1);
      if (!isEditMode) {
        setCurrentPage(1);
      }
    } catch (error) {
      if (!(error instanceof Error)) {
        toast.error("Erro ao salvar parceiro.");
      }
    } finally {
      setSaving(false);
    }
  };

  const handleToggleStatus = async () => {
    if (!selectedParceiro) {
      return;
    }

    try {
      setToggling(true);
      const updated = await fechamentoParceirosService.toggleAtivoParceiro(selectedParceiro.id);
      toast.success(updated.estaAtivo ? "Parceiro reativado com sucesso." : "Parceiro inativado com sucesso.");
      setIsToggleOpen(false);
      setSelectedParceiro(null);
      setReloadNonce((prev) => prev + 1);
    } catch (error) {
      const message = error instanceof Error ? error.message : "Erro ao atualizar status do parceiro.";
      toast.error(message);
    } finally {
      setToggling(false);
    }
  };

  return (
    <div className="flex h-full flex-col bg-background pb-16 md:pb-0">
      <div className="border-b border-border p-3 md:p-6">
        <div className="mb-4 flex flex-col items-start justify-between gap-3 md:flex-row md:items-center">
          <h1 className="flex items-center gap-2 text-xl font-bold text-foreground md:text-3xl">
            <Building2 className="h-5 w-5 md:h-6 md:w-6" />
            Parceiros
          </h1>
          <Button onClick={openCreateDialog} className="gap-2">
            <Plus className="h-4 w-4" />
            Novo parceiro
          </Button>
        </div>

        <div className="flex flex-col items-stretch gap-2 md:flex-row md:items-center md:gap-4">
          <Input
            placeholder="Buscar por nome, codinome ou e-mail..."
            value={busca}
            onChange={(e) => setBusca(e.target.value)}
            className="w-full md:max-w-sm"
          />
          <Select value={filtroStatus} onValueChange={(value) => setFiltroStatus(value as ParceiroStatusFiltro)}>
            <SelectTrigger className="w-full md:w-[170px]">
              <SelectValue placeholder="Status" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Todos</SelectItem>
              <SelectItem value="true">Ativos</SelectItem>
              <SelectItem value="false">Inativos</SelectItem>
            </SelectContent>
          </Select>
          {hasActiveFilters && (
            <Button variant="ghost" size="sm" onClick={clearFilters}>
              Limpar
            </Button>
          )}
          <div className="flex items-center gap-2">
            <span className="whitespace-nowrap text-sm text-muted-foreground">Itens:</span>
            <Select value={itemsPerPage.toString()} onValueChange={handleItemsPerPageChange}>
              <SelectTrigger className="w-20">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="10">10</SelectItem>
                <SelectItem value="20">20</SelectItem>
                <SelectItem value="50">50</SelectItem>
                <SelectItem value="100">100</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
      </div>

      <div className="flex-1 overflow-auto p-3 md:p-6">
        {!loadingList && totalRegistros === 0 && !hasActiveFilters ? (
          <Card className="mx-auto mt-12 max-w-2xl">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Building2 className="h-5 w-5" />
                Nenhum parceiro cadastrado
              </CardTitle>
              <CardDescription>Crie o primeiro parceiro para iniciar o módulo de fechamentos.</CardDescription>
            </CardHeader>
            <CardContent>
              <Button onClick={openCreateDialog}>
                <Plus className="mr-2 h-4 w-4" />
                Novo parceiro
              </Button>
            </CardContent>
          </Card>
        ) : (
          <>
            <div className="overflow-x-auto rounded-lg border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="min-w-[100px]">Logo</TableHead>
                    <TableHead className="min-w-[220px]">Nome</TableHead>
                    <TableHead className="min-w-[160px]">Codinome</TableHead>
                    <TableHead className="min-w-[220px]">E-mail</TableHead>
                    <TableHead className="min-w-[120px]">Tipo</TableHead>
                    <TableHead className="min-w-[120px]">Status</TableHead>
                    <TableHead className="text-center">Ações</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {loadingList ? (
                    <TableRow>
                      <TableCell colSpan={7} className="py-8 text-center text-muted-foreground">
                        Carregando...
                      </TableCell>
                    </TableRow>
                  ) : totalRegistros === 0 ? (
                    <TableRow>
                      <TableCell colSpan={7} className="py-8 text-center text-muted-foreground">
                        Nenhum parceiro encontrado para os filtros atuais.
                      </TableCell>
                    </TableRow>
                  ) : (
                    parceiros.map((parceiro) => (
                      <TableRow key={parceiro.id}>
                        <TableCell>
                          {parceiro.logoUrl ? (
                            <img
                              src={parceiro.logoUrl}
                              alt={`Logo ${getParceiroNome(parceiro)}`}
                              className="h-8 w-8 rounded-md object-cover"
                            />
                          ) : (
                            "—"
                          )}
                        </TableCell>
                        <TableCell className="font-medium">{getParceiroNome(parceiro)}</TableCell>
                        <TableCell>{parceiro.codinome?.trim() || "—"}</TableCell>
                        <TableCell>{parceiro.email}</TableCell>
                        <TableCell>{getTipoPessoaLabel(parceiro.tipoPessoa)}</TableCell>
                        <TableCell>
                          <Badge variant={parceiro.estaAtivo ? "secondary" : "outline"}>
                            {parceiro.estaAtivo ? "Ativo" : "Inativo"}
                          </Badge>
                        </TableCell>
                        <TableCell>
                          <div className="flex items-center justify-center gap-1">
                            <Button
                              variant="ghost"
                              size="icon"
                              onClick={() => openEditDialog(parceiro)}
                              title="Editar parceiro"
                            >
                              <Edit className="h-4 w-4" />
                            </Button>
                            <Button
                              variant="ghost"
                              size="icon"
                              onClick={() => openToggleDialog(parceiro)}
                              title={parceiro.estaAtivo ? "Inativar parceiro" : "Reativar parceiro"}
                            >
                              <Power className="h-4 w-4" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            </div>

            {!loadingList && totalRegistros > 0 && (
              <div className="mt-4 flex flex-col items-stretch justify-between gap-2 sm:flex-row sm:items-center">
                <p className="text-center text-sm text-muted-foreground sm:text-left">
                  Mostrando {totalRegistros} {totalRegistros === 1 ? "parceiro" : "parceiros"}
                </p>
                <div className="flex justify-center gap-2">
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
                    disabled={currentPage === 1}
                  >
                    Anterior
                  </Button>
                  <div className="flex items-center gap-1">
                    {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
                      let page: number;
                      if (totalPages <= 5) {
                        page = i + 1;
                      } else if (currentPage <= 3) {
                        page = i + 1;
                      } else if (currentPage >= totalPages - 2) {
                        page = totalPages - 4 + i;
                      } else {
                        page = currentPage - 2 + i;
                      }
                      return (
                        <Button
                          key={page}
                          variant={currentPage === page ? "default" : "outline"}
                          size="sm"
                          onClick={() => setCurrentPage(page)}
                          className="h-9 w-10 p-0"
                        >
                          {page}
                        </Button>
                      );
                    })}
                  </div>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
                    disabled={currentPage === totalPages}
                  >
                    Próxima
                  </Button>
                </div>
              </div>
            )}
          </>
        )}
      </div>

      <Dialog
        open={isFormOpen}
        onOpenChange={(open) => {
          setIsFormOpen(open);
          if (!open) {
            resetFormState();
          }
        }}
      >
        <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-4xl">
          <DialogHeader>
            <DialogTitle>{formTitle}</DialogTitle>
            <DialogDescription>Preencha os dados para salvar o parceiro.</DialogDescription>
          </DialogHeader>

          <div className="flex flex-col items-center gap-3 py-1">
            <button
              type="button"
              className="group relative h-24 w-24 overflow-hidden rounded-full border shadow-sm transition hover:brightness-95"
              onClick={() => logoFileInputRef.current?.click()}
              title="Clique para alterar a foto"
            >
              {logoDisplayUrl ? (
                <img
                  src={logoDisplayUrl}
                  alt="Preview logo"
                  className="h-full w-full object-cover"
                />
              ) : (
                <div className="flex h-full w-full items-center justify-center text-muted-foreground">
                  <ImageIcon className="h-7 w-7" />
                </div>
              )}
              <div className="absolute inset-0 flex items-center justify-center bg-black/45 text-white opacity-0 transition-opacity group-hover:opacity-100">
                <span className="inline-flex items-center gap-1 text-xs font-medium">
                  <Upload className="h-3.5 w-3.5" />
                  Alterar foto
                </span>
              </div>
            </button>
            <input
              ref={logoFileInputRef}
              id="parceiro-logo-file"
              type="file"
              accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp"
              onChange={handleLogoFileChange}
              className="hidden"
            />
            <p className="text-center text-xs text-muted-foreground">{logoStatusLabel}</p>

            <Button type="button" variant="outline" size="sm" onClick={clearLogoSelection} disabled={uploadingLogo}>
              Remover logo
            </Button>
          </div>

          <div className="grid grid-cols-1 gap-4 py-2 md:grid-cols-2">
            <div className="md:col-span-2">
              <Label htmlFor="parceiro-nome">
                Nome <span className="text-destructive">*</span>
              </Label>
              <Input
                id="parceiro-nome"
                value={form.nome}
                onChange={(e) => setForm((prev) => ({ ...prev, nome: e.target.value }))}
                placeholder="Razão social ou nome completo"
              />
            </div>

            <div>
              <Label htmlFor="parceiro-codinome">
                Codinome <span className="text-destructive">*</span>
              </Label>
              <Input
                id="parceiro-codinome"
                value={form.codinome}
                onChange={(e) => setForm((prev) => ({ ...prev, codinome: e.target.value }))}
                placeholder="Nome curto para exibição"
              />
            </div>

            <div>
              <Label>
                Tipo de Pessoa <span className="text-destructive">*</span>
              </Label>
              <Select value={form.tipoPessoa} onValueChange={(value) => onChangeTipoPessoa(value as ParceiroTipoPessoa)}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="juridica">Jurídica</SelectItem>
                  <SelectItem value="fisica">Física</SelectItem>
                </SelectContent>
              </Select>
            </div>

            {isPessoaFisica ? (
              <div>
                <Label htmlFor="parceiro-cpf">
                  CPF <span className="text-destructive">*</span>
                </Label>
                <Input
                  id="parceiro-cpf"
                  value={formatCpf(form.cpf)}
                  onChange={(e) => setForm((prev) => ({ ...prev, cpf: onlyDigits(e.target.value).slice(0, 11) }))}
                  placeholder="000.000.000-00"
                  maxLength={14}
                />
              </div>
            ) : (
              <div>
                <Label htmlFor="parceiro-cnpj">
                  CNPJ <span className="text-destructive">*</span>
                </Label>
                <Input
                  id="parceiro-cnpj"
                  value={formatCnpj(form.cnpj)}
                  onChange={(e) => setForm((prev) => ({ ...prev, cnpj: onlyDigits(e.target.value).slice(0, 14) }))}
                  placeholder="00.000.000/0000-00"
                  maxLength={18}
                />
              </div>
            )}

            <div>
              <Label htmlFor="parceiro-email">
                E-mail <span className="text-destructive">*</span>
              </Label>
              <Input
                id="parceiro-email"
                type="email"
                value={form.email}
                onChange={(e) => setForm((prev) => ({ ...prev, email: e.target.value }))}
                placeholder="contato@empresa.com"
              />
            </div>

            <div>
              <Label htmlFor="parceiro-whatsapp">
                WhatsApp <span className="text-destructive">*</span>
              </Label>
              <Input
                id="parceiro-whatsapp"
                value={formatWhatsapp(form.whatsapp)}
                onChange={(e) => setForm((prev) => ({ ...prev, whatsapp: onlyDigits(e.target.value).slice(0, 11) }))}
                placeholder="11 99999-9999"
                maxLength={13}
              />
            </div>

            <div>
              <Label htmlFor="parceiro-asana-id">
                Asana ID <span className="text-destructive">*</span>
              </Label>
              <Select
                value={asanaSelectValue}
                onValueChange={(value) => {
                  setForm((prev) => ({
                    ...prev,
                    asanaId: value === "__none__" ? "" : value,
                  }));
                }}
                disabled={loadingAsanaUsers || !hasAsanaWorkspace}
              >
                <SelectTrigger id="parceiro-asana-id">
                  <SelectValue
                    placeholder={
                      loadingAsanaUsers
                        ? "Carregando usuários do Asana..."
                        : hasAsanaWorkspace
                          ? "Selecione um usuário"
                          : "Configure Workspace do Asana em Configurações"
                    }
                  />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="__none__">Sem vínculo</SelectItem>
                  {asanaUserOptions.map((user) => (
                    <SelectItem key={user.id} value={user.id}>
                      {user.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <p className="mt-1 text-xs text-muted-foreground">
                {loadingAsanaUsers ? (
                  <span className="inline-flex items-center gap-1">
                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
                    Buscando usuários do workspace...
                  </span>
                ) : hasAsanaWorkspace ? (
                  `Workspace: ${asanaWorkspaceNome || asanaWorkspaceId}`
                ) : (
                  "Defina token/workspace do Asana na tela Configurações para habilitar este campo."
                )}
              </p>
            </div>

            <div>
              <Label htmlFor="parceiro-pontuacao">
                Pontuação Meta <span className="text-destructive">*</span>
              </Label>
              <Input
                id="parceiro-pontuacao"
                type="number"
                min={0}
                step={1}
                value={form.pontuacaoMeta}
                onChange={(e) => setForm((prev) => ({ ...prev, pontuacaoMeta: e.target.value }))}
                placeholder="0"
              />
            </div>

            <div className="md:col-span-2">
              <Label htmlFor="parceiro-observacoes">Observações</Label>
              <Textarea
                id="parceiro-observacoes"
                value={form.observacoes}
                onChange={(e) => setForm((prev) => ({ ...prev, observacoes: e.target.value }))}
                placeholder="Observações internas (opcional)"
              />
            </div>
          </div>

          <DialogFooter>
            <Button
              variant="outline"
              className="hover:bg-muted/60 hover:text-foreground"
              onClick={() => {
                setIsFormOpen(false);
                resetFormState();
              }}
              disabled={saving || uploadingLogo}
            >
              Cancelar
            </Button>
            <Button onClick={handleSaveParceiro} disabled={saving || uploadingLogo}>
              {uploadingLogo ? "Enviando logo..." : formActionLabel}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <AlertDialog open={isToggleOpen} onOpenChange={setIsToggleOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>
              {selectedParceiro?.estaAtivo ? "Inativar parceiro" : "Reativar parceiro"}
            </AlertDialogTitle>
            <AlertDialogDescription>
              {selectedParceiro?.estaAtivo ? (
                <>
                  Deseja inativar o parceiro <strong>{selectedParceiro ? getParceiroNome(selectedParceiro) : "—"}</strong>?
                </>
              ) : (
                <>
                  Deseja reativar o parceiro <strong>{selectedParceiro ? getParceiroNome(selectedParceiro) : "—"}</strong>?
                </>
              )}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel className="hover:bg-muted/60 hover:text-foreground" disabled={toggling}>
              Cancelar
            </AlertDialogCancel>
            <AlertDialogAction onClick={handleToggleStatus} disabled={toggling || !selectedParceiro}>
              {toggling ? "Processando..." : selectedParceiro?.estaAtivo ? "Inativar" : "Reativar"}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}
