Epicnabbo-Catalogus-Updated-Daily/src/app/admin/vpn/page.tsx

import { ShieldBan } from "lucide-react";
import Link from "next/link";
import { saveVpn } from "@/actions/admin-vpn";
import { StatusCard } from "@/components/admin/dashboard";
import { siteSettings } from "@/lib/services/site-settings";
import { getTranslations } from "next-intl/server";

export const dynamic = "force-dynamic";
export const metadata = { title: "VPN" };

const PROVIDERS: { value: string; label: string }[] = [
  { value: "none", label: "None (disabled)" },
  { value: "proxycheck", label: "proxycheck.io" },
  { value: "ipqualityscore", label: "IPQualityScore" },
];

export default async function AdminVpn({ searchParams }: { searchParams: Promise<{ saved?: string }> }) {
  const sp = await searchParams;
  const t = await getTranslations("pages.admin.vpn");

  // Read current values (graceful fallbacks via siteSettings / DEFAULTS).
  const enabled = await siteSettings.getBool("vpn_block_enabled", false);
  const provider = (await siteSettings.get("vpn_provider", "none")) ?? "none";
  const apiKey = (await siteSettings.get("vpn_api_key", "")) ?? "";
  const blockMessage =
    (await siteSettings.get("vpn_block_message", "Registrations from VPNs or proxies are not allowed.")) ??
    "";

  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">
          <ShieldBan 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.rich("subtitle", { ipLink: (chunks) => <Link href="/admin/ip">{chunks}</Link> })}
          </p>
        </div>
      </div>

      <section className="mt-6">
        {sp.saved ? (
          <p className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">
            {t("settingsSaved")}
          </p>
        ) : null}

        <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
          <StatusCard
            label={t("protection")}
            value={enabled ? t("on") : t("off")}
            state={enabled ? "ok" : "danger"}
            hint={enabled ? t("providerLabel", { provider }) : t("notScreened")}
            icon="🛡️"
          />
        </div>
      </section>

      <section className="mt-6">
        <h2 className="admin-section-title">{t("settings")}</h2>
        <form action={saveVpn} className="admin-card">
          <div style={{ marginBottom: "1rem" }}>
            <label style={{ display: "flex", alignItems: "center", gap: "0.6rem" }}>
              <input type="checkbox" name="vpn_block_enabled" value="1" defaultChecked={enabled} />
              <span style={{ fontWeight: 700 }}>{t("blockOnDetect")}</span>
            </label>
          </div>

          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div>
              <label
                htmlFor="vpn_provider"
                style={{ display: "block", fontWeight: 700, fontSize: "0.85rem" }}
              >
                {t("provider")}
              </label>
              <select id="vpn_provider" name="vpn_provider" defaultValue={provider} style={{ width: "100%" }}>
                {PROVIDERS.map((p) => (
                  <option key={p.value} value={p.value}>
                    {p.label}
                  </option>
                ))}
              </select>
              <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
                {t("providerHint")}
              </p>
            </div>

            <div>
              <label htmlFor="vpn_api_key" style={{ display: "block", fontWeight: 700, fontSize: "0.85rem" }}>
                {t("apiKey")}
              </label>
              <input
                id="vpn_api_key"
                name="vpn_api_key"
                defaultValue={apiKey}
                autoComplete="off"
                placeholder={t("apiKeyPlaceholder")}
                style={{ width: "100%" }}
              />
              <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
                {t("apiKeyHint")}
              </p>
            </div>
          </div>

          <div style={{ marginTop: "1rem" }}>
            <label
              htmlFor="vpn_block_message"
              style={{ display: "block", fontWeight: 700, fontSize: "0.85rem" }}
            >
              {t("blockMessage")}
            </label>
            <input
              id="vpn_block_message"
              name="vpn_block_message"
              defaultValue={blockMessage}
              placeholder={t("blockMessagePlaceholder")}
              style={{ width: "100%" }}
            />
            <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
              {t("blockMessageHint")}
            </p>
          </div>

          <div style={{ marginTop: "1rem", display: "flex", justifyContent: "flex-end" }}>
            <button type="submit" className="btn btn-primary">
              {t("save")}
            </button>
          </div>
        </form>
      </section>

      <section className="mt-6">
        <h2 className="admin-section-title">{t("rawIpTitle")}</h2>
        <p className="text-xs text-gray-500 dark:text-gray-400">
          {t.rich("rawIpDescription", { ipLink: (chunks) => <Link href="/admin/ip">{chunks}</Link> })}
        </p>
        <Link href="/admin/ip" className="btn btn-secondary">
          {t("openIpManagement")}
        </Link>
      </section>
    </main>
  );
}