import { useNavigate } from 'react-router-dom';
import { useAuth } from '../hooks/useAuth';
import Button from './ui/Button';

interface RoleGuardProps {
  allowedRoles: string[];
  children: React.ReactNode;
}

const RoleGuard = ({ allowedRoles, children }: RoleGuardProps) => {
  const { user } = useAuth();
  const navigate = useNavigate();

  if (!user || !allowedRoles.includes(user.role)) {
    return (
      <div className="max-w-7xl mx-auto flex flex-col items-center justify-center py-32">
        <div className="bg-[var(--color-bg-surface)] rounded-2xl border border-[var(--color-border)] shadow-lg p-10 text-center max-w-md">
          <div className="w-16 h-16 mx-auto mb-5 rounded-full bg-[var(--color-danger-subtle)] border border-[var(--color-danger-border)] flex items-center justify-center">
            <svg className="w-8 h-8 text-[var(--color-danger-text)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
              <path strokeLinecap="round" strokeLinejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
            </svg>
          </div>
          <h2 className="text-xl font-bold text-[var(--color-text-primary)] mb-2">접근 권한이 없습니다</h2>
          <p className="text-sm text-[var(--color-text-secondary)] mb-6">
            이 페이지는 <span className="font-semibold text-[var(--color-text-primary)]">{allowedRoles.join(', ')}</span> 권한이 필요합니다.
            <br />현재 권한: <span className="font-semibold text-[var(--color-text-primary)]">{user?.role || '-'}</span>
          </p>
          <Button onClick={() => navigate('/dashboard')}>
            대시보드로 돌아가기
          </Button>
        </div>
      </div>
    );
  }

  return <>{children}</>;
};

export default RoleGuard;