import { CheckCircle2, Shield } from 'lucide-react';
import type { ReactNode } from 'react';

import type {
  SignInModalActions,
  SignInModalState,
} from '@/components/sign-in-modal/types';
import type { UserRole } from '@/shared/types/app';

const ROLE_OPTIONS: readonly {
  readonly value: UserRole;
  readonly label: string;
  readonly desc: string;
  readonly color: string;
  readonly icon: ReactNode;
}[] = [
  { value: 'teacher', label: 'Teacher', desc: 'Classroom educator', color: 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400', icon: <PeopleIcon /> },
  { value: 'support_staff', label: 'Support Staff', desc: 'Paraprofessional', color: 'border-blue-500/30 bg-blue-500/10 text-blue-400', icon: <PeopleIcon /> },
  { value: 'office_manager', label: 'Office Manager', desc: 'Administrative staff', color: 'border-amber-500/30 bg-amber-500/10 text-amber-400', icon: <OfficeIcon /> },
  { value: 'director', label: 'Director', desc: 'Campus leadership', color: 'border-purple-500/30 bg-purple-500/10 text-purple-400', icon: <Shield size={24} /> },
  { value: 'superintendent', label: 'Superintendent', desc: 'District-wide oversight', color: 'border-rose-500/30 bg-rose-500/10 text-rose-400', icon: <DistrictIcon /> },
];

type SignupRoleStepProps = {
  state: SignInModalState;
  actions: SignInModalActions;
};

export function SignupRoleStep({ state, actions }: SignupRoleStepProps) {
  return (
    <div className="space-y-3">
      <p className="text-xs text-slate-500 mb-3">Choose the role that best describes your position. This determines which modules and features you&apos;ll have access to.</p>
      <div className="grid grid-cols-1 gap-3">
        {ROLE_OPTIONS.map((option) => (
          <button
            key={option.value}
            type="button"
            onClick={() => actions.setRole(option.value)}
            className={`p-4 rounded-xl border-2 text-left transition-all duration-200 flex items-center gap-4 ${
              state.draft.role === option.value
                ? `${option.color} ring-1 ring-current scale-[1.01] shadow-lg`
                : 'border-slate-700/50 bg-slate-800/50 text-slate-400 hover:border-slate-600/50 hover:bg-slate-800'
            }`}
          >
            <div className={`w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 ${
              state.draft.role === option.value ? 'bg-current/20' : 'bg-slate-700/50'
            }`}>
              {option.icon}
            </div>
            <div className="flex-1">
              <p className="text-sm font-bold">{option.label}</p>
              <p className="text-xs opacity-70 mt-0.5">{option.desc}</p>
            </div>
            {state.draft.role === option.value && <CheckCircle2 size={20} className="flex-shrink-0" />}
          </button>
        ))}
      </div>
    </div>
  );
}

function PeopleIcon() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
      <circle cx="9" cy="7" r="4" />
      <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
      <path d="M16 3.13a4 4 0 0 1 0 7.75" />
    </svg>
  );
}

function OfficeIcon() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
      <line x1="8" y1="21" x2="16" y2="21" />
      <line x1="12" y1="17" x2="12" y2="21" />
    </svg>
  );
}

function DistrictIcon() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 2L2 7l10 5 10-5-10-5z" />
      <path d="M2 17l10 5 10-5" />
      <path d="M2 12l10 5 10-5" />
    </svg>
  );
}
