import { useAuth } from "../auth/AuthProvider";

export default function AuthStatus() {
    const { enabled, status, user, backendClaims, verifying, signingIn, signInWithGoogle, signOut, error } = useAuth();

    if (!enabled) {
        return <div className="auth-chip muted">Auth off</div>;
    }
    if (status === "loading") {
        return <div className="auth-chip">Loading auth…</div>;
    }
    if (!user) {
        return (
            <button className="auth-btn" onClick={() => signInWithGoogle().catch(() => {})} disabled={signingIn}>
                <span className="auth-icon">G</span>
                <span>{signingIn ? "開いています…" : "Google でサインイン"}</span>
            </button>
        );
    }
    return (
        <div className="auth-chip signed-in">
            {user.photoURL && <img src={user.photoURL} alt="" className="auth-avatar" referrerPolicy="no-referrer" />}
            <div className="auth-meta">
                <div className="auth-name">{user.displayName || user.email || user.uid}</div>
                <div className="auth-subtle">
                    {verifying ? "確認中…" : backendClaims ? "バックエンド認証済み" : "未確認"}
                </div>
                {error && <div className="auth-error">{error}</div>}
            </div>
            <button className="auth-signout" onClick={() => signOut().catch(() => {})}>サインアウト</button>
        </div>
    );
}