import { Component, createSignal, onMount, For, Show } from "solid-js"
import { Lock, User, LogIn, ShieldCheck, Cpu } from "lucide-solid"
import toast from "solid-toast"
import { isElectronHost } from "../../lib/runtime-env"
import { setActiveUserId } from "../../lib/user-context"

interface UserRecord {
    id: string
    name: string
    isGuest?: boolean
}

interface LoginViewProps {
    onLoginSuccess: (user: UserRecord) => void
}

const LoginView: Component<LoginViewProps> = (props) => {
    const [users, setUsers] = createSignal<UserRecord[]>([])
    const [username, setUsername] = createSignal("")
    const [password, setPassword] = createSignal("")
    const [isLoggingIn, setIsLoggingIn] = createSignal(false)
    const [isLoadingUsers, setIsLoadingUsers] = createSignal(true)

    const getApi = () => {
        const api = (window as any).electronAPI
        console.log("[LoginView] getApi:", api ? Object.keys(api) : "null")
        return api
    }

    onMount(async () => {
        console.log("[LoginView] onMount, isElectronHost:", isElectronHost())
        try {
            if (isElectronHost()) {
                const api = getApi()
                if (api && api.listUsers) {
                    const userList = await api.listUsers()
                    console.log("[LoginView] listUsers result:", userList)
                    if (userList && Array.isArray(userList)) {
                        setUsers(userList)
                        if (userList.length > 0) {
                            setUsername(userList[0].name)
                        }
                    }
                } else {
                    console.error("[LoginView] listUsers method not found on API")
                    toast.error("API bridge incomplete")
                }
            } else {
                setUsername("web-explorer")
            }
        } catch (error) {
            console.error("Failed to fetch users:", error)
            toast.error("Failed to load identities")
        } finally {
            setIsLoadingUsers(false)
        }
    })

    const handleLogin = async (e: Event) => {
        e.preventDefault()
        const name = username().trim()
        console.log("[LoginView] handleLogin called, name:", name)
        if (!name) {
            toast.error("Identity required")
            return
        }

        setIsLoggingIn(true)
        try {
            console.log("[LoginView] isElectronHost:", isElectronHost())
            if (isElectronHost()) {
                const api = getApi()
                if (!api || !api.listUsers || !api.loginUser) {
                    toast.error("API bridge not ready")
                    return
                }

                console.log("[LoginView] Fetching users...")
                const userList = await api.listUsers()
                if (!userList || !Array.isArray(userList)) {
                    toast.error("Bridge failure: try restarting")
                    return
                }

                console.log("[LoginView] Users found:", userList.map((u: any) => u.name))
                const user = userList.find((u: UserRecord) => u.name.toLowerCase() === name.toLowerCase())

                if (!user) {
                    toast.error(`Identity "${name}" not found`)
                    return
                }

                console.log("[LoginView] Attempting login for:", user.id)
                const result = await api.loginUser({
                    id: user.id,
                    password: password(),
                })

                console.log("[LoginView] Login result:", result)
                if (result?.success) {
                    toast.success(`Welcome back, ${result.user.name}!`)
                    setActiveUserId(result.user.id)
                    props.onLoginSuccess(result.user)
                } else {
                    toast.error("Invalid key for this identity")
                }
            } else {
                console.log("[LoginView] Web mode login")
                toast.success("Web mode access granted")
                props.onLoginSuccess({ id: "web-user", name: "Web Explorer" })
            }
        } catch (error) {
            console.error("Login failed:", error)
            toast.error("Decryption failed: check your key")
        } finally {
            setIsLoggingIn(false)
        }
    }

    return (
        <div class="fixed inset-0 z-[9999] flex items-center justify-center bg-[#0a0a0a]">
            {/* Dynamic Background */}
            <div class="absolute inset-0 overflow-hidden pointer-events-none opacity-20">
                <div class="absolute -top-[10%] -left-[10%] w-[40%] h-[40%] bg-blue-500/20 blur-[120px] rounded-full animate-pulse" />
                <div class="absolute -bottom-[10%] -right-[10%] w-[40%] h-[40%] bg-purple-500/20 blur-[120px] rounded-full animate-pulse delay-700" />
            </div>

            <div class="relative w-full max-w-md px-6 py-12 bg-[#141414]/80 backdrop-blur-xl border border-white/10 rounded-3xl shadow-2xl">
                {/* Logo & Header */}
                <div class="flex flex-col items-center mb-10">
                    <div class="w-20 h-20 mb-6 bg-gradient-to-br from-blue-500 via-indigo-600 to-purple-700 p-0.5 rounded-2xl shadow-lg transform rotate-3">
                        <div class="w-full h-full bg-[#141414] rounded-2xl flex items-center justify-center">
                            <Cpu class="w-10 h-10 text-white" />
                        </div>
                    </div>
                    <h1 class="text-3xl font-bold text-white tracking-tight mb-2">NomadArch</h1>
                    <p class="text-gray-400 text-sm">Secure Neural Access Point</p>
                </div>

                <form onSubmit={handleLogin} class="space-y-6">
                    {/* User Selection */}
                    <div class="space-y-2">
                        <label class="text-xs font-semibold text-gray-500 uppercase tracking-wider ml-1">Identity</label>
                        <div class="relative group">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <User class="w-5 h-5 text-gray-500 group-focus-within:text-blue-500 transition-colors" />
                            </div>
                            <input
                                type="text"
                                placeholder="Username"
                                value={username()}
                                onInput={(e) => setUsername(e.currentTarget.value)}
                                class="block w-full pl-12 pr-4 py-4 bg-[#1a1a1a] border border-white/5 rounded-2xl text-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500/50 transition-all cursor-text"
                                list="identity-suggestions"
                            />
                            <datalist id="identity-suggestions">
                                <For each={users()}>
                                    {(user) => <option value={user.name} />}
                                </For>
                            </datalist>
                        </div>
                    </div>

                    {/* Password Input */}
                    <div class="space-y-2">
                        <label class="text-xs font-semibold text-gray-500 uppercase tracking-wider ml-1">Access Key</label>
                        <div class="relative group">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <Lock class="w-5 h-5 text-gray-500 group-focus-within:text-blue-500 transition-colors" />
                            </div>
                            <input
                                type="password"
                                placeholder="Enter password..."
                                value={password()}
                                onInput={(e) => setPassword(e.currentTarget.value)}
                                required
                                class="block w-full pl-12 pr-4 py-4 bg-[#1a1a1a] border border-white/5 rounded-2xl text-white placeholder-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500/50 transition-all font-mono"
                            />
                        </div>
                    </div>

                    <button
                        type="submit"
                        disabled={isLoggingIn() || !username()}
                        class="w-full flex items-center justify-center gap-3 py-4 bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 text-white font-bold rounded-2xl shadow-xl shadow-blue-900/20 transform active:scale-[0.98] transition-all disabled:opacity-50 disabled:cursor-not-allowed group"
                    >
                        <Show when={isLoggingIn()} fallback={
                            <>
                                <ShieldCheck class="w-5 h-5 group-hover:scale-110 transition-transform" />
                                <span>Verify Identity</span>
                            </>
                        }>
                            <div class="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                            <span>Decrypting...</span>
                        </Show>
                    </button>
                </form>

                <div class="mt-8 text-center text-xs text-gray-600">
                    Powered by Antigravity OS v4.5 | Encrypted Connection
                </div>
            </div>
        </div>
    )
}

export default LoginView
