'use client';

import { LogIn, LogOut, User, Shield, Building2 } from 'lucide-react';
import type { LoginMode } from '../types';

interface LoginSectionProps {
  loginMode: LoginMode;
  loggingIn: boolean;
  onDemoLogin: (role: LoginMode) => void;
  onLogout: () => void;
}

export function LoginSection({ loginMode, loggingIn, onDemoLogin, onLogout }: LoginSectionProps) {
  const loginOptions = [
    { mode: 'driver' as LoginMode, label: 'Driver', icon: User, color: 'primary-blue', emoji: null },
    { mode: 'league-owner' as LoginMode, label: 'League Owner', icon: null, color: 'purple-500', emoji: '👑' },
    { mode: 'league-steward' as LoginMode, label: 'Steward', icon: Shield, color: 'amber-500', emoji: null },
    { mode: 'league-admin' as LoginMode, label: 'Admin', icon: null, color: 'red-500', emoji: '⚙️' },
    { mode: 'sponsor' as LoginMode, label: 'Sponsor', icon: Building2, color: 'performance-green', emoji: null },
    { mode: 'system-owner' as LoginMode, label: 'System Owner', icon: null, color: 'indigo-500', emoji: '👑' },
    { mode: 'super-admin' as LoginMode, label: 'Super Admin', icon: null, color: 'pink-500', emoji: '⚡' },
  ];

  return (
    <div>
      <div className="flex items-center gap-2 mb-3">
        <LogIn className="w-4 h-4 text-gray-400" />
        <span className="text-xs font-semibold text-gray-400 uppercase tracking-wide">
          Demo Login
        </span>
      </div>

      <div className="space-y-2">
        {loginOptions.map((option) => {
          const Icon = option.icon;
          const isSelected = loginMode === option.mode;

          return (
            <button
              key={option.mode}
              onClick={() => onDemoLogin(option.mode)}
              disabled={loggingIn || isSelected}
              className={`
                w-full flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-all
                ${isSelected
                  ? `bg-${option.color}/20 border-${option.color}/50 text-${option.color}`
                  : 'bg-iron-gray/30 border-charcoal-outline text-gray-300 hover:bg-iron-gray/50'
                }
                disabled:opacity-50 disabled:cursor-not-allowed
              `}
            >
              {option.emoji ? (
                <span className="text-xs">{option.emoji}</span>
              ) : Icon ? (
                <Icon className="w-4 h-4" />
              ) : null}
              {isSelected ? `✓ ${option.label}` : `Login as ${option.label}`}
            </button>
          );
        })}

        {loginMode !== 'none' && (
          <button
            onClick={onLogout}
            disabled={loggingIn}
            className="w-full flex items-center gap-2 px-3 py-2 rounded-lg border border-red-500/30 bg-red-500/10 text-red-400 text-sm font-medium hover:bg-red-500/20 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <LogOut className="w-4 h-4" />
            Logout
          </button>
        )}
      </div>

      <p className="text-[10px] text-gray-600 mt-2">
        Test different user roles for demo purposes. Dashboard works for all roles.
      </p>
    </div>
  );
}