// src/pages/LoginPage.tsx
import { useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { useAuth } from '../context/AuthContext'
import api from '../api/axios'
import type { AuthResponse } from '../types'
import axios from 'axios'

const LoginPage = () => {
    // ── State ──────────────────────────────────────────
    const [email, setEmail] = useState<string>('')
    const [password, setPassword] = useState<string>('')
    const [error, setError] = useState<string>('')
    const [isLoading, setIsLoading] = useState<boolean>(false)

    // ── Hooks ──────────────────────────────────────────
    const { login } = useAuth()       // get login function from context
    const navigate = useNavigate()    // programmatic navigation

    // ── Submit Handler ─────────────────────────────────
    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault()
        setError('')        // clear previous errors
        setIsLoading(true)

        try {
            const response = await api.post<AuthResponse>('/auth/login', {
                email,
                password
            })
            login(response.data)       // save token + user to context
            navigate('/dashboard')     // redirect to dashboard
        } catch (err: unknown) {
            // Axios wraps errors — need to extract message
            if (axios.isAxiosError(err)) {
                setError(
                    err.response?.data?.message || 'Login failed'
                )
            } else {
                setError('Something went wrong')
            }
        } finally {
            setIsLoading(false)
        }
    }

    // ── UI ─────────────────────────────────────────────
    return (
        // Full screen centered layout
        <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">

            {/* Card container */}
            <div className="bg-white rounded-2xl shadow-sm border border-gray-200 w-full max-w-md p-8">

                {/* Header */}
                <div className="text-center mb-8">
                    <h1 className="text-2xl font-bold text-gray-900">
                        Welcome back
                    </h1>
                    <p className="text-gray-500 mt-2 text-sm">
                        Sign in to your account
                    </p>
                </div>

                {/* Error message */}
                {error && (
                    <div className="bg-red-50 text-red-600 text-sm px-4 py-3 rounded-lg mb-6">
                        {error}
                    </div>
                )}

                {/* Form */}
                <form onSubmit={handleSubmit} className="space-y-5">

                    {/* Email field */}
                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1.5">
                            Email
                        </label>
                        <input
                            type="email"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            placeholder="you@example.com"
                            required
                            className="w-full px-4 py-2.5 rounded-lg border border-gray-300 text-sm outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
                        />
                    </div>

                    {/* Password field */}
                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1.5">
                            Password
                        </label>
                        <input
                            type="password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            placeholder="••••••••"
                            required
                            className="w-full px-4 py-2.5 rounded-lg border border-gray-300 text-sm outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
                        />
                    </div>

                    {/* Submit button */}
                    <button
                        type="submit"
                        disabled={isLoading}
                        className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 disabled:cursor-not-allowed text-white font-medium py-2.5 px-4 rounded-lg text-sm transition"
                    >
                        {isLoading ? 'Signing in...' : 'Sign in'}
                    </button>

                </form>

                {/* Register link */}
                <p className="text-center text-sm text-gray-500 mt-6">
                    Don't have an account?{' '}
                    <Link
                        to="/register"
                        className="text-blue-600 hover:underline font-medium"
                    >
                        Register
                    </Link>
                </p>

            </div>
        </div>
    )
}

export default LoginPage