'use client';

import type { UserRole } from '@/lib/constants/navigation';
import { useTranslation } from '@/lib/hooks/useTranslation';
import type { TranslationKeys } from '@/lib/i18n/translations';

interface RoleOption {
  role: UserRole;
  labelKey: keyof TranslationKeys['login'];
  descKey: keyof TranslationKeys['login'];
}

const roleOptions: RoleOption[] = [
  {
    role: 'Client_Portal',
    labelKey: 'clientPortalLabel',
    descKey: 'clientPortalDesc',
  },
  {
    role: 'Super_Admin',
    labelKey: 'superAdminLabel',
    descKey: 'superAdminDesc',
  },
  {
    role: 'Publisher_Admin',
    labelKey: 'publisherAdminLabel',
    descKey: 'publisherAdminDesc',
  },
  {
    role: 'Viewer',
    labelKey: 'viewerLabel',
    descKey: 'viewerDesc',
  },
];

interface RoleSelectorProps {
  selectedRole: UserRole | null;
  onSelect: (role: UserRole) => void;
}

/**
 * Role selection cards for the login page.
 *
 * Displays three cards — one per role — with name, description, and a
 * visual selected state using the Divisi accent color.
 */
export default function RoleSelector({ selectedRole, onSelect }: RoleSelectorProps) {
  const t = useTranslation();

  return (
    <div className="flex flex-col gap-3">
      {roleOptions.map(({ role, labelKey, descKey }) => {
        const isSelected = selectedRole === role;
        const label = t.login[labelKey];
        const description = t.login[descKey];
        return (
          <button
            key={role}
            type="button"
            onClick={() => onSelect(role)}
            className={`
              w-full text-left rounded-lg border p-4 transition-all duration-200
              cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-divisi-accent
              ${
                isSelected
                  ? 'border-divisi-accent bg-divisi-accent/10'
                  : 'border-divisi-border bg-divisi-card hover:border-divisi-accent/50 hover:bg-divisi-card/80'
              }
            `}
            aria-pressed={isSelected}
          >
            <div className="flex items-center justify-between">
              <span
                className={`text-sm font-semibold ${
                  isSelected ? 'text-divisi-accent' : 'text-divisi-text-primary'
                }`}
              >
                {label}
              </span>
              {isSelected && (
                <span className="flex h-5 w-5 items-center justify-center rounded-full bg-divisi-accent">
                  <svg
                    className="h-3 w-3 text-divisi-bg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    strokeWidth={3}
                  >
                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                  </svg>
                </span>
              )}
            </div>
            <p className="mt-1 text-xs text-divisi-text-secondary">{description}</p>
          </button>
        );
      })}
    </div>
  );
}