import { useEffect, useState } from 'react'
import { ShieldAlert } from 'lucide-react'
import { hasRole, currentRole } from './rbac'

/** 최소 역할(min) 미만이면 접근 차단 안내 표시 */
export default function ProtectedRoute({ min, children }: { min: string; children: React.ReactNode }) {
  const [role, setRole] = useState(currentRole())

  // Layout 의 getMe 가 cms_role 을 늦게 채울 수 있으므로 잠깐 폴링
  useEffect(() => {
    const t = window.setInterval(() => {
      const r = currentRole()
      setRole(prev => (prev === r ? prev : r))
    }, 500)
    return () => window.clearInterval(t)
  }, [])

  if (!hasRole(min, role)) {
    return (
      <div className="flex flex-col items-center justify-center h-full text-center">
        <ShieldAlert size={48} className="text-rose-400 mb-4" />
        <h2 className="text-lg font-bold mb-1">접근 권한이 없습니다</h2>
        <p className="text-sm text-slate-400">이 화면은 <b className="text-brand">{min}</b> 이상 권한이 필요합니다. (현재: {role})</p>
      </div>
    )
  }
  return <>{children}</>
}
