import React, { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { loginManagement } from '../api';

export default function ManagementLoginPage() {
  const [email, setEmail] = useState('');
  const [pw, setPw] = useState('');
  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState('');
  const navigate = useNavigate();

  const canSubmit = email.trim().length > 3 && pw.length >= 6 && !loading;

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!canSubmit) return;
    setLoading(true);
    setErr('');
    try {
      await loginManagement(email.trim(), pw);
      // Session-Cookie ist nun gesetzt -> ins Management-Dashboard
      navigate('/management', { replace: true });
    } catch (error) {
      setErr(error.message || 'Login fehlgeschlagen');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="relative min-h-screen w-full flex items-start md:items-center justify-center
                 bg-gradient-to-br from-[#000F2E] via-[#00246C] to-[#002D86] p-6 md:p-10"
    >
      <div className="w-full max-w-[640px]">

        {/* Kopf mit SVGs aus /public */}
        <div className="flex items-center justify-center gap-6 mb-8 select-none">
          <img src="/logo_grape.svg" alt="Trauben" className="w-12 h-12 md:w-14 md:h-14" draggable={false} />
          <h1 className="text-4xl md:text-5xl font-extrabold tracking-[0.25em] text-white">BACCHUS</h1>
          <img src="/logo_glass.svg" alt="Glas" className="w-12 h-12 md:w-14 md:h-14" draggable={false} />
        </div>

        {/* Karte */}
        <div className="rounded-2xl bg-[#00136C]/90 border border-[#2B2B45] ring-1 ring-[#0c2a36]/40 shadow-2xl p-6 md:p-8">
          <h2 className="text-white text-2xl font-bold mb-6 text-center">Management-Login</h2>

          <form onSubmit={onSubmit} className="space-y-5">
            <div>
              <label htmlFor="email" className="block text-sm font-semibold text-white/80 mb-2">
                E-Mail
              </label>
              <input
                id="email"
                type="email"
                autoComplete="username"
                className="w-full rounded-xl bg-[#22243a] border border-[#2B2B45] ring-1 ring-[#0c2a36]/40
                           px-4 py-3 text-white placeholder-white/40 outline-none
                           focus:border-[#3e4b7b] focus:ring-[#3e4b7b]"
                placeholder="admin@example.org"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                disabled={loading}
              />
            </div>

            <div>
              <label htmlFor="pw" className="block text-sm font-semibold text-white/80 mb-2">
                Passwort
              </label>
              <input
                id="pw"
                type="password"
                autoComplete="current-password"
                className="w-full rounded-xl bg-[#22243a] border border-[#2B2B45] ring-1 ring-[#0c2a36]/40
                           px-4 py-3 text-white placeholder-white/40 outline-none
                           focus:border-[#3e4b7b] focus:ring-[#3e4b7b]"
                placeholder="••••••••"
                value={pw}
                onChange={(e) => setPw(e.target.value)}
                disabled={loading}
              />
            </div>

            {err && (
              <div className="text-red-400 text-sm font-medium">
                {err}
              </div>
            )}

            <button
              type="submit"
              disabled={!canSubmit}
              className="w-full rounded-xl py-3 text-white text-lg font-bold
                         bg-[#0f6a37] hover:bg-[#117a3f] active:translate-y-[1px]
                         border border-[#0a3b20] ring-1 ring-[#0a3b20]/50
                         disabled:opacity-60 transition"
            >
              {loading ? 'Einloggen…' : 'Einloggen'}
            </button>
          </form>

          {/* Sekundäre Aktionen */}
          <div className="mt-6 flex items-center text-white/70 text-sm">
            <Link to="/" className="hover:text-white underline underline-offset-4">
              Zur PIN-Anmeldung
            </Link>
            <span className="text-white/50">
              
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}
