import { ShieldX, Monitor, Smartphone } from 'lucide-react';
import { PageFrame, SurfaceCard } from '../components/ui/surface';

export default function UnauthorizedPage({ message }: { message?: string }) {
  return (
    <PageFrame
      title="未授权访问"
      subtitle={message || '获取用户认证信息失败，可能是跳转令牌已过期或无效。'}
      icon={ShieldX}
      eyebrow="ACCESS CONTROL"
      meta="请从授权入口重新进入"
      maxWidth="max-w-xl"
    >
      <SurfaceCard className="p-4">
        <div className="text-center">
          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-slate-100 text-slate-400">
            <ShieldX size={30} />
          </div>
          <p className="mb-4 text-[10px] font-bold uppercase tracking-wider text-slate-400">请通过以下方式进入</p>
        </div>
        <div className="space-y-3">

          <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>
      </SurfaceCard>
    </PageFrame>
  );
}