import { Link, useLocation } from 'react-router-dom'
import { LayoutDashboard, FileText, Plus, Settings, Mic } from 'lucide-react'
import clsx from 'clsx'
import ThemeToggle from './ThemeToggle'

const navItems = [
  { path: '/', icon: LayoutDashboard, label: '概览' },
  { path: '/meetings', icon: FileText, label: '会议' },
  { path: '/upload', icon: Plus, label: '新建' },
  { path: '/settings', icon: Settings, label: '设置' },
]

export default function Layout({ children }) {
  const location = useLocation()

  return (
    <div className="min-h-screen bg-primary flex">
      {/* 侧边栏 */}
      <aside className="w-56 flex flex-col h-screen sticky top-0 border-r border-theme">
        {/* Logo 区域 */}
        <div className="p-5">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-accent to-accent-muted flex items-center justify-center shadow-glow">
                <Mic className="w-4 h-4 text-white" />
              </div>
              <div>
                <h1 className="text-sm font-semibold text-primary tracking-tight">会议记录</h1>
                <p className="text-[10px] text-muted">智能转录系统</p>
              </div>
            </div>
            <ThemeToggle />
          </div>
        </div>

        {/* 导航 */}
        <nav className="flex-1 px-3 space-y-0.5">
          {navItems.map(({ path, icon: Icon, label }) => {
            const isActive = location.pathname === path
            return (
              <Link
                key={path}
                to={path}
                className={clsx(
                  'flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-all duration-200',
                  isActive
                    ? 'bg-accent/15 text-accent font-medium'
                    : 'text-secondary hover:text-primary hover:bg-black/5 dark:hover:bg-white/5'
                )}
              >
                <Icon className={clsx('w-4 h-4', isActive && 'text-accent')} />
                <span>{label}</span>
              </Link>
            )
          })}
        </nav>

        {/* 底部 */}
        <div className="p-4 border-t border-theme">
          <div className="text-[10px] text-muted text-center">
            FunASR + DeepSeek
          </div>
        </div>
      </aside>

      {/* 主内容区 */}
      <main className="flex-1 min-h-screen">
        <div className="p-8">
          {children}
        </div>
      </main>
    </div>
  )
}