'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Upload, List, Search, Settings, AudioLines } from 'lucide-react'
import { cn } from '@/lib/utils'

const navItems = [
  { href: '/', label: '会议', icon: List },
  { href: '/upload', label: '上传', icon: Upload },
  { href: '/search', label: '搜索', icon: Search, disabled: true },
  { href: '/settings', label: '设置', icon: Settings, disabled: true },
]

export function AppShell({ children }: { children: React.ReactNode }) {
  const pathname = usePathname()

  return (
    <div className="flex min-h-screen bg-background">
      {/* Sidebar - Desktop */}
      <aside className="hidden md:flex w-60 flex-col border-r border-border bg-surface px-3 py-5">
        <div className="flex items-center gap-2 px-3 pb-6">
          <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-primary text-primary-foreground">
            <AudioLines className="h-5 w-5" />
          </div>
          <div className="flex flex-col">
            <span className="text-[15px] font-semibold leading-tight">MeetNote</span>
            <span className="text-[11px] text-muted-foreground leading-tight">会议转写总结</span>
          </div>
        </div>

        <nav className="flex flex-col gap-1">
          {navItems.map((item) => {
            const Icon = item.icon
            const active =
              item.href === '/' ? pathname === '/' : pathname.startsWith(item.href)
            return (
              <Link
                key={item.href}
                href={item.disabled ? '#' : item.href}
                aria-disabled={item.disabled}
                className={cn(
                  'flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm transition-colors',
                  active
                    ? 'bg-primary text-primary-foreground font-medium'
                    : 'text-foreground hover:bg-surface-muted',
                  item.disabled && 'opacity-40 pointer-events-none',
                )}
              >
                <Icon className="h-4 w-4" />
                <span>{item.label}</span>
                {item.disabled && (
                  <span className="ml-auto text-[10px] text-muted-foreground">v2</span>
                )}
              </Link>
            )
          })}
        </nav>

        <div className="mt-auto px-3 pt-4 border-t border-border">
          <div className="text-[11px] text-muted-foreground">MVP · 2026-04-13</div>
          <div className="text-[11px] text-muted-foreground">端口 4490</div>
        </div>
      </aside>

      {/* Main */}
      <main className="flex-1 min-w-0 pb-20 md:pb-0">{children}</main>

      {/* Bottom Tab - Mobile */}
      <nav className="md:hidden fixed bottom-0 inset-x-0 z-20 border-t border-border bg-surface-elevated/95 backdrop-blur px-2 py-2">
        <div className="flex items-center justify-around">
          {navItems.map((item) => {
            const Icon = item.icon
            const active =
              item.href === '/' ? pathname === '/' : pathname.startsWith(item.href)
            return (
              <Link
                key={item.href}
                href={item.disabled ? '#' : item.href}
                aria-disabled={item.disabled}
                className={cn(
                  'flex flex-col items-center gap-0.5 px-4 py-1.5 rounded-lg text-[11px] transition-colors',
                  active ? 'text-primary' : 'text-muted-foreground',
                  item.disabled && 'opacity-40 pointer-events-none',
                )}
              >
                <Icon className="h-5 w-5" />
                <span>{item.label}</span>
              </Link>
            )
          })}
        </div>
      </nav>
    </div>
  )
}