// login.jsx — Login via Supabase Auth (Phase 2)
function LoginScreen({ onLogin }) {
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [remember, setRemember] = React.useState(true);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');

  const submit = async (e) => {
    e.preventDefault();
    setError('');
    if (!email || !password) {
      setError('Bitte E-Mail und Passwort eingeben.');
      return;
    }
    if (!window.TF_DB) {
      setError('Konfiguration fehlt — shared/env.js pruefen.');
      return;
    }
    setLoading(true);
    try {
      await window.TF_DB.auth.signIn(email.trim(), password);
      const u = await window.TF_DB.auth.getCurrentUser();
      if (!u) {
        setError('Login erfolgreich, aber Session konnte nicht gelesen werden.');
        setLoading(false);
        return;
      }
      onLogin(u);
    } catch (err) {
      console.error('[login] signIn failed:', err);
      const msg = err?.message || 'Login fehlgeschlagen.';
      // Mappe Supabase-Errors auf benutzerfreundliche Texte
      if (/invalid login credentials/i.test(msg)) {
        setError('E-Mail oder Passwort falsch.');
      } else if (/email not confirmed/i.test(msg)) {
        setError('E-Mail noch nicht bestaetigt — Inbox pruefen.');
      } else {
        setError(msg);
      }
      setLoading(false);
    }
  };

  return (
    <div className="login-shell">
      <div className="login-bg"></div>
      <div className="login-card">
        <div className="login-logo">
          <img src="assets/logo.png" alt="Tattoo Fashion" />
          <div className="login-eyebrow">Studio Inbox</div>
        </div>
        <h1 className="login-title">Willkommen zurück</h1>
        <p className="login-subtitle">Melde dich an, um Kundenanfragen zu beantworten.</p>

        <form className="login-form" onSubmit={submit}>
          {error && (
            <div className="login-error">
              <Icon.Info width="14" height="14" />
              {error}
            </div>
          )}
          <div className="field">
            <label className="field-label">E-Mail</label>
            <input
              type="email"
              className="field-input"
              placeholder="name@tattoofashion.de"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              autoFocus
              autoComplete="email"
            />
          </div>
          <div className="field">
            <label className="field-label">Passwort</label>
            <input
              type="password"
              className="field-input"
              placeholder="••••••••"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              autoComplete="current-password"
            />
          </div>
          <div className="login-row">
            <label>
              <input
                type="checkbox"
                className="checkbox"
                checked={remember}
                onChange={(e) => setRemember(e.target.checked)}
              />
              Angemeldet bleiben
            </label>
            <a href="#" onClick={(e) => e.preventDefault()}>Passwort vergessen?</a>
          </div>
          <button type="submit" className="btn-primary" disabled={loading}>
            {loading ? 'Anmelden …' : 'Anmelden'}
          </button>
        </form>

        <div className="login-footer">
          TATTOO FASHION
          <span className="sep">·</span>
          STUDIO INBOX
          <span className="sep">·</span>
          v1.0
        </div>
      </div>
    </div>
  );
}
window.LoginScreen = LoginScreen;