'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { useState } from 'react'
import { CreditCard, ListCheck, Person, PlugConnection, Thunderbolt, Xmark, Bars } from '@gravity-ui/icons'
import SidebarFooter from '@/components/sidebar-footer'

const navItems = [
  { href: '/dashboard', label: '概览', icon: Thunderbolt, exact: true },
  { href: '/dashboard/charge-points', label: '充电桩', icon: PlugConnection },
  { href: '/dashboard/transactions', label: '充电记录', icon: ListCheck },
  { href: '/dashboard/id-tags', label: '储值卡', icon: CreditCard },
  { href: '/dashboard/users', label: '用户管理', icon: Person },
]

function NavContent({ pathname, onNavigate }: { pathname: string; onNavigate?: () => void }) {
  return (
    <>
      {/* Logo */}
      <div className="flex h-14 shrink-0 items-center gap-2.5 border-b border-border px-5">
        <div className="flex size-7 items-center justify-center rounded-lg bg-accent">
          <Thunderbolt className="size-4 text-accent-foreground" />
        </div>
        <div>
          <span className="text-sm font-semibold tracking-tight text-foreground">Helios EVCS</span>
        </div>
      </div>

      {/* Navigation */}
      <nav className="flex flex-1 flex-col gap-0.5 overflow-y-auto p-3">
        <p className="mb-1 px-2 text-[11px] font-semibold uppercase tracking-widest text-muted">
          管理
        </p>
        {navItems.map((item) => {
          const isActive = item.exact
            ? pathname === item.href
            : pathname === item.href || pathname.startsWith(item.href + '/')
          const Icon = item.icon
          return (
            <Link
              key={item.href}
              href={item.href}
              onClick={onNavigate}
              className={[
                'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
                isActive
                  ? 'bg-accent/10 text-accent'
                  : 'text-muted hover:bg-surface-tertiary hover:text-foreground',
              ].join(' ')}
            >
              <Icon className="size-4 shrink-0" />
              <span>{item.label}</span>
              {isActive && (
                <span className="ml-auto h-1.5 w-1.5 rounded-full bg-accent" />
              )}
            </Link>
          )
        })}
      </nav>

      {/* Footer */}
      <SidebarFooter />
    </>
  )
}

export default function Sidebar() {
  const pathname = usePathname()
  const [open, setOpen] = useState(false)

  return (
    <>
      {/* Mobile top bar */}
      <div className="fixed inset-x-0 top-0 z-30 flex h-14 items-center gap-3 border-b border-border bg-surface-secondary px-4 lg:hidden">
        <button
          type="button"
          className="flex size-8 items-center justify-center rounded-lg text-muted transition-colors hover:bg-surface-tertiary hover:text-foreground"
          onClick={() => setOpen(true)}
          aria-label="打开菜单"
        >
          <Bars className="size-5" />
        </button>
        <div className="flex items-center gap-2">
          <div className="flex size-6 items-center justify-center rounded-md bg-accent">
            <Thunderbolt className="size-3.5 text-accent-foreground" />
          </div>
          <span className="text-sm font-semibold">Helios EVCS</span>
        </div>
      </div>

      {/* Mobile drawer overlay */}
      {open && (
        <div
          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
          onClick={() => setOpen(false)}
        />
      )}

      {/* Mobile drawer */}
      <aside
        className={[
          'fixed inset-y-0 left-0 z-50 flex w-64 flex-col border-r border-border bg-surface-secondary transition-transform duration-300 lg:hidden',
          open ? 'translate-x-0' : '-translate-x-full',
        ].join(' ')}
      >
        <button
          type="button"
          className="absolute right-3 top-3 flex size-8 items-center justify-center rounded-lg text-muted transition-colors hover:bg-surface-tertiary hover:text-foreground"
          onClick={() => setOpen(false)}
          aria-label="关闭菜单"
        >
          <Xmark className="size-4" />
        </button>
        <NavContent pathname={pathname} onNavigate={() => setOpen(false)} />
      </aside>

      {/* Desktop sidebar */}
      <aside className="hidden w-60 shrink-0 flex-col border-r border-border bg-surface-secondary lg:flex">
        <NavContent pathname={pathname} />
      </aside>
    </>
  )
}