import Link from "next/link";

import { redirect } from "next/navigation";

import { revalidatePath } from "next/cache";

import { getCurrentUser, isAdmin, logout } from "@/lib/auth";

import { sessionCaller } from "@/lib/trpc/server";

import { saveUpload } from "@/lib/uploads";

export const dynamic = "force-dynamic";

export const metadata = { title: "Admin · Stepping", robots: { index: false } };

function stamp(d: Date | null) {

  if (!d) return "";

  return new Date(d).toLocaleString("en-US", {

    month: "short",

    day: "numeric",

    hour: "numeric",

    minute: "2-digit",

  }).toUpperCase();

}

export default async function AdminPage() {

  if (!isAdmin(await getCurrentUser())) redirect("/admin/login");

  const { caller } = await sessionCaller();

  const recent = await caller.moderation.recentEvents();

  const ordersLog = await caller.order.adminRecent();

  const sponsorsList = await caller.sponsor.adminList();

  const proList = await caller.proAccount.adminList();

  const launchedCities = await caller.city.listLaunched();

  const pendingPhotos = await caller.eventPhoto.adminPending();

  const vendorList = await caller.vendor.adminList();

  const openFlags = await caller.flag.adminOpen();

  const money = (c: number) => (c === 0 ? "Free" : `$${(c / 100).toFixed(2)}`);

  async function doLogout() {

    "use server";

    await logout();

    redirect("/");

  }

  async function hideEvent(formData: FormData) {

    "use server";

    const id = String(formData.get("id") ?? "");

    if (!id) return;

    const { caller } = await sessionCaller();

    await caller.moderation.hideEvent({ id });

    revalidatePath("/admin");

  }

  async function attachMedia(formData: FormData) {

    "use server";

    if (!isAdmin(await getCurrentUser())) return;

    const eventId = String(formData.get("eventId") ?? "");

    const kind = String(formData.get("kind") ?? "");

    const file = formData.get("file");

    if (!eventId || !(file instanceof File) || file.size === 0) return;

    let url: string;

    try {

      url = await saveUpload(file, kind === "program" ? "pdf" : "image");

    } catch {

      return;

    }

    const { caller } = await sessionCaller();

    if (kind === "program") {

      await caller.event.setProgram({ id: eventId, programUrl: url });

    } else {

      await caller.event.setFlyer({ id: eventId, flyerUrl: url });

    }

    revalidatePath("/admin");

  }

  async function reviewPhoto(formData: FormData) {

    "use server";

    const id = String(formData.get("id") ?? "");

    const approve = String(formData.get("decision") ?? "") === "approve";

    if (!id) return;

    const { caller } = await sessionCaller();

    await caller.eventPhoto.adminReview({ id, approve });

    revalidatePath("/admin");

  }

  async function resolveFlag(formData: FormData) {

    "use server";

    const id = String(formData.get("id") ?? "");

    const status = String(formData.get("status") ?? "");

    if (!id || !["reviewed", "actioned", "dismissed"].includes(status)) return;

    const { caller } = await sessionCaller();

    await caller.flag.adminResolve({

      id,

      status: status as "reviewed" | "actioned" | "dismissed",

    });

    revalidatePath("/admin");

  }

  async function createVendor(formData: FormData) {

    "use server";

    const cityId = String(formData.get("cityId") ?? "");

    const eventId = String(formData.get("eventId") ?? "");

    const name = String(formData.get("name") ?? "").trim();

    const category = String(formData.get("category") ?? "").trim();

    const description = String(formData.get("description") ?? "").trim();

    const linkUrl = String(formData.get("linkUrl") ?? "").trim();

    if (!cityId || !name) return;

    const { caller } = await sessionCaller();

    await caller.vendor.adminCreate({

      cityId,

      eventId: eventId || undefined,

      name,

      category: category || undefined,

      description: description || undefined,

      linkUrl: linkUrl || undefined,

    });

    revalidatePath("/admin");

  }

  async function setVendorStatus(formData: FormData) {

    "use server";

    const id = String(formData.get("id") ?? "");

    const status = String(formData.get("status") ?? "") as "active" | "hidden";

    if (!id) return;

    const { caller } = await sessionCaller();

    await caller.vendor.adminSetStatus({ id, status });

    revalidatePath("/admin");

  }

  async function createSponsor(formData: FormData) {

    "use server";

    const cityId = String(formData.get("cityId") ?? "");

    const name = String(formData.get("name") ?? "").trim();

    const blurb = String(formData.get("blurb") ?? "").trim();

    const linkUrl = String(formData.get("linkUrl") ?? "").trim();

    if (!cityId || !name) return;

    const { caller } = await sessionCaller();

    await caller.sponsor.adminCreate({

      cityId,

      name,

      blurb: blurb || undefined,

      linkUrl: linkUrl || undefined,

      status: "active",

    });

    revalidatePath("/admin");

  }

  async function setSponsorStatus(formData: FormData) {

    "use server";

    const id = String(formData.get("id") ?? "");

    const status = String(formData.get("status") ?? "") as "pending" | "active" | "ended";

    if (!id) return;

    const { caller } = await sessionCaller();

    await caller.sponsor.adminSetStatus({ id, status });

    revalidatePath("/admin");

  }

  async function setProStatus(formData: FormData) {

    "use server";

    const id = String(formData.get("id") ?? "");

    const status = String(formData.get("status") ?? "") as

      | "pending"

      | "active"

      | "expired"

      | "cancelled";

    if (!id) return;

    const { caller } = await sessionCaller();

    await caller.proAccount.adminSetStatus({ id, status });

    revalidatePath("/admin");

  }

  return (

    <main className="mx-auto w-full max-w-4xl px-5 py-12 sm:px-8">

      <div className="flex items-center justify-between">

        <div>

          <p className="kicker text-ash">Stepping · Admin</p>

          <h1 className="display mt-2 text-5xl sm:text-6xl">Control Room</h1>

        </div>

        <form action={doLogout}>

          <button type="submit" className="kicker text-ash hover:text-bone">

            Sign out →

          </button>

        </form>

      </div>

      {}

      <section className="mt-14 border-t border-[var(--line)] pt-8">

        <div className="flex items-end justify-between">

          <h2 className="display text-3xl">Moderation</h2>

          <span className="kicker text-ash">Recent events</span>

        </div>

        <ul className="mt-6">

          {recent.length === 0 ? (

            <li className="kicker text-ash">Nothing posted yet.</li>

          ) : (

            recent.map((e) => (

              <li

                key={e.id}

                className="flex items-center gap-4 border-b border-[var(--line)] py-4"

              >

                <span

                  className="kicker w-20"

                  style={{ color: e.status === "active" ? "var(--ash)" : "var(--gold)" }}

                >

                  {e.status.toUpperCase()}

                </span>

                <span className="display flex-1 text-xl text-bone">{e.title}</span>

                <span className="kicker hidden text-ash sm:block">{stamp(e.createdAt)}</span>

                {e.status === "active" ? (

                  <form action={hideEvent}>

                    <input type="hidden" name="id" value={e.id} />

                    <button type="submit" className="kicker text-gold hover:text-gold-bright">

                      Hide

                    </button>

                  </form>

                ) : null}

              </li>

            ))

          )}

        </ul>

      </section>

      {}

      <section className="mt-14 border-t border-[var(--line)] pt-8">

        <div className="flex items-end justify-between">

          <h2 className="display text-3xl">Photo Queue</h2>

          <span className="kicker text-ash">Pending event photos</span>

        </div>

        <ul className="mt-6">

          {pendingPhotos.length === 0 ? (

            <li className="kicker text-ash">Nothing waiting for review.</li>

          ) : (

            pendingPhotos.map((p) => (

              <li

                key={p.id}

                className="flex items-center gap-4 border-b border-[var(--line)] py-4"

              >

                <a href={p.url} target="_blank" rel="noopener noreferrer">

                  <img

                    src={p.url}

                    alt="Pending submission"

                    className="h-16 w-16 border border-[var(--line)] object-cover"

                  />

                </a>

                <div className="flex-1">

                  <p className="display text-lg text-bone">{p.eventTitle}</p>

                  {p.caption ? (

                    <p className="kicker mt-1 text-ash">{p.caption}</p>

                  ) : null}

                </div>

                <span className="kicker hidden text-ash sm:block">{stamp(p.createdAt)}</span>

                <form action={reviewPhoto} className="flex gap-3">

                  <input type="hidden" name="id" value={p.id} />

                  <button

                    name="decision"

                    value="approve"

                    className="kicker text-gold hover:text-gold-bright"

                  >

                    Approve

                  </button>

                  <button name="decision" value="reject" className="kicker text-ash hover:text-bone">

                    Reject

                  </button>

                </form>

              </li>

            ))

          )}

        </ul>

      </section>

      {}

      <section className="mt-14 border-t border-[var(--line)] pt-8">

        <div className="flex items-end justify-between">

          <h2 className="display text-3xl">Reports</h2>

          <span className="kicker text-ash">Open community reports</span>

        </div>

        <ul className="mt-6">

          {openFlags.length === 0 ? (

            <li className="kicker text-ash">Nothing waiting for review.</li>

          ) : (

            openFlags.map((f) => (

              <li

                key={f.id}

                className="flex items-center gap-4 border-b border-[var(--line)] py-4"

              >

                <div className="flex-1">

                  <p className="display text-lg text-bone">

                    {f.subjectType.replace(/_/g, " ")}

                  </p>

                  <p className="kicker mt-1 text-ash">

                    {f.reason || "No reason given"} · {f.subjectId.slice(0, 8)}

                  </p>

                </div>

                <span className="kicker hidden text-ash sm:block">{stamp(f.createdAt)}</span>

                <form action={resolveFlag} className="flex gap-3">

                  <input type="hidden" name="id" value={f.id} />

                  <button

                    name="status"

                    value="actioned"

                    className="kicker text-gold hover:text-gold-bright"

                  >

                    Actioned

                  </button>

                  <button

                    name="status"

                    value="reviewed"

                    className="kicker text-bone hover:text-gold"

                  >

                    Reviewed

                  </button>

                  <button name="status" value="dismissed" className="kicker text-ash hover:text-bone">

                    Dismiss

                  </button>

                </form>

              </li>

            ))

          )}

        </ul>

      </section>

      {}

      <section className="mt-14 border-t border-[var(--line)] pt-8">

        <div className="flex items-end justify-between">

          <h2 className="display text-3xl">Event Media</h2>

          <span className="kicker text-ash">Flyers + PDF programs</span>

        </div>

        <form action={attachMedia} className="mt-5 flex flex-wrap items-end gap-3">

          <select

            name="eventId"

            required

            defaultValue=""

            className="kicker max-w-60 border border-[var(--line)] bg-stage px-3 py-2 text-bone outline-none focus:border-gold"

          >

            <option value="" disabled>EVENT</option>

            {recent.map((e) => (

              <option key={e.id} value={e.id} className="bg-stage">

                {e.title.toUpperCase()}

              </option>

            ))}

          </select>

          <select

            name="kind"

            required

            defaultValue="flyer"

            className="kicker border border-[var(--line)] bg-stage px-3 py-2 text-bone outline-none focus:border-gold"

          >

            <option value="flyer" className="bg-stage">FLYER (IMAGE)</option>

            <option value="program" className="bg-stage">PROGRAM (PDF)</option>

          </select>

          <input

            type="file"

            name="file"

            required

            accept="image/jpeg,image/png,image/webp,application/pdf"

            className="kicker flex-1 border border-[var(--line)] bg-stage px-3 py-2 text-bone outline-none file:mr-3 file:border-0 file:bg-gold file:px-3 file:py-1 file:text-stage"

          />

          <button type="submit" className="kicker bg-gold px-5 py-2 text-stage hover:bg-gold-bright">

            Attach

          </button>

        </form>

        <p className="kicker mt-3 text-ash">

          Flyers: JPEG/PNG/WebP up to 8MB. Programs: PDF up to 15MB. Attaching again replaces the current file.

        </p>

      </section>

      {}

      <section className="mt-14 border-t border-[var(--line)] pt-8">

        <div className="flex items-end justify-between">

          <h2 className="display text-3xl">Revenue</h2>

          <span className="kicker text-ash">

            Recent orders · payments off

          </span>

        </div>

        <ul className="mt-6">

          {ordersLog.length === 0 ? (

            <li className="kicker text-ash">No orders yet.</li>

          ) : (

            ordersLog.map((o) => (

              <li

                key={o.id}

                className="flex items-center gap-4 border-b border-[var(--line)] py-3"

              >

                <span className="kicker w-20 text-gold">{o.purpose.toUpperCase()}</span>

                <span className="kicker flex-1 text-ash">

                  {o.quantity} × · {o.status.toUpperCase()}

                </span>

                <span className="display text-lg">{money(o.amountCents)}</span>

                <span className="kicker hidden w-24 text-right text-ash sm:block">

                  {stamp(o.createdAt)}

                </span>

              </li>

            ))

          )}

        </ul>

      </section>

      {}

      <section className="mt-14 border-t border-[var(--line)] pt-8">

        <h2 className="display text-3xl">City Sponsors</h2>

        <form action={createSponsor} className="mt-5 flex flex-wrap items-end gap-3">

          <select

            name="cityId"

            required

            defaultValue=""

            className="kicker border border-[var(--line)] bg-stage px-3 py-2 text-bone outline-none focus:border-gold"

          >

            <option value="" disabled>CITY</option>

            {launchedCities.map((c) => (

              <option key={c.id} value={c.id} className="bg-stage">

                {c.name.toUpperCase()}

              </option>

            ))}

          </select>

          <input name="name" required placeholder="Sponsor name" className="serif flex-1 border-b border-[var(--line)] bg-transparent py-2 text-lg text-bone outline-none placeholder:text-ash focus:border-gold" />

          <input name="blurb" placeholder="Tagline (opt)" className="serif flex-1 border-b border-[var(--line)] bg-transparent py-2 text-lg text-bone outline-none placeholder:text-ash focus:border-gold" />

          <input name="linkUrl" placeholder="https:// (opt)" className="kicker border border-[var(--line)] bg-stage px-3 py-2 text-bone outline-none placeholder:text-ash focus:border-gold" />

          <button type="submit" className="kicker bg-gold px-5 py-2 text-stage hover:bg-gold-bright">Add</button>

        </form>

        <ul className="mt-6">

          {sponsorsList.length === 0 ? (

            <li className="kicker text-ash">No sponsors yet.</li>

          ) : (

            sponsorsList.map((s) => (

              <li key={s.id} className="flex items-center gap-4 border-b border-[var(--line)] py-3">

                <span className="kicker w-20" style={{ color: s.status === "active" ? "var(--gold)" : "var(--ash)" }}>

                  {s.status.toUpperCase()}

                </span>

                <span className="display flex-1 text-lg">{s.name}</span>

                <form action={setSponsorStatus} className="flex gap-3">

                  <input type="hidden" name="id" value={s.id} />

                  <button name="status" value={s.status === "active" ? "ended" : "active"} className="kicker text-gold hover:text-gold-bright">

                    {s.status === "active" ? "End" : "Activate"}

                  </button>

                </form>

              </li>

            ))

          )}

        </ul>

      </section>

      {}

      <section className="mt-14 border-t border-[var(--line)] pt-8">

        <div className="flex items-end justify-between">

          <h2 className="display text-3xl">Vendors</h2>

          <span className="kicker text-ash">City-wide or tied to one event</span>

        </div>

        <form action={createVendor} className="mt-5 flex flex-wrap items-end gap-3">

          <select

            name="cityId"

            required

            defaultValue=""

            className="kicker border border-[var(--line)] bg-stage px-3 py-2 text-bone outline-none focus:border-gold"

          >

            <option value="" disabled>CITY</option>

            {launchedCities.map((c) => (

              <option key={c.id} value={c.id} className="bg-stage">

                {c.name.toUpperCase()}

              </option>

            ))}

          </select>

          <select

            name="eventId"

            defaultValue=""

            className="kicker max-w-52 border border-[var(--line)] bg-stage px-3 py-2 text-bone outline-none focus:border-gold"

          >

            <option value="" className="bg-stage">ALL CITY EVENTS</option>

            {recent.map((e) => (

              <option key={e.id} value={e.id} className="bg-stage">

                {e.title.toUpperCase()}

              </option>

            ))}

          </select>

          <input

            name="name"

            required

            placeholder="Vendor name"

            className="serif flex-1 border-b border-[var(--line)] bg-transparent py-2 text-lg text-bone outline-none placeholder:text-ash focus:border-gold"

          />

          <input

            name="category"

            placeholder="Category (opt)"

            className="kicker w-36 border border-[var(--line)] bg-stage px-3 py-2 text-bone outline-none placeholder:text-ash focus:border-gold"

          />

          <input

            name="description"

            placeholder="What they sell (opt)"

            className="serif flex-1 border-b border-[var(--line)] bg-transparent py-2 text-lg text-bone outline-none placeholder:text-ash focus:border-gold"

          />

          <input

            name="linkUrl"

            placeholder="https:// (opt)"

            className="kicker border border-[var(--line)] bg-stage px-3 py-2 text-bone outline-none placeholder:text-ash focus:border-gold"

          />

          <button type="submit" className="kicker bg-gold px-5 py-2 text-stage hover:bg-gold-bright">Add</button>

        </form>

        <ul className="mt-6">

          {vendorList.length === 0 ? (

            <li className="kicker text-ash">No vendors yet.</li>

          ) : (

            vendorList.map((v) => (

              <li key={v.id} className="flex items-center gap-4 border-b border-[var(--line)] py-3">

                <span

                  className="kicker w-20"

                  style={{ color: v.status === "active" ? "var(--gold)" : "var(--ash)" }}

                >

                  {v.status.toUpperCase()}

                </span>

                <span className="display flex-1 text-lg">{v.name}</span>

                <span className="kicker hidden text-ash sm:block">

                  {v.category ? v.category.toUpperCase() : ""}

                </span>

                <form action={setVendorStatus} className="flex gap-3">

                  <input type="hidden" name="id" value={v.id} />

                  <button

                    name="status"

                    value={v.status === "active" ? "hidden" : "active"}

                    className="kicker text-gold hover:text-gold-bright"

                  >

                    {v.status === "active" ? "Hide" : "Activate"}

                  </button>

                </form>

              </li>

            ))

          )}

        </ul>

      </section>

      {}

      <section className="mt-14 border-t border-[var(--line)] pt-8">

        <div className="flex items-end justify-between">

          <h2 className="display text-3xl">Pro Accounts</h2>

          <span className="kicker text-ash">Promoter / DJ / instructor plans</span>

        </div>

        <ul className="mt-6">

          {proList.length === 0 ? (

            <li className="kicker text-ash">

              No pro accounts yet. They appear here once members upgrade.

            </li>

          ) : (

            proList.map((p) => (

              <li key={p.id} className="flex items-center gap-4 border-b border-[var(--line)] py-3">

                <span className="kicker w-20" style={{ color: p.status === "active" ? "var(--gold)" : "var(--ash)" }}>

                  {p.status.toUpperCase()}

                </span>

                <span className="display flex-1 text-lg">{p.tier.toUpperCase()}</span>

                <form action={setProStatus} className="flex gap-3">

                  <input type="hidden" name="id" value={p.id} />

                  <button name="status" value={p.status === "active" ? "cancelled" : "active"} className="kicker text-gold hover:text-gold-bright">

                    {p.status === "active" ? "Cancel" : "Activate"}

                  </button>

                </form>

              </li>

            ))

          )}

        </ul>

      </section>

      <footer className="mt-16 border-t border-[var(--line)] pt-6">

        <Link href="/" className="kicker text-ash hover:text-bone">

          ← Back to site

        </Link>

      </footer>

    </main>

  );

}