import { Navigate } from 'react-router';
import { useAuth } from '../../shared/auth';

export function DeniedPage() {
  const { user, loading, logout } = useAuth();

  if (loading) {
    return (
      <div className="auth-loading">
        <div className="auth-loading__spinner" />
      </div>
    );
  }

  if (!user) {
    return <Navigate to="/login" replace />;
  }

  const isRejectedOrDisabled =
    user.status === 'REJECTED' || user.status === 'DISABLED';
  const hasWingPermit = user.roles.some((r) => r.name === 'WING_PERMIT');

  return (
    <div className="auth-page">
      <div className="auth-card">
        <div className="auth-status-icon">&#128683;</div>
        <div className="auth-title">접근 불가</div>
        <div className="auth-message">
          {isRejectedOrDisabled
            ? `계정이 ${user.status === 'REJECTED' ? '거절' : '비활성화'}되었습니다.`
            : !hasWingPermit
              ? 'WING 대시보드 접근 권한이 없습니다. 관리자에게 WING_PERMIT 역할을 요청하세요.'
              : '접근이 거부되었습니다.'}
        </div>
        <div className="auth-message" style={{ fontSize: 11, marginTop: 8 }}>
          {user.email}
        </div>
        <button className="auth-link-btn" onClick={logout}>
          로그아웃
        </button>
      </div>
    </div>
  );
}