import React from 'react'
import { Navigate, useLocation } from 'react-router-dom'
import { useAuth } from '../contexts/AuthContext'
import { useTranslation } from '../i18n'

interface ProtectedRouteProps {
  children: React.ReactNode
  /** 可指定的最小角色。admin = 超级管理员 */
  requiredRole?: string
}

/**
 * 路由守卫组件
 *
 * - 正在验证 token 时，显示加载中状态
 * - 未认证时，重定向到 /login 并携带来源路径
 * - 已认证时，检查 requiredRole 角色匹配，不匹配则重定向到首页
 * - 已认证时，正常渲染子组件
 */
export default function ProtectedRoute({ children, requiredRole }: ProtectedRouteProps) {
  const { t } = useTranslation()
  const { isAuthenticated, isLoading, user } = useAuth()
  const location = useLocation()

  if (isLoading) {
    return (
      <div className="h-screen flex items-center justify-center bg-surface-50">
        <div className="flex flex-col items-center gap-3">
          <svg
            className="animate-spin h-8 w-8 text-medical-600"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
          >
            <circle
              className="opacity-25"
              cx="12"
              cy="12"
              r="10"
              stroke="currentColor"
              strokeWidth="4"
            />
            <path
              className="opacity-75"
              fill="currentColor"
              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
            />
          </svg>
          <span className="text-sm text-gray-500">{t('components.protectedRoute.verifying')}</span>
        </div>
      </div>
    )
  }

  if (!isAuthenticated) {
    // 将当前路径作为 state 传递，登录后可跳回
    return <Navigate to="/login" state={{ from: location.pathname }} replace />
  }

  // 角色检查：如果指定了 requiredRole，且用户角色不匹配，则重定向到首页
  if (requiredRole && user?.role !== requiredRole) {
    return <Navigate to="/" replace />
  }

  return <>{children}</>
}