import { CheckCircle2, Wifi } from 'lucide-react';

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

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

export function SignupCampusStep({ state, actions }: SignupCampusStepProps) {
  if (state.campusesLoading) {
    return (
      <div className="rounded-xl border border-slate-700/50 bg-slate-800/50 p-4 text-sm text-slate-300">
        Loading campuses...
      </div>
    );
  }

  if (state.campusesError) {
    return (
      <div className="rounded-xl border border-red-500/30 bg-red-500/10 p-4 text-sm text-red-200">
        {state.campusesError}
      </div>
    );
  }

  return (
    <div className="space-y-3">
      <p className="text-xs text-slate-500 mb-3">Select your campus mascot. Your dashboard will be customized to show only information relevant to your campus site.</p>
      <div className="grid grid-cols-2 gap-3">
        {state.campuses.map((campus) => (
          <button
            key={campus.id}
            type="button"
            onClick={() => actions.setCampus(campus.id)}
            className={`relative p-4 rounded-xl border-2 text-center transition-all duration-300 group ${
              state.selectedCampusId === campus.id
                ? `${campus.borderColor} ${campus.bgLight} ${campus.textColor} ring-1 ring-current scale-[1.02] shadow-lg`
                : 'border-slate-700/50 bg-slate-800/50 text-slate-400 hover:border-slate-600/50 hover:bg-slate-800'
            }`}
          >
            {campus.isOnline && (
              <div className="absolute top-2 right-2">
                <Wifi size={12} className={state.selectedCampusId === campus.id ? campus.textColor : 'text-slate-600'} />
              </div>
            )}
            <div className={`mx-auto mb-2 ${state.selectedCampusId === campus.id ? campus.textColor : 'text-slate-500'} transition-colors`}>
              <MascotIcon mascot={campus.id} size={48} />
            </div>
            <p className="text-sm font-bold">{campus.mascot}</p>
            <p className="text-[10px] opacity-60 mt-0.5">{campus.description}</p>
            {campus.isOnline && (
              <span className={`inline-block mt-1.5 text-[9px] font-semibold px-2 py-0.5 rounded-full ${
                state.selectedCampusId === campus.id ? `${campus.bgLight} ${campus.textColor}` : 'bg-slate-700/50 text-slate-500'
              }`}>
                ONLINE
              </span>
            )}
            {state.selectedCampusId === campus.id && (
              <div className="absolute -top-1 -right-1">
                <div className={`w-5 h-5 rounded-full bg-gradient-to-r ${campus.bgGradient} flex items-center justify-center shadow-lg`}>
                  <CheckCircle2 size={12} className="text-white" />
                </div>
              </div>
            )}
          </button>
        ))}
      </div>
    </div>
  );
}
