"TanStack Router Auth Guards: حماية الـ Routes بالطريقة الصح"

// ❌ الطريقة السطحية
function Dashboard() {
  const { user } = useAuth()

  if (!user) {
    return <Navigate to="/login" />
  }

  return <DashboardContent />
}

// src/main.tsx
import { createRouter, RouterProvider } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'
import { useAuth } from './lib/auth'

const router = createRouter({
  routeTree,
  context: {
    auth: undefined!, // هيتعبى تحت
  },
})

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

function App() {
  const auth = useAuth() // hook الـ auth بتاعك

  return <RouterProvider router={router} context={{ auth }} />
}

// src/routes/__root.tsx
import { createRootRouteWithContext, Outlet } from '@tanstack/react-router'

interface RouterContext {
  auth: {
    user: User | null
    isLoading: boolean
  }
}

export const Route = createRootRouteWithContext<RouterContext>()({
  component: () => <Outlet />,
})

src/routes/
├── __root.tsx
├── index.tsx             → / (عام)
├── (auth)/
│   ├── login.tsx         → /login
│   └── register.tsx      → /register
└── _authenticated/
    ├── _authenticated.tsx → layout + auth guard (من غير URL segment)
    ├── dashboard.tsx      → /dashboard ✅ محمي
    ├── settings.tsx       → /settings ✅ محمي
    └── posts/
        ├── index.tsx      → /posts ✅ محمي
        └── $postId.tsx    → /posts/:postId ✅ محمي

// src/routes/_authenticated/_authenticated.tsx
import { createFileRoute, redirect, Outlet } from '@tanstack/react-router'

export const Route = createFileRoute('/_authenticated')({
  beforeLoad: ({ context, location }) => {
    if (!context.auth.user) {
      throw redirect({
        to: '/login',
        search: {
          redirect: location.href, // اتذكر كانوا رايحين فين
        },
      })
    }
  },
  component: AuthenticatedLayout,
})

function AuthenticatedLayout() {
  return (
    <div>
      <Sidebar />
      <main>
        <Outlet />
      </main>
    </div>
  )
}

// src/routes/(auth)/login.tsx
import { createFileRoute, redirect, useRouter } from '@tanstack/react-router'
import { z } from 'zod'
import { fallback } from '@tanstack/zod-adapter'

const loginSearchSchema = z.object({
  redirect: fallback(z.string(), '/dashboard').default('/dashboard'),
})

export const Route = createFileRoute('/(auth)/login')({
  validateSearch: loginSearchSchema,
  beforeLoad: ({ context, search }) => {
    // مسجل دخول بالفعل؟ ابعته للمكان اللى كان رايحه
    if (context.auth.user) {
      throw redirect({ to: search.redirect })
    }
  },
  component: LoginPage,
})

function LoginPage() {
  const { redirect: redirectTo } = Route.useSearch()
  const router = useRouter()
  const { signIn } = Route.useRouteContext({ select: (ctx) => ctx.auth })

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)

    await signIn({
      email: formData.get('email') as string,
      password: formData.get('password') as string,
    })

    // تحديث حالة الـ Router لإعادة قراءة الـ Auth State الجديدة
    router.invalidate()

    // الرجوع للصفحة التي كان المستخدم يحاول الوصول إليها
    router.navigate({ to: redirectTo })
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" placeholder="البريد الإلكتروني" required />
      <input type="password" name="password" placeholder="كلمة المرور" required />
      <button type="submit">تسجيل الدخول</button>
    </form>
  )
}

// src/routes/_authenticated/admin.tsx
import { createFileRoute, redirect } from '@tanstack/react-router'

export const Route = createFileRoute('/_authenticated/admin')({
  beforeLoad: ({ context }) => {
    // _authenticated فحصت وجود المستخدم بالفعل
    // هنا بنفحص الـ role
    if (context.auth.user?.role !== 'admin') {
      throw redirect({ to: '/dashboard' })
    }
  },
  component: AdminPage,
})

function AdminPage() {
  return <h1>لوحة الإدارة</h1>
}

// src/routes/__root.tsx
import { createRootRouteWithContext, Outlet } from '@tanstack/react-router'

export const Route = createRootRouteWithContext<RouterContext>()({
  component: () => <Outlet />,
  pendingComponent: () => (
    <div className="flex items-center justify-center h-screen">
      <span>جاري التحميل...</span>
    </div>
  ),
})

const router = createRouter({
  routeTree,
  context: { auth: undefined! },
  defaultPendingMs: 200, // ورّي الـ pending UI بس لو التحميل اخد > 200ms
  defaultPendingMinMs: 500, // خليه يتعرض على الأقل 500ms عشان متبقش وميض
})

src/
├── lib/
│   └── auth.ts          → useAuth hook، getCurrentUser
├── routes/
│   ├── __root.tsx       → root مع context
│   ├── index.tsx        → /
│   ├── (auth)/
│   │   ├── login.tsx    → /login
│   │   └── register.tsx → /register
│   └── _authenticated/
│       ├── _authenticated.tsx → auth guard
│       ├── dashboard.tsx      → /dashboard
│       ├── settings.tsx       → /settings
│       └── admin.tsx          → /admin (فحص الـ role)

// src/lib/auth.ts
import { useState, useEffect } from 'react'

export interface User {
  id: string
  name: string
  email: string
  role: 'user' | 'admin'
}

export function useAuth() {
  const [user, setUser] = useState<User | null>(null)
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    getCurrentUser()
      .then(setUser)
      .finally(() => setIsLoading(false))
  }, [])

  async function signIn(credentials: { email: string; password: string }) {
    const user = await fetch('/api/auth/login', {
      method: 'POST',
      body: JSON.stringify(credentials),
    }).then(r => r.json())

    setUser(user)
    return user
  }

  async function signOut() {
    await fetch('/api/auth/logout', { method: 'POST' })
    setUser(null)
  }

  return { user, isLoading, signIn, signOut }
}

async function getCurrentUser(): Promise<User | null> {
  try {
    return await fetch('/api/auth/me').then(r => r.json())
  } catch {
    return null
  }
}

// src/routes/_authenticated/_authenticated.tsx
import { createFileRoute, redirect, Outlet, Link } from '@tanstack/react-router'
import { useRouter } from '@tanstack/react-router'

export const Route = createFileRoute('/_authenticated')({
  beforeLoad: ({ context, location }) => {
    if (context.auth.isLoading) return // لسه بيتحقق، ما تعملش redirect دلوقتي

    if (!context.auth.user) {
      throw redirect({
        to: '/login',
        search: { redirect: location.href },
      })
    }
  },
  component: AuthenticatedLayout,
})

function AuthenticatedLayout() {
  const { user, signOut } = Route.useRouteContext({ select: (ctx) => ctx.auth })
  const router = useRouter()

  async function handleSignOut() {
    await signOut()
    router.invalidate()
    router.navigate({ to: '/login' })
  }

  return (
    <div className="flex h-screen">
      <aside className="w-64 border-r p-4">
        <nav className="flex flex-col gap-2">
          <Link to="/dashboard" activeProps={{ className: 'font-bold' }}>
            لوحة التحكم
          </Link>
          <Link to="/settings" activeProps={{ className: 'font-bold' }}>
            الإعدادات
          </Link>
          {user?.role === 'admin' && (
            <Link to="/admin" activeProps={{ className: 'font-bold' }}>
              الإدارة
            </Link>
          )}
        </nav>
        <button onClick={handleSignOut} className="mt-auto">
          تسجيل الخروج
        </button>
      </aside>

      <main className="flex-1 p-6">
        <Outlet />
      </main>
    </div>
  )
}