import { useState } from 'react';
import { useAuth } from '../../hooks/useAuth';
import { useNavigate } from 'react-router-dom';
import { Button, Card, Input, FormGroup, Label, ErrorMessage } from '../UI';
import { Link } from 'react-router-dom';

export default function Login() {
  const { login } = useAuth();
  const navigate = useNavigate();
  const [formData, setFormData] = useState({
    username: '',
    password: '',
  });
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    setIsLoading(true);

    try {
      const userData = await login(formData.username, formData.password);
      
      // Navigate based on user role
      if (userData.isAdmin) {
        navigate('/admin');
      } else {
        navigate('/dashboard'); // Navigate normal users to dashboard
      }
    } catch (err) {
      setError('Invalid username or password');
      console.error('Login error:', err);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="relative min-h-screen bg-gradient-to-br from-primary-900 to-primary-800 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
      {/* Pattern overlay with lower z-index */}
      <div className="absolute inset-0 bg-pattern opacity-5 z-0"></div>
      
      {/* Main content with higher z-index */}
      <Card className="relative z-10 max-w-md w-full bg-neutral-900/80 backdrop-blur-lg shadow-2xl 
        border border-neutral-800 rounded-xl">
        <div className="text-center mb-8">
          <h2 className="text-2xl font-semibold text-white">Sign in to your account</h2>
          <p className="text-sm text-neutral-300 mt-2">Welcome back! Please enter your details.</p>
        </div>

        {error && (
          <div className="mb-6 p-4 bg-red-500/10 border border-red-500/20 rounded-lg">
            <p className="text-red-200 text-sm">{error}</p>
          </div>
        )}

        <form onSubmit={handleSubmit} className="space-y-6">
          <FormGroup>
            <Label htmlFor="username" className="text-white">
              Username
            </Label>
            <Input
              id="username"
              type="text"
              required
              placeholder="Enter your username"
              value={formData.username}
              onChange={(e) => setFormData({ ...formData, username: e.target.value })}
              error={error}
              className="bg-neutral-800/50 border-neutral-700 text-white placeholder-neutral-400
                focus:border-primary-400 focus:ring-primary-400"
            />
          </FormGroup>

          <FormGroup>
            <div className="flex items-center justify-between">
              <Label htmlFor="password" className="text-white">
                Password
              </Label>
              {/* <Button
                variant="ghost"
                size="sm"
                onClick={() => navigate('/forgot-password')}
                className="text-neutral-300 hover:text-white"
              >
                Forgot password?
              </Button> */}
            </div>
            <Input
              id="password"
              type="password"
              required
              placeholder="Enter your password"
              value={formData.password}
              onChange={(e) => setFormData({ ...formData, password: e.target.value })}
              error={error}
              className="bg-neutral-800/50 border-neutral-700 text-white placeholder-neutral-400
                focus:border-primary-400 focus:ring-primary-400"
            />
          </FormGroup>

          <div>
            <button
              type="submit"
              disabled={isLoading}
              className="group relative w-full flex justify-center py-2 px-4 border
                border-transparent text-sm font-medium rounded-lg text-white
                bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2
                focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50
                disabled:cursor-not-allowed transition-colors"
            >
              {isLoading ? 'Signing in...' : 'Sign in'}
            </button>
          </div>

          <div className="flex items-center justify-between">
            <div className="text-sm">
              <Link
                to="/forgot-password"
                className="font-medium text-primary-400 hover:text-primary-300 transition-colors"
              >
                Forgot your password?
              </Link>
            </div>
          </div>
        </form>

        {/* <div className="mt-6 text-center">
          <p className="text-sm text-neutral-300">
            Don't have an account?{' '}
            <Button
              variant="ghost"
              size="sm"
              onClick={() => navigate('/register')}
              className="text-primary-400 hover:text-primary-300"
            >
              Sign up
            </Button>
          </p>
        </div> */}
      </Card>
    </div>
  );
} 