import logo from './k9snifferlogo.png'; // Import the logo image
import React, { useState, useEffect } from 'react';
import { FaLock } from 'react-icons/fa'; // Import the lock icon from react-icons
import { BrowserRouter as Router, Route, Routes, Link, useNavigate } from 'react-router-dom'; // Used for setting up hyperlinks to other pages
import './App.css';
import SignUp from './SignUp';
import ForgotPassword from './ForgotPwd';
import Dashboard from './Dashboard';
import Settings from './Settings';
import SavedSessions from './SavedSessions';
import { AuthProvider, useAuth } from './authentication_context';



function SignIn() {

    const [credentials, setCredentials] = useState({ username: '', password: '', rememberMe: false });
    const { login } = useAuth();
    const [error, setError] = useState('');

    useEffect(() => {
        if (localStorage.getItem('user')) {
            const savedCredentials = localStorage.getItem('user');
            if (savedCredentials) {
                const parsedCredentials = JSON.parse(savedCredentials);
                setCredentials(parsedCredentials);
            }
        }
        }, []);

    const handleChange = (e) => {
        const { name, value } = e.target;
        setCredentials((prev) => ({ ...prev, [name]: value }));
    };

    const handleRememberMeChange = (e) => {
        const { checked } = e.target;
        setCredentials((prev) => ({ ...prev, rememberMe: checked })); // Update rememberMe in credentials
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            await login(credentials, credentials.rememberMe, login); // Assuming login takes username and password
            localStorage.setItem('user', JSON.stringify(credentials)); // Save credentials to local storage
            // Handle successful login (e.g., redirect or show success message)
        } catch (err) {
            setError('Login failed. Please try again.'); // Handle login error
        }
    };
    // The return statement describes what the UI should look like
    return (
    <div className="App-page">
        <div className="App-header-page">
            <img src={logo} className="App-logo" alt="logo" />
            <h1>Sign In</h1>
        </div>


        <div className="welcome">
            <p> Welcome! Please sign-in below to begin sniffing.</p>
        </div>


        <div className="signup">
            <p>Don't have an account? <Link to="/sign-up">Sign Up</Link></p>
        </div>


        <form onSubmit={handleSubmit} className="form">
                {/* Username Input */}
                <label htmlFor="username">Username</label>
                <input
                    type="text"
                    id="username"
                    name="username"
                    placeholder="Enter your username"
                    value={credentials.username}
                    onChange={handleChange}
                />

                {/* Password Input */}
                <label htmlFor="password">Password</label>
                <input
                    type="password"
                    id="password"
                    name="password"
                    placeholder="Enter your password"
                    value={credentials.password}
                    onChange={handleChange}
                />

                <div className="form-options">
                    <div className="remember-me">
                        <input type="checkbox" id="remember" name="remember" checked={credentials.rememberMe} onChange={handleRememberMeChange}/>
                        <label htmlFor="remember">Remember me</label>
                    </div>

                    {/* Forgot Password Link */}
                    <div className="forgot-password">
                        <Link to="/forgot-password">Forgot your password?</Link>
                    </div>
                </div>

                {error && <div className="error">{error}</div>}
                <div className="signin-button">
                    <button type="submit">
                        <FaLock /> Sign In
                    </button>
                </div>
            </form>
        </div>
    );
};


const ProtectedRoute = ({ component: Component }) => {
    const navigate = useNavigate();
    const { user } = useAuth();

    useEffect(() => {
        if (!user) {
            navigate('/');
        }
    }, [user, navigate]);

    return user ? <Component /> : null;
};

function App() {
    return (
        <AuthProvider>
                <Routes>
                    <Route path="/" element={<SignIn />} />
                    <Route path="/sign-up" element={<SignUp />} />
                    <Route path="/forgot-password" element={<ForgotPassword />} />
                    <Route path="/dashboard" element={<ProtectedRoute component={Dashboard} />} />
                    <Route path="/saved-sessions" element={<ProtectedRoute component={SavedSessions} />} />
                    <Route path="/settings" element={<ProtectedRoute component={Settings} />} />
                </Routes>
        </AuthProvider>
    );
}

export default App;