import { Wifi } from 'lucide-react';

import type { CampusInfo } from '@/shared/types/app';

interface SidebarCampusRolePanelProps {
  readonly collapsed: boolean;
  readonly campusInfo?: CampusInfo;
  readonly campusInitial: string | null;
  readonly roleLabel: string;
}

export function SidebarCampusRolePanel({
  collapsed,
  campusInfo,
  campusInitial,
  roleLabel,
}: SidebarCampusRolePanelProps) {
  if (collapsed) {
    if (!campusInfo || !campusInitial) {
      return null;
    }

    return (
      <div className="p-2 border-t border-slate-700/50 flex justify-center">
        <div
          className={`w-9 h-9 rounded-lg bg-gradient-to-br ${campusInfo.bgGradient} flex items-center justify-center shadow-md`}
          title={campusInfo.fullName}
        >
          <span className="text-white font-bold text-xs">{campusInitial}</span>
        </div>
      </div>
    );
  }

  return (
    <div className="p-3 border-t border-slate-700/50 space-y-2">
      {campusInfo && campusInitial && (
        <div className={`${campusInfo.bgLight} rounded-xl p-3 border ${campusInfo.borderColor}`}>
          <div className="flex items-center gap-2">
            <div className={`w-8 h-8 rounded-lg bg-gradient-to-br ${campusInfo.bgGradient} flex items-center justify-center shadow-md`}>
              <span className="text-white font-bold text-xs">{campusInitial}</span>
            </div>
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-1">
                <p className={`text-sm font-bold ${campusInfo.textColor}`}>{campusInfo.mascot}</p>
                {campusInfo.isOnline && <Wifi size={10} className={campusInfo.textColor} />}
              </div>
              <p className="text-[10px] text-slate-500 truncate">{campusInfo.fullName}</p>
            </div>
          </div>
        </div>
      )}

      <div className="bg-gradient-to-r from-violet-500/10 to-amber-500/10 rounded-xl p-3 border border-violet-500/10">
        <p className="text-[10px] text-slate-500 uppercase tracking-wider">Your Role</p>
        <p className="text-sm font-semibold text-violet-400">{roleLabel}</p>
      </div>
    </div>
  );
}
