import { Link, Outlet } from 'react-router-dom'
import { useQuery } from '@tanstack/react-query'
import { useAuth } from '../hooks/useAuth'
import api from '../api/client'
import type { StorageInfo } from '../types'

export default function Layout() {
  const { user, logout } = useAuth()
  const { data: storage } = useQuery<StorageInfo>({
    queryKey: ['storage'],
    queryFn: () => api.get('/settings/storage').then((r) => r.data),
  })

  return (
    <div className="min-h-screen bg-gray-50">
      <nav className="bg-gray-900 text-white px-6 py-3 flex items-center justify-between">
        <div className="flex items-center gap-6">
          <Link to="/" className="text-blue-400 font-bold text-lg">MeetingProto</Link>
          <Link to="/recordings" className="hover:text-blue-300">Записи</Link>
          <Link to="/protocols" className="hover:text-blue-300">Протоколы</Link>
          <Link to="/templates" className="hover:text-blue-300">Шаблоны</Link>
          <Link to="/settings" className="text-gray-400 hover:text-blue-300">Настройки</Link>
        </div>
        <div className="flex items-center gap-4 text-sm">
          {storage && (
            <span className="text-gray-400">Занято: {storage.total_gb} ГБ</span>
          )}
          <span>{user?.username}</span>
          <button onClick={logout} className="text-gray-400 hover:text-white">Выйти</button>
        </div>
      </nav>
      <main className="max-w-7xl mx-auto px-6 py-8">
        <Outlet />
      </main>
    </div>
  )
}