import { Link, useRouterState } from '@tanstack/react-router'
import { cn } from '@/lib/utils'
import { useAuthStore } from '@/store/auth-store'
import { useAuthModalStore } from '@/store/auth-modal-store'

const NAV_ITEMS = [
  { to: '/', label: 'Trang chủ', icon: 'home', matchPrefix: '/', exact: true },
  { to: '/toeic', label: 'Luyện đề TOEIC', icon: 'assignment', matchPrefix: '/toeic', exact: false },
  { to: '/writing', label: 'AI Writing', icon: 'edit_note', matchPrefix: '/writing', exact: false },
  { to: '/vocab', label: 'Từ vựng', icon: 'menu_book', matchPrefix: '/vocab', exact: false },
]

function isActive(pathname: string, prefix: string, exact: boolean) {
  return exact ? pathname === prefix : pathname.startsWith(prefix)
}

export function Sidebar() {
  const { location } = useRouterState()
  const pathname = location.pathname
  const user = useAuthStore((s) => s.user)
  const openModal = useAuthModalStore((s) => s.open)

  return (
    <aside className="hidden lg:flex fixed inset-y-0 left-0 w-60 flex-col bg-slate-50 border-r border-slate-200 z-50">
      {/* Brand */}
      <div className="px-6 py-5 border-b border-slate-200">
        <div className="text-xl font-extrabold text-blue-600 tracking-tight">EnglishAI</div>
        <div className="text-xs text-slate-400 mt-0.5">Học tập thông minh</div>
      </div>

      {/* Nav */}
      <nav className="flex-1 py-3 overflow-y-auto">
        {NAV_ITEMS.map((item) => {
          const active = isActive(pathname, item.matchPrefix, item.exact)
          return (
            <Link
              key={item.to}
              to={item.to}
              className={cn(
                'flex items-center gap-3 mx-2 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-150',
                active
                  ? 'bg-white text-blue-600 font-semibold shadow-sm'
                  : 'text-slate-500 hover:bg-white/70 hover:text-slate-800',
              )}
            >
              <span className="material-symbols-outlined" style={{ fontSize: 20 }}>
                {item.icon}
              </span>
              {item.label}
            </Link>
          )
        })}
      </nav>

      {/* User */}
      <div className="px-3 py-4 border-t border-slate-200">
        {user ? (
          <div className="flex items-center gap-3 bg-white rounded-xl px-3 py-2.5">
            <div className="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white text-sm font-bold flex-shrink-0">
              {user.name.charAt(0).toUpperCase()}
            </div>
            <div className="min-w-0">
              <div className="text-sm font-semibold truncate">{user.name}</div>
              <div className="text-xs text-slate-400 truncate">{user.email}</div>
            </div>
          </div>
        ) : (
          <button
            onClick={() => openModal('login')}
            className="w-full flex items-center gap-3 bg-white rounded-xl px-3 py-2.5 hover:bg-blue-50 transition-colors group"
          >
            <div className="w-8 h-8 rounded-full bg-slate-200 flex items-center justify-center flex-shrink-0 group-hover:bg-blue-100 transition-colors">
              <span className="material-symbols-outlined text-slate-400 group-hover:text-blue-600 transition-colors" style={{ fontSize: 18 }}>person</span>
            </div>
            <div className="min-w-0 text-left">
              <div className="text-sm font-semibold text-slate-600">Khách</div>
              <div className="text-xs text-blue-600 font-medium">Đăng nhập →</div>
            </div>
          </button>
        )}
      </div>
    </aside>
  )
}
