import { LayoutDashboard, ShieldCheck } from 'lucide-react'
import { getStoredUser, roleLabel } from '@/lib/auth'

export function Dashboard() {
  const user = getStoredUser()

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-3">
        <div className="p-2 rounded-btn bg-accent/10 text-accent">
          <LayoutDashboard className="h-5 w-5" />
        </div>
        <div>
          <h1 className="text-xl font-bold text-foreground">看板</h1>
          <p className="text-sm text-secondary">欢迎回来，{user?.username || '—'}</p>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <Card
          icon={<ShieldCheck className="h-5 w-5 text-accent" />}
          title="当前身份"
          value={user ? roleLabel(user.role) : '—'}
          desc={user ? `用户：${user.username}` : '加载中…'}
        />
      </div>

      <div className="rounded-card border border-border bg-surface p-5">
        <h2 className="text-sm font-semibold text-foreground mb-3">权限说明</h2>
        <ul className="space-y-2 text-sm text-secondary">
          <li><span className="text-accent font-medium">系统管理员</span>：可管理管理员、用户、系统配置</li>
          <li><span className="text-accent font-medium">管理员</span>：可管理普通用户</li>
          <li><span className="text-accent font-medium">用户</span>：可访问业务功能、修改个人资料</li>
        </ul>
      </div>
    </div>
  )
}

function Card({
  icon,
  title,
  value,
  desc,
}: {
  icon: React.ReactNode
  title: string
  value: string
  desc: string
}) {
  return (
    <div className="rounded-card border border-border bg-surface p-4 transition hover:border-accent/30">
      <div className="flex items-center gap-2 mb-3">
        {icon}
        <span className="text-xs font-medium text-secondary uppercase tracking-wider">{title}</span>
      </div>
      <div className="text-lg font-bold text-foreground">{value}</div>
      <div className="mt-1 text-xs text-muted">{desc}</div>
    </div>
  )
}
