Epicnabbo-Catalogus-Updated-Daily/src/app/admin/email-templates/page.tsx

import { getTranslations } from "next-intl/server";
import {
  createEmailTemplate,
  deleteEmailTemplate,
  updateEmailTemplate,
} from "@/actions/admin-email-templates";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

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

  let templates: Awaited<ReturnType<typeof prisma.emailTemplates.findMany>> = [];
  try {
    templates = await prisma.emailTemplates.findMany({ orderBy: { name: "asc" } });
  } catch {
    templates = [];
  }

  return (
    <main>
      <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">
          <span className="text-lg">✉️</span>
        </div>
        <div>
          <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("title")}</h1>
          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">
            {t.rich("subtitle", { code: (chunks) => <code>{chunks}</code> })}
          </p>
        </div>
      </div>

      <form action={createEmailTemplate} className="admin-card mb-6">
        <h3 className="text-sm font-bold text-[var(--color-text)] mb-2">{t("newTemplate")}</h3>
        <div className="flex gap-2 flex-wrap items-center mb-3">
          <input
            name="name"
            placeholder={t("form.namePlaceholder")}
            required
            className="flex-1 min-w-[180px]"
          />
          <input
            name="subject"
            placeholder={t("form.subjectPlaceholder")}
            required
            className="flex-1 min-w-[220px]"
          />
          <input name="variables" placeholder={t("form.variablesPlaceholder")} className="min-w-[200px]" />
          <label className="flex items-center gap-2">
            <input type="checkbox" name="isActive" defaultChecked className="w-auto" />
            <span className="text-sm text-gray-500 dark:text-gray-400">{t("form.active")}</span>
          </label>
        </div>
        <textarea
          name="body"
          placeholder={t("form.bodyPlaceholder")}
          required
          rows={5}
          className="w-full resize-y mb-3"
        />
        <button type="submit" className="btn btn-primary">
          {t("create")}
        </button>
      </form>

      <div className="grid">
        {templates.map((template) => {
          const id = String(template.id);
          return (
            <div key={id} className="admin-card mb-4">
              <form action={updateEmailTemplate}>
                <input type="hidden" name="id" value={id} />
                <div className="flex gap-2 flex-wrap items-center mb-2">
                  <strong className="min-w-[160px]">{template.name}</strong>
                  <input
                    name="subject"
                    defaultValue={template.subject}
                    placeholder={t("form.subjectPlaceholder")}
                    required
                    className="flex-1 min-w-[220px]"
                  />
                  <input
                    name="variables"
                    defaultValue={template.variables ?? ""}
                    placeholder={t("form.variablesPlaceholder")}
                    className="min-w-[180px]"
                  />
                  <label className="flex items-center gap-2">
                    <input
                      type="checkbox"
                      name="isActive"
                      defaultChecked={template.isActive}
                      className="w-auto"
                    />
                    <span className="text-sm text-gray-500 dark:text-gray-400">{t("form.active")}</span>
                  </label>
                </div>
                <textarea
                  name="body"
                  defaultValue={template.body}
                  required
                  rows={6}
                  className="w-full resize-y mb-2"
                />
                <div className="flex gap-2 items-center">
                  <button type="submit" className="btn btn-primary">
                    {t("save")}
                  </button>
                  {template.updatedAt ? (
                    <span className="text-xs text-gray-500 dark:text-gray-400">
                      {t("updated", {
                        date: new Date(template.updatedAt).toISOString().slice(0, 16).replace("T", " "),
                      })}
                    </span>
                  ) : null}
                </div>
              </form>
              <form action={deleteEmailTemplate} className="mt-4">
                <input type="hidden" name="id" value={id} />
                <button type="submit" className="btn btn-danger">
                  {t("delete")}
                </button>
              </form>
            </div>
          );
        })}
      </div>
      {templates.length === 0 ? <div className="admin-empty">{t("noTemplates")}</div> : null}
    </main>
  );
}