import Link from "next/link";
import { db } from "@/lib/db";
import { FLAG_REASON_LABELS } from "@/lib/flag-reasons";
import { AdminOnlyGate } from "./AdminOnlyGate";

export default async function AdminDashboardPage() {
  // eslint-disable-next-line react-hooks/purity
  const twentyFourHoursAgo = new Date(Date.now() - 24 * 60 * 60 * 1000);

  const [
    totalLabels,
    totalUsers,
    openRequestCount,
    openFlagCount,
    recentFlags,
    recentUploads,
  ] = await Promise.all([
    db.label.count({ where: { status: "active" } }),
    db.user.count(),
    db.labelRequest.count(),
    db.labelFlag.count({ where: { status: "open" } }),
    db.labelFlag.findMany({
      where: { status: "open" },
      orderBy: { createdAt: "desc" },
      take: 5,
      include: {
        label: { include: { blend: { include: { brand: true } } } },
      },
    }),
    db.label.findMany({
      where: { createdAt: { gte: twentyFourHoursAgo } },
      orderBy: { createdAt: "desc" },
      take: 5,
      include: { blend: { include: { brand: true } }, uploader: true },
    }),
  ]);

  return (
    <AdminOnlyGate>
    <div>
      <h1 className="font-heading text-3xl font-semibold text-terracotta">
        Dashboard
      </h1>

      <div className="mt-8 grid grid-cols-2 gap-4 sm:grid-cols-4">
        <div className="rounded-lg border border-charcoal/10 bg-warm-white p-4">
          <p className="text-2xl font-semibold text-charcoal">{totalLabels}</p>
          <p className="text-sm text-charcoal/60">Active labels</p>
        </div>
        <div className="rounded-lg border border-charcoal/10 bg-warm-white p-4">
          <p className="text-2xl font-semibold text-charcoal">{totalUsers}</p>
          <p className="text-sm text-charcoal/60">Users</p>
        </div>
        <div className="rounded-lg border border-charcoal/10 bg-warm-white p-4">
          <p className="text-2xl font-semibold text-charcoal">{openRequestCount}</p>
          <p className="text-sm text-charcoal/60">Open requests</p>
        </div>
        <div className="rounded-lg border border-charcoal/10 bg-warm-white p-4">
          <p className="text-2xl font-semibold text-charcoal">{openFlagCount}</p>
          <p className="text-sm text-charcoal/60">Open flags</p>
        </div>
      </div>

      <div className="mt-10 grid gap-8 sm:grid-cols-2">
        <div>
          <div className="flex items-center justify-between">
            <h2 className="font-heading text-xl font-semibold text-charcoal">
              Recent flags
            </h2>
            <Link href="/admin/flags" className="text-sm text-terracotta hover:underline">
              View all
            </Link>
          </div>
          {recentFlags.length === 0 ? (
            <p className="mt-3 text-sm text-charcoal/60">No open flags.</p>
          ) : (
            <ul className="mt-3 flex flex-col gap-2">
              {recentFlags.map((flag) => (
                <li key={flag.id} className="text-sm text-charcoal">
                  <Link
                    href={`/labels/${flag.labelId}`}
                    className="hover:text-terracotta hover:underline"
                  >
                    {flag.label.blend.brand.name} - {flag.label.blend.name}
                  </Link>{" "}
                  <span className="text-charcoal/60">
                    ({FLAG_REASON_LABELS[flag.reason]})
                  </span>
                </li>
              ))}
            </ul>
          )}
        </div>

        <div>
          <div className="flex items-center justify-between">
            <h2 className="font-heading text-xl font-semibold text-charcoal">
              Recent uploads (24h)
            </h2>
            <Link href="/admin/labels" className="text-sm text-terracotta hover:underline">
              View all
            </Link>
          </div>
          {recentUploads.length === 0 ? (
            <p className="mt-3 text-sm text-charcoal/60">No uploads in the last 24 hours.</p>
          ) : (
            <ul className="mt-3 flex flex-col gap-2">
              {recentUploads.map((label) => (
                <li key={label.id} className="text-sm text-charcoal">
                  <Link
                    href={`/labels/${label.id}`}
                    className="hover:text-terracotta hover:underline"
                  >
                    {label.blend.brand.name} - {label.blend.name}
                  </Link>{" "}
                  <span className="text-charcoal/60">by {label.uploader.username}</span>
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </div>
    </AdminOnlyGate>
  );
}