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

import { Inbox, Trash2, Copy, Check } from "lucide-react";
import { useState } from "react";
import CountdownTimer from "./CountdownTimer";

export interface EmailRow {
  id: string;
  address: string;
  prefix: string;
  domainName: string;
  createdAt: string;
  expiresAt: string;
  isActive: boolean;
  messageCount: number;
}

interface EmailTableProps {
  emails: EmailRow[];
  isLoading: boolean;
  onViewInbox: (email: EmailRow) => void;
  onDelete: (email: EmailRow) => void;
}

function CopyAddressButton({ address }: { address: string }) {
  const [copied, setCopied] = useState(false);
  return (
    <button
      onClick={async () => {
        await navigator.clipboard.writeText(address);
        setCopied(true);
        setTimeout(() => setCopied(false), 1500);
      }}
      className="text-slate-500 hover:text-white transition-colors"
      title="Copy address"
    >
      {copied ? <Check className="w-3.5 h-3.5 text-emerald-400" /> : <Copy className="w-3.5 h-3.5" />}
    </button>
  );
}

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

  if (emails.length === 0) {
    return (
      <div className="bg-slate-900 border border-slate-800 rounded-xl p-8 text-center text-sm text-slate-500">
        No active temp emails. Click &ldquo;Create Email&rdquo; to generate one.
      </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">Address</th>
            <th className="px-4 py-3 font-medium">Messages</th>
            <th className="px-4 py-3 font-medium">Expires In</th>
            <th className="px-4 py-3 font-medium">Created</th>
            <th className="px-4 py-3 font-medium text-right">Actions</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-slate-800">
          {emails.map((email) => (
            <tr key={email.id} className="hover:bg-slate-800/40 transition-colors">
              <td className="px-4 py-3">
                <div className="flex items-center gap-2">
                  <span className="font-mono text-white truncate max-w-xs">{email.address}</span>
                  <CopyAddressButton address={email.address} />
                </div>
              </td>
              <td className="px-4 py-3">
                <span className="inline-flex items-center justify-center min-w-[1.5rem] px-1.5 py-0.5 text-xs font-medium bg-slate-800 text-slate-300 rounded-full">
                  {email.messageCount}
                </span>
              </td>
              <td className="px-4 py-3">
                <CountdownTimer expiresAt={email.expiresAt} />
              </td>
              <td className="px-4 py-3 text-slate-500">
                {new Date(email.createdAt).toLocaleDateString()}
              </td>
              <td className="px-4 py-3">
                <div className="flex items-center justify-end gap-1">
                  <button
                    onClick={() => onViewInbox(email)}
                    className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg transition-colors"
                  >
                    <Inbox className="w-3.5 h-3.5" />
                    View Inbox
                  </button>
                  <button
                    onClick={() => onDelete(email)}
                    className="p-2 rounded-lg text-slate-400 hover:text-red-400 hover:bg-red-950/40 transition-colors"
                    aria-label="Delete email"
                    title="Delete email"
                  >
                    <Trash2 className="w-4 h-4" />
                  </button>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}