import Link from "next/link";
import { AdminPageHeader } from "@/components/admin/AdminBreadcrumbs";
import { AdminTable } from "@/components/admin/AdminTable";
import { EmptyState } from "@/components/admin/EmptyState";
import { StatsCard } from "@/components/admin/StatsCard";
import { StatusBadge } from "@/components/admin/StatusBadge";
import { formatDate } from "@/lib/client-api";
import { getAdminDashboardData } from "@/modules/admin";

export const dynamic = "force-dynamic";

export default async function AdminDashboardPage() {
  const data = await getAdminDashboardData();

  return (
    <div className="space-y-6">
      <AdminPageHeader
        breadcrumbs={[{ label: "Admin", href: "/admin" }, { label: "Dashboard" }]}
        title="Platform control center"
        description="High-level overview of users, events, subscriptions, and content."
      />

      <section className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
        <StatsCard
          label="Total users"
          value={data.stats.totalUsers}
          hint={`${data.stats.activeUsers} active`}
        />
        <StatsCard
          label="Suspended users"
          value={data.stats.suspendedUsers}
          tone="warning"
        />
        <StatsCard
          label="Total events"
          value={data.stats.totalEvents}
          hint={`${data.stats.upcomingEvents} upcoming, ${data.stats.completedEvents} completed`}
        />
        <StatsCard
          label="Active subscriptions"
          value={data.stats.activeSubscriptions}
          hint={`${data.stats.trialUsers} trial`}
        />
        <StatsCard
          label="Admins"
          value={data.stats.admins}
          tone="primary"
        />
        <StatsCard
          label="Draft templates"
          value={data.stats.draftTemplates}
          tone="warning"
          hint={`${data.stats.publishedTemplates} published`}
        />
        <StatsCard
          label="Deleted users"
          value={data.stats.deletedUsers}
          tone="danger"
        />
        <StatsCard
          label="Archived templates"
          value={data.stats.archivedTemplates}
        />
      </section>

      <section className="grid gap-6 lg:grid-cols-2">
        <div className="rounded-2xl border border-border bg-surface p-5 shadow-sm">
          <div className="mb-4 flex items-center justify-between">
            <h2 className="text-sm font-semibold text-foreground">
              Recent users
            </h2>
            <Link
              href="/admin/users"
              className="text-xs font-medium text-primary hover:underline"
            >
              View all
            </Link>
          </div>
          {data.recentUsers.length === 0 ? (
            <EmptyState
              title="No users yet"
              description="New registrations will appear here."
            />
          ) : (
            <AdminTable
              rows={data.recentUsers}
              rowKey={(u) => u.id}
              columns={[
                {
                  key: "name",
                  header: "Name",
                  render: (u) => (
                    <Link
                      href={`/admin/users/${u.id}`}
                      className="font-medium text-foreground hover:text-primary"
                    >
                      {u.name}
                    </Link>
                  ),
                },
                { key: "email", header: "Email", render: (u) => u.email },
                {
                  key: "role",
                  header: "Role",
                  render: (u) => (
                    <StatusBadge status={u.role} tone="primary" />
                  ),
                },
                {
                  key: "status",
                  header: "Status",
                  render: (u) => <StatusBadge status={u.status} />,
                },
                {
                  key: "created",
                  header: "Joined",
                  render: (u) => (
                    <span className="text-xs text-muted">
                      {formatDate(u.createdAt)}
                    </span>
                  ),
                },
              ]}
            />
          )}
        </div>

        <div className="rounded-2xl border border-border bg-surface p-5 shadow-sm">
          <h2 className="mb-4 text-sm font-semibold text-foreground">
            Recent admin activity
          </h2>
          {data.recentAudit.length === 0 ? (
            <EmptyState
              title="No admin actions yet"
              description="Template changes, user updates, and content edits will be recorded here."
            />
          ) : (
            <ul className="space-y-3">
              {data.recentAudit.map((entry) => (
                <li
                  key={entry.id}
                  className="flex items-start justify-between gap-3 border-b border-border pb-3 last:border-0 last:pb-0"
                >
                  <div className="min-w-0">
                    <p className="text-sm font-medium text-foreground">
                      {entry.action}
                    </p>
                    <p className="text-xs text-muted">
                      {entry.resourceType}
                      {entry.resourceLabel ? ` · ${entry.resourceLabel}` : ""}
                    </p>
                  </div>
                  <div className="text-right">
                    <p className="text-xs text-muted">{entry.actorEmail}</p>
                    <p className="text-xs text-muted">{formatDate(entry.createdAt)}</p>
                  </div>
                </li>
              ))}
            </ul>
          )}
        </div>
      </section>
    </div>
  );
}