import { getTranslations } from "next-intl/server";
import { updateEmulatorSetting, updateEmulatorText } from "@/actions/admin-emulator";
import { StatusCard } from "@/components/admin/dashboard";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

const TEXTS_LIMIT = 300;

export default async function AdminEmulator() {
  const t = await getTranslations("pages.admin.emulator");

  let settings: { key: string; value: string }[] = [];
  try {
    settings = await prisma.emulatorSettings.findMany({ orderBy: { key: "asc" } });
  } catch {
    settings = [];
  }

  let texts: { key: string; value: string }[] = [];
  let textsCount = 0;
  try {
    textsCount = await prisma.emulatorTexts.count();
  } catch {
    textsCount = 0;
  }
  try {
    texts = await prisma.emulatorTexts.findMany({
      orderBy: { key: "asc" },
      take: TEXTS_LIMIT,
    });
  } catch {
    texts = [];
  }

  const textsTruncated = textsCount > texts.length;

  return (
    <main>
      <h1>{t("title")}</h1>
      <p className="text-xs theme-text-muted dark:theme-text-muted mb-3">
        {t.rich("subtitle", {
          code: (chunks) => <code>{chunks}</code>,
        })}
      </p>

      <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
        <StatusCard label={t("settingsKeys")} value={settings.length} icon="⚙️" />
        <StatusCard label={t("textKeys")} value={textsCount} icon="🗒️" />
      </div>

      <section className="mt-6">
        <h2 className="admin-section-title">{t("settings")}</h2>
        <p className="text-xs theme-text-muted dark:theme-text-muted mb-3">
          {t("keysCount", { count: settings.length })}
        </p>

        <form action={updateEmulatorSetting} className="admin-card mb-6">
          <h3 className="text-sm font-bold text-[var(--admin-text)] m-0 mb-3">{t("addOverwriteSetting")}</h3>
          <div className="flex gap-2 flex-wrap">
            <input name="key" placeholder={t("key")} maxLength={100} required />
            <input name="value" placeholder={t("value")} maxLength={512} className="flex-1 min-w-[200px]" />
            <button type="submit" className="btn btn-primary">
              {t("save")}
            </button>
          </div>
        </form>

        <table>
          <thead>
            <tr>
              <th className="w-[320px]">{t("colKey")}</th>
              <th>{t("colValue")}</th>
            </tr>
          </thead>
          <tbody>
            {settings.map((s) => (
              <tr key={s.key}>
                <td>
                  <strong>{s.key}</strong>
                </td>
                <td>
                  <form action={updateEmulatorSetting} className="flex gap-2">
                    <input type="hidden" name="key" value={s.key} />
                    <input name="value" defaultValue={s.value} maxLength={512} className="flex-1" />
                    <button type="submit" className="btn btn-outline">
                      {t("save")}
                    </button>
                  </form>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {settings.length === 0 ? (
          <p className="text-xs theme-text-muted dark:theme-text-muted">{t("noSettings")}</p>
        ) : null}
      </section>

      <section className="mt-6">
        <h2 className="admin-section-title">{t("texts")}</h2>
        <p className="text-xs theme-text-muted dark:theme-text-muted mb-3">
          {t("keysCount", { count: textsCount })}
          {textsTruncated ? ` (${t("showingFirst", { count: texts.length })})` : ""}.
        </p>

        <form action={updateEmulatorText} className="admin-card mb-6">
          <h3 className="text-sm font-bold text-[var(--admin-text)] m-0 mb-3">{t("addOverwriteText")}</h3>
          <div className="flex gap-2 flex-wrap">
            <input name="key" placeholder={t("key")} maxLength={100} required />
            <input name="value" placeholder={t("value")} maxLength={4096} className="flex-1 min-w-[200px]" />
            <button type="submit" className="btn btn-primary">
              {t("save")}
            </button>
          </div>
        </form>

        <table>
          <thead>
            <tr>
              <th className="w-[320px]">{t("colKey")}</th>
              <th>{t("colValue")}</th>
            </tr>
          </thead>
          <tbody>
            {texts.map((txt) => (
              <tr key={txt.key}>
                <td>
                  <strong>{txt.key}</strong>
                </td>
                <td>
                  <form action={updateEmulatorText} className="flex gap-2">
                    <input type="hidden" name="key" value={txt.key} />
                    <input name="value" defaultValue={txt.value} maxLength={4096} className="flex-1" />
                    <button type="submit" className="btn btn-outline">
                      {t("save")}
                    </button>
                  </form>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {texts.length === 0 ? <div className="admin-empty">{t("noTexts")}</div> : null}
        {textsTruncated ? (
          <p className="muted">{t("truncatedHint", { shown: texts.length, total: textsCount })}</p>
        ) : null}
      </section>
    </main>
  );
}