"use client";

import Link from "next/link";
import { useAuth } from "@/context/AuthContext";

export default function AdminHomePage() {
  const { token } = useAuth();

  if (!token) {
    return (
      <div className="p-6 text-sm text-red-500">
        You must be logged in to view this page.
      </div>
    );
  }

  const cards = [
    {
      title: "Canonical categories",
      href: "admin/gunbuilder/categories",
      description:
        "Manage the core builder categories and their group/grouping + sort order.",
    },
    {
      title: "Part role mappings",
      href: "/admin/gunbuilder/part-role-mappings",
      description:
        "Advanced: map logical builder part roles to canonical categories per platform.",
    },
    {
      title: "Merchant category mappings",
      href: "/admin/gunbuilder/merchant-category-mappings",
      description:
        "Map raw merchant feed categories to your canonical categories.",
    },
  ];

  return (
    <div className="mx-auto max-w-5xl p-6 space-y-6">
      <div>
        <h1 className="text-lg font-semibold tracking-tight text-zinc-100">
          Admin
        </h1>
        <p className="mt-1 text-xs text-zinc-400">
          Internal tools to keep your builder data clean and consistent.
        </p>
      </div>

      <div className="grid gap-4 sm:grid-cols-3">
        {cards.map((card) => (
          <Link
            key={card.href}
            href={card.href}
            className="group rounded-lg border border-zinc-800 bg-zinc-950/70 p-4 text-left hover:border-emerald-500/70 hover:bg-zinc-900/80"
          >
            <h2 className="text-sm font-medium text-zinc-100 group-hover:text-white">
              {card.title}
            </h2>
            <p className="mt-1 text-[11px] leading-snug text-zinc-400">
              {card.description}
            </p>
          </Link>
        ))}
      </div>
    </div>
  );
}