import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Button, Icon } from "../components/ui";
import { surfaceClassName } from "../components/ui/Surface";
import { AuthShell } from "../components/auth/AuthShell";
import { roleHomePath, useAuth } from "../lib/auth";
import "./pending-approval.css";

export default function PendingApproval() {
  const navigate = useNavigate();
  const { user, logout, refresh } = useAuth();
  const [checking, setChecking] = useState(false);
  const [checkResult, setCheckResult] = useState<string | null>(null);

  const checkAgain = async () => {
    if (checking) return;
    setChecking(true);
    setCheckResult(null);
    try {
      const nextUser = await refresh();
      if (nextUser?.accountStatus === "approved") {
        navigate(
          nextUser.onboardingCompletedAt == null ? "/onboarding" : roleHomePath(nextUser.role),
          { replace: true },
        );
        return;
      }
      const at = new Date().toLocaleTimeString("ko-KR", {
        hour: "2-digit",
        minute: "2-digit",
      });
      if (nextUser) {
        setCheckResult(`${at} 기준 아직 승인 전입니다. 잠시 후 다시 확인해 주세요.`);
      } else {
        setCheckResult(`${at} 상태 확인에 실패했습니다. 네트워크 연결 후 다시 시도해 주세요.`);
      }
    } finally {
      setChecking(false);
    }
  };

  const signOut = async () => {
    await logout();
    navigate("/login", { replace: true });
  };

  const statusText = user?.accountStatus === "suspended" ? "접속 보류" : "승인 대기";

  return (
    <>
      <AuthShell className="pa-page" aria-label="계정 승인 대기">
        <section className={surfaceClassName("pa-panel")}>
          <div className="pa-mark" aria-hidden="true">
            <Icon name="shield" size={30} strokeWidth={1.9} />
          </div>
          <p className="pa-kicker">{statusText}</p>
          <h1>계정 확인이 끝나면 바로 이용할 수 있습니다.</h1>
          <p className="pa-copy">
            {user?.email ? <b>{user.email}</b> : "현재 계정"}으로 가입 요청이 접수되었습니다.
            운영자가 수업 또는 연구 참여 범위를 확인하는 동안 Vignette 화면은 열리지 않습니다.
          </p>
          <div className="pa-status" role="status">
            <span aria-hidden="true" />
            <div>
              <b>접속 권한 확인 중</b>
              <small>
                {checkResult ??
                  "승인되면 새로고침 후 온보딩 또는 역할 홈으로 이동합니다."}
              </small>
            </div>
          </div>
          <div className="pa-actions">
            <Button
              type="button"
              size="lg"
              leading={<Icon name="refresh" size={16} />}
              onClick={() => void checkAgain()}
              disabled={checking}
            >
              {checking ? "확인 중" : "승인 상태 새로고침"}
            </Button>
            <Button
              type="button"
              size="lg"
              variant="secondary"
              leading={<Icon name="logout" size={16} />}
              onClick={() => void signOut()}
            >
              다른 계정으로 로그인
            </Button>
          </div>
        </section>
      </AuthShell>
    </>
  );
}