import { useState } from 'react';
import Logo from '../components/Logo';

export default function Admin() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const [loggedIn, setLoggedIn] = useState(false);

  function login(e: React.FormEvent) {
    e.preventDefault();
    setError('');
    if (!username || !password) {
      setError('Bitte Benutzername und Passwort eingeben');
      return;
    }
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      setLoggedIn(true);
    }, 1200);
  }

  return (
    <div className="max-w-md mx-auto px-4 py-16">
      <div className="hms-card p-8">
        <div className="text-center mb-6">
          <Logo size={48} />
          <h1 className="text-xl font-bold mt-4" style={{ color: 'var(--text)' }}>Admin-Login</h1>
          <p className="text-sm mt-1" style={{ color: 'var(--secondary)' }}>Equipment-Sync Verwaltungsbereich</p>
        </div>
        {loggedIn ? (
          <div className="text-center py-8" role="status">
            <div className="inline-flex items-center justify-center w-12 h-12 rounded-full mb-3" style={{ background: 'var(--color-success-bg)', color: 'var(--color-success)' }}>
              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"/></svg>
            </div>
            <p className="font-medium" style={{ color: 'var(--text)' }}>Eingeloggt</p>
            <p className="text-xs mt-1" style={{ color: 'var(--secondary)' }}>(Prototyp – keine echte Session)</p>
          </div>
        ) : (
          <form onSubmit={login} noValidate>
            <div className="space-y-4">
              <div>
                <label htmlFor="admin-user" className="block text-sm font-medium mb-1" style={{ color: 'var(--text-muted)' }}>Benutzername</label>
                <input id="admin-user" value={username} onChange={e => setUsername(e.target.value)} type="text" className="hms-input" placeholder="admin" aria-invalid={!!error} />
              </div>
              <div>
                <label htmlFor="admin-pass" className="block text-sm font-medium mb-1" style={{ color: 'var(--text-muted)' }}>Passwort</label>
                <input id="admin-pass" value={password} onChange={e => setPassword(e.target.value)} type="password" className="hms-input" placeholder="••••••••" aria-invalid={!!error} />
              </div>
              {error && <p className="text-xs" style={{ color: 'var(--color-error)' }} role="alert">{error}</p>}
              <button type="submit" disabled={loading} className="hms-btn hms-btn-primary w-full py-3">
                {loading ? <span className="hms-spinner" style={{ width: 18, height: 18, borderWidth: 2 }} /> : <span>Einloggen</span>}
              </button>
            </div>
          </form>
        )}
      </div>
    </div>
  );
}
