// components/DomainTable.tsx
"use client";

import { Settings, Trash2, CheckCircle2, Clock } from "lucide-react";

export interface DomainRow {
  id: string;
  name: string;
  status: "PENDING" | "ACTIVE";
  verifiedAt: string | null;
  createdAt: string;
  activeEmailCount: number;
  dnsRecords: {
    mxRecords: { type: string; host: string; value: string; priority: number }[];
    txtRecord: { type: string; host: string; value: string };
  };
}

interface DomainTableProps {
  domains: DomainRow[];
  isLoading: boolean;
  onOpenDns: (domain: DomainRow) => void;
  onDelete: (domain: DomainRow) => void;
}

export default function DomainTable({ domains, isLoading, onOpenDns, onDelete }: DomainTableProps) {
  if (isLoading) {
    return (
      <div className="bg-slate-900 border border-slate-800 rounded-xl p-8 text-center text-sm text-slate-500">
        Loading domains...
      </div>
    );
  }

  if (domains.length === 0) {
    return (
      <div className="bg-slate-900 border border-slate-800 rounded-xl p-8 text-center text-sm text-slate-500">
        No domains added yet. Click &ldquo;Add Domain&rdquo; to get started.
      </div>
    );
  }

  return (
    <div className="bg-slate-900 border border-slate-800 rounded-xl overflow-hidden">
      <table className="w-full text-sm">
        <thead>
          <tr className="border-b border-slate-800 text-left text-xs text-slate-500 uppercase tracking-wide">
            <th className="px-4 py-3 font-medium">Domain</th>
            <th className="px-4 py-3 font-medium">Status</th>
            <th className="px-4 py-3 font-medium">Active Emails</th>
            <th className="px-4 py-3 font-medium">Added</th>
            <th className="px-4 py-3 font-medium text-right">Actions</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-slate-800">
          {domains.map((domain) => (
            <tr key={domain.id} className="hover:bg-slate-800/40 transition-colors">
              <td className="px-4 py-3 font-medium text-white">{domain.name}</td>
              <td className="px-4 py-3">
                {domain.status === "ACTIVE" ? (
                  <span className="inline-flex items-center gap-1.5 text-xs font-medium text-emerald-400 bg-emerald-950/40 border border-emerald-900 rounded-full px-2.5 py-1">
                    <CheckCircle2 className="w-3.5 h-3.5" />
                    Active
                  </span>
                ) : (
                  <span className="inline-flex items-center gap-1.5 text-xs font-medium text-amber-400 bg-amber-950/40 border border-amber-900 rounded-full px-2.5 py-1">
                    <Clock className="w-3.5 h-3.5" />
                    Pending
                  </span>
                )}
              </td>
              <td className="px-4 py-3 text-slate-300">{domain.activeEmailCount}</td>
              <td className="px-4 py-3 text-slate-500">
                {new Date(domain.createdAt).toLocaleDateString()}
              </td>
              <td className="px-4 py-3">
                <div className="flex items-center justify-end gap-1">
                  <button
                    onClick={() => onOpenDns(domain)}
                    className="p-2 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800 transition-colors"
                    aria-label="DNS Settings"
                    title="DNS Settings"
                  >
                    <Settings className="w-4 h-4" />
                  </button>
                  <button
                    onClick={() => onDelete(domain)}
                    className="p-2 rounded-lg text-slate-400 hover:text-red-400 hover:bg-red-950/40 transition-colors"
                    aria-label="Delete domain"
                    title="Delete domain"
                  >
                    <Trash2 className="w-4 h-4" />
                  </button>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}