import prisma from "@/lib/prisma";
import { auth } from "@/lib/auth";
import { redirect } from "next/navigation";
import { NewsletterSendForm } from "./NewsletterSendForm";

export default async function AdminNewslettersPage() {
  const session = await auth();
  if (!session?.user || session.user.userType !== "admin") {
    redirect("/login");
  }

  const totalSubscribers = await prisma.newsletter.count();

  const recentSubscribers = await prisma.newsletter.findMany({
    orderBy: { created_at: "desc" },
    take: 50,
  });

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold">Newsletters</h1>

      {/* Stats */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="bg-surface rounded-lg p-6">
          <p className="text-text-muted text-xs uppercase tracking-wider mb-1">
            Total Subscribers
          </p>
          <p className="text-3xl font-bold">{totalSubscribers.toLocaleString()}</p>
        </div>
      </div>

      {/* Send campaign form */}
      <div className="bg-surface rounded-lg p-6">
        <h2 className="text-lg font-semibold mb-4">Send Campaign</h2>
        <NewsletterSendForm subscriberCount={totalSubscribers} />
      </div>

      {/* Recent subscribers */}
      <div className="bg-surface rounded-lg overflow-hidden">
        <div className="p-4 border-b border-surface-light">
          <h2 className="text-lg font-semibold">
            Recent Subscribers (last 50)
          </h2>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full text-left">
            <thead>
              <tr className="border-b border-surface-light text-text-muted text-sm">
                <th className="p-4 font-medium">ID</th>
                <th className="p-4 font-medium">Email</th>
                <th className="p-4 font-medium">Subscribed At</th>
              </tr>
            </thead>
            <tbody>
              {recentSubscribers.length === 0 && (
                <tr>
                  <td
                    colSpan={3}
                    className="p-8 text-center text-text-muted"
                  >
                    No subscribers yet
                  </td>
                </tr>
              )}
              {recentSubscribers.map((sub) => (
                <tr
                  key={sub.id}
                  className="border-b border-surface-light last:border-0 hover:bg-surface-light/50"
                >
                  <td className="p-4 text-text-muted font-mono text-sm">
                    {sub.id}
                  </td>
                  <td className="p-4">{sub.email}</td>
                  <td className="p-4 text-text-muted text-sm">
                    {sub.created_at.toLocaleString(undefined, {
                      dateStyle: "short",
                      timeStyle: "medium",
                    })}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}