import { useAuth } from '@/auth/AuthProvider';
import { useState, type FormEvent } from 'react';

/**
 * Anmeldemaske.
 *
 * Die beiden fest verdrahteten Schaltflaechen "Svenja" und "Sascha" sind einem
 * Benutzernamensfeld gewichen -- Konten kommen jetzt aus der eigenen Datenbank
 * und werden in der Benutzerverwaltung gepflegt. Das uebrige Gestaltungsbild
 * bleibt unveraendert.
 */
export function LoginScreen() {
    const { signIn } = useAuth();
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');
    const [busy, setBusy] = useState(false);

    const submit = async (event: FormEvent) => {
        event.preventDefault();
        setBusy(true);
        setError('');

        try {
            await signIn(username.trim(), password);
        } catch (problem) {
            setError(problem instanceof Error ? problem.message : 'Die Anmeldung ist fehlgeschlagen.');
            setPassword('');
        } finally {
            setBusy(false);
        }
    };

    return (
        <main className="login-page">
            <div className="login-panel">
                <div className="login-brand" aria-label="Elektro Krüger – Wir setzen Sie unter Strom">
                    <strong>EK</strong>
                    <span>
                        <b>Elektro Krüger</b>
                        <small>Wir setzen Sie unter Strom</small>
                    </span>
                </div>
                <p className="login-kicker">EK-DOS</p>
                <h1>Willkommen</h1>
                <p className="login-copy">Bitte melde dich an, um die digitale Schaltzentrale zu öffnen.</p>
                <form onSubmit={submit}>
                    <label>
                        Benutzername
                        <input
                            type="text"
                            value={username}
                            onChange={(event) => setUsername(event.target.value)}
                            autoComplete="username"
                            autoFocus
                            required
                        />
                    </label>
                    <label>
                        Passwort
                        <input
                            type="password"
                            value={password}
                            onChange={(event) => setPassword(event.target.value)}
                            autoComplete="current-password"
                            required
                        />
                    </label>
                    {error && <p className="login-error">{error}</p>}
                    <button type="submit" disabled={busy}>
                        {busy ? 'Anmeldung läuft …' : 'Anmelden →'}
                    </button>
                </form>
            </div>
            <div className="login-visual">
                <img src="/hero-ek-dos.png" alt="" />
            </div>
        </main>
    );
}

export function LoadingScreen() {
    return (
        <main className="login-page">
            <div className="login-loading">EK-DOS wird geladen …</div>
        </main>
    );
}
