"use client";

import Link from "next/link";
import { AdminPageHeader, cardClass } from "@/components/admin/controls";
import { COMMERCIAL_ADMIN_RESOURCES } from "../admin/resources";

const GROUP_LABEL: Record<string, string> = {
  catalog: "کاتالوگ",
  commerce: "تجاری / قیمت",
  governance: "حاکمیت",
  ops: "عملیات",
  localization: "محلی‌سازی",
  tenant: "Tenant / Activation",
};

export function AdminCommercialHub() {
  const groups = Array.from(new Set(COMMERCIAL_ADMIN_RESOURCES.map((r) => r.group)));

  return (
    <div className="space-y-8">
      <AdminPageHeader
        title="پرتال تجاری (Commercial Admin)"
        subtitle="همه رجیستری‌ها از Core Commercial APIs — بدون کاتالوگ ثابت frontend. تغییرات بلافاصله در tenant دیده می‌شود."
      />

      {groups.map((group) => (
        <section key={group}>
          <h2 className="mb-3 text-sm font-bold text-secondary">
            {GROUP_LABEL[group] || group}
          </h2>
          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
            {COMMERCIAL_ADMIN_RESOURCES.filter((r) => r.group === group).map((r) => (
              <Link
                key={r.key}
                href={`/admin/commercial/${r.key}`}
                className={`${cardClass} transition-shadow hover:shadow-md`}
              >
                <p className="font-semibold text-secondary">{r.label}</p>
                <p className="mt-1 text-xs text-gray-500">{r.description}</p>
                <p className="mt-2 font-mono text-[10px] text-gray-400" dir="ltr">
                  {r.listPath}
                </p>
              </Link>
            ))}
          </div>
        </section>
      ))}
    </div>
  );
}