// Login page

const Login = ({ onLogin }) => {
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [remember, setRemember] = React.useState(true);
  const [error, setError] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  const isEmail = (s) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(s);
  const valid = isEmail(email) && password.length > 0;

  const submit = (e) => {
    e.preventDefault();
    setError('');
    if (!isEmail(email)) { setError('올바른 이메일 형식이 아닙니다.'); return; }
    if (!password) { setError('비밀번호를 입력해주세요.'); return; }
    setLoading(true);
    setTimeout(() => {
      if (password === '1234') {
        const session = { email, name: email.split('@')[0], loginAt: Date.now() };
        const store = remember ? localStorage : sessionStorage;
        store.setItem('yumyum-admin-session', JSON.stringify(session));
        onLogin(session);
      } else {
        setError('이메일 또는 비밀번호가 올바르지 않습니다.');
        setLoading(false);
      }
    }, 350);
  };

  return (
    <div className="login-shell">
      <aside className="login-hero">
        <div className="login-hero-top">
          <div className="brand-row">
            <div className="brand-logo">Y</div>
            <div className="brand-name">냠냠픽업<small>운영관리 시스템</small></div>
          </div>
        </div>
        <div className="login-hero-mid">
          <h1>오늘도 더 빠른<br/>픽업을 위해</h1>
          <p>매장, 주문, 정산까지 한 곳에서 관리하세요.<br/>2% 수수료로 사장님과 함께 성장합니다.</p>
        </div>
        <div className="login-hero-stats">
          <div><div className="num">342</div><div className="lbl">노출중 매장</div></div>
          <div className="div"></div>
          <div><div className="num">8,472</div><div className="lbl">월 주문 건수</div></div>
          <div className="div"></div>
          <div><div className="num">2%</div><div className="lbl">중개 수수료</div></div>
        </div>
        <div className="login-hero-bg" aria-hidden="true">
          <div className="blob b1"></div>
          <div className="blob b2"></div>
          <div className="blob b3"></div>
        </div>
      </aside>

      <main className="login-main">
        <div className="login-card">
          <div className="login-card-h">
            <h2>관리자 로그인</h2>
            <p>운영팀 계정으로 로그인하세요</p>
          </div>

          <form onSubmit={submit} className="login-form" noValidate>
            <div className="field">
              <label htmlFor="li-email">이메일</label>
              <input
                id="li-email"
                type="email"
                className="input login-input"
                placeholder="name@yumyum.im"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                autoComplete="email"
                autoFocus
              />
            </div>

            <div className="field">
              <label htmlFor="li-pw">비밀번호</label>
              <input
                id="li-pw"
                type="password"
                className="input login-input"
                placeholder="비밀번호 입력"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                autoComplete="current-password"
              />
              <div className="login-hint">테스트 비밀번호: <code>1234</code></div>
            </div>

            <div className="login-row">
              <label className="login-check">
                <span
                  className={`checkbox ${remember ? 'checked' : ''}`}
                  onClick={() => setRemember(!remember)}
                  role="checkbox"
                  aria-checked={remember}
                ></span>
                <span>로그인 상태 유지</span>
              </label>
              <a href="#" onClick={(e) => e.preventDefault()} className="login-forgot">비밀번호 찾기</a>
            </div>

            {error && (
              <div className="login-error">
                <Icon name="info" size={14}/>
                <span>{error}</span>
              </div>
            )}

            <button
              type="submit"
              className="btn btn-primary login-submit"
              disabled={!valid || loading}
            >
              {loading ? '로그인 중...' : '로그인'}
            </button>
          </form>

          <div className="login-foot">
            <span>관리자 계정 문의</span>
            <a href="mailto:ops@yumyum.im">ops@yumyum.im</a>
          </div>
        </div>

        <div className="login-bottom">
          <span>© 2026 YumYum, Inc.</span>
          <span className="div"></span>
          <a href="#" onClick={(e) => e.preventDefault()}>이용약관</a>
          <a href="#" onClick={(e) => e.preventDefault()}>개인정보처리방침</a>
          <a href="#" onClick={(e) => e.preventDefault()}>도움말</a>
        </div>
      </main>
    </div>
  );
};

Object.assign(window, { Login });