import { Mail, Shield, User } from 'lucide-react';

import { getAuthRoleLabel } from '@/business/auth/selectors';
import { MascotIcon } from '@/components/sign-in-modal/MascotIcon';
import type { SignInModalState } from '@/components/sign-in-modal/types';

type AccountSummaryProps = {
  state: SignInModalState;
};

export function AccountSummary({ state }: AccountSummaryProps) {
  const { draft, selectedCampusId } = state;
  const selectedCampusInfo = selectedCampusId ? state.campuses.find((campus) => campus.id === selectedCampusId) : null;

  if (!draft.fullName && !draft.role) {
    return null;
  }

  return (
    <div className="mt-4 p-3 rounded-xl bg-slate-800/60 border border-slate-700/30">
      <p className="text-[10px] text-slate-500 uppercase tracking-wider font-semibold mb-2">Account Summary</p>
      <div className="space-y-1.5">
        <div className="flex items-center gap-2 text-xs">
          <User size={12} className="text-slate-500" />
          <span className="text-slate-400">{draft.fullName}</span>
        </div>
        <div className="flex items-center gap-2 text-xs">
          <Mail size={12} className="text-slate-500" />
          <span className="text-slate-400">{draft.email}</span>
        </div>
        <div className="flex items-center gap-2 text-xs">
          <Shield size={12} className="text-slate-500" />
          <span className="text-slate-400">{getAuthRoleLabel(draft.role)}</span>
        </div>
        {selectedCampusInfo && (
          <div className="flex items-center gap-2 text-xs">
            <div className={selectedCampusInfo.textColor}>
              <MascotIcon mascot={selectedCampusInfo.id} size={14} />
            </div>
            <span className={`${selectedCampusInfo.textColor} font-semibold`}>{selectedCampusInfo.mascot}</span>
            {selectedCampusInfo.isOnline && <span className="text-[9px] text-slate-500">(Online)</span>}
          </div>
        )}
      </div>
    </div>
  );
}
