import Link from "next/link";
import { savePoints } from "@/actions/admin-radio-points";
import { StatusCard } from "@/components/admin/dashboard";
import { siteSettings } from "@/lib/services/site-settings";
import { Star } from "lucide-react";
import { getTranslations } from "next-intl/server";

export const dynamic = "force-dynamic";

export const metadata = { title: "Radio Points" };

const DEFAULTS = {
  radio_points_enabled: "0",
  radio_points_per_minute: "1",
  radio_points_currency: "credits",
  radio_points_max_per_day: "0",
  radio_points_min_listeners: "0",
} as const;

const CURRENCIES = ["credits", "duckets", "diamonds", "points"] as const;

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

  const { saved } = await searchParams;

  const values = {
    radio_points_enabled: await siteSettings
      .get("radio_points_enabled", DEFAULTS.radio_points_enabled)
      .catch(() => DEFAULTS.radio_points_enabled),
    radio_points_per_minute: await siteSettings
      .get("radio_points_per_minute", DEFAULTS.radio_points_per_minute)
      .catch(() => DEFAULTS.radio_points_per_minute),
    radio_points_currency: await siteSettings
      .get("radio_points_currency", DEFAULTS.radio_points_currency)
      .catch(() => DEFAULTS.radio_points_currency),
    radio_points_max_per_day: await siteSettings
      .get("radio_points_max_per_day", DEFAULTS.radio_points_max_per_day)
      .catch(() => DEFAULTS.radio_points_max_per_day),
    radio_points_min_listeners: await siteSettings
      .get("radio_points_min_listeners", DEFAULTS.radio_points_min_listeners)
      .catch(() => DEFAULTS.radio_points_min_listeners),
  };

  const enabled = (values.radio_points_enabled ?? "0") === "1";
  const perMinute = values.radio_points_per_minute ?? DEFAULTS.radio_points_per_minute;
  const currency = (values.radio_points_currency ?? DEFAULTS.radio_points_currency) as string;
  const maxPerDay = values.radio_points_max_per_day ?? DEFAULTS.radio_points_max_per_day;
  const minListeners = values.radio_points_min_listeners ?? DEFAULTS.radio_points_min_listeners;
  const selectedCurrency = CURRENCIES.includes(currency as (typeof CURRENCIES)[number])
    ? currency
    : "credits";

  return (
    <main>
      <nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
        <Link href="/admin/radio">{t("title")}</Link> ·{" "}
        <Link href="/admin/radio/settings">{t("settings")}</Link> ·{" "}
        <Link href="/admin/radio/points">{t("points")}</Link> ·{" "}
        <Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{" "}
        <Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{" "}
        <Link href="/admin/radio/history">{t("history")}</Link>
      </nav>

      <section className="mt-6">
        <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">
            <Star size={20} className="text-[var(--color-primary)]" />
          </div>
          <div>
            <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("pointsForm.title")}</h1>
            <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("pointsForm.subtitle")}</p>
          </div>
        </div>

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

        <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
          <StatusCard
            label={t("pointsForm.points")}
            value={enabled ? t("pointsForm.enabled") : t("pointsForm.disabled")}
            state={enabled ? "ok" : "danger"}
            icon="\u{1F3A7}"
          />
          <StatusCard
            label={t("pointsForm.perMinute")}
            value={perMinute}
            hint={t("pointsForm.paidIn", { currency: selectedCurrency })}
            icon="\u{23F1}\uFE0F"
          />
          <StatusCard
            label={t("pointsForm.maxPerDay")}
            value={maxPerDay === "0" ? t("pointsForm.unlimited") : maxPerDay}
            icon="\u{1F4C8}"
          />
          <StatusCard label={t("pointsForm.minListeners")} value={minListeners} icon="\u{1F465}" />
        </div>
      </section>

      <section className="mt-6">
        <h2 className="admin-section-title">{t("pointsForm.settings")}</h2>
        <form action={savePoints}>
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div>
              <label htmlFor="radio_points_enabled" style={{ display: "block", fontWeight: 700 }}>
                {t("pointsForm.pointsEnabled")}
              </label>
              <select
                id="radio_points_enabled"
                name="radio_points_enabled"
                defaultValue={enabled ? "1" : "0"}
                style={{ width: "100%" }}
              >
                <option value="1">{t("pointsForm.enabled")}</option>
                <option value="0">{t("pointsForm.disabled")}</option>
              </select>
              <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
                {t("pointsForm.pointsEnabledHint")}
              </p>
            </div>

            <div>
              <label htmlFor="radio_points_currency" style={{ display: "block", fontWeight: 700 }}>
                {t("pointsForm.currency")}
              </label>
              <select
                id="radio_points_currency"
                name="radio_points_currency"
                defaultValue={selectedCurrency}
                style={{ width: "100%" }}
              >
                {CURRENCIES.map((c) => (
                  <option key={c} value={c}>
                    {c.charAt(0).toUpperCase() + c.slice(1)}
                  </option>
                ))}
              </select>
              <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
                {t("pointsForm.currencyHint")}
              </p>
            </div>

            <div>
              <label
                htmlFor="radio_points_per_minute"
                style={{ display: "block", fontWeight: 700 }}
              >
                {t("pointsForm.pointsPerMinute")}
              </label>
              <input
                id="radio_points_per_minute"
                name="radio_points_per_minute"
                type="number"
                min={0}
                step={1}
                defaultValue={perMinute}
                style={{ width: "100%" }}
              />
              <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
                {t("pointsForm.pointsPerMinuteHint")}
              </p>
            </div>

            <div>
              <label
                htmlFor="radio_points_max_per_day"
                style={{ display: "block", fontWeight: 700 }}
              >
                {t("pointsForm.maxPerDay")}
              </label>
              <input
                id="radio_points_max_per_day"
                name="radio_points_max_per_day"
                type="number"
                min={0}
                step={1}
                defaultValue={maxPerDay}
                style={{ width: "100%" }}
              />
              <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
                {t("pointsForm.maxPerDayHint")}
              </p>
            </div>

            <div>
              <label
                htmlFor="radio_points_min_listeners"
                style={{ display: "block", fontWeight: 700 }}
              >
                {t("pointsForm.minListeners")}
              </label>
              <input
                id="radio_points_min_listeners"
                name="radio_points_min_listeners"
                type="number"
                min={0}
                step={1}
                defaultValue={minListeners}
                style={{ width: "100%" }}
              />
              <p className="text-xs text-gray-500 dark:text-gray-400" style={{ margin: "0.2rem 0 0" }}>
                {t("pointsForm.minListenersHint")}
              </p>
            </div>
          </div>

          <div className="flex justify-end mt-4">
            <button type="submit" className="btn btn-primary">
              {t("pointsForm.save")}
            </button>
          </div>
        </form>
      </section>
    </main>
  );
}