import { ShieldX, Monitor, Smartphone } from 'lucide-react';

export default function UnauthorizedPage({ message }: { message?: string }) {
  return (
    <div className="min-h-screen bg-[#F8F9FB] flex items-center justify-center p-6">
      <div className="text-center max-w-sm">
        <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-slate-100 flex items-center justify-center">
          <ShieldX size={36} className="text-slate-400" />
        </div>
        <h1 className="text-lg font-black text-slate-800 mb-2">未授权访问</h1>
        <p className="text-xs text-slate-400 mb-4">
          {message || '获取用户认证信息失败，可能是跳转令牌已过期或无效'}
        </p>

        <div className="bg-white rounded-2xl border border-slate-100 p-4 text-left space-y-3">
          <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider text-center">请通过以下方式进入</p>

          <div className="flex items-start gap-3 p-2.5 rounded-xl bg-slate-50">
            <Monitor size={16} className="text-blue-500 flex-shrink-0 mt-0.5" />
            <div>
              <p className="text-xs font-bold text-slate-700">资产管理系统（PC端）</p>
              <p className="text-[10px] text-slate-400 mt-0.5">BI 报表 → 资产 BI</p>
            </div>
          </div>

          <div className="flex items-start gap-3 p-2.5 rounded-xl bg-slate-50">
            <Smartphone size={16} className="text-green-500 flex-shrink-0 mt-0.5" />
            <div>
              <p className="text-xs font-bold text-slate-700">羚牛氢能客户服务（小程序）</p>
              <p className="text-[10px] text-slate-400 mt-0.5">BI 报表 → 资产 BI</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}