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

export const dynamic = "force-dynamic";

export default async function AdminSettings() {
  let settings: Awaited<ReturnType<typeof prisma.websiteSetting.findMany>> = [];
  try {
    settings = await prisma.websiteSetting.findMany({ orderBy: { key: "asc" } });
  } catch {
    settings = [];
  }

  const documented = settings.filter((s) => !!s.comment).length;

  return (
    <main>
      <h1>CMS Settings</h1>
      <p className="muted" style={{ marginTop: "-0.4rem" }}>
        Key/value config read at runtime via <code>siteSettings.get()</code>. Saving busts the cache.
      </p>

      <div className="admin-stats">
        <StatusCard label="Settings" value={settings.length} icon="🗄️" />
        <StatusCard label="With comment" value={documented} icon="📝" />
      </div>

      <section className="admin-section">
        <h2>Add / overwrite</h2>
        <form action={createSetting} className="card">
          <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" className="btn btn-primary">
              Save
            </button>
          </div>
        </form>
      </section>

      <section className="admin-section">
        <h2>
          Settings <span className="admin-badge">{settings.length}</span>
        </h2>
        {settings.length === 0 ? (
          <p className="muted">No settings yet.</p>
        ) : (
          <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" className="btn btn-outline">
                      Save
                    </button>
                  </form>
                  <form action={deleteSetting}>
                    <input type="hidden" name="key" value={s.key} />
                    <button type="submit" className="btn btn-danger">
                      ✕
                    </button>
                  </form>
                </div>
                {s.comment ? (
                  <p className="muted" style={{ margin: "0.4rem 0 0" }}>
                    {s.comment}
                  </p>
                ) : null}
              </div>
            ))}
          </div>
        )}
      </section>
    </main>
  );
}