import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { useAuth } from '@/hooks/useAuth';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { Loader2, Github, Mail, Lock, User, Layers, ArrowRight, Sparkles, Zap, Database, GitBranch, Shield } from 'lucide-react';
import { cn } from '@/lib/utils';
export default function Login() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [isRegister, setIsRegister] = useState(false);
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [error, setError] = useState('');
    const { login, register, isLoading } = useAuth();
    const handleSubmit = async (e) => {
        e.preventDefault();
        setError('');
        try {
            if (isRegister) {
                await register(email, password, `${firstName} ${lastName}`);
            }
            else {
                await login(email, password);
            }
        }
        catch (err) {
            setError(err instanceof Error ? err.message : 'Authentication failed');
        }
    };
    const handleGitHubAuth = () => {
        console.log('GitHub OAuth not implemented yet');
    };
    return (_jsxs("div", { className: "min-h-screen flex", children: [_jsxs("div", { className: "hidden lg:flex lg:w-1/2 relative overflow-hidden bg-gradient-to-br from-primary/5 via-background to-background", children: [_jsx("div", { className: "absolute inset-0 dot-grid opacity-50 dark:opacity-30" }), _jsx("div", { className: "absolute top-0 right-0 w-2/3 h-2/3 radial-glow" }), _jsx("div", { className: "absolute bottom-0 left-0 w-1/2 h-1/2 radial-glow-bottom" }), _jsx("div", { className: "absolute inset-0 mesh-gradient" }), _jsx("div", { className: "absolute top-20 right-20 w-72 h-72 bg-primary/10 rounded-full blur-[100px] animate-float" }), _jsx("div", { className: "absolute bottom-20 left-20 w-56 h-56 bg-violet-500/10 rounded-full blur-[80px] animate-float", style: { animationDelay: '-2s' } }), _jsxs("div", { className: "relative z-10 flex flex-col justify-between p-10 w-full", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-11 h-11 bg-gradient-to-br from-primary via-primary to-primary/90 rounded-xl flex items-center justify-center shadow-glow logo-glow", children: _jsx(Layers, { className: "w-6 h-6 text-primary-foreground" }) }), _jsxs("div", { children: [_jsx("h1", { className: "text-xl font-bold tracking-tight", children: "Containr" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Self-hosted PaaS" })] })] }), _jsxs("div", { className: "space-y-10", children: [_jsxs("div", { children: [_jsxs("h2", { className: "text-4xl font-bold leading-[1.1] mb-4", children: ["Deploy your apps", _jsx("br", {}), _jsx("span", { className: "gradient-text-vivid", children: "in seconds" })] }), _jsx("p", { className: "text-lg text-muted-foreground max-w-md leading-relaxed", children: "A powerful platform for managing containers, databases, and infrastructure with zero-config deployments." })] }), _jsx("div", { className: "space-y-3", children: [
                                            { title: 'Zero-config deployments', description: 'Push to deploy with automatic builds', icon: Zap },
                                            { title: 'Managed databases', description: 'PostgreSQL, Redis, and more', icon: Database },
                                            { title: 'Automatic scaling', description: 'Scale up or down based on demand', icon: GitBranch },
                                            { title: 'Built-in monitoring', description: 'Real-time metrics and logs', icon: Shield },
                                        ].map((feature, index) => (_jsxs("div", { className: cn("flex items-start gap-3 p-3 rounded-xl bg-card/60 backdrop-blur-sm border border-border/40", "animate-fade-in-up hover:bg-card/80 transition-colors duration-300"), style: { animationDelay: `${index * 100}ms` }, children: [_jsx("div", { className: "p-2 rounded-lg bg-primary/10", children: _jsx(feature.icon, { className: "w-4 h-4 text-primary" }) }), _jsxs("div", { children: [_jsx("p", { className: "font-medium text-sm", children: feature.title }), _jsx("p", { className: "text-xs text-muted-foreground", children: feature.description })] })] }, feature.title))) })] }), _jsxs("div", { className: "flex items-center gap-4 text-sm text-muted-foreground", children: [_jsx("div", { className: "flex -space-x-2", children: [...Array(4)].map((_, i) => (_jsx("div", { className: "w-7 h-7 rounded-full bg-gradient-to-br from-primary/20 to-primary/5 border-2 border-background flex items-center justify-center text-[10px] font-medium", children: String.fromCharCode(65 + i) }, i))) }), _jsx("span", { children: "Trusted by developers worldwide" })] })] })] }), _jsxs("div", { className: "flex-1 flex items-center justify-center p-6 sm:p-8 relative", children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-primary/5" }), _jsxs("div", { className: "w-full max-w-md relative z-10 animate-fade-in", children: [_jsxs("div", { className: "lg:hidden flex flex-col items-center mb-8", children: [_jsx("div", { className: "w-14 h-14 bg-gradient-to-br from-primary via-primary to-primary/90 rounded-xl flex items-center justify-center shadow-glow mb-4", children: _jsx(Layers, { className: "w-7 h-7 text-primary-foreground" }) }), _jsx("h1", { className: "text-2xl font-bold", children: "Containr" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Self-hosted container platform" })] }), _jsxs(Card, { className: "border-0 shadow-elevated glass-heavy", children: [_jsxs(CardHeader, { className: "space-y-1 pb-4 text-center", children: [_jsx(CardTitle, { className: "text-xl font-semibold", children: isRegister ? 'Create an account' : 'Welcome back' }), _jsx(CardDescription, { children: isRegister
                                                    ? 'Enter your details to create your account'
                                                    : 'Sign in to your account to continue' })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs(Button, { variant: "outline", className: "w-full gap-2 h-11 font-medium hover:bg-muted/50 transition-colors", onClick: handleGitHubAuth, children: [_jsx(Github, { className: "w-5 h-5" }), "Continue with GitHub"] }), _jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute inset-0 flex items-center", children: _jsx(Separator, { className: "w-full" }) }), _jsx("div", { className: "relative flex justify-center text-[10px] uppercase", children: _jsx("span", { className: "bg-card px-3 text-muted-foreground font-medium", children: "Or continue with" }) })] }), _jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [error && (_jsx(Alert, { variant: "destructive", className: "text-sm", children: _jsx(AlertDescription, { children: error }) })), isRegister && (_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "first-name", className: "text-xs font-medium", children: "First Name" }), _jsxs("div", { className: "relative", children: [_jsx(User, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), _jsx(Input, { id: "first-name", type: "text", value: firstName, onChange: (e) => setFirstName(e.target.value), placeholder: "John", required: isRegister, className: "pl-10 h-10" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "last-name", className: "text-xs font-medium", children: "Last Name" }), _jsx(Input, { id: "last-name", type: "text", value: lastName, onChange: (e) => setLastName(e.target.value), placeholder: "Doe", required: isRegister, className: "h-10" })] })] })), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "email", className: "text-xs font-medium", children: "Email" }), _jsxs("div", { className: "relative", children: [_jsx(Mail, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), _jsx(Input, { id: "email", type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: "you@example.com", required: true, className: "pl-10 h-10" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "password", className: "text-xs font-medium", children: "Password" }), _jsxs("div", { className: "relative", children: [_jsx(Lock, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), _jsx(Input, { id: "password", type: "password", value: password, onChange: (e) => setPassword(e.target.value), placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", required: true, className: "pl-10 h-10" })] })] }), _jsxs(Button, { type: "submit", className: "w-full gap-2 h-11 btn-shine bg-gradient-to-r from-primary to-primary/90 hover:from-primary/95 hover:to-primary/85 font-medium", disabled: isLoading, children: [isLoading && _jsx(Loader2, { className: "w-4 h-4 animate-spin" }), isRegister ? 'Create Account' : 'Sign In', _jsx(ArrowRight, { className: "w-4 h-4" })] })] }), _jsxs("div", { className: "text-center text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: isRegister ? 'Already have an account?' : "Don't have an account?" }), ' ', _jsx("button", { type: "button", onClick: () => {
                                                            setIsRegister(!isRegister);
                                                            setError('');
                                                        }, className: "text-primary hover:underline font-medium", children: isRegister ? 'Sign in' : 'Sign up' })] }), _jsx(Separator, {}), _jsxs("button", { type: "button", onClick: () => {
                                                    setError('');
                                                    localStorage.setItem('demoMode', 'true');
                                                    window.location.href = '/';
                                                }, className: "w-full flex items-center justify-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors p-2.5 rounded-xl hover:bg-muted/50 group", children: [_jsx(Sparkles, { className: "w-4 h-4 group-hover:text-primary transition-colors" }), _jsx("span", { children: "Try Demo Mode" })] })] })] }), _jsxs("p", { className: "text-center text-[11px] text-muted-foreground mt-6", children: ["By continuing, you agree to our", ' ', _jsx("a", { href: "#", className: "underline hover:text-foreground", children: "Terms" }), " and", ' ', _jsx("a", { href: "#", className: "underline hover:text-foreground", children: "Privacy Policy" }), "."] })] })] })] }));
}
