import { Link } from 'react-router-dom';
import { ArrowRight } from 'lucide-react';
import { getRoleDisplayName, useAuth, type Role } from '@ump/shared';

import { ADMIN_NAV, ADMIN_NAV_GROUPS } from '../lib/adminNav';

export function DashboardPage() {
  const { user, roles, hasRole } = useAuth();
  const isAdmin = hasRole('admin');

  // Hub cards = every nav target except the hub itself, filtered by role.
  const visible = ADMIN_NAV.filter((n) => n.to !== '/' && (!n.adminOnly || isAdmin));

  return (
    <div className="space-y-8">
      <header className="space-y-1">
        <h1 className="font-serif text-2xl font-semibold tracking-tight">
          Bảng điều khiển Quản trị / Hội đồng
        </h1>
        <p className="text-sm text-muted-foreground">
          {user?.name ?? user?.email}
          {' · '}
          {roles.map((r: Role) => getRoleDisplayName(r)).join(', ') || '—'}
        </p>
      </header>

      {!isAdmin ? (
        <div className="rounded-lg border border-dashed bg-muted/30 p-6 text-sm text-muted-foreground">
          Tài khoản của bạn chưa có quyền quản trị. Nếu cần truy cập các chức năng quản trị,
          vui lòng liên hệ quản trị viên hệ thống.
        </div>
      ) : (
        ADMIN_NAV_GROUPS.map((group) => {
          const items = visible.filter((n) => n.group === group);
          if (!items.length) return null;
          return (
            <section key={group} className="space-y-3">
              <h2 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                {group}
              </h2>
              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                {items.map((card) => {
                  const Icon = card.icon;
                  return (
                    <Link
                      key={card.to}
                      to={card.to}
                      className="group flex flex-col gap-3 rounded-xl border bg-card p-5 transition-colors hover:border-primary/40 hover:bg-muted/40"
                    >
                      <div className="flex items-center justify-between">
                        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
                          <Icon className="h-5 w-5" />
                        </div>
                        <ArrowRight className="h-4 w-4 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
                      </div>
                      <div className="space-y-1">
                        <div className="flex items-center gap-2 font-medium">
                          {card.label}
                          {!card.ready && (
                            <span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-normal text-muted-foreground">
                              sắp có
                            </span>
                          )}
                        </div>
                        <p className="text-sm text-muted-foreground">{card.description}</p>
                      </div>
                    </Link>
                  );
                })}
              </div>
            </section>
          );
        })
      )}
    </div>
  );
}
