/* Auth Gate — 強制登入畫面
 * 未登入 / Firebase 未設定 / 載入中 三種狀態的全螢幕畫面
 */
const { Icon } = window.UI;

const FullScreen = ({ children }) => (
  <div className="auth-screen">
    <div className="auth-card surface">{children}</div>
  </div>
);

const LoginScreen = () => {
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState(null);

  const onGoogle = async () => {
    setErr(null);
    setBusy(true);
    try {
      await window.Auth.signInGoogle();
    } catch (e) {
      setErr(e.message || "登入失敗");
    } finally {
      setBusy(false);
    }
  };

  return (
    <FullScreen>
      <div className="auth-brand">
        <div className="auth-logo"><Icon name="chart" size={24}/></div>
        <h1 className="auth-title">TWStock Workbench</h1>
        <p className="auth-sub dim">台美股觀察儀表板</p>
      </div>
      <button className="auth-btn google" onClick={onGoogle} disabled={busy}>
        <svg width="18" height="18" viewBox="0 0 48 48" style={{flexShrink:0}}>
          <path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3c-1.6 4.6-6 8-11.3 8a12 12 0 010-24c3 0 5.7 1.1 7.8 3l5.7-5.7C33.6 6.1 29 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.3-.4-3.5z"/>
          <path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.7 15.5 19 12 24 12c3 0 5.7 1.1 7.8 3l5.7-5.7C33.6 6.1 29 4 24 4 16.3 4 9.7 8.3 6.3 14.7z"/>
          <path fill="#4CAF50" d="M24 44c4.9 0 9.4-1.9 12.8-5l-5.9-5c-2 1.4-4.3 2-6.9 2-5.3 0-9.7-3.4-11.3-8l-6.6 5.1C9.6 39.6 16.2 44 24 44z"/>
          <path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3c-.7 2.2-2.1 4.1-3.9 5.5l5.9 5c4.2-3.9 6.7-9.6 6.7-16 0-1.3-.1-2.3-.4-3.5z"/>
        </svg>
        <span>{busy ? "登入中…" : "使用 Google 登入"}</span>
      </button>
      {err && <div className="auth-err">{err}</div>}
      <p className="auth-foot dim">登入即表示同意此 Dashboard 將使用你的 Google 名稱與頭像</p>
    </FullScreen>
  );
};

const ConfigMissingScreen = ({ error }) => (
  <FullScreen>
    <div className="auth-brand">
      <div className="auth-logo warn"><Icon name="alert" size={24}/></div>
      <h1 className="auth-title">Firebase 設定未完成</h1>
      <p className="auth-sub dim">需要先填寫 firebase-config.js 才能登入</p>
    </div>
    <div className="auth-instructions">
      <div className="auth-step">
        <span className="auth-step-num">1</span>
        <div>到 <code>console.firebase.google.com</code> 建專案、建一個 Web App</div>
      </div>
      <div className="auth-step">
        <span className="auth-step-num">2</span>
        <div>Authentication → Sign-in method → 啟用 Google</div>
      </div>
      <div className="auth-step">
        <span className="auth-step-num">3</span>
        <div>專案設定 → 一般 → SDK 設定與配置 → 設定 → 複製 config</div>
      </div>
      <div className="auth-step">
        <span className="auth-step-num">4</span>
        <div>貼到專案根目錄 <code>firebase-config.js</code> 的 <code>FIREBASE_CONFIG</code></div>
      </div>
    </div>
    {error && <div className="auth-err">{error}</div>}
  </FullScreen>
);

const LoadingScreen = () => (
  <FullScreen>
    <div className="auth-brand">
      <div className="spinner" style={{width:32, height:32, margin:"0 auto"}}/>
      <p className="auth-sub dim" style={{marginTop:16}}>載入中…</p>
    </div>
  </FullScreen>
);

const AuthGate = ({ children }) => {
  const auth = window.Auth.useUser();
  if (auth.status === "loading") return <LoadingScreen/>;
  if (auth.status === "noconfig") return <ConfigMissingScreen error={auth.error}/>;
  if (auth.status === "out") return <LoginScreen/>;
  return typeof children === "function" ? children(auth.user) : children;
};

window.AuthGate = AuthGate;