import Link from "next/link";
import { notFound, redirect } from "next/navigation";
import { asc, eq } from "drizzle-orm";
import { ArrowLeft, CalendarDays } from "lucide-react";
import { db } from "@db/client";
import { categories, events, ticketTypes, users } from "@db/schema";
import { getCurrentRole } from "@/lib/auth";
import { formatEventWhen, formatPrice } from "@/lib/format";
import { Card, PageHeader, StatusPill } from "@/components/ui";
import EventAdminActions from "../../event-admin-actions";
import { whatsappLink } from "@/lib/organizer-profile";

export const metadata = { title: "Review event · Admin" };

// What an admin needs to approve or reject an event that isn't public yet
// (public pages only show published events).
export default async function AdminEventPreviewPage({ params }: { params: Promise<{ id: string }> }) {
  const { isAdmin } = await getCurrentRole();
  if (!isAdmin) redirect("/dashboard");

  const { id } = await params;
  const [row] = await db
    .select({
      event: events,
      organizerEmail: users.email,
      organizerAccountName: users.name,
      organizerVerifiedAt: users.verifiedAt,
      organizerWhatsapp: users.whatsapp,
      organizerContactPhone: users.contactPhone,
      organizerLoginPhone: users.phone,
      category: categories.name,
    })
    .from(events)
    .innerJoin(users, eq(users.id, events.organizerId))
    .leftJoin(categories, eq(categories.id, events.categoryId))
    .where(eq(events.id, id))
    .limit(1);
  if (!row) notFound();
  const e = row.event;
  const tiers = await db.select().from(ticketTypes).where(eq(ticketTypes.eventId, id)).orderBy(asc(ticketTypes.createdAt));

  const fields: [string, React.ReactNode][] = [
    ["Organizer", `${row.organizerAccountName || e.organizerName || "Unnamed"} · ${e.organizerEmail || row.organizerEmail || "no email"}${e.organizerPhone ? ` · ${e.organizerPhone}` : ""}`],
    [
      "Organizer account",
      <span key="v" className="inline-flex flex-wrap items-center gap-2">
        {row.organizerVerifiedAt ? (
          <StatusPill tone="ok">Verified</StatusPill>
        ) : (
          <StatusPill tone="warn">Not verified yet</StatusPill>
        )}
        {(row.organizerContactPhone || row.organizerLoginPhone) && (
          <a href={`tel:${row.organizerContactPhone || row.organizerLoginPhone}`} className="hover:underline">
            {row.organizerContactPhone || row.organizerLoginPhone}
          </a>
        )}
        {row.organizerWhatsapp && (
          <a href={whatsappLink(row.organizerWhatsapp)} target="_blank" rel="noreferrer" className="hover:underline">
            WhatsApp
          </a>
        )}
        <Link href={`/admin/organizers/${e.organizerId}`} className="text-brand-green hover:underline">
          Organizer page →
        </Link>
      </span>,
    ],
    ["Presented by", e.organizerName || "—"],
    ["When", formatEventWhen(e.startsAt.toISOString(), e.endsAt ? e.endsAt.toISOString() : null)],
    ["Venue", [e.venue, e.city].filter(Boolean).join(", ") || "—"],
    ["Category", row.category || "—"],
    ["Age limit", e.ageRestriction || "—"],
  ];

  return (
    <div className="space-y-6">
      <Link href="/admin/events" className="inline-flex items-center gap-1 text-sm text-be-muted hover:text-be-text">
        <ArrowLeft className="h-4 w-4" /> All events
      </Link>
      <PageHeader
        icon={CalendarDays}
        title={e.title}
        description="Review before it goes live."
        actions={<StatusPill tone={e.approvalStatus === "pending" ? "warn" : "muted"}>{e.approvalStatus}</StatusPill>}
      />
      <div className="grid gap-6 lg:grid-cols-[1fr_22rem]">
        <Card className="space-y-4">
          {e.coverImageUrl && (
            // eslint-disable-next-line @next/next/no-img-element
            <img src={e.coverImageUrl} alt="" className="max-h-72 w-full rounded-lg object-cover" />
          )}
          <dl className="grid grid-cols-[8rem_1fr] gap-x-4 gap-y-2 text-sm">
            {fields.map(([k, v]) => (
              <div key={k} className="contents">
                <dt className="text-be-muted">{k}</dt>
                <dd className="min-w-0 break-words text-be-text">{v}</dd>
              </div>
            ))}
          </dl>
          <div>
            <h2 className="mb-1 text-sm font-semibold text-be-text">Description</h2>
            <p className="whitespace-pre-wrap text-sm text-be-muted">{e.description || "No description."}</p>
          </div>
          <div>
            <h2 className="mb-1 text-sm font-semibold text-be-text">Ticket types</h2>
            {tiers.length === 0 ? (
              <p className="text-sm text-be-muted">None yet — the event can&apos;t sell tickets.</p>
            ) : (
              <ul className="space-y-1 text-sm text-be-text">
                {tiers.map((t) => (
                  <li key={t.id}>
                    {t.name} — {formatPrice(t.priceCents, t.currency)} · {t.quantityTotal} available
                    {t.admitsCount > 1 ? ` · group of ${t.admitsCount}` : ""}
                  </li>
                ))}
              </ul>
            )}
          </div>
        </Card>
        <Card className="self-start">
          <EventAdminActions eventId={e.id} featured={e.featured} status={e.status} approvalStatus={e.approvalStatus} />
        </Card>
      </div>
    </div>
  );
}