/** 移动端"我"聚合页:头像占位+入口列表+退出 */
import { useState } from 'react'
import { NavLink, useNavigate } from 'react-router-dom'
import {
  User, History, BookOpen, Settings as SettingsIcon, ChevronRight,
  Scale, TrendingUp, Heart, ShieldCheck, FileText, Users, LogOut,
} from 'lucide-react'
import { getName, clearAuth } from '@/lib/auth'
import {
  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter,
} from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'

export function Me() {
  const navigate = useNavigate()
  const name = getName()
  const [confirmLogout, setConfirmLogout] = useState(false)

  const handleLogout = () => {
    clearAuth()
    navigate('/login')
  }
  const brainTrust = [
    { path: '/legal', label: '私人法务', icon: Scale },
    { path: '/decisions', label: '经营决策', icon: TrendingUp },
    { path: '/life', label: '生活助理', icon: Heart },
    { path: '/emotion', label: '情绪中心', icon: ShieldCheck },
  ]
  const resources = [
    { path: '/team', label: '我的团队', icon: Users },
    { path: '/experts', label: '专家库', icon: Users },
    { path: '/decisions-log', label: '决策日志', icon: FileText },
    { path: '/profile', label: '我的画像', icon: User },
    { path: '/history', label: '对话历史', icon: History },
    { path: '/knowledge', label: '知识库', icon: BookOpen },
    { path: '/settings', label: '设置', icon: SettingsIcon },
  ]
  return (
    <div className="space-y-4">
      <div className="flex items-center gap-3 rounded-xl border border-border bg-card p-4">
        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary font-bold">
          {name?.[0] || '老'}
        </div>
        <div>
          <div className="font-semibold text-foreground">{name || '老板'}</div>
          <div className="text-sm text-muted-foreground">中小企业老板</div>
        </div>
      </div>

      {/* 智囊 */}
      <div>
        <p className="mb-2 px-1 text-xs font-medium text-muted-foreground">智囊</p>
        <div className="grid grid-cols-2 gap-3">
          {brainTrust.map((item) => (
            <NavLink key={item.path} to={item.path} className="flex flex-col items-center gap-2 rounded-xl border border-border bg-card p-4 hover:bg-muted transition-colors">
              <item.icon className="h-6 w-6 text-primary" />
              <span className="text-sm text-foreground">{item.label}</span>
            </NavLink>
          ))}
        </div>
      </div>

      {/* 我的资源 */}
      <div>
        <p className="mb-2 px-1 text-xs font-medium text-muted-foreground">我的资源</p>
        <div className="rounded-xl border border-border bg-card divide-y divide-border">
          {resources.map((item) => (
            <NavLink key={item.path} to={item.path} className="flex items-center gap-3 p-4 hover:bg-muted transition-colors">
              <item.icon className="h-5 w-5 text-muted-foreground" />
              <span className="flex-1 text-sm text-foreground">{item.label}</span>
              <ChevronRight className="h-4 w-4 text-muted-foreground" />
            </NavLink>
          ))}
        </div>
      </div>

      {/* 退出登录 */}
      <button
        onClick={() => setConfirmLogout(true)}
        className="flex w-full items-center justify-center gap-2 rounded-xl border border-border bg-card p-4 text-sm text-red-600 transition-colors hover:bg-red-50"
      >
        <LogOut className="h-4 w-4" />
        退出登录
      </button>

      <Dialog open={confirmLogout} onOpenChange={setConfirmLogout}>
        <DialogContent className="max-w-sm">
          <DialogHeader>
            <DialogTitle>退出登录</DialogTitle>
            <DialogDescription>确定要退出当前账号吗?</DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setConfirmLogout(false)}>取消</Button>
            <Button variant="destructive" onClick={handleLogout}>退出</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}