import type { Metadata } from "next";
import Link from "next/link";
import { redirect } from "next/navigation";
import { AdminLogoutButton } from "@/components/admin/AdminLogoutButton";
import { NewsletterAdminForm } from "@/components/admin/NewsletterAdminForm";
import { getAdminSession } from "@/lib/admin-auth";
import { getActiveNewsletterRecipients } from "@/lib/newsletter-admin";
import { prisma } from "@/lib/prisma";

export const metadata: Metadata = {
  title: { absolute: "Newsletter Admin | Toolaro" },
  robots: { index: false, follow: false },
};

export default async function AdminNewsletterPage() {
  const session = await getAdminSession();
  if (!session) redirect("/admin/login");

  const [campaigns, recipients] = await Promise.all([
    prisma.newsletterCampaign.findMany({ orderBy: { createdAt: "desc" }, take: 20 }),
    getActiveNewsletterRecipients(),
  ]);

  return (
    <main className="container mx-auto max-w-6xl px-4 py-12">
      <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
        <div>
          <p className="text-xs font-bold uppercase tracking-wide text-blue-600">Admin</p>
          <h1 className="mt-2 text-3xl font-black text-gray-950">Newsletter verwalten</h1>
          <p className="mt-2 text-sm leading-6 text-gray-600">
            Angemeldet als {session.email}. Aktive Empfänger: <strong>{recipients.length}</strong>.
            Versand läuft über das bestehende Toolaro-Mail-System.
          </p>
        </div>
        <div className="flex flex-wrap gap-2">
          <Link href="/admin" className="rounded-lg border px-4 py-2 text-sm font-bold text-gray-700">
            Zum Admin Dashboard
          </Link>
          <AdminLogoutButton />
        </div>
      </div>

      <NewsletterAdminForm defaultEmail={process.env.MAIL_REPLY_TO ?? process.env.MAIL_FROM ?? ""} />

      <section className="mt-8 rounded-2xl border bg-white p-6 shadow-sm">
        <h2 className="text-xl font-black text-gray-950">Letzte Kampagnen</h2>
        <div className="mt-5 overflow-x-auto">
          <table className="w-full min-w-[760px] text-left text-sm">
            <thead className="border-b text-xs uppercase tracking-wide text-gray-500">
              <tr>
                <th className="py-3 pr-3">Betreff</th>
                <th className="py-3 pr-3">Status</th>
                <th className="py-3 pr-3">Geplant</th>
                <th className="py-3 pr-3">Gesendet</th>
                <th className="py-3 pr-3">Empfänger</th>
                <th className="py-3 pr-3">Fehler</th>
              </tr>
            </thead>
            <tbody className="divide-y">
              {campaigns.map((campaign) => (
                <tr key={campaign.id}>
                  <td className="max-w-[280px] py-3 pr-3 font-semibold text-gray-900">{campaign.subject}</td>
                  <td className="py-3 pr-3">{campaign.status}</td>
                  <td className="py-3 pr-3">{formatDate(campaign.scheduledAt)}</td>
                  <td className="py-3 pr-3">{formatDate(campaign.sentAt ?? campaign.testSentAt)}</td>
                  <td className="py-3 pr-3">{campaign.recipientCount}</td>
                  <td className="py-3 pr-3 text-red-700">{campaign.lastError ?? "-"}</td>
                </tr>
              ))}
              {!campaigns.length && (
                <tr>
                  <td colSpan={6} className="py-6 text-gray-500">Noch keine Newsletter-Kampagnen.</td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </section>
    </main>
  );
}

function formatDate(value: Date | null) {
  if (!value) return "-";
  return new Intl.DateTimeFormat("de-DE", {
    dateStyle: "short",
    timeStyle: "short",
  }).format(value);
}