import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuthStore } from '@/stores/authStore';
import { useUIStore } from '@/stores/uiStore';
import LoginLayout from '@/components/layout/LoginLayout';
import { Users, Lock, Eye, EyeOff, Loader2 } from 'lucide-react';
import type { UserRole } from '@/types';

interface Props {
  role: UserRole;
}

export default function AssistantLoginScreen({ role }: Props) {
  const navigate = useNavigate();
  const { login, isLoading } = useAuthStore();
  const { showToast } = useUIStore();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [shake, setShake] = useState(false);

  const handleLogin = async () => {
    if (!username || !password) {
      showToast({ type: 'error', message: 'Please fill in all fields' });
      return;
    }
    const success = await login(role, username, password);
    if (success) {
      navigate('/app');
    } else {
      setShake(true);
      setTimeout(() => setShake(false), 500);
      showToast({ type: 'error', message: 'Invalid credentials' });
    }
  };

  const fillDemo = () => {
    setUsername(role);
    setPassword(`${role}123`);
  };

  return (
    <LoginLayout
      topIcon={<Users className="w-8 h-8 text-white" />}
      title="Assistant Coach"
      subtitle="Attendance, timing & students"
      backUrl="/"
    >
      <div className={`space-y-5 ${shake ? 'animate-shake' : ''}`}>
        {/* Username */}
        <div>
          <label className="block text-xs font-bold text-gray-500 mb-2 uppercase tracking-wider">Username</label>
          <div className="relative">
            <div className="absolute left-4 top-1/2 -translate-y-1/2 w-8 h-8 bg-orange-50 rounded-lg flex items-center justify-center">
              <Users className="w-4 h-4 text-orange-500" />
            </div>
            <input
              type="text"
              value={username}
              onChange={e => setUsername(e.target.value)}
              placeholder="Enter coach username"
              className="w-full h-14 pl-14 pr-4 bg-gray-50 border border-gray-100 rounded-2xl text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:border-orange-400 focus:bg-white focus:ring-4 focus:ring-orange-500/10 transition-all"
            />
          </div>
        </div>

        {/* Password */}
        <div>
          <label className="block text-xs font-bold text-gray-500 mb-2 uppercase tracking-wider">Password</label>
          <div className="relative">
            <div className="absolute left-4 top-1/2 -translate-y-1/2 w-8 h-8 bg-orange-50 rounded-lg flex items-center justify-center">
              <Lock className="w-4 h-4 text-orange-500" />
            </div>
            <input
              type={showPassword ? 'text' : 'password'}
              value={password}
              onChange={e => setPassword(e.target.value)}
              placeholder="Enter password"
              className="w-full h-14 pl-14 pr-12 bg-gray-50 border border-gray-100 rounded-2xl text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:border-orange-400 focus:bg-white focus:ring-4 focus:ring-orange-500/10 transition-all"
            />
            <button
              onClick={() => setShowPassword(!showPassword)}
              className="absolute right-4 top-1/2 -translate-y-1/2 w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
            >
              {showPassword ? <EyeOff className="w-4 h-4 text-gray-400" /> : <Eye className="w-4 h-4 text-gray-400" />}
            </button>
          </div>
        </div>

        {/* Login Button - Orange gradient */}
        <button
          onClick={handleLogin}
          disabled={isLoading}
          className="w-full h-14 brand-gradient text-white font-bold text-base rounded-2xl button-shadow flex items-center justify-center gap-2 active:scale-[0.97] transition-all disabled:opacity-70 mt-2"
        >
          {isLoading ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Login as Coach'}
        </button>

        {/* Demo shortcut */}
        <button
          onClick={fillDemo}
          className="w-full py-3.5 border-2 border-orange-100 text-orange-500 font-semibold rounded-2xl text-sm hover:bg-orange-50 hover:border-orange-200 transition-all"
        >
          Use Demo: assistant / assistant123
        </button>
      </div>

      <style>{`
        @keyframes shake {
          0%, 100% { transform: translateX(0); }
          20% { transform: translateX(-12px); }
          40% { transform: translateX(12px); }
          60% { transform: translateX(-8px); }
          80% { transform: translateX(8px); }
        }
        .animate-shake { animation: shake 0.5s ease-in-out; }
      `}</style>
    </LoginLayout>
  );
}
