"use client";

import { useState, useEffect } from "react";
import { toast } from "sonner";
import { Globe, Plus, Copy, CheckCircle2, AlertTriangle, RefreshCw, Check, Trash2 } from "lucide-react";

import { Button } from "@/shared/components/ui/button";
import { Input } from "@/shared/components/ui/input";
import { Label } from "@/shared/components/ui/label";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } 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 {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/shared/components/ui/dialog";

import { useDomainsStore, DomainItem } from "../hooks/use-domains-store";
import { getDomainsByUserAction } from "../actions/get-domains-by-user-action";
import { createDomainAction } from "../actions/create-domain-action";
import { verifyDomainAction } from "../actions/verify-domain-action";
import { deleteDomainAction } from "../actions/delete-domain-action";
import { createDomainSchema } from "@/modules/domains/dtos/create-domain-schema";
import type { Domain } from "@prisma/client";

function toDomainItem(item: Domain): DomainItem {
  return {
    id: item.id,
    domain: item.domain,
    verificationStatus: item.verificationStatus || "PENDING",
    createdAt: new Date(item.createdAt || Date.now()).toISOString().split("T")[0],
    dnsRecords: (item.dkimRecords as unknown as DomainItem["dnsRecords"]) ?? [],
  };
}

export function DomainSettingsView() {
  const {
    domains,
    selectedDomainId,
    addDomain,
    removeDomain,
    setDomains,
    updateDomain,
    setSelectedDomainId,
  } = useDomainsStore();

  const [copiedKey, setCopiedKey] = useState<string | null>(null);
  const [isAddDomainOpen, setIsAddDomainOpen] = useState(false);
  const [newDomainName, setNewDomainName] = useState("");
  const [domainError, setDomainError] = useState("");
  const [isSubmittingDomain, setIsSubmittingDomain] = useState(false);

  useEffect(() => {
    getDomainsByUserAction()
      .then(({ domains }) => {
        const formatted: DomainItem[] = domains.map(toDomainItem);
        setDomains(formatted);
        if (formatted.length > 0) {
          setSelectedDomainId(formatted[0].id);
        }
      })
      .catch(() => {});
  }, [setDomains, setSelectedDomainId]);

  const currentDomain = domains.find((d) => d.id === selectedDomainId) || domains[0];

  function handleCopy(text: string, key: string) {
    navigator.clipboard.writeText(text);
    setCopiedKey(key);
    toast.success("Registro DNS copiado para a área de transferência!");
    setTimeout(() => setCopiedKey(null), 2000);
  }

  async function handleSaveDomain(e: React.FormEvent) {
    e.preventDefault();
    setDomainError("");

    const parsed = createDomainSchema.safeParse({ domain: newDomainName });
    if (!parsed.success) {
      setDomainError(parsed.error.issues[0].message);
      return;
    }

    setIsSubmittingDomain(true);
    try {
      const created = await createDomainAction({ domain: parsed.data.domain });
      const newDomainItem = toDomainItem(created);

      addDomain(newDomainItem);
      setSelectedDomainId(newDomainItem.id);
      toast.success(`Domínio ${parsed.data.domain} cadastrado com sucesso!`);
      setIsAddDomainOpen(false);
      setNewDomainName("");
    } catch (error) {
      setDomainError(error instanceof Error ? error.message : "Erro ao cadastrar domínio.");
    } finally {
      setIsSubmittingDomain(false);
    }
  }

  async function handleDeleteDomain(id: string, domainName: string) {
    try {
      await deleteDomainAction(id);
      removeDomain(id);
      toast.success(`Domínio ${domainName} removido com sucesso!`);
    } catch {
      toast.error("Não foi possível excluir o domínio.");
    }
  }

  async function handleVerifyDns(domainId: string) {
    toast.promise(
      verifyDomainAction(domainId).then((updated) => {
        updateDomain(toDomainItem(updated));
        return updated.verificationStatus === "VERIFIED"
          ? "Domínio verificado com sucesso! Pronto para envios de alta entregabilidade."
          : "Ainda pendente — confirme se os registros DNS já propagaram.";
      }),
      {
        loading: "Consultando status de verificação no SES...",
        success: (message) => message,
        error: "Falha ao consultar o SES.",
      }
    );
  }

  return (
    <div className="space-y-6">
      {/* Header section */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-2 border-b border-zinc-200/80">
        <div>
          <h2 className="text-xs font-bold uppercase tracking-wider text-zinc-700">
            Domínios &amp; Autenticação DNS
          </h2>
          <p className="text-xs sm:text-sm text-zinc-600 mt-1">
            Verifique seus domínios para garantir que suas mensagens não caiam na caixa de SPAM.
          </p>
        </div>
        <Button
          onClick={() => setIsAddDomainOpen(true)}
          className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-xs h-10 px-4 rounded-xl shadow-xs transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 flex items-center justify-center gap-2 self-start sm:self-auto shrink-0"
        >
          <Plus className="w-4 h-4 shrink-0" aria-hidden="true" />
          <span>Adicionar Domínio</span>
        </Button>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        {/* Left Column: List of Associated Domains */}
        <div className="space-y-3">
          <h3 className="text-xs font-bold uppercase tracking-wider text-zinc-700 mb-2">
            Domínios Associados
          </h3>
          {domains.map((dom) => {
            const isSelected = currentDomain?.id === dom.id;
            return (
              <div
                key={dom.id}
                onClick={() => setSelectedDomainId(dom.id)}
                tabIndex={0}
                role="button"
                aria-pressed={isSelected}
                onKeyDown={(e) => {
                  if (e.key === "Enter" || e.key === " ") {
                    e.preventDefault();
                    setSelectedDomainId(dom.id);
                  }
                }}
                className={`w-full text-left p-4 rounded-2xl border transition-all flex items-center justify-between cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 min-h-[56px] ${
                  isSelected
                    ? "bg-indigo-50/70 border-indigo-600 shadow-2xs ring-1 ring-indigo-600"
                    : "bg-white border-zinc-200 hover:border-zinc-300 text-zinc-700"
                }`}
              >
                <div className="min-w-0">
                  <span className="text-xs sm:text-sm font-bold text-zinc-900 block truncate">{dom.domain}</span>
                  <span className="text-[11px] text-zinc-500 mt-0.5 block">Cadastrado em {dom.createdAt}</span>
                </div>
                <div className="flex items-center gap-2 shrink-0">
                  {dom.verificationStatus === "VERIFIED" ? (
                    <Badge className="bg-emerald-50 text-emerald-800 border-emerald-200 text-xs font-semibold px-2 py-0.5 flex items-center gap-1">
                      <CheckCircle2 className="w-3.5 h-3.5 text-emerald-600" aria-hidden="true" />
                      <span>Verificado</span>
                    </Badge>
                  ) : dom.verificationStatus === "FAILED" ? (
                    <Badge className="bg-rose-50 text-rose-800 border-rose-200 text-xs font-semibold px-2 py-0.5 flex items-center gap-1">
                      <AlertTriangle className="w-3.5 h-3.5 text-rose-600" aria-hidden="true" />
                      <span>Falhou</span>
                    </Badge>
                  ) : (
                    <Badge className="bg-amber-50 text-amber-800 border-amber-200 text-xs font-semibold px-2 py-0.5 flex items-center gap-1">
                      <AlertTriangle className="w-3.5 h-3.5 text-amber-600" aria-hidden="true" />
                      <span>Pendente</span>
                    </Badge>
                  )}
                  <button
                    type="button"
                    onClick={(e) => {
                      e.stopPropagation();
                      handleDeleteDomain(dom.id, dom.domain);
                    }}
                    className="p-1.5 rounded-lg text-zinc-400 hover:text-rose-600 hover:bg-rose-50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 flex items-center justify-center cursor-pointer"
                    title={`Excluir domínio ${dom.domain}`}
                    aria-label={`Excluir domínio ${dom.domain}`}
                  >
                    <Trash2 className="w-4 h-4" />
                  </button>
                </div>
              </div>
            );
          })}

          <Button
            variant="outline"
            onClick={() => setIsAddDomainOpen(true)}
            className="w-full border-dashed border-zinc-300 text-zinc-700 hover:bg-zinc-100 text-xs font-semibold h-10 rounded-2xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 flex items-center justify-center gap-2"
          >
            <Plus className="w-4 h-4 text-indigo-600" aria-hidden="true" />
            <span>Adicionar Novo Domínio</span>
          </Button>
        </div>

        {/* Right Column: DNS Table for Selected Domain */}
        <div className="lg:col-span-3 space-y-4">
          {currentDomain ? (
            <Card className="bg-white border border-zinc-200/80 rounded-2xl shadow-xs overflow-hidden">
              <CardHeader className="border-b border-zinc-100 p-5 sm:p-6">
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                  <div>
                    <div className="flex items-center gap-3 flex-wrap">
                      <CardTitle className="text-lg sm:text-xl font-bold text-zinc-900">
                        {currentDomain.domain}
                      </CardTitle>
                      {currentDomain.verificationStatus === "VERIFIED" ? (
                        <Badge className="bg-emerald-50 text-emerald-800 border-emerald-200 text-xs font-semibold px-3 py-1 flex items-center gap-1.5">
                          <CheckCircle2 className="w-4 h-4 text-emerald-600" aria-hidden="true" />
                          <span>Verificado (Anti-Spam OK)</span>
                        </Badge>
                      ) : currentDomain.verificationStatus === "FAILED" ? (
                        <Badge className="bg-rose-50 text-rose-800 border-rose-200 text-xs font-semibold px-3 py-1 flex items-center gap-1.5">
                          <AlertTriangle className="w-4 h-4 text-rose-600" aria-hidden="true" />
                          <span>Falha na verificação</span>
                        </Badge>
                      ) : (
                        <Badge className="bg-amber-50 text-amber-800 border-amber-200 text-xs font-semibold px-3 py-1 flex items-center gap-1.5">
                          <AlertTriangle className="w-4 h-4 text-amber-600" aria-hidden="true" />
                          <span>Pendente de Configuração DNS</span>
                        </Badge>
                      )}
                    </div>
                    <CardDescription className="text-xs sm:text-sm text-zinc-600 mt-1.5 leading-relaxed">
                      Copie os registros abaixo e adicione à zona DNS do seu provedor de domínio (Cloudflare, Registro.br, Hostinger ou GoDaddy).
                      Atenção: alguns provedores já anexam o domínio automaticamente ao campo &quot;Nome&quot; — se o seu painel fizer isso, cole apenas a parte antes de &quot;.{currentDomain.domain}&quot;.
                    </CardDescription>
                  </div>

                  <Button
                    onClick={() => handleVerifyDns(currentDomain.id)}
                    className="bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold h-10 px-4 rounded-xl shadow-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 flex items-center justify-center gap-2 shrink-0 self-start sm:self-auto"
                  >
                    <RefreshCw className="w-4 h-4 shrink-0" aria-hidden="true" />
                    <span>Verificar DNS</span>
                  </Button>
                </div>
              </CardHeader>

              <CardContent className="p-0">
                <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 w-28 py-3.5 px-4">Tipo</TableHead>
                        <TableHead className="text-xs font-bold uppercase text-zinc-700 w-48 py-3.5 px-4">Nome / Host</TableHead>
                        <TableHead className="text-xs font-bold uppercase text-zinc-700 py-3.5 px-4">Valor / Conteúdo</TableHead>
                        <TableHead className="text-xs font-bold uppercase text-zinc-700 text-right w-32 py-3.5 px-4">Ação</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {currentDomain.dnsRecords.map((rec, i) => {
                        const displayValue = rec.priority !== undefined ? `${rec.priority} ${rec.value}` : rec.value;
                        return (
                          <TableRow key={i} className="border-b border-zinc-100 hover:bg-zinc-50/80 transition-colors">
                            <TableCell className="py-4 px-4">
                              <Badge
                                variant="outline"
                                className="font-mono text-xs font-bold border-indigo-200 text-indigo-800 bg-indigo-50 px-2.5 py-0.5"
                              >
                                {rec.type}
                              </Badge>
                            </TableCell>
                            <TableCell className="font-mono text-xs sm:text-sm font-semibold text-zinc-900 py-4 px-4">{rec.name}</TableCell>
                            <TableCell className="font-mono text-xs sm:text-sm text-zinc-700 break-all py-4 px-4">
                              {displayValue}
                            </TableCell>
                            <TableCell className="text-right py-4 px-4">
                              <Button
                                variant="outline"
                                size="sm"
                                onClick={() => handleCopy(displayValue, `${currentDomain.id}-${i}`)}
                                className="h-9 px-3 text-xs font-semibold text-zinc-700 border-zinc-300 hover:text-zinc-900 hover:bg-zinc-100 rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 flex items-center justify-center gap-1.5 ml-auto"
                                aria-label={`Copiar valor do registro ${rec.type}`}
                              >
                                {copiedKey === `${currentDomain.id}-${i}` ? (
                                  <>
                                    <Check className="w-3.5 h-3.5 text-emerald-600 shrink-0" aria-hidden="true" />
                                    <span className="text-emerald-800">Copiado</span>
                                  </>
                                ) : (
                                  <>
                                    <Copy className="w-3.5 h-3.5 text-zinc-500 shrink-0" aria-hidden="true" />
                                    <span>Copiar</span>
                                  </>
                                )}
                              </Button>
                            </TableCell>
                          </TableRow>
                        );
                      })}

                    </TableBody>
                  </Table>
                </div>
              </CardContent>
            </Card>
          ) : (
            <Card className="bg-white border border-zinc-200 p-8 text-left rounded-2xl shadow-xs">
              <p className="text-xs sm:text-sm text-zinc-600 font-medium">
                Selecione ou adicione um domínio ao lado para visualizar os registros DNS de autenticação.
              </p>
            </Card>
          )}
        </div>
      </div>

      {/* Accessible Add Domain Modal */}
      <Dialog open={isAddDomainOpen} onOpenChange={setIsAddDomainOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <Globe className="w-5 h-5 text-[#4338CA]" aria-hidden="true" />
              <span>Adicionar Domínio</span>
            </DialogTitle>
            <DialogDescription>
              Digite o nome do domínio principal da sua empresa para configurar os registros de autenticação anti-spam.
            </DialogDescription>
          </DialogHeader>

          <form onSubmit={handleSaveDomain} className="space-y-4 py-2">
            <div className="field-container">
              <Label htmlFor="domain-name-input">
                Nome do Domínio <span className="text-rose-600">*</span>
              </Label>
              <Input
                id="domain-name-input"
                value={newDomainName}
                onChange={(e) => setNewDomainName(e.target.value)}
                placeholder="exemplo.com.br"
              />
              {domainError && (
                <p className="text-xs font-semibold text-rose-600 mt-1 flex items-center gap-1">
                  <AlertTriangle className="w-3.5 h-3.5 shrink-0 text-rose-600" aria-hidden="true" />
                  <span>{domainError}</span>
                </p>
              )}
            </div>

            <DialogFooter className="pt-4">
              <Button
                type="button"
                variant="outline"
                onClick={() => setIsAddDomainOpen(false)}
              >
                Cancelar
              </Button>
              <Button
                type="submit"
                disabled={isSubmittingDomain}
              >
                {isSubmittingDomain ? "Cadastrando..." : "Cadastrar Domínio"}
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  );
}