import { db } from "@/db/client";
import { mediaItems, users, watchingNowItems, watchlistItems } from "@/db/schema";
import { desc, eq, isNull } from "drizzle-orm";

export const dynamic = "force-dynamic";

function formatDate(value: Date) {
  return value.toISOString().slice(0, 16).replace("T", " ");
}

export default async function AdminDemandPage() {
  const [watchingNow, watchlist] = await Promise.all([
    db
      .select({
        id: watchingNowItems.id,
        title: mediaItems.title,
        mediaType: mediaItems.mediaType,
        year: mediaItems.year,
        displayName: users.displayName,
        scope: watchingNowItems.scope,
        seasonNumber: watchingNowItems.seasonNumber,
        slotNumber: watchingNowItems.slotNumber,
        addedAt: watchingNowItems.addedAt,
      })
      .from(watchingNowItems)
      .innerJoin(users, eq(users.id, watchingNowItems.userId))
      .innerJoin(mediaItems, eq(mediaItems.id, watchingNowItems.mediaItemId))
      .where(isNull(watchingNowItems.removedAt))
      .orderBy(desc(watchingNowItems.addedAt))
      .limit(100),
    db
      .select({
        id: watchlistItems.id,
        title: mediaItems.title,
        mediaType: mediaItems.mediaType,
        year: mediaItems.year,
        displayName: users.displayName,
        source: watchlistItems.source,
        addedAt: watchlistItems.addedAt,
      })
      .from(watchlistItems)
      .innerJoin(users, eq(users.id, watchlistItems.userId))
      .innerJoin(mediaItems, eq(mediaItems.id, watchlistItems.mediaItemId))
      .where(isNull(watchlistItems.removedAt))
      .orderBy(desc(watchlistItems.addedAt))
      .limit(100),
  ]);

  return (
    <div className="space-y-6">
      <div>
        <p className="text-xs font-semibold uppercase tracking-[0.32em] text-admin-accent">Intent</p>
        <h1 className="mt-2 font-serif text-3xl font-semibold">Demand</h1>
      </div>

      <section className="admin-panel overflow-hidden">
        <div className="border-b border-admin-line px-5 py-4">
          <h2 className="font-serif text-xl font-semibold">Watching Now</h2>
        </div>
        <div className="divide-y divide-admin-line">
          {watchingNow.length ? watchingNow.map((item) => (
            <div key={item.id} className="grid gap-3 px-5 py-4 md:grid-cols-[1fr_0.8fr_0.7fr_0.5fr_0.8fr] md:items-center">
              <div>
                <p className="font-medium">{item.title}{item.year ? " (" + item.year + ")" : ""}</p>
                <p className="text-sm text-admin-muted">{item.mediaType === "movie" ? "Movie" : "TV"}</p>
              </div>
              <p className="text-sm text-admin-muted">{item.displayName}</p>
              <p className="text-sm text-admin-muted">{item.scope}{item.seasonNumber ? " season " + item.seasonNumber : ""}</p>
              <p className="text-sm text-admin-muted">{item.slotNumber ? "Slot " + item.slotNumber : "No slot"}</p>
              <p className="text-sm text-admin-muted">{formatDate(item.addedAt)}</p>
            </div>
          )) : <p className="p-5 text-sm text-admin-muted">No active Watching Now demand.</p>}
        </div>
      </section>

      <section className="admin-panel overflow-hidden">
        <div className="border-b border-admin-line px-5 py-4">
          <h2 className="font-serif text-xl font-semibold">Watchlist</h2>
        </div>
        <div className="divide-y divide-admin-line">
          {watchlist.length ? watchlist.map((item) => (
            <div key={item.id} className="grid gap-3 px-5 py-4 md:grid-cols-[1fr_0.8fr_0.6fr_0.8fr] md:items-center">
              <div>
                <p className="font-medium">{item.title}{item.year ? " (" + item.year + ")" : ""}</p>
                <p className="text-sm text-admin-muted">{item.mediaType === "movie" ? "Movie" : "TV"}</p>
              </div>
              <p className="text-sm text-admin-muted">{item.displayName}</p>
              <p className="text-sm text-admin-muted">{item.source}</p>
              <p className="text-sm text-admin-muted">{formatDate(item.addedAt)}</p>
            </div>
          )) : <p className="p-5 text-sm text-admin-muted">No active watchlist demand.</p>}
        </div>
      </section>
    </div>
  );
}
