"use client";

import Link from "next/link";
import { useTranslation } from "react-i18next";
import { ChevronRight } from "lucide-react";

import { ModuleScaffold } from "@/components/admin/module-scaffold";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { PRD_INTEGRATION_ACCESS_ANY } from "@/lib/admin-prd";
import { useAdminProfile } from "@/stores/admin-session";
import { adminHasAnyPermission } from "@/lib/admin-permissions";

type HubCard = {
  href: string;
  titleKey: string;
  descKey: string;
  requiredAny: readonly string[];
};

const HUB_CARDS: HubCard[] = [
  {
    href: "/admin/rules/plays",
    titleKey: "hub.playsTitle",
    descKey: "hub.playsDesc",
    requiredAny: ["prd.play_switch.manage", "prd.odds.manage"],
  },
  {
    href: "/admin/rules/odds",
    titleKey: "hub.oddsTitle",
    descKey: "hub.oddsDesc",
    requiredAny: ["prd.odds.manage", "prd.rebate.manage", "prd.rebate.view"],
  },
  {
    href: "/admin/jackpot",
    titleKey: "hub.jackpotTitle",
    descKey: "hub.jackpotDesc",
    requiredAny: ["prd.jackpot.manage", "prd.jackpot.view"],
  },
  {
    href: "/admin/risk/cap",
    titleKey: "hub.riskCapTitle",
    descKey: "hub.riskCapDesc",
    requiredAny: ["prd.risk_cap.manage", "prd.risk_cap.view"],
  },
  {
    href: "/admin/config/integration-sites",
    titleKey: "hub.integrationTitle",
    descKey: "hub.integrationDesc",
    requiredAny: PRD_INTEGRATION_ACCESS_ANY,
  },
];

export function ConfigHubScreen() {
  const { t } = useTranslation("config");
  const profile = useAdminProfile();
  const visible = HUB_CARDS.filter((card) =>
    adminHasAnyPermission(profile?.permissions, card.requiredAny),
  );

  return (
    <ModuleScaffold>
      <div className="mb-6 max-w-2xl">
        <h1 className="text-lg font-semibold tracking-tight">{t("hub.title")}</h1>
        <p className="mt-2 text-sm text-muted-foreground">{t("hub.description")}</p>
      </div>
      <div className="grid gap-4 sm:grid-cols-2">
        {visible.map((card) => (
          <Link key={card.href} href={card.href} className="group block">
            <Card className="h-full transition-colors hover:border-primary/40 hover:bg-muted/20">
              <CardHeader className="pb-2">
                <CardTitle className="flex items-center justify-between text-base">
                  {t(card.titleKey)}
                  <ChevronRight className="size-4 text-muted-foreground transition-transform group-hover:translate-x-0.5 group-hover:text-primary" />
                </CardTitle>
                <CardDescription>{t(card.descKey)}</CardDescription>
              </CardHeader>
              <CardContent />
            </Card>
          </Link>
        ))}
      </div>
    </ModuleScaffold>
  );
}