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: '/archivement', label: 'Thành tích', icon: 'emoji_events', matchPrefix: '/archivement', exact: false },
  { 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: '/flash-card', label: 'Flash Card', icon: 'menu_book', matchPrefix: '/flash-card', exact: false },
  { to: '/settings', label: 'Cài đặt', icon: 'settings', matchPrefix: '/settings', 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 z-50"
      style={{
        background: 'var(--at-paper)',
        borderRight: '1px solid var(--at-line)',
      }}
    >
      {/* Brand */}
      <div className="px-5 pt-7 pb-9 flex items-start gap-2.5">
        <div
          className="w-[34px] h-[34px] rounded-[10px] grid place-items-center flex-shrink-0 at-serif italic"
          style={{
            background: 'var(--at-ink)',
            color: 'var(--at-paper)',
            fontSize: 20,
            fontWeight: 500,
            letterSpacing: '-0.02em',
          }}
        >
          E
        </div>
        <div>
          <div className="at-serif" style={{ fontSize: 18, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.1, color: 'var(--at-ink)' }}>
            EnglishAI
          </div>
          <div style={{ fontSize: 10, fontWeight: 500, color: 'var(--at-mute)', letterSpacing: '0.14em', textTransform: 'uppercase', marginTop: 2 }}>
            TOEIC Curator
          </div>
        </div>
      </div>

      {/* Nav */}
      <nav className="flex-1 px-4 overflow-y-auto">
        <div className="px-3 pb-2" style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--at-mute-2)', fontWeight: 600 }}>
          Học tập
        </div>
        <div className="flex flex-col gap-0.5">
          {NAV_ITEMS.map((item) => {
            const active = isActive(pathname, item.matchPrefix, item.exact)
            return (
              <Link
                key={item.to}
                to={item.to}
                className={cn(
                  'relative flex items-center gap-3 px-3 py-2.5 rounded-[10px] text-[13.5px] font-medium transition-colors',
                )}
                style={{
                  background: active ? 'var(--at-line-2)' : 'transparent',
                  color: active ? 'var(--at-ink)' : 'var(--at-ink-2)',
                }}
              >
                {active && (
                  <span
                    className="absolute top-2 bottom-2 rounded-full"
                    style={{ left: -18, width: 2, background: 'var(--at-brand)' }}
                  />
                )}
                <span
                  className="material-symbols-outlined"
                  style={{ fontSize: 20, color: active ? 'var(--at-brand)' : 'var(--at-mute)' }}
                >
                  {item.icon}
                </span>
                {item.label}
              </Link>
            )
          })}
        </div>
      </nav>

      {/* User */}
      <div className="px-3 py-4">
        {user ? (
          <div
            className="flex items-center gap-2.5 px-2.5 py-2.5 rounded-xl"
            style={{ background: 'var(--at-surface)', border: '1px solid var(--at-line)' }}
          >
            <div
              className="w-9 h-9 rounded-[10px] grid place-items-center flex-shrink-0 at-serif italic"
              style={{
                background: 'linear-gradient(135deg, #F0E6D8, #E5D4B7)',
                color: 'var(--at-ink)',
                fontSize: 16,
                fontWeight: 500,
              }}
            >
              {user.name.charAt(0).toUpperCase()}
            </div>
            <div className="min-w-0">
              <div className="text-[13px] font-semibold truncate" style={{ color: 'var(--at-ink)' }}>{user.name}</div>
              <div className="text-[11px] truncate" style={{ color: 'var(--at-mute)' }}>{user.email}</div>
            </div>
          </div>
        ) : (
          <button
            onClick={() => openModal('login')}
            className="w-full flex items-center gap-2.5 px-2.5 py-2.5 rounded-xl hover:bg-[var(--at-line-2)] transition-colors"
            style={{ background: 'var(--at-surface)', border: '1px solid var(--at-line)' }}
          >
            <div className="w-9 h-9 rounded-[10px] grid place-items-center flex-shrink-0" style={{ background: 'var(--at-line-2)' }}>
              <span className="material-symbols-outlined" style={{ fontSize: 18, color: 'var(--at-mute)' }}>person</span>
            </div>
            <div className="min-w-0 text-left">
              <div className="text-[13px] font-semibold" style={{ color: 'var(--at-ink-2)' }}>Khách</div>
              <div className="text-[11px] font-medium at-serif italic" style={{ color: 'var(--at-brand)' }}>Đăng nhập →</div>
            </div>
          </button>
        )}
      </div>
    </aside>
  )
}
