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

import { useCallback, useEffect, useState } from "react";
import { Plus } from "lucide-react";
import EmailTable, { EmailRow } from "@/components/EmailTable";
import CreateEmailModal from "@/components/CreateEmailModal";
import InboxViewer from "@/components/InboxViewer";
import DeleteConfirmModal from "@/components/DeleteConfirmModal";

export default function EmailsPage() {
  const [emails, setEmails] = useState<EmailRow[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [inboxTarget, setInboxTarget] = useState<EmailRow | null>(null);
  const [deleteTarget, setDeleteTarget] = useState<EmailRow | null>(null);

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

  useEffect(() => {
    fetchEmails();
    // Poll periodically so newly received inbound messages show up as
    // updated message counts without a manual refresh.
    const interval = setInterval(fetchEmails, 20_000);
    return () => clearInterval(interval);
  }, [fetchEmails]);

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

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-lg font-semibold text-white">Emails</h1>
          <p className="text-sm text-slate-500">Active temporary inboxes (10-day lifetime)</p>
        </div>
        <button
          onClick={() => setShowCreateModal(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" />
          Create Email
        </button>
      </div>

      <EmailTable
        emails={emails}
        isLoading={isLoading}
        onViewInbox={(email) => setInboxTarget(email)}
        onDelete={(email) => setDeleteTarget(email)}
      />

      {showCreateModal && (
        <CreateEmailModal onClose={() => setShowCreateModal(false)} onCreated={fetchEmails} />
      )}

      {inboxTarget && (
        <InboxViewer
          tempEmailId={inboxTarget.id}
          address={inboxTarget.address}
          onClose={() => setInboxTarget(null)}
        />
      )}

      {deleteTarget && (
        <DeleteConfirmModal
          title="Delete Temp Email"
          description={`This will permanently delete "${deleteTarget.address}" and all ${deleteTarget.messageCount} received message(s). This cannot be undone.`}
          onClose={() => setDeleteTarget(null)}
          onConfirm={handleDeleteConfirmed}
        />
      )}
    </div>
  );
}