EpicNext-Cms/src/app/admin/ip/page.tsx

import { Shield } from "lucide-react";
import { addBlacklist, addWhitelist, deleteBlacklist, deleteWhitelist } from "@/actions/admin-ip";
import { StatusCard } from "@/components/admin/dashboard";
import { prisma } from "@/lib/prisma";
import { getTranslations } from "next-intl/server";

export const dynamic = "force-dynamic";

type IpRow = {
  id: bigint;
  ipAddress: string;
  asn: string | null;
  createdAt: Date | null;
};

function formatDate(d: Date | null): string {
  return d ? d.toISOString().slice(0, 16).replace("T", " ") : "—";
}

export default async function AdminIp() {
  const t = await getTranslations("pages.admin.ip");
  let whitelist: IpRow[] = [];
  let blacklist: IpRow[] = [];

  try {
    whitelist = await prisma.websiteIpWhitelist.findMany({
      orderBy: { id: "desc" },
      take: 200,
    });
  } catch {
    whitelist = [];
  }

  try {
    blacklist = await prisma.websiteIpBlacklist.findMany({
      orderBy: { id: "desc" },
      take: 200,
    });
  } catch {
    blacklist = [];
  }

  return (
    <main>
      <div className="flex items-center gap-3 mb-6">
        <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
          <Shield size={20} className="text-[var(--color-primary)]" />
        </div>
        <div>
          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("title")}</h1>
          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("subtitle")}</p>
        </div>
      </div>

      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
        <StatusCard
          label={t("whitelisted")}
          value={whitelist.length}
          state={whitelist.length > 0 ? "ok" : "neutral"}
          icon="✅"
        />
        <StatusCard
          label={t("blacklisted")}
          value={blacklist.length}
          state={blacklist.length > 0 ? "danger" : "neutral"}
          icon="🚫"
        />
      </div>

      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
        {/* ── Whitelist ──────────────────── */}
        <section className="mt-6">
          <h2 className="admin-section-title">{t("whitelist")}</h2>

          <form action={addWhitelist} className="admin-card mb-4">
            <div className="flex gap-2 flex-wrap">
              <input
                name="ipAddress"
                placeholder={t("ipAddressPlaceholder")}
                required
                className="flex-1 min-w-[140px]"
              />
              <input name="asn" placeholder={t("asnPlaceholder")} className="w-[140px]" />
              <button type="submit" className="btn btn-secondary">
                {t("add")}
              </button>
            </div>
          </form>

          {whitelist.length === 0 ? (
            <div className="admin-empty">{t("noWhitelistedIps")}</div>
          ) : (
            <div className="overflow-x-auto">
              <table>
                <thead>
                  <tr>
                    <th>{t("colIp")}</th>
                    <th>{t("colAsn")}</th>
                    <th>{t("colAdded")}</th>
                    <th />
                  </tr>
                </thead>
                <tbody>
                  {whitelist.map((w) => (
                    <tr key={String(w.id)}>
                      <td>{w.ipAddress}</td>
                      <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
                        {w.asn ?? "—"}
                      </td>
                      <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
                        {formatDate(w.createdAt)}
                      </td>
                      <td>
                        <form action={deleteWhitelist}>
                          <input type="hidden" name="id" value={String(w.id)} />
                          <button type="submit" className="btn btn-danger">
                            {t("remove")}
                          </button>
                        </form>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </section>

        {/* ── Blacklist ──────────────────── */}
        <section className="mt-6">
          <h2 className="admin-section-title">{t("blacklist")}</h2>

          <form action={addBlacklist} className="admin-card mb-4">
            <div className="flex gap-2 flex-wrap">
              <input
                name="ipAddress"
                placeholder={t("ipAddressPlaceholder")}
                required
                className="flex-1 min-w-[140px]"
              />
              <input name="asn" placeholder={t("asnPlaceholder")} className="w-[140px]" />
              <button type="submit" className="btn btn-danger">
                {t("add")}
              </button>
            </div>
          </form>

          {blacklist.length === 0 ? (
            <div className="admin-empty">{t("noBlacklistedIps")}</div>
          ) : (
            <div className="overflow-x-auto">
              <table>
                <thead>
                  <tr>
                    <th>{t("colIp")}</th>
                    <th>{t("colAsn")}</th>
                    <th>{t("colAdded")}</th>
                    <th />
                  </tr>
                </thead>
                <tbody>
                  {blacklist.map((b) => (
                    <tr key={String(b.id)}>
                      <td>{b.ipAddress}</td>
                      <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
                        {b.asn ?? "—"}
                      </td>
                      <td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
                        {formatDate(b.createdAt)}
                      </td>
                      <td>
                        <form action={deleteBlacklist}>
                          <input type="hidden" name="id" value={String(b.id)} />
                          <button type="submit" className="btn btn-danger">
                            {t("remove")}
                          </button>
                        </form>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </section>
      </div>
    </main>
  );
}