import React, { useState, useRef, useEffect, type FormEvent } from "react";
import Button from "@mui/joy/Button";
import { toast } from "react-toastify";
import { API_URL } from "@/config";

function getCookie(name: string): string | null {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return decodeURIComponent(parts.pop()!.split(';').shift()!);
    return null;
}

function clearCookie(name: string): void {
    document.cookie = `${name}=; Max-Age=0; path=/;`;
}

// Trusted domains for redirect validation
const TRUSTED_DOMAINS = ['codey.lol', 'boatson.boats'];

/**
 * Parse and decode the redirect URL from query params
 */
function getRedirectParam(): string | null {
    const urlParams = new URLSearchParams(window.location.search);
    let redirectParam = urlParams.get('redirect') || urlParams.get('returnUrl');
    
    if (!redirectParam) return null;
    
    // Handle double-encoding
    if (redirectParam.includes('%')) {
        try {
            redirectParam = decodeURIComponent(redirectParam);
        } catch {
            // If decoding fails, use the original value
        }
    }
    return redirectParam;
}

/**
 * Check if a URL is a valid trusted external URL
 */
function isTrustedExternalUrl(url: string): boolean {
    try {
        const parsed = new URL(url);
        if (parsed.protocol !== 'https:') return false;
        return TRUSTED_DOMAINS.some(domain => 
            parsed.hostname === domain || parsed.hostname.endsWith('.' + domain)
        );
    } catch {
        return false;
    }
}

/**
 * Get validated redirect URL for POST-LOGIN redirect (after form submission)
 * Allows: relative paths OR trusted external URLs
 * This is safe because the user just authenticated fresh
 */
function getPostLoginRedirectUrl(): string {
    const redirectParam = getRedirectParam();
    if (!redirectParam) return '/';
    
    // Relative path: must start with '/' but not '//' (protocol-relative)
    if (redirectParam.startsWith('/') && !redirectParam.startsWith('//')) {
        return redirectParam;
    }
    
    // External URL: must be https and trusted domain
    if (isTrustedExternalUrl(redirectParam)) {
        return redirectParam;
    }
    
    return '/';
}

/**
 * Get validated redirect URL for AUTO-REDIRECT (when already logged in)
 * Only allows: relative paths
 * External URLs are BLOCKED because if a logged-in user was redirected here
 * from an external resource, nginx denied them access - redirecting back would loop
 */
function getAutoRedirectUrl(): string | null {
    const redirectParam = getRedirectParam();
    if (!redirectParam) return null;
    
    // Only allow relative paths for auto-redirect
    if (redirectParam.startsWith('/') && !redirectParam.startsWith('//')) {
        return redirectParam;
    }
    
    // Block external URLs - would cause redirect loop with nginx
    return null;
}

/**
 * Check if the returnUrl is an external trusted domain
 * Used to detect access denial from nginx-protected external vhosts
 */
function isExternalReturnUrl(): boolean {
    const redirectParam = getRedirectParam();
    if (!redirectParam) return false;
    if (redirectParam.startsWith('/')) return false;
    return isTrustedExternalUrl(redirectParam);
}

interface LoginPageProps {
    loggedIn?: boolean;
    accessDenied?: boolean;
    requiredRoles?: string[] | string;
}

export default function LoginPage({ loggedIn = false, accessDenied = false, requiredRoles = [] }: LoginPageProps): React.ReactElement {
    const [username, setUsername] = useState<string>("");
    const [password, setPassword] = useState<string>("");
    const [loading, setLoading] = useState<boolean>(false);

    const passwordRef = useRef<HTMLInputElement>(null);

    useEffect(() => {
        if (passwordRef.current && password === "") {
            passwordRef.current.value = "";
        }
    }, []);

    // If user is already logged in and not access denied, redirect them
    // This handles the case where token was refreshed successfully
    // NOTE: Only auto-redirect to relative URLs - external URLs mean nginx denied access
    useEffect(() => {
        if (loggedIn && !accessDenied) {
            const returnTo = getAutoRedirectUrl() || '/';
            window.location.href = returnTo;
        }
    }, [loggedIn, accessDenied]);

    async function handleSubmit(e: FormEvent<HTMLFormElement>): Promise<void> {
        e.preventDefault();
        setLoading(true);

        try {
            if (!username || !password) {
                setLoading(false);
                if (!toast.isActive("login-missing-data-toast")) {
                    toast.error("Username and password are required", {
                        toastId: "login-missing-data-toast",
                    });
                }
                return;
            }

            const formData = new URLSearchParams({
                username,
                password,
                grant_type: "password",
                scope: "",
                client_id: "b8308cf47d424e66",
                client_secret: "",
            });

            const resp = await fetch(`${API_URL}/auth/login`, {
                method: "POST",
                headers: { "Content-Type": "application/x-www-form-urlencoded" },
                credentials: "include",
                body: formData.toString(),
            });

            if (resp.status === 401) {
                toast.error("Invalid username or password", {
                    toastId: "login-error-invalid-toast",
                });
                setLoading(false);
                return;
            }

            if (!resp.ok) {
                const data = await resp.json().catch(() => ({}));
                toast.error(data.detail ? `Login failed: ${data.detail}` : "Login failed", {
                    toastId: "login-error-failed-toast",
                });
                setLoading(false);
                return;
            }

            const data = await resp.json();
            if (data.access_token) {
                toast.success("Login successful!", {
                    toastId: "login-success-toast",
                });
                // After fresh login, allow redirect to external trusted URLs
                const returnTo = getPostLoginRedirectUrl();
                window.location.href = returnTo;
            } else {
                toast.error("Login failed: no access token received", {
                    toastId: "login-error-no-token-toast",
                });
                setLoading(false);
            }
        } catch (error) {
            toast.error("Network error during login", {
                toastId: "login-error-network-toast",
            });
            console.error("Login error:", error);
            setLoading(false);
        }
    }

    if (loggedIn) {
        const rolesList = Array.isArray(requiredRoles) ? requiredRoles : (requiredRoles ? requiredRoles.split(',') : []);
        // Check if this is an external resource denial (nginx redirect)
        const isExternalDenial = rolesList.some(r => r === '(external resource)');
        const displayRoles = rolesList.filter(r => r !== '(external resource)');
        
        return (
            <div className="flex items-center justify-center px-4 py-16">
                <div className="max-w-md w-full bg-white dark:bg-[#1a1a1a] rounded-2xl shadow-xl shadow-neutral-900/5 dark:shadow-black/30 border border-neutral-200/60 dark:border-neutral-800/60 px-10 py-8 text-center">
                    <img className="logo-auth mx-auto mb-5" src="/images/zim.png" alt="Logo" />
                    <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-3 tracking-tight">Access Denied</h2>
                    <p className="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
                        You don't have permission to access this resource.
                    </p>
                    {displayRoles.length > 0 && (
                        <div className="mb-5 p-3 bg-neutral-100 dark:bg-neutral-800/50 rounded-xl border border-neutral-200/60 dark:border-neutral-700/60">
                            <p className="text-sm text-neutral-500 dark:text-neutral-500 mb-2 font-medium">Required role{displayRoles.length > 1 ? 's' : ''}:</p>
                            <div className="flex flex-wrap justify-center gap-2">
                                {displayRoles.map((role, i) => (
                                    <span key={i} className="px-2.5 py-1 text-xs font-semibold bg-red-100 dark:bg-red-900/40 text-red-700 dark:text-red-300 rounded-full">
                                        {role}
                                    </span>
                                ))}
                            </div>
                        </div>
                    )}
                    {isExternalDenial && displayRoles.length === 0 && (
                        <div className="mb-5 p-3 bg-amber-50 dark:bg-amber-900/20 rounded-xl border border-amber-200/60 dark:border-amber-700/40">
                            <p className="text-sm text-amber-700 dark:text-amber-300">
                                This resource requires elevated permissions.
                            </p>
                        </div>
                    )}
                    <p className="text-xs italic text-neutral-400 dark:text-neutral-500 mb-5">
                        If you believe this is an error, scream at codey.
                    </p>
                    <Button
                        className="w-full py-2.5 px-6 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 font-semibold rounded-xl hover:bg-neutral-800 dark:hover:bg-neutral-100 transition-colors shadow-sm"
                        color="primary"
                        variant="solid"
                        onClick={() => (window.location.href = "/")}
                    >
                        Go Home
                    </Button>
                </div>
            </div>
        );
    }

    return (
        <div className="flex items-center justify-center px-4 py-16">
            <div className="max-w-md w-full bg-white dark:bg-[#1a1a1a] rounded-2xl shadow-xl shadow-neutral-900/5 dark:shadow-black/30 border border-neutral-200/60 dark:border-neutral-800/60 px-10 py-8">
                <div className="text-center mb-8">
                    <img className="logo-auth mx-auto mb-4" src="/images/zim.png" alt="Logo" />
                    <h2 className="text-2xl font-bold text-neutral-900 dark:text-white tracking-tight">
                        Log In
                    </h2>
                    <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1">
                        Sign in to continue
                    </p>
                </div>

                <form className="space-y-5" onSubmit={handleSubmit} noValidate>
                    <div className="space-y-2">
                        <label htmlFor="username" className="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
                            Username
                        </label>
                        <input
                            type="text"
                            id="username"
                            name="username"
                            autoComplete="off"
                            value={username}
                            onChange={(e) => setUsername(e.target.value)}
                            required
                            disabled={loading}
                            className="w-full border border-neutral-200 dark:border-neutral-700 rounded-xl px-4 py-3 bg-white dark:bg-neutral-900/50 text-neutral-900 dark:text-white focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500/20 transition-all outline-none"
                            placeholder="Enter your username"
                        />
                    </div>

                    <div className="space-y-2">
                        <label htmlFor="password" className="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
                            Password
                        </label>
                        <input
                            type="password"
                            id="password"
                            name="password"
                            autoComplete="new-password"
                            spellCheck="false"
                            ref={passwordRef}
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            required
                            disabled={loading}
                            className="w-full border border-neutral-200 dark:border-neutral-700 rounded-xl px-4 py-3 bg-white dark:bg-neutral-900/50 text-neutral-900 dark:text-white focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500/20 transition-all outline-none"
                            placeholder="Enter your password"
                        />
                    </div>

                    <div className="pt-2">
                        <button
                            type="submit"
                            disabled={loading}
                            className={`w-full py-3 px-6 bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-500/30 text-white rounded-xl font-semibold shadow-sm transition-all ${loading ? "opacity-60 cursor-not-allowed" : ""}`}
                        >
                            {loading ? "Signing In..." : "Sign In"}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
}