import React, { useState } from 'react';
import { useAuth } from '../context/AuthContext';
import { useNavigate } from 'react-router-dom';
import { ChevronLeft } from 'lucide-react';

export const Login: React.FC = () => {
  const [nip, setNip] = useState('');
  const [pass, setPass] = useState('');
  const [error, setError] = useState('');
  const { login, loading } = useAuth();
  const navigate = useNavigate();

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    const res = await login(nip, pass);
    if (res.success) {
      navigate('/dashboard');
    } else {
      setError(res.message || 'Login failed');
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center p-4 bg-dark">
      <div className="w-full max-w-md bg-card border border-gray-800 rounded-xl p-8 shadow-2xl relative">
        
        {/* Back Button */}
        <button 
          onClick={() => navigate('/')} 
          className="absolute top-4 left-4 text-slate-500 hover:text-accent transition-colors flex items-center gap-1 text-xs font-bold uppercase"
        >
          <ChevronLeft size={16} /> Kembali
        </button>

        <div className="text-center mb-8 mt-4">
           <div className="w-16 h-16 bg-gradient-to-br from-yellow-400 to-orange-600 rounded-full flex items-center justify-center font-bold text-black font-oswald text-3xl mx-auto mb-4 shadow-lg shadow-orange-500/20">
            S
          </div>
          <h2 className="text-2xl font-oswald text-white mb-1">LOGIN GURU</h2>
          <p className="text-slate-400 text-sm">Silakan masuk untuk melanjutkan</p>
        </div>

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

        <form onSubmit={handleLogin} className="space-y-4">
          <div>
            <label className="block text-xs font-bold text-slate-400 uppercase mb-1">NIP / ID User</label>
            <input
              type="text" 
              value={nip}
              onChange={(e) => setNip(e.target.value)}
              className="w-full bg-dark border border-gray-700 rounded-lg p-3 text-white focus:outline-none focus:border-accent transition-colors placeholder-gray-600"
              placeholder="Masukkan NIP atau 'admin'..."
              required
            />
          </div>
          <div>
            <label className="block text-xs font-bold text-slate-400 uppercase mb-1">Password</label>
            <input
              type="password"
              value={pass}
              onChange={(e) => setPass(e.target.value)}
              className="w-full bg-dark border border-gray-700 rounded-lg p-3 text-white focus:outline-none focus:border-accent transition-colors placeholder-gray-600"
              placeholder="Masukkan Password..."
              required
            />
          </div>
          <button
            type="submit"
            disabled={loading}
            className="w-full bg-gradient-to-r from-yellow-500 to-orange-600 text-black font-bold font-oswald py-3 rounded-lg hover:from-yellow-400 hover:to-orange-500 transition-all shadow-lg transform hover:-translate-y-0.5 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {loading ? 'MEMVERIFIKASI...' : 'MASUK SISTEM'}
          </button>
        </form>
        
        <div className="mt-8 text-center border-t border-gray-800 pt-6">
          <p className="text-xs text-slate-600">
            Lupa password? Hubungi Administrator.
          </p>
        </div>
      </div>
    </div>
  );
};