"use client";

import Link from "next/link";
import { AuthGuard } from "@/components/AuthGuard";
import { PageHeader, Card, CardContent, Button } from "@/components/ds";
import { LOYALTY_PORTALS } from "@/modules/loyalty/constants/portals";
import { LoyaltyServiceBadge, useLoyaltyHealth } from "@/modules/loyalty/pages/shared";

export function LoyaltyHub() {
  return (
    <AuthGuard>
      <LoyaltyHubInner />
    </AuthGuard>
  );
}

function LoyaltyHubInner() {
  const healthQ = useLoyaltyHealth();

  return (
    <div className="mx-auto max-w-6xl px-4 py-10 sm:px-6">
      <PageHeader
        title="تربت وفاداری"
        description="پلتفرم تعامل مشتری — عضویت، امتیاز، پاداش، کمپین، معرفی و کیف پول"
        actions={<LoyaltyServiceBadge />}
      />
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {LOYALTY_PORTALS.map((portal) => {
          const Icon = portal.icon;
          return (
            <Link key={portal.id} href={portal.basePath}>
              <Card className="h-full transition-all hover:border-[var(--loyalty-accent)]/40 hover:shadow-[var(--shadow-md)]">
                <CardContent className="flex h-full flex-col gap-4 pt-6">
                  <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[var(--loyalty-accent-soft)] text-[var(--loyalty-accent)]">
                    <Icon className="h-6 w-6" />
                  </div>
                  <div>
                    <p className="text-lg font-semibold text-secondary">{portal.label}</p>
                    <p className="mt-1 text-sm text-[var(--muted)]">{portal.description}</p>
                  </div>
                  <span className="mt-auto text-xs text-[var(--loyalty-accent)]">ورود ←</span>
                </CardContent>
              </Card>
            </Link>
          );
        })}
      </div>
      <div className="mt-8 flex flex-wrap gap-3">
        <Link href="/dashboard">
          <Button variant="ghost">workspace</Button>
        </Link>
        {healthQ.data ? (
          <span className="self-center text-xs text-[var(--muted)]">
            سرویس {healthQ.data.service} — نسخه {healthQ.data.version}
          </span>
        ) : null}
      </div>
    </div>
  );
}