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

export const dynamic = "force-dynamic";

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

  return (
    <main>
      <h1>Email Templates</h1>
      <p className="muted">
        Transactional email bodies. Use <code>{"{{ placeholders }}"}</code> in the body and list
        the available ones in the variables field (comma-separated).
      </p>

      <form
        action={createEmailTemplate}
        className="card"
        style={{ marginBottom: "1.5rem" }}
      >
        <h3 style={{ marginTop: 0 }}>New template</h3>
        <div
          style={{
            display: "flex",
            gap: "0.5rem",
            flexWrap: "wrap",
            marginBottom: "0.5rem",
          }}
        >
          <input name="name" placeholder="name (unique)" required style={{ minWidth: 180 }} />
          <input
            name="subject"
            placeholder="subject"
            required
            style={{ flex: 1, minWidth: 220 }}
          />
          <input name="variables" placeholder="variables (comma-separated)" style={{ minWidth: 200 }} />
          <label style={{ display: "inline-flex", alignItems: "center", gap: "0.35rem" }}>
            <input type="checkbox" name="isActive" defaultChecked style={{ width: "auto" }} />
            <span className="muted">Active</span>
          </label>
        </div>
        <textarea
          name="body"
          placeholder="Email body (HTML or text)"
          required
          rows={5}
          style={{ width: "100%", resize: "vertical", marginBottom: "0.5rem" }}
        />
        <button type="submit" className="btn btn-primary">
          Create
        </button>
      </form>

      <div className="grid">
        {templates.map((t) => {
          const id = String(t.id);
          return (
            <div key={id} className="card">
              <form action={updateEmailTemplate}>
                <input type="hidden" name="id" value={id} />
                <div
                  style={{
                    display: "flex",
                    gap: "0.5rem",
                    flexWrap: "wrap",
                    alignItems: "center",
                    marginBottom: "0.5rem",
                  }}
                >
                  <strong style={{ minWidth: 160 }}>{t.name}</strong>
                  <input
                    name="subject"
                    defaultValue={t.subject}
                    placeholder="subject"
                    required
                    style={{ flex: 1, minWidth: 220 }}
                  />
                  <input
                    name="variables"
                    defaultValue={t.variables ?? ""}
                    placeholder="variables"
                    style={{ minWidth: 180 }}
                  />
                  <label
                    style={{ display: "inline-flex", alignItems: "center", gap: "0.35rem" }}
                  >
                    <input
                      type="checkbox"
                      name="isActive"
                      defaultChecked={t.isActive}
                      style={{ width: "auto" }}
                    />
                    <span className="muted">Active</span>
                  </label>
                </div>
                <textarea
                  name="body"
                  defaultValue={t.body}
                  required
                  rows={6}
                  style={{ width: "100%", resize: "vertical", marginBottom: "0.5rem" }}
                />
                <div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
                  <button type="submit" className="btn btn-primary">
                    Save
                  </button>
                  {t.updatedAt ? (
                    <span className="muted">
                      Updated {new Date(t.updatedAt).toISOString().slice(0, 16).replace("T", " ")}
                    </span>
                  ) : null}
                </div>
              </form>
              <form action={deleteEmailTemplate} style={{ marginTop: "0.5rem" }}>
                <input type="hidden" name="id" value={id} />
                <button type="submit" className="btn btn-danger">
                  Delete
                </button>
              </form>
            </div>
          );
        })}
      </div>
      {templates.length === 0 ? <p className="muted">No email templates yet.</p> : null}
    </main>
  );
}