// LoginScreen v2 — KW Birlik Cockpit
// Liquid Glass · Aurora ısı halesi · Mouse parallax · Spring physics
// Backend auth: POST /api/auth/login (KW.login client) · Fallback mock if offline
// Backend .env'de KW_USERNAME=nesetb · KW_PASSWORD=Qw11012001

// 05:00 İstanbul — bir sonraki 05:00'i ms olarak hesapla (offline fallback)
const next0500 = () => {
  const now = new Date();
  const tgt = new Date(now);
  tgt.setHours(5, 0, 0, 0);
  if (tgt <= now) tgt.setDate(tgt.getDate() + 1);
  return tgt.getTime();
};

const EyeIcon = ({ open }) => open ?
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
    <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z" /><circle cx="12" cy="12" r="3" />
  </svg> :

<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
    <path d="M17.94 17.94A10.94 10.94 0 0 1 12 19c-6.5 0-10-7-10-7a18.4 18.4 0 0 1 4.22-5.06" />
    <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c6.5 0 10 7 10 7a18.5 18.5 0 0 1-2.16 3.19" />
    <path d="M14.12 14.12a3 3 0 1 1-4.24-4.24" /><path d="M2 2l20 20" />
  </svg>;


const UserIcon = () =>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" />
  </svg>;

const LockIcon = () =>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
    <rect x="3" y="11" width="18" height="11" rx="2" ry="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" />
  </svg>;

const SunsetIcon = () =>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 10V2" /><path d="m4.93 10.93 1.41 1.41" /><path d="M2 18h2" /><path d="M20 18h2" />
    <path d="m19.07 10.93-1.41 1.41" /><path d="M22 22H2" /><path d="m8 6 4-4 4 4" /><path d="M16 18a4 4 0 0 0-8 0" />
  </svg>;

const ArrowIcon = () =>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M5 12h14" /><path d="m12 5 7 7-7 7" />
  </svg>;


const LoginScreen = ({ onSuccess }) => {
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [showPw, setShowPw] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [loading, setLoading] = React.useState(false);
  const [success, setSuccess] = React.useState(false);
  const cardRef = React.useRef(null);
  const userRef = React.useRef(null);
  const passRef = React.useRef(null);

  // Auto-focus username after mount animation
  React.useEffect(() => {
    const t = setTimeout(() => userRef.current?.focus(), 600);
    return () => clearTimeout(t);
  }, []);

  // Mouse parallax — 3D card tilt
  React.useEffect(() => {
    let raf = 0;
    const onMove = (e) => {
      const card = cardRef.current;if (!card) return;
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        const rect = card.getBoundingClientRect();
        const x = (e.clientX - (rect.left + rect.width / 2)) / rect.width;
        const y = (e.clientY - (rect.top + rect.height / 2)) / rect.height;
        const rx = Math.max(-3, Math.min(3, -y * 3));
        const ry = Math.max(-3, Math.min(3, x * 3));
        card.style.transform = `perspective(1200px) rotateX(${rx}deg) rotateY(${ry}deg) translateZ(0)`;
      });
    };
    const onLeave = () => {
      const card = cardRef.current;if (!card) return;
      card.style.transform = 'perspective(1200px) rotateX(0deg) rotateY(0deg) translateZ(0)';
    };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseleave', onLeave);
    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseleave', onLeave);
      cancelAnimationFrame(raf);
    };
  }, []);

  // ⌘+L → refocus username
  React.useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'l') {
        e.preventDefault();
        userRef.current?.focus();
        userRef.current?.select();
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const handleEsc = (which) => (e) => {
    if (e.key === 'Escape') {
      if (which === 'pass') setPassword('');else
      userRef.current?.blur();
    }
  };

  const submit = async (e) => {
    e?.preventDefault();
    if (loading) return;
    setLoading(true);setError(null);

    let data = null;
    // Username case-insensitive (lowercase + trim) — şifre olduğu gibi (case-sensitive)
    const cleanUser = username.trim().toLowerCase();
    try {
      // Backend (.env'de KW_USERNAME/KW_PASSWORD/KW_AUTH_TOKEN olmalı)
      data = await window.KW.login(cleanUser, password);
      // Backend response: { token, expiresAt: ISO string, displayName }
    } catch (err) {
      const msg = String(err.message || '');
      const lower = msg.toLowerCase();
      // 401 = backend tarafından kimlik reddedildi (gerçek hata)
      const isAuthRejection = lower.includes('401') || lower.includes('unauthorized')
        || lower.includes('hatalı');
      // Network / sunucu erişim hataları → mock fallback (dev)
      // 404 (eski backend süreci, yeni endpoint yok) / 5xx / failed to fetch / network
      const isInfrastructureFail = !isAuthRejection && (
        lower.includes('failed to fetch')
        || lower.includes('network')
        || lower.includes('404')
        || lower.includes('500')
        || lower.includes('502')
        || lower.includes('503')
        || lower.includes('504')
        || lower.includes('login failed:')
      );
      if (isInfrastructureFail) {
        // Offline / eski backend süreci → mock fallback (development)
        console.warn('[login] backend unreachable, mock fallback:', msg);
        await new Promise((r) => setTimeout(r, 400));
        if (cleanUser === 'nesetb' && password === 'Qw11012001') {
          data = {
            token: 'kw_mock_' + Date.now(),
            expiresAt: new Date(next0500()).toISOString(),
            displayName: 'Neşet',
          };
        } else {
          setError('Kullanıcı adı veya şifre hatalı.');
          setPassword('');
          setLoading(false);
          setTimeout(() => passRef.current?.focus(), 50);
          return;
        }
      } else if (isAuthRejection) {
        setError('Kullanıcı adı veya şifre hatalı.');
        setPassword('');
        setLoading(false);
        setTimeout(() => passRef.current?.focus(), 50);
        return;
      } else {
        // Bilinmeyen hata
        setError('Sunucu hatası: ' + msg);
        setPassword('');
        setLoading(false);
        setTimeout(() => passRef.current?.focus(), 50);
        return;
      }
    }

    try {
      localStorage.setItem('kw_token', data.token);
      // expiresAt ISO ya da ms olabilir → her ikisini destekle
      const expIso = typeof data.expiresAt === 'number'
        ? new Date(data.expiresAt).toISOString()
        : data.expiresAt;
      localStorage.setItem('kw_expires_at', expIso);
      localStorage.setItem('kw_display_name', data.displayName || 'Neşet');
    } catch {}

    setLoading(false);
    setSuccess(true);
    // Card fade-out → onSuccess
    setTimeout(() => onSuccess?.(data), 720);
  };

  const canSubmit = username.trim().length > 0 && password.length > 0 && !loading;

  return (
    <div className={`login-screen ${success ? 'is-success' : ''}`}>
      <div className="login-aurora" aria-hidden="true"></div>
      <div className="login-grain" aria-hidden="true"></div>

      <form
        className={`login-card ${success ? 'fade-out' : ''}`}
        ref={cardRef}
        onSubmit={submit}
        action="/api/auth/login"
        method="POST"
        autoComplete="on">
        
        {/* Brand row */}
        <div className="login-brand">
          <div className="login-mark">KW</div>
          <div className="login-brand-text">
            <div className="login-brand-name">KW Birlik</div>
            <div className="login-brand-sub">Group Executive Cockpit</div>
          </div>
        </div>

        <div className="login-divider" aria-hidden="true"></div>

        {/* H1 + sub */}
        <h1 className="login-h1">Hoş geldin Neşet</h1>
        <p className="login-sub">
          Komuta merkezine girmek için kullanıcı adınızı ve şifrenizi girin.
        </p>

        {/* Username */}
        <label className="login-field">
          <span className="login-label">KULLANICI ADI</span>
          <div className="login-input-wrap">
            <span className="login-input-icon"><UserIcon /></span>
            <input
              ref={userRef}
              type="text"
              name="username"
              autoComplete="username"
              spellCheck="false"
              autoCapitalize="off"
              placeholder="nesetb"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              onKeyDown={handleEsc('user')}
              disabled={loading || success} />
            
          </div>
        </label>

        {/* Password */}
        <label className="login-field">
          <span className="login-label">ŞİFRE</span>
          <div className="login-input-wrap">
            <span className="login-input-icon"><LockIcon /></span>
            <input
              ref={passRef}
              type={showPw ? 'text' : 'password'}
              name="password"
              autoComplete="current-password"
              placeholder="••••••••••••"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              onKeyDown={handleEsc('pass')}
              disabled={loading || success} />
            
            <button
              type="button"
              className="login-input-eye"
              onClick={() => setShowPw((v) => !v)}
              tabIndex={-1}
              aria-label={showPw ? 'Şifreyi gizle' : 'Şifreyi göster'}>
              
              <EyeIcon open={showPw} />
            </button>
          </div>
        </label>

        {/* Error */}
        {error &&
        <div className="login-error" role="alert" aria-live="polite">
            <span aria-hidden="true">⚠</span>
            <span>{error}</span>
          </div>
        }

        {/* Submit */}
        <button
          type="submit"
          className={`login-submit ${loading ? 'loading' : ''} ${success ? 'success' : ''}`}
          disabled={!canSubmit && !success}>
          
          {success ?
          <><span>Hoş geldin</span></> :
          loading ?
          <><span>Giriş yapılıyor</span><span className="login-spinner" aria-hidden="true"></span></> :

          <><span>Giriş yap</span><ArrowIcon /></>
          }
        </button>

        <div className="login-footer-divider" aria-hidden="true"></div>

        {/* Footer reassurance */}
        <ul className="login-footer">
          <li><span className="login-footer-icon"><LockIcon /></span><span>Şifren cihazında saklanmaz, sunucuda doğrulanır.</span></li>
          <li><span className="login-footer-icon"><SunsetIcon /></span><span>Her gün <b>05:00</b>'te otomatik çıkış yapılır.</span></li>
        </ul>
      </form>

      <div className="login-meta">
        <span>KW Birlik Group · v2.1</span>
        <span className="login-meta-sep">·</span>
        <span>Hızlı destek: <a href="mailto:dadi@kwbirlik.com">samet@unity-labs.ai</a></span>
      </div>
    </div>);

};

window.LoginScreen = LoginScreen;