import { createSetting, deleteSetting, updateSetting } from "@/actions/admin-settings";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

export default async function AdminSettings() {
  const settings = await prisma.websiteSetting.findMany({ orderBy: { key: "asc" } });

  return (
    <main>
      <h1>CMS Settings</h1>
      <p className="muted">
        Key/value config read at runtime via <code>siteSettings.get()</code>. Saving busts the cache.
      </p>

      <form action={createSetting} className="card" style={{ marginBottom: "1.5rem" }}>
        <h3 style={{ marginTop: 0 }}>Add / overwrite</h3>
        <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
          <input name="key" placeholder="key" required />
          <input name="value" placeholder="value" style={{ flex: 1, minWidth: 160 }} />
          <input name="comment" placeholder="comment" />
          <button type="submit">Save</button>
        </div>
      </form>

      <div className="grid">
        {settings.map((s) => (
          <div key={s.key} className="card">
            <div style={{ display: "flex", gap: "0.75rem", alignItems: "baseline" }}>
              <strong style={{ minWidth: 220 }}>{s.key}</strong>
              <form
                action={updateSetting}
                style={{ display: "flex", gap: "0.5rem", flex: 1 }}
              >
                <input type="hidden" name="key" value={s.key} />
                <input name="value" defaultValue={s.value} style={{ flex: 1 }} />
                <button type="submit">Save</button>
              </form>
              <form action={deleteSetting}>
                <input type="hidden" name="key" value={s.key} />
                <button type="submit">✕</button>
              </form>
            </div>
            {s.comment ? (
              <p className="muted" style={{ margin: "0.4rem 0 0" }}>
                {s.comment}
              </p>
            ) : null}
          </div>
        ))}
      </div>
      {settings.length === 0 ? <p className="muted">No settings yet.</p> : null}
    </main>
  );
}