"use client";

import { useEffect, useState } from "react";
import { useMutation } from "@tanstack/react-query";
import { auth } from "@/lib/api";
import { Button, Card } from "@/components/ui";
import { Logo } from "@/components/Logo";
import { NetworkBackground } from "@/components/NetworkBackground";

export default function LoginPage() {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [instanceName, setInstanceName] = useState("");

    useEffect(() => {
        (async () => {
            try {
                const s = await auth.bootstrapStatus();
                if (s.needs_setup) {
                    window.location.href = "/setup";
                    return;
                }
                if (s.instance_name) setInstanceName(s.instance_name);
            } catch {}
            try {
                await auth.me();
                window.location.href = "/";
            } catch {}
        })();
    }, []);

    const {
        mutate: signIn,
        isPending,
        error,
    } = useMutation({
        mutationFn: () => auth.login(email, password),
        onSuccess: () => {
            window.location.href = "/";
        },
    });

    function handleSubmit(e: React.FormEvent) {
        e.preventDefault();
        signIn();
    }

    return (
        <div className="relative flex min-h-screen items-center justify-center p-4">
            <NetworkBackground />
            <div className="relative w-full max-w-sm">
                <div className="mb-8 flex flex-col items-center gap-3">
                    <Logo className="h-11 w-auto text-text-primary" />
                    <h1 className="text-2xl font-semibold text-text-primary">Sign in to Vantage</h1>
                    <h4 className="font-semibold text-text-secondary">Instance: {instanceName}</h4>
                </div>

                <Card>
                    <form onSubmit={handleSubmit} className="space-y-4">
                        <div>
                            <label htmlFor="email" className="mb-1.5 block text-sm font-medium text-text-secondary">
                                Email
                            </label>
                            <input
                                id="email"
                                type="email"
                                required
                                autoComplete="username"
                                value={email}
                                onChange={(e) => setEmail(e.target.value)}
                                className="w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary focus:border-accent/50 focus:outline-none focus:ring-1 focus:ring-accent/30"
                            />
                        </div>

                        <div>
                            <label htmlFor="password" className="mb-1.5 block text-sm font-medium text-text-secondary">
                                Password
                            </label>
                            <input
                                id="password"
                                type="password"
                                required
                                autoComplete="current-password"
                                value={password}
                                onChange={(e) => setPassword(e.target.value)}
                                className="w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary focus:border-accent/50 focus:outline-none focus:ring-1 focus:ring-accent/30"
                            />
                        </div>

                        {error && <div className="rounded-lg border border-danger/30 bg-danger/10 px-3 py-2 text-sm text-danger">{(error as Error).message}</div>}

                        <Button type="submit" variant="primary" loading={isPending} className="w-full justify-center">
                            Sign In
                        </Button>
                    </form>

                    <div className="my-5 flex items-center gap-3">
                        <div className="h-px flex-1 bg-border" />
                        <span className="text-xs uppercase tracking-wider text-text-tertiary">or</span>
                        <div className="h-px flex-1 bg-border" />
                    </div>

                    <a href="/auth/oidc/start" className="block">
                        <Button type="button" variant="secondary" className="w-full justify-center">
                            Sign in with your instance&apos;s SSO
                        </Button>
                    </a>
                    <p className="mt-3 text-center text-xs text-text-tertiary">SSO must be enabled for this instance by an administrator.</p>
                </Card>
            </div>
        </div>
    );
}
