import Link from "next/link";
import { AdminPageHeader } from "@/components/admin/AdminBreadcrumbs";
import { StatusBadge } from "@/components/admin/StatusBadge";
import { EmptyState } from "@/components/admin/EmptyState";
import { formatDate } from "@/lib/client-api";
import { subscriptionService } from "@/modules/subscriptions";
import { userService } from "@/modules/users";

export const dynamic = "force-dynamic";
export const metadata = { title: "Subscriptions · Admin" };

export default async function AdminSubscriptionsPage() {
  const subs = await subscriptionService.listAll();
  const userIds = Array.from(new Set(subs.map((s) => s.userId)));
  const userMap = new Map<string, { name: string; email: string }>();
  await Promise.all(
    userIds.map(async (id) => {
      const u = await userService.findPublicById(id);
      if (u) userMap.set(id, { name: u.name, email: u.email });
    }),
  );

  return (
    <div className="space-y-6">
      <AdminPageHeader
        breadcrumbs={[
          { label: "Admin", href: "/admin" },
          { label: "Subscriptions" },
        ]}
        title="Subscriptions"
        description="Monitor subscription lifecycle across the platform."
      />

      {subs.length === 0 ? (
        <EmptyState
          title="No subscriptions yet"
          description="Subscriptions will appear here once users sign up."
        />
      ) : (
        <div className="overflow-x-auto rounded-2xl border border-border bg-surface">
          <table className="min-w-full divide-y divide-border text-sm">
            <thead className="bg-surface-muted text-left text-xs uppercase tracking-wide text-muted">
              <tr>
                <th className="px-4 py-3 font-medium">User</th>
                <th className="px-4 py-3 font-medium">Plan</th>
                <th className="px-4 py-3 font-medium">Status</th>
                <th className="px-4 py-3 font-medium">Usage</th>
                <th className="px-4 py-3 font-medium">Started</th>
                <th className="px-4 py-3 font-medium">Ends</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-border">
              {subs.map((s) => {
                const u = userMap.get(s.userId);
                return (
                  <tr key={s.id} className="hover:bg-surface-muted/50">
                    <td className="px-4 py-3 align-middle">
                      <Link
                        href={`/admin/users/${s.userId}`}
                        className="font-medium text-foreground hover:text-primary"
                      >
                        {u?.name ?? s.userId}
                        <span className="block text-xs text-muted">
                          {u?.email ?? ""}
                        </span>
                      </Link>
                    </td>
                    <td className="px-4 py-3 align-middle">
                      <span className="text-sm font-medium">{s.planName}</span>
                    </td>
                    <td className="px-4 py-3 align-middle">
                      <StatusBadge status={s.status} />
                    </td>
                    <td className="px-4 py-3 align-middle">
                      <span className="text-xs text-muted">
                        {s.usage.events} events · {s.usage.guests} guests
                      </span>
                    </td>
                    <td className="px-4 py-3 align-middle">
                      <span className="text-xs text-muted">
                        {formatDate(s.startDate)}
                      </span>
                    </td>
                    <td className="px-4 py-3 align-middle">
                      <span className="text-xs text-muted">
                        {formatDate(s.endDate)}
                      </span>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}