import { ReactNode } from 'react'
import { Link, useLocation } from 'react-router-dom'
import { useAuthStore } from '../../store/authStore'
import { useThemeStore } from '../../store/themeStore'

export default function AppLayout({ children }: { children: ReactNode }) {
  const { username, logout } = useAuthStore()
  const { theme, toggle } = useThemeStore()
  const location = useLocation()

  return (
    <div className="h-screen flex flex-col text-[var(--mx-text)]" style={{ background: 'var(--mx-bg)' }}>
      {/* Header */}
      <header className="h-14 shrink-0 flex items-center justify-between px-4 border-b mx-glass" style={{ borderColor: 'var(--mx-divider)', background: 'var(--mx-surface)' }}>
        <Link to="/chat" className="flex items-center gap-2">
          <div className="w-7 h-7 rounded-lg overflow-hidden">
            <img src="/images/cyrene-avatar.png" alt="Cyrene" className="w-full h-full object-cover" />
          </div>
          <span className="font-semibold text-base">Cyrene</span>
        </Link>

        <nav className="flex items-center gap-1">
          <Link to="/chat"
            className="px-3 py-1.5 rounded-full text-sm transition-colors"
            style={{
              background: location.pathname.startsWith('/chat') ? 'color-mix(in srgb, var(--mx-primary) 15%, transparent)' : 'transparent',
              color: location.pathname.startsWith('/chat') ? 'var(--mx-tertiary-text)' : 'var(--mx-text-dim)',
            }}
          >聊天</Link>
          <Link to="/admin/dashboard"
            className="px-3 py-1.5 rounded-full text-sm transition-colors"
            style={{
              background: location.pathname.startsWith('/admin') ? 'color-mix(in srgb, var(--mx-primary) 15%, transparent)' : 'transparent',
              color: location.pathname.startsWith('/admin') ? 'var(--mx-tertiary-text)' : 'var(--mx-text-dim)',
            }}
          >管理</Link>
          <div className="w-px h-4 mx-1" style={{ background: 'var(--mx-divider)' }} />
          {/* Theme toggle */}
          <button onClick={toggle}
            className="w-8 h-8 rounded-full flex items-center justify-center text-lg transition-colors hover:opacity-80"
            title={theme === 'dark' ? '切换日间模式' : '切换夜间模式'}
          >
            {theme === 'dark' ? '☀️' : '🌙'}
          </button>
          <span className="text-xs" style={{ color: 'var(--mx-text-dim)' }}>{username}</span>
          <button onClick={logout}
            className="px-3 py-1.5 rounded-full text-sm transition-colors"
            style={{ color: 'var(--mx-text-dim)' }}
          >退出</button>
        </nav>
      </header>

      {/* Content */}
      <main className="flex-1 overflow-hidden">{children}</main>
    </div>
  )
}