import { getTranslations } from "next-intl/server";
import { Layout } from "lucide-react";
import { createBox, deleteBox, toggleBox, updateBox } from "@/actions/admin-writeable-boxes";
import { StatusCard } from "@/components/admin/dashboard";
import { prisma } from "@/lib/prisma";

export const dynamic = "force-dynamic";

export const metadata = { title: "Writeable boxes" };

export default async function AdminWriteableBoxes() {
  const t = await getTranslations("pages.admin.writeableBoxes");
  const boxes = await prisma.websiteWriteableBoxes
    .findMany({
      orderBy: [{ position: "asc" }, { id: "asc" }],
      take: 500,
    })
    .catch(() => []);

  const activeCount = boxes.filter((b) => b.isActive).length;

  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">
          <Layout size={20} className="text-[var(--color-primary)]" />
        </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("subtitle")}</p>
        </div>
      </div>

      <section className="mt-6">
        <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
          <StatusCard label={t("totalBoxes")} value={boxes.length} icon="🗂️" />
          <StatusCard
            label={t("active")}
            value={activeCount}
            state={activeCount > 0 ? "ok" : "neutral"}
            hint={t("shownOnHomePage")}
            icon="✅"
          />
        </div>
      </section>

      <section className="mt-6">
        <h2 className="admin-section-title">{t("newBox")}</h2>
        <form action={createBox} className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <div>
            <label htmlFor="new_title" style={{ display: "block", fontWeight: 700 }}>
              {t("form.name")}
            </label>
            <input id="new_title" name="title" required maxLength={255} style={{ width: "100%" }} />
          </div>
          <div>
            <label htmlFor="new_icon" style={{ display: "block", fontWeight: 700 }}>
              {t("form.iconEmoji")}
            </label>
            <input id="new_icon" name="icon" maxLength={255} placeholder="📰" style={{ width: "100%" }} />
          </div>
          <div>
            <label htmlFor="new_position" style={{ display: "block", fontWeight: 700 }}>
              {t("position")}
            </label>
            <input
              id="new_position"
              name="position"
              type="number"
              min={0}
              defaultValue={boxes.length}
              style={{ width: "100%" }}
            />
          </div>
          <div style={{ display: "flex", alignItems: "flex-end" }}>
            <label style={{ display: "flex", alignItems: "center", gap: "0.4rem", fontWeight: 700 }}>
              <input type="checkbox" name="isActive" value="1" defaultChecked /> {t("active")}
            </label>
          </div>
          <div style={{ gridColumn: "1 / -1" }}>
            <label htmlFor="new_content" style={{ display: "block", fontWeight: 700 }}>
              {t("form.content")}
            </label>
            <textarea
              id="new_content"
              name="content"
              rows={5}
              style={{ width: "100%", fontFamily: "monospace" }}
            />
          </div>
          <div style={{ gridColumn: "1 / -1", display: "flex", justifyContent: "flex-end" }}>
            <button type="submit" className="btn btn-primary">
              {t("form.save")}
            </button>
          </div>
        </form>
      </section>

      <section className="mt-6">
        <h2 className="admin-section-title">
          {t("boxes")} ({boxes.length})
        </h2>
        {boxes.length === 0 ? (
          <div className="admin-empty">{t("noBoxes")}</div>
        ) : (
          <div style={{ display: "flex", flexDirection: "column", gap: "1.25rem" }}>
            {boxes.map((box) => (
              <div key={String(box.id)} className="admin-card">
                <div
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: "0.6rem",
                    marginBottom: "0.75rem",
                  }}
                >
                  <span className="text-sm theme-text-muted dark:theme-text-muted">#{String(box.id)}</span>
                  {box.icon ? <span aria-hidden>{box.icon}</span> : null}
                  <strong className="flex-1">{box.title}</strong>
                  <span
                    className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${box.isActive ? "bg-[var(--color-success-subtle)] text-[var(--color-text)]" : "bg-[var(--color-error-subtle)] text-[var(--color-text)]"}`}
                  >
                    {box.isActive ? t("active") : t("hidden")}
                  </span>
                </div>

                <form action={updateBox} className="grid grid-cols-1 gap-4 md:grid-cols-2">
                  <input type="hidden" name="id" value={String(box.id)} />
                  <div>
                    <label htmlFor={`title_${box.id}`} style={{ display: "block", fontWeight: 700 }}>
                      {t("form.name")}
                    </label>
                    <input
                      id={`title_${box.id}`}
                      name="title"
                      required
                      maxLength={255}
                      defaultValue={box.title}
                      style={{ width: "100%" }}
                    />
                  </div>
                  <div>
                    <label htmlFor={`icon_${box.id}`} style={{ display: "block", fontWeight: 700 }}>
                      {t("form.iconEmoji")}
                    </label>
                    <input
                      id={`icon_${box.id}`}
                      name="icon"
                      maxLength={255}
                      defaultValue={box.icon ?? ""}
                      style={{ width: "100%" }}
                    />
                  </div>
                  <div>
                    <label htmlFor={`position_${box.id}`} style={{ display: "block", fontWeight: 700 }}>
                      {t("position")}
                    </label>
                    <input
                      id={`position_${box.id}`}
                      name="position"
                      type="number"
                      min={0}
                      defaultValue={box.position}
                      style={{ width: "100%" }}
                    />
                  </div>
                  <div style={{ display: "flex", alignItems: "flex-end" }}>
                    <label
                      style={{
                        display: "flex",
                        alignItems: "center",
                        gap: "0.4rem",
                        fontWeight: 700,
                      }}
                    >
                      <input type="checkbox" name="isActive" value="1" defaultChecked={box.isActive} />{" "}
                      {t("active")}
                    </label>
                  </div>
                  <div style={{ gridColumn: "1 / -1" }}>
                    <label htmlFor={`content_${box.id}`} style={{ display: "block", fontWeight: 700 }}>
                      {t("form.content")}
                    </label>
                    <textarea
                      id={`content_${box.id}`}
                      name="content"
                      rows={5}
                      defaultValue={box.content}
                      style={{ width: "100%", fontFamily: "monospace" }}
                    />
                  </div>
                  <div style={{ gridColumn: "1 / -1", display: "flex", justifyContent: "flex-end" }}>
                    <button type="submit" className="btn btn-primary">
                      {t("form.save")}
                    </button>
                  </div>
                </form>

                <div
                  style={{
                    display: "flex",
                    gap: "0.5rem",
                    marginTop: "0.75rem",
                    paddingTop: "0.75rem",
                    borderTop: "1px solid rgba(255,255,255,0.08)",
                  }}
                >
                  <form action={toggleBox}>
                    <input type="hidden" name="id" value={String(box.id)} />
                    <input type="hidden" name="next" value={box.isActive ? "0" : "1"} />
                    <button type="submit" className="btn">
                      {box.isActive ? t("hide") : t("activate")}
                    </button>
                  </form>
                  <form action={deleteBox}>
                    <input type="hidden" name="id" value={String(box.id)} />
                    <button type="submit" className="btn btn-danger">
                      {t("delete")}
                    </button>
                  </form>
                </div>
              </div>
            ))}
          </div>
        )}
      </section>
    </main>
  );
}