import React, { useState } from "react";
import axios from "axios";
import { useNavigate, Link } from "react-router-dom"; 
import { frontendConfig } from "../change";

export default function Login({ onLoginSuccess }) {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const navigate = useNavigate();

  const handleLogin = async (e) => {
    e.preventDefault();
    setError("");
    try {
      const res = await axios.post("http://localhost:5000/api/auth/login", { username, password });
      
      if (res.data.success) {
        localStorage.setItem("isAuthenticated", "true");
        localStorage.setItem("username", res.data.username);
        
        if (onLoginSuccess) {
          onLoginSuccess();
        }
        navigate("/dashboard");
      }
    } catch (err) {
      setError(err.response?.data?.error || "Connection failure to auth server.");
    }
  };

  return (
    <div className="min-h-[80vh] flex items-center justify-center p-4">
      <div className="bg-white p-8 rounded-2xl shadow-sm border border-slate-100 max-w-md w-full border-t-4 border-indigo-600">
        
        <h2 className="text-3xl font-black text-center text-slate-900 mb-2 tracking-tight">
          {frontendConfig.appName || "SchoolFees Hub"}
        </h2>
        
        <p className="text-center text-sm text-slate-500 mb-6 font-medium">
          Sign in to manage academic collection records
        </p>
        
        {error && (
          <div className="bg-rose-50 text-rose-600 text-xs font-bold p-3 rounded-xl mb-4 border border-rose-100">
            ⚠️ {error}
          </div>
        )}
        
        <form onSubmit={handleLogin} className="space-y-4">
          <div className="space-y-1">
            <label className="block text-xs font-bold text-slate-700 uppercase tracking-wide">
              Username
            </label>
            <input 
              type="text" 
              required 
              value={username} 
              onChange={(e) => setUsername(e.target.value)} 
              placeholder="Enter your system username..."
              className="w-full border border-slate-200 p-2.5 rounded-xl focus:outline-none focus:border-indigo-500 text-slate-800 text-sm font-medium transition-colors" 
            />
          </div>

          <div className="space-y-1">
            <label className="block text-xs font-bold text-slate-700 uppercase tracking-wide">
              Password
            </label>
            <input 
              type="password" 
              required 
              value={password} 
              onChange={(e) => setPassword(e.target.value)} 
              placeholder="••••••••"
              className="w-full border border-slate-200 p-2.5 rounded-xl focus:outline-none focus:border-indigo-500 text-slate-800 text-sm font-medium transition-colors" 
            />
          </div>

          <button 
            type="submit" 
            className="w-full bg-slate-950 text-white py-3 rounded-xl font-bold hover:bg-indigo-600 transition-all text-sm mt-2 shadow-sm"
          >
            Authenticate Profile
          </button>
        </form>

        <div className="text-center mt-6 text-xs text-slate-400 font-bold uppercase tracking-wider border-t border-slate-100 pt-4">
          New operator terminal?{" "}
          <Link to="/register" className="text-indigo-600 hover:text-indigo-700 font-black tracking-normal normal-case ml-1">
            Create account profile →
          </Link>
        </div>

      </div>
    </div>
  );
}