import React, { useState } from 'react';
import axios from 'axios';
import { Key, Lock, User, AlertCircle, Loader2 } from 'lucide-react';

interface LoginProps {
    onLoginSuccess: (user: any) => void;
    apiBase: string;
}

const Login: React.FC<LoginProps> = ({ onLoginSuccess, apiBase }) => {
    const [loginId, setLoginId] = useState('');
    const [password, setPassword] = useState('');
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setError('');
        setLoading(true);

        try {
            const res = await axios.post(`${apiBase}/auth/login`, { loginId, password });
            if (res.data.success) {
                onLoginSuccess(res.data.user);
            }
        } catch (err: any) {
            setError(err.response?.data?.error || '로그인에 실패했습니다.');
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="min-h-screen bg-[#F8FAFC] flex items-center justify-center font-['Pretendard','sans-serif'] p-4">
            <div className="max-w-md w-full bg-white rounded-3xl shadow-xl border border-slate-200 overflow-hidden transform transition-all">
                <div className="p-8">
                    <div className="flex flex-col items-center mb-8">
                        <div className="bg-indigo-600 p-4 rounded-2xl shadow-lg shadow-indigo-200 mb-4">
                            <Key className="text-white w-8 h-8" />
                        </div>
                        <h1 className="text-2xl font-black text-slate-800 tracking-tight">License Manager</h1>
                        <p className="text-sm text-slate-400 font-medium">관리자 계정으로 로그인해 주세요</p>
                    </div>

                    <form onSubmit={handleSubmit} className="space-y-4">
                        <div className="space-y-1.5">
                            <label className="block text-[11px] font-bold text-slate-400 uppercase tracking-wider ml-1">아이디</label>
                            <div className="relative group">
                                <div className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-300 group-focus-within:text-indigo-500 transition-colors">
                                    <User size={18} />
                                </div>
                                <input
                                    type="text"
                                    required
                                    value={loginId}
                                    onChange={(e) => setLoginId(e.target.value)}
                                    placeholder="Admin ID"
                                    className="w-full pl-12 pr-4 py-3.5 bg-slate-50 border border-slate-100 rounded-2xl focus:bg-white focus:ring-4 focus:ring-indigo-50 focus:border-indigo-500 outline-none transition-all text-sm font-medium"
                                />
                            </div>
                        </div>

                        <div className="space-y-1.5">
                            <label className="block text-[11px] font-bold text-slate-400 uppercase tracking-wider ml-1">비밀번호</label>
                            <div className="relative group">
                                <div className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-300 group-focus-within:text-indigo-500 transition-colors">
                                    <Lock size={18} />
                                </div>
                                <input
                                    type="password"
                                    required
                                    value={password}
                                    onChange={(e) => setPassword(e.target.value)}
                                    placeholder="Password"
                                    className="w-full pl-12 pr-4 py-3.5 bg-slate-50 border border-slate-100 rounded-2xl focus:bg-white focus:ring-4 focus:ring-indigo-50 focus:border-indigo-500 outline-none transition-all text-sm font-medium"
                                />
                            </div>
                        </div>

                        {error && (
                            <div className="flex items-center gap-2 p-3.5 bg-red-50 text-red-600 rounded-xl animate-shake">
                                <AlertCircle size={16} className="shrink-0" />
                                <span className="text-xs font-bold">{error}</span>
                            </div>
                        )}

                        <button
                            type="submit"
                            disabled={loading}
                            className="w-full bg-slate-900 text-white font-black py-4 rounded-2xl hover:bg-indigo-600 active:scale-[0.98] transition-all shadow-lg shadow-slate-200 disabled:opacity-50 disabled:scale-100 flex items-center justify-center gap-2 mt-4"
                        >
                            {loading ? (
                                <>
                                    <Loader2 size={20} className="animate-spin" />
                                    <span>로그인 중...</span>
                                </>
                            ) : (
                                <span>시스템 접속</span>
                            )}
                        </button>
                    </form>
                </div>
                <div className="bg-slate-50 p-6 text-center border-t border-slate-100">
                    <p className="text-[11px] text-slate-400 font-medium tracking-wide">
                        © 2024 Smart IMS Platform. All Rights Reserved.
                    </p>
                </div>
            </div>
        </div>
    );
};

export default Login;
