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() {
  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>Emulator Config</h1>
      <p className="muted">
        Live key/value config read by the Arcturus emulator from
        <code> emulator_settings</code> and <code> emulator_texts</code>. Changes take effect
        on the next emulator read (some keys require an emulator reload).
      </p>

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

      <section className="mt-6">
        <h2>Settings</h2>
        <p className="muted" style={{ marginTop: "-0.4rem" }}>
          {settings.length} keys.
        </p>

      <form
        action={updateEmulatorSetting}
        className="card"
        style={{ marginBottom: "1.5rem" }}
      >
        <h3 style={{ marginTop: 0 }}>Add / overwrite setting</h3>
        <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
          <input name="key" placeholder="key" maxLength={100} required />
          <input
            name="value"
            placeholder="value"
            maxLength={512}
            style={{ flex: 1, minWidth: 200 }}
          />
          <button type="submit" className="btn btn-primary">
            Save
          </button>
        </div>
      </form>

      <table>
        <thead>
          <tr>
            <th style={{ width: 320 }}>Key</th>
            <th>Value</th>
          </tr>
        </thead>
        <tbody>
          {settings.map((s) => (
            <tr key={s.key}>
              <td>
                <strong>{s.key}</strong>
              </td>
              <td>
                <form
                  action={updateEmulatorSetting}
                  style={{ display: "flex", gap: "0.5rem" }}
                >
                  <input type="hidden" name="key" value={s.key} />
                  <input
                    name="value"
                    defaultValue={s.value}
                    maxLength={512}
                    style={{ flex: 1 }}
                  />
                  <button type="submit" className="btn btn-outline">
                    Save
                  </button>
                </form>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      {settings.length === 0 ? (
        <p className="muted">No emulator settings found.</p>
      ) : null}
      </section>

      <section className="mt-6">
        <h2>Texts</h2>
        <p className="muted" style={{ marginTop: "-0.4rem" }}>
          {textsCount} keys{textsTruncated ? ` (showing first ${texts.length})` : ""}.
        </p>

      <form
        action={updateEmulatorText}
        className="card"
        style={{ marginBottom: "1.5rem" }}
      >
        <h3 style={{ marginTop: 0 }}>Add / overwrite text</h3>
        <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
          <input name="key" placeholder="key" maxLength={100} required />
          <input
            name="value"
            placeholder="value"
            maxLength={4096}
            style={{ flex: 1, minWidth: 200 }}
          />
          <button type="submit" className="btn btn-primary">
            Save
          </button>
        </div>
      </form>

      <table>
        <thead>
          <tr>
            <th style={{ width: 320 }}>Key</th>
            <th>Value</th>
          </tr>
        </thead>
        <tbody>
          {texts.map((t) => (
            <tr key={t.key}>
              <td>
                <strong>{t.key}</strong>
              </td>
              <td>
                <form
                  action={updateEmulatorText}
                  style={{ display: "flex", gap: "0.5rem" }}
                >
                  <input type="hidden" name="key" value={t.key} />
                  <input
                    name="value"
                    defaultValue={t.value}
                    maxLength={4096}
                    style={{ flex: 1 }}
                  />
                  <button type="submit" className="btn btn-outline">
                    Save
                  </button>
                </form>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      {texts.length === 0 ? (
        <p className="muted">No emulator texts found.</p>
      ) : null}
      {textsTruncated ? (
        <p className="muted">
          Only the first {texts.length} of {textsCount} text keys are shown. Use the
          add/overwrite form above to edit a key beyond this list.
        </p>
      ) : null}
      </section>
    </main>
  );
}