import { useState, type FormEvent } from 'react';
import { ArrowRight, Eye, EyeOff, MessageSquare, ShieldCheck } from 'lucide-react';
import { Navigate } from 'react-router-dom';
import { useApp } from '../context/AppContext';
import { ApiError } from '../services/api';

export function LoginPage() {
    const { user, signIn, loading, error: contextError } = useApp();
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [visible, setVisible] = useState(false);
    const [busy, setBusy] = useState(false);
    const [error, setError] = useState('');
    if (!loading && user) return <Navigate to="/app/dashboard" replace />;

    async function submit(event: FormEvent) {
        event.preventDefault();
        setBusy(true);
        setError('');
        try {
            await signIn(email, password);
        } catch (cause) {
            setError(cause instanceof ApiError ? cause.message : 'Unable to sign in. Please try again.');
        } finally {
            setBusy(false);
        }
    }

    return (
        <div className="login-page">
            <div className="login-brand"><span className="brand-mark"><MessageSquare size={19} /></span><span>Relay<span className="brand-dot">.</span></span></div>
            <section className="login-card">
                <div className="login-icon"><ShieldCheck size={22} /></div>
                <div className="eyebrow">WELCOME BACK</div>
                <h1>Sign in to your workspace</h1>
                <p className="muted">Bring your customer conversations back in sync.</p>
                {contextError && <div role="alert" className="alert-error">{contextError}</div>}
                <form onSubmit={(event) => void submit(event)} className="login-form">
                    <label>Email address<input type="email" autoComplete="username" value={email} onChange={(event) => setEmail(event.target.value)} required placeholder="you@company.com" /></label>
                    <label>Password<span className="password-field"><input type={visible ? 'text' : 'password'} autoComplete="current-password" value={password} onChange={(event) => setPassword(event.target.value)} required placeholder="Enter your password" /><button type="button" onClick={() => setVisible((state) => !state)} aria-label={visible ? 'Hide password' : 'Show password'}>{visible ? <EyeOff size={17} /> : <Eye size={17} />}</button></span></label>
                    <a className="text-button" href="/reset-password">Forgot password?</a>
                    {error && <div role="alert" className="alert-error">{error}</div>}
                    <button className="button button-primary login-submit" disabled={busy}>{busy ? 'Signing in…' : 'Sign in'}{!busy && <ArrowRight size={17} />}</button>
                </form>
                <div className="login-foot">Secure workspace access <span>·</span> Powered by Relay</div>
            </section>
            <p className="login-copyright">© 2026 Relay workspace platform</p>
        </div>
    );
}