"use client";

import { useState, useEffect, useCallback } from "react";
import { toast } from "sonner";
import { ShieldAlert, Trash2, Loader2 } from "lucide-react";

import { Card, CardContent } from "@/shared/components/ui/card";
import { Badge } from "@/shared/components/ui/badge";
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/shared/components/ui/table";
import { getSuppressedEmailsAction } from "@/modules/suppression/actions/get-suppressed-emails-action";
import { removeSuppressedEmailAction } from "@/modules/suppression/actions/remove-suppressed-email-action";

interface SuppressedEmailItem {
  id: string;
  email: string;
  reason: "BOUNCE" | "COMPLAINT" | "MANUAL";
  source: string;
  createdAt: string;
}

const REASON_LABEL: Record<SuppressedEmailItem["reason"], string> = {
  BOUNCE: "Bounce",
  COMPLAINT: "Reclamação",
  MANUAL: "Manual",
};

export function SuppressionListTab() {
  const [items, setItems] = useState<SuppressedEmailItem[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [removingEmail, setRemovingEmail] = useState<string | null>(null);

  const load = useCallback(() => {
    setIsLoading(true);
    getSuppressedEmailsAction()
      .then((data) => {
        if (Array.isArray(data)) setItems(data);
      })
      .catch(() => {})
      .finally(() => setIsLoading(false));
  }, []);

  useEffect(() => {
    load();
  }, [load]);

  async function handleRemove(email: string) {
    setRemovingEmail(email);
    try {
      await removeSuppressedEmailAction(email);
      setItems((prev) => prev.filter((item) => item.email !== email));
      toast.success(`${email} removido da lista de supressão.`);
    } catch {
      toast.error("Não foi possível remover o e-mail da lista de supressão.");
    } finally {
      setRemovingEmail(null);
    }
  }

  return (
    <div className="space-y-4">
      <div className="pb-2 border-b border-zinc-200/80">
        <h2 className="text-xs font-bold uppercase tracking-wider text-zinc-700">
          Lista de Supressão
        </h2>
        <p className="text-xs sm:text-sm text-zinc-600 mt-1">
          Endereços suprimidos por bounce, reclamação ou remoção manual nunca recebem novos envios —
          isso protege a reputação de envio da conta SES.
        </p>
      </div>

      <Card className="bg-white border border-zinc-200/80 rounded-2xl shadow-xs overflow-hidden">
        <CardContent className="p-0">
          {isLoading ? (
            <div className="p-8 text-center text-xs text-zinc-500">Carregando...</div>
          ) : items.length === 0 ? (
            <div className="p-8 text-center space-y-2">
              <div className="w-10 h-10 rounded-xl bg-emerald-50 text-emerald-700 flex items-center justify-center mx-auto">
                <ShieldAlert className="w-5 h-5" />
              </div>
              <p className="text-xs sm:text-sm text-zinc-600">
                Nenhum e-mail suprimido no momento.
              </p>
            </div>
          ) : (
            <div className="overflow-x-auto w-full">
              <Table className="w-full text-left text-xs">
                <TableHeader className="bg-zinc-50 border-b border-zinc-200">
                  <TableRow className="hover:bg-transparent border-zinc-200">
                    <TableHead className="text-xs font-bold uppercase text-zinc-700 py-3.5 px-4">
                      E-mail
                    </TableHead>
                    <TableHead className="text-xs font-bold uppercase text-zinc-700 w-32 py-3.5 px-4">
                      Motivo
                    </TableHead>
                    <TableHead className="text-xs font-bold uppercase text-zinc-700 w-32 py-3.5 px-4">
                      Origem
                    </TableHead>
                    <TableHead className="text-xs font-bold uppercase text-zinc-700 text-right w-28 py-3.5 px-4">
                      Ação
                    </TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {items.map((item) => (
                    <TableRow key={item.id} className="border-b border-zinc-100 hover:bg-zinc-50/80">
                      <TableCell className="font-mono text-xs sm:text-sm text-zinc-900 py-3.5 px-4">
                        {item.email}
                      </TableCell>
                      <TableCell className="py-3.5 px-4">
                        <Badge
                          variant="outline"
                          className={
                            item.reason === "BOUNCE"
                              ? "border-amber-200 text-amber-800 bg-amber-50"
                              : item.reason === "COMPLAINT"
                                ? "border-rose-200 text-rose-800 bg-rose-50"
                                : "border-zinc-200 text-zinc-700 bg-zinc-50"
                          }
                        >
                          {REASON_LABEL[item.reason]}
                        </Badge>
                      </TableCell>
                      <TableCell className="text-zinc-600 py-3.5 px-4">{item.source}</TableCell>
                      <TableCell className="text-right py-3.5 px-4">
                        <button
                          type="button"
                          onClick={() => handleRemove(item.email)}
                          disabled={removingEmail === item.email}
                          className="p-1.5 rounded-lg text-zinc-500 hover:text-rose-600 hover:bg-rose-50 transition-colors disabled:opacity-50 inline-flex items-center justify-center"
                          title={`Remover ${item.email} da supressão`}
                          aria-label={`Remover ${item.email} da supressão`}
                        >
                          {removingEmail === item.email ? (
                            <Loader2 className="w-3.5 h-3.5 animate-spin" />
                          ) : (
                            <Trash2 className="w-3.5 h-3.5" />
                          )}
                        </button>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}