helix-engage/src/pages/login.tsx

import { useState } from 'react';
import { useNavigate } from 'react-router';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEye, faEyeSlash } from '@fortawesome/pro-duotone-svg-icons';
import { useAuth } from '@/providers/auth-provider';
import { useData } from '@/providers/data-provider';
import { Button } from '@/components/base/buttons/button';
import { SocialButton } from '@/components/base/buttons/social-button';
import { Checkbox } from '@/components/base/checkbox/checkbox';
import { Input } from '@/components/base/input/input';

export const LoginPage = () => {
    const { loginWithUser } = useAuth();
    const { refresh } = useData();
    const navigate = useNavigate();

    const saved = localStorage.getItem('helix_remember');
    const savedCreds = saved ? JSON.parse(saved) : null;

    const [email, setEmail] = useState(savedCreds?.email ?? '');
    const [password, setPassword] = useState(savedCreds?.password ?? '');
    const [showPassword, setShowPassword] = useState(false);
    const [rememberMe, setRememberMe] = useState(!!savedCreds);
    const [error, setError] = useState<string | null>(null);
    const [isLoading, setIsLoading] = useState(false);

    const handleSubmit = async (event: React.FormEvent) => {
        event.preventDefault();
        setError(null);

        if (!email || !password) {
            setError('Email and password are required');
            return;
        }

        setIsLoading(true);
        try {
            const { apiClient } = await import('@/lib/api-client');
            const response = await apiClient.login(email, password);

            // Build user from sidecar response
            const u = response.user;
            const firstName = u?.firstName ?? '';
            const lastName = u?.lastName ?? '';
            const name = `${firstName} ${lastName}`.trim() || email;
            const initials = `${firstName[0] ?? ''}${lastName[0] ?? ''}`.toUpperCase() || email[0].toUpperCase();

            if (rememberMe) {
                localStorage.setItem('helix_remember', JSON.stringify({ email, password }));
            } else {
                localStorage.removeItem('helix_remember');
            }

            loginWithUser({
                id: u?.id,
                name,
                initials,
                role: (u?.role ?? 'executive') as 'executive' | 'admin' | 'cc-agent',
                email: u?.email ?? email,
                avatarUrl: u?.avatarUrl,
                platformRoles: u?.platformRoles,
            });

            refresh();
            navigate('/');
        } catch (err: any) {
            setError(err.message);
            setIsLoading(false);
        }
    };

    const handleGoogleSignIn = () => {
        setError('Google sign-in not yet configured');
    };

    return (
        <div className="min-h-screen bg-brand-section flex flex-col items-center justify-center p-4">
            {/* Login Card */}
            <div className="w-full max-w-[420px] bg-primary rounded-xl shadow-xl p-8">
                {/* Logo */}
                <div className="flex flex-col items-center mb-8">
                    <img src="/helix-logo.png" alt="Helix Engage" className="size-12 rounded-xl mb-3" />
                    <h1 className="text-display-xs font-bold text-primary font-display">Sign in to Helix Engage</h1>
                    <p className="text-sm text-tertiary mt-1">Global Hospital</p>
                </div>

                {/* Google sign-in */}
                <SocialButton
                    social="google"
                    size="lg"
                    theme="gray"
                    type="button"
                    onClick={handleGoogleSignIn}
                    className="w-full rounded-xl py-3 border-2 border-secondary font-semibold hover:bg-secondary transition duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]"
                >
                    Sign in with Google
                </SocialButton>

                {/* Divider */}
                <div className="mt-5 mb-5 flex items-center gap-3">
                    <div className="flex-1 h-px bg-secondary" />
                    <span className="text-xs font-semibold text-quaternary tracking-wider uppercase">or continue with</span>
                    <div className="flex-1 h-px bg-secondary" />
                </div>

                {/* Form */}
                <form onSubmit={handleSubmit} className="flex flex-col gap-4" noValidate>
                    {error && (
                        <div className="rounded-lg bg-error-secondary p-3 text-sm text-error-primary">
                            {error}
                        </div>
                    )}

                    <Input
                        label="Email"
                        type="email"
                        placeholder="you@globalhospital.com"
                        value={email}
                        onChange={(value) => setEmail(value)}
                        size="md"
                    />

                    <div className="relative">
                        <Input
                            label="Password"
                            type={showPassword ? 'text' : 'password'}
                            placeholder="Enter your password"
                            value={password}
                            onChange={(value) => setPassword(value)}
                            size="md"
                        />
                        <button
                            type="button"
                            onClick={() => setShowPassword(!showPassword)}
                            className="absolute right-3 top-[38px] text-fg-quaternary hover:text-fg-secondary transition duration-100 ease-linear"
                            tabIndex={-1}
                        >
                            <FontAwesomeIcon icon={showPassword ? faEyeSlash : faEye} className="size-4" />
                        </button>
                    </div>

                    <div className="flex items-center justify-between">
                        <Checkbox
                            label="Remember me"
                            size="sm"
                            isSelected={rememberMe}
                            onChange={setRememberMe}
                        />
                        <button
                            type="button"
                            className="text-sm font-semibold text-brand-secondary hover:text-brand-secondary_hover transition duration-100 ease-linear"
                            onClick={() => setError('Password reset is not yet configured. Contact your administrator.')}
                        >
                            Forgot password?
                        </button>
                    </div>

                    <Button
                        type="submit"
                        size="lg"
                        color="primary"
                        isLoading={isLoading}
                        className="w-full rounded-xl py-3 font-semibold active:scale-[0.98] transition duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]"
                    >
                        Sign in
                    </Button>
                </form>
            </div>

            {/* Footer */}
            <a href="https://f0rty2.ai" target="_blank" rel="noopener noreferrer" className="mt-6 text-xs text-primary_on-brand opacity-60 hover:opacity-90 transition duration-100 ease-linear">Powered by F0rty2.ai</a>
        </div>
    );
};