import Link from "next/link";
import { ProductOverviewCard } from "@/components/product-overview-card";
import { getAdminOverviewMetricsFromDb } from "@/lib/admin-overview";
import { canonicalEntities, productAreas, runtimeSurface } from "@/lib/platform";

export const dynamic = "force-dynamic";

export default async function AdminOverviewPage() {
  const metrics = await getAdminOverviewMetricsFromDb();

  const areaMetrics = {
    tvs: [
      { label: "Screens", value: metrics.tvs.screens },
      { label: "Campaigns", value: metrics.tvs.campaigns },
    ],
    payments: [
      { label: "Sessions", value: metrics.payments.sessions },
      { label: "Machines", value: metrics.payments.vendingMachines },
    ],
    network: [
      { label: "Clubs", value: metrics.network.clubs },
      { label: "Machines", value: metrics.network.machines },
    ],
    sports: [
      { label: "Coaches", value: metrics.sports.coaches },
      { label: "Classes", value: metrics.sports.classes },
    ],
    players: [
      { label: "Players", value: metrics.players.players },
      { label: "Memberships", value: metrics.players.memberships },
    ],
  } as const;

  return (
    <div className="space-y-8">
      <section className="grid gap-4 rounded-3xl border border-border/70 bg-card/90 p-6 lg:grid-cols-[1.2fr_0.8fr]">
        <div>
          <p className="text-xs uppercase tracking-[0.24em] text-primary">Control plane</p>
          <h2 className="mt-3 text-2xl font-semibold md:text-3xl">Ballbox host app</h2>
          <p className="mt-3 max-w-3xl text-sm leading-6 text-muted-foreground md:text-base">
            Este admin consolida frontend, auth y BFF. Los productos siguen separados por subruta y ownership para
            permitir migracion gradual desde los POCs actuales.
          </p>
        </div>

        <div className="rounded-3xl border border-border/70 bg-background/40 p-5">
          <p className="text-sm font-semibold text-foreground">Runtime hosted in Ballbox</p>
          <p className="mt-2 text-sm text-muted-foreground">{runtimeSurface.summary}</p>
          <ul className="mt-4 space-y-2 text-sm">
            {runtimeSurface.capabilities.map((capability) => (
              <li key={capability} className="rounded-2xl border border-border/60 bg-card/80 px-3 py-2">
                {capability}
              </li>
            ))}
          </ul>
          <Link
            href={runtimeSurface.href}
            className="mt-5 inline-flex rounded-full border border-primary/40 px-4 py-2 text-sm text-primary transition hover:bg-primary hover:text-primary-foreground"
          >
            Open screens runtime
          </Link>
        </div>
      </section>

      <section className="grid gap-5 lg:grid-cols-2 xl:grid-cols-3">
        {productAreas.map((area) => (
          <ProductOverviewCard key={area.slug} area={area} metrics={areaMetrics[area.slug]} />
        ))}
      </section>

      <section className="rounded-3xl border border-border/70 bg-card/90 p-6">
        <p className="text-xs uppercase tracking-[0.24em] text-primary">Canonical entities</p>
        <div className="mt-4 flex flex-wrap gap-3">
          {canonicalEntities.map((entity) => (
            <span
              key={entity}
              className="rounded-full border border-border/70 bg-background/40 px-4 py-2 text-sm text-foreground"
            >
              {entity}
            </span>
          ))}
        </div>
      </section>
    </div>
  );
}