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 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)]">Writeable Boxes</h1>
          <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Content panels stored in <code>website_writeable_boxes</code> and ordered by <code>position</code>. <strong>Active</strong> boxes are shown on the public home page; hidden ones are kept here as drafts.</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="Total boxes" value={boxes.length} icon="🗂️" />
          <StatusCard
            label="Active"
            value={activeCount}
            state={activeCount > 0 ? "ok" : "neutral"}
            hint="shown on the public home page"
            icon="✅"
          />
        </div>
      </section>

      <section className="mt-6">
        <h2 className="admin-section-title">New box</h2>
        <form action={createBox} className="grid cols-2">
          <div>
            <label htmlFor="new_title" style={{ display: "block", fontWeight: 700 }}>
              Title
            </label>
            <input id="new_title" name="title" required maxLength={255} style={{ width: "100%" }} />
          </div>
          <div>
            <label htmlFor="new_icon" style={{ display: "block", fontWeight: 700 }}>
              Icon (emoji)
            </label>
            <input
              id="new_icon"
              name="icon"
              maxLength={255}
              placeholder="📰"
              style={{ width: "100%" }}
            />
          </div>
          <div>
            <label htmlFor="new_position" style={{ display: "block", fontWeight: 700 }}>
              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 /> Active
            </label>
          </div>
          <div style={{ gridColumn: "1 / -1" }}>
            <label htmlFor="new_content" style={{ display: "block", fontWeight: 700 }}>
              Content (HTML)
            </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">
              + Create box
            </button>
          </div>
        </form>
      </section>

      <section className="mt-6">
        <h2 className="admin-section-title">Boxes ({boxes.length})</h2>
        {boxes.length === 0 ? (
          <div className="admin-empty">No writeable boxes yet.</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 text-gray-500 dark:text-gray-400">#{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-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}>
                    {box.isActive ? "Active" : "Hidden"}
                  </span>
                </div>

                <form action={updateBox} className="grid cols-2">
                  <input type="hidden" name="id" value={String(box.id)} />
                  <div>
                    <label
                      htmlFor={`title_${box.id}`}
                      style={{ display: "block", fontWeight: 700 }}
                    >
                      Title
                    </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 }}
                    >
                      Icon (emoji)
                    </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 }}
                    >
                      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}
                      />{" "}
                      Active
                    </label>
                  </div>
                  <div style={{ gridColumn: "1 / -1" }}>
                    <label
                      htmlFor={`content_${box.id}`}
                      style={{ display: "block", fontWeight: 700 }}
                    >
                      Content (HTML)
                    </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">
                      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 ? "Hide" : "Activate"}
                    </button>
                  </form>
                  <form action={deleteBox}>
                    <input type="hidden" name="id" value={String(box.id)} />
                    <button type="submit" className="btn btn-danger">
                      Delete
                    </button>
                  </form>
                </div>
              </div>
            ))}
          </div>
        )}
      </section>
    </main>
  );
}