/**
 * 서비스 진입 스플래시 — 글래스모피즘 로그인
 */
import React, { useState } from 'react';
import { loginUser, type LoginResponse } from '../utils/backendApi';
import '../styles/splashScreen.css';

const DEFAULT_USERNAME = 'admin';
const DEFAULT_PASSWORD = 'admin';
const APP_VERSION = '1.0.3';

interface Props {
  onLoginSuccess: (res: LoginResponse) => void;
  onGuest: () => void;
}

const SplashScreen: React.FC<Props> = ({ onLoginSuccess, onGuest }) => {
  const [username, setUsername] = useState(DEFAULT_USERNAME);
  const [password, setPassword] = useState(DEFAULT_PASSWORD);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  const submitLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    setLoading(true);
    try {
      const res = await loginUser(username.trim(), password);
      onLoginSuccess(res);
    } catch (err) {
      setError(err instanceof Error ? err.message : '로그인에 실패했습니다.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="splash">
      <div className="splash-photo-bg" aria-hidden />
      <div className="splash-photo-overlay" aria-hidden />

      <div className="splash-center">
        <div className="splash-glass">
          <h1 className="splash-brand">GoldenChart</h1>

          <form className="splash-form" onSubmit={submitLogin}>
            <input
              className="splash-input"
              type="text"
              autoComplete="username"
              value={username}
              onChange={e => setUsername(e.target.value)}
              disabled={loading}
              placeholder="ID"
            />
            <input
              className="splash-input"
              type="password"
              autoComplete="current-password"
              value={password}
              onChange={e => setPassword(e.target.value)}
              disabled={loading}
              placeholder="••••••••"
            />
            {error && <p className="splash-error">{error}</p>}
            <button type="submit" className="splash-login-btn" disabled={loading}>
              {loading ? '로그인 중…' : '로그인'}
            </button>
          </form>

          <p className="splash-version">
            버전: {APP_VERSION} | Core Engine: Ta4j &amp; Spring Boot
          </p>
        </div>

        <button type="button" className="splash-guest-link" onClick={onGuest} disabled={loading}>
          게스트로 체험하기
        </button>
      </div>
    </div>
  );
};

export default SplashScreen;