import { Link, Outlet } from 'react-router-dom';

import env from '@/shared/config/env';
import { useLogout } from '@/features/auth/hooks/useLogout';
import { useAuthStore } from '@/features/auth/store/authStore';

export function AppLayout() {
  const user = useAuthStore((s) => s.user);
  const logout = useLogout();

  return (
    <div className="min-h-screen bg-gray-50">
      <header className="border-b border-gray-200 bg-white">
        <div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-4">
          <div className="flex items-center gap-6">
            <Link to="/" className="text-lg font-semibold text-gray-900">
              {env.VITE_APP_NAME}
            </Link>
            <nav className="flex items-center gap-4 text-sm text-gray-600">
              <Link to="/" className="hover:text-gray-900">
                Home
              </Link>
              <Link to="/learn" className="hover:text-gray-900">
                Learn
              </Link>
            </nav>
          </div>
          <div className="flex items-center gap-4">
            {user && <span className="text-sm text-gray-500">{user.email}</span>}
            <button
              type="button"
              onClick={() => logout.mutate()}
              disabled={logout.isPending}
              className="rounded-md border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 disabled:opacity-50"
            >
              {logout.isPending ? 'Signing out…' : 'Sign out'}
            </button>
          </div>
        </div>
      </header>
      <main className="mx-auto max-w-5xl px-4 py-8">
        <Outlet />
      </main>
    </div>
  );
}