// app/dashboard/domains/page.tsx
"use client";

import { useCallback, useEffect, useState } from "react";
import { Plus } from "lucide-react";
import DomainTable, { DomainRow } from "@/components/DomainTable";
import AddDomainModal from "@/components/AddDomainModal";
import DnsSettingsModal from "@/components/DnsSettingsModal";
import DeleteConfirmModal from "@/components/DeleteConfirmModal";

export default function DomainsPage() {
  const [domains, setDomains] = useState<DomainRow[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [showAddModal, setShowAddModal] = useState(false);
  const [dnsTarget, setDnsTarget] = useState<DomainRow | null>(null);
  const [deleteTarget, setDeleteTarget] = useState<DomainRow | null>(null);

  const fetchDomains = useCallback(async () => {
    try {
      const res = await fetch("/api/domains");
      const data = await res.json();
      if (res.ok) {
        setDomains(data.domains);
      }
    } finally {
      setIsLoading(false);
    }
  }, []);

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

  async function handleDeleteConfirmed() {
    if (!deleteTarget) return;
    const res = await fetch(`/api/domains/${deleteTarget.id}`, { method: "DELETE" });
    if (!res.ok) {
      const data = await res.json();
      throw new Error(data.error || "Failed to delete domain");
    }
    await fetchDomains();
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-lg font-semibold text-white">Domains</h1>
          <p className="text-sm text-slate-500">Manage custom domains for temp email addresses</p>
        </div>
        <button
          onClick={() => setShowAddModal(true)}
          className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-medium rounded-lg px-4 py-2 transition-colors"
        >
          <Plus className="w-4 h-4" />
          Add Domain
        </button>
      </div>

      <DomainTable
        domains={domains}
        isLoading={isLoading}
        onOpenDns={(domain) => setDnsTarget(domain)}
        onDelete={(domain) => setDeleteTarget(domain)}
      />

      {showAddModal && (
        <AddDomainModal onClose={() => setShowAddModal(false)} onCreated={fetchDomains} />
      )}

      {dnsTarget && (
        <DnsSettingsModal
          domainId={dnsTarget.id}
          domainName={dnsTarget.name}
          status={dnsTarget.status}
          dnsRecords={dnsTarget.dnsRecords}
          onClose={() => setDnsTarget(null)}
          onVerified={fetchDomains}
        />
      )}

      {deleteTarget && (
        <DeleteConfirmModal
          title="Delete Domain"
          description={`This will permanently delete "${deleteTarget.name}" along with all ${deleteTarget.activeEmailCount} active email(s) and their messages. This cannot be undone.`}
          onClose={() => setDeleteTarget(null)}
          onConfirm={handleDeleteConfirmed}
        />
      )}
    </div>
  );
}