'use client';

import { useRouter } from 'next/navigation';
import { User, Shield, Crown, ArrowRight, CheckCircle } from 'lucide-react';
import { ROLE_CARD_INFO, type RoleType } from '@/utils/permissions';

const roleIconMap: Record<string, typeof User> = {
  User,
  Shield,
  Crown,
};

const roleGradientMap: Record<string, string> = {
  USER: 'from-blue-500/10 via-blue-500/5 to-transparent border-blue-500/20 hover:border-blue-500/40',
  ADMIN: 'from-indigo-500/10 via-indigo-500/5 to-transparent border-indigo-500/20 hover:border-indigo-500/40',
  SUPER_ADMIN: 'from-amber-500/10 via-amber-500/5 to-transparent border-amber-500/20 hover:border-amber-500/40',
};

const roleAccentMap: Record<string, string> = {
  USER: 'text-blue-400 bg-blue-500/10',
  ADMIN: 'text-indigo-400 bg-indigo-500/10',
  SUPER_ADMIN: 'text-amber-400 bg-amber-500/10',
};

const roleButtonMap: Record<string, string> = {
  USER: 'bg-blue-500/10 text-blue-400 hover:bg-blue-500/20 border-blue-500/20',
  ADMIN: 'bg-indigo-500/10 text-indigo-400 hover:bg-indigo-500/20 border-indigo-500/20',
  SUPER_ADMIN: 'bg-amber-500/10 text-amber-400 hover:bg-amber-500/20 border-amber-500/20',
};

interface RoleCardsProps {
  onSelectRole: (role: RoleType) => void;
  selectedRole: RoleType | null;
}

export function RoleCards({ onSelectRole, selectedRole }: RoleCardsProps) {
  const router = useRouter();

  const roles: RoleType[] = ['USER', 'ADMIN', 'SUPER_ADMIN'];

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
      {roles.map((role) => {
        const info = ROLE_CARD_INFO[role];
        const Icon = roleIconMap[info.icon] ?? User;

        return (
          <div
            key={role}
            className={`relative rounded-xl border bg-gradient-to-b ${roleGradientMap[role]} p-4 transition-all duration-300 cursor-pointer group ${
              selectedRole === role ? 'ring-2 ring-white/10 scale-[1.02]' : ''
            }`}
            onClick={() => onSelectRole(role)}
          >
            {/* Role Badge */}
            <div className="mb-3 flex items-center justify-between">
              <div className={`flex h-10 w-10 items-center justify-center rounded-lg ${roleAccentMap[role]}`}>
                <Icon className="h-5 w-5" />
              </div>
              {selectedRole === role && (
                <CheckCircle className="h-4 w-4 text-emerald-400" />
              )}
            </div>

            {/* Title & Description */}
            <h3 className="mb-1 text-sm font-bold text-white">{info.title}</h3>
            <p className="mb-3 text-[10px] leading-relaxed text-slate-400">
              {info.description}
            </p>

            {/* Capabilities */}
            <div className="mb-4 space-y-1">
              {info.capabilities.slice(0, 5).map((cap, i) => (
                <div key={i} className="flex items-center gap-1.5">
                  <div className="h-1 w-1 rounded-full bg-white/20" />
                  <span className="text-[9px] text-slate-500">{cap}</span>
                </div>
              ))}
              {info.capabilities.length > 5 && (
                <p className="text-[9px] text-slate-600">+{info.capabilities.length - 5} more...</p>
              )}
            </div>

            {/* Open Button */}
            <div className="flex gap-2">
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  onSelectRole(role);
                }}
                className={`flex flex-1 items-center justify-center gap-1.5 rounded-lg border px-3 py-2 text-[11px] font-medium transition-colors ${roleButtonMap[role]}`}
              >
                <span>Open {info.title}</span>
                <ArrowRight className="h-3.5 w-3.5" />
              </button>
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  router.push(info.route);
                }}
                className="rounded-lg border border-white/5 px-3 py-2 text-[11px] text-slate-400 hover:bg-white/5 hover:text-white transition-colors"
              >
                Live
              </button>
            </div>
          </div>
        );
      })}
    </div>
  );
}