Next.js: المسارات المتوازية ومسارات الاعتراض

src/app/
├── layout.tsx              # التخطيط الرئيسي: @children + @modal
└── (feed)/
    ├── layout.tsx          # تخطيط تدفق المحتوى: @children + @sidebar
    ├── page.tsx            # الصفحة الرئيسية لتدفق المحتوى
    └── photos/
        ├── [id]/
        │   └── page.tsx    # صفحة كاملة: /photos/123
        └── (.)[id]/
            └── page.tsx    # اعتراض: فتح كنافذة منبثقة في تدفق المحتوى

رسم توضيحي لهيكل المسارات: مسارات نظام الملفات تقابل مسارات URL.

// ============================================
// أساسيات Parallel Routes: تخطيط متعدد الفتحات للوحة التحكم
// ============================================

// src/app/(dashboard)/layout.tsx — تخطيط التوجيه المتوازي
export default function DashboardLayout({
  children,
  modal,
  sidebar,
  team,
}: {
  children: React.ReactNode;
  modal: React.ReactNode;
  sidebar: React.ReactNode;
  team: React.ReactNode;
}) {
  return (
    <div className="flex h-screen">
      {/* منطقة المحتوى الرئيسي */}
      <main className="flex-1 p-8 overflow-auto">
        {children}
      </main>

      {/* فتحة الشريط الجانبي(تصيير متوازي مستقل) */}
      <aside className="w-72 bg-gray-50 p-4 border-l">
        {sidebar}
      </aside>

      {/* فتحة الفريق(تصيير متوازي مستقل) */}
      <aside className="w-64 bg-gray-900 text-white p-4">
        {team}
      </aside>

      {/* فتحة النافذة المنبثقة(تصيير شرطي) */}
      {modal}
    </div>
  );
}

يُصيّر: تخطيط لوحة التحكم مع شريط جانبي داكن (روابط لوحة التحكم/المشاريع/الإعدادات) + منطقة المحتوى الرئيسي.

// src/app/(dashboard)/@sidebar/default.tsx — الحالة الافتراضية للشريط الجانبي
export default function SidebarDefault() {
  return (
    <div>
      <h3 className="font-bold text-lg mb-4">الشريط الجانبي</h3>
      <div className="space-y-2">
        <div className="p-3 bg-white rounded shadow-sm">
          <p className="font-medium">النشاط الأخير</p>
          <p className="text-sm text-gray-500">لا يوجد نشاط حديث</p>
        </div>
        <div className="p-3 bg-white rounded shadow-sm">
          <p className="font-medium">الإشعارات</p>
          <p className="text-sm text-gray-500">3 غير مقروءة</p>
        </div>
      </div>
    </div>
  );
}

// src/app/(dashboard)/@team/default.tsx — حالة فتحة الفريق الافتراضية
export default function TeamDefault() {
  return (
    <div className="p-4">
      <h3 className="font-bold mb-4">الفريق</h3>
      <div className="space-y-3">
        {["أليس", "بوب", "تشارلي", "ديانا"].map(name => (
          <div key={name} className="flex items-center gap-2">
            <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white text-sm">
              {name[0]}
            </div>
            <span className="text-sm">{name}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

زيارة /dashboard:
┌──────────────────────┬──────────┬──────────┐
│                      │          │          │
│   منطقة المحتوى الرئيسي      │ الشريط الجانبي │  الفريق    │
│   لوحة التحكم         │ النشاط   │  أليس     │
│   مرحبًا بعودتك!      │ الأخير   │  بوب      │
│                      │ إشعارات(3)│  تشارلي   │
│                      │          │  ديانا    │
└──────────────────────┴──────────┴──────────┘

ثلاث مناطق تُصيّر بشكل مستقل، لا تؤثر على بعضها البعض

رسم توضيحي: تنقل المستخدم؛ عرض page.tsx الخاص بالفتحة؛ عرض default.tsx الخاص بالفتحة.

// ============================================
// بدون default.tsx سيحدث خطأ 404
// كل @slot يجب أن يحتوي على default.tsx
// ============================================

// src/app/@modal/default.tsx — النافذة المنبثقة مخفية افتراضيًا
export default function ModalDefault() {
  return null; // لا توجد نافذة منبثقة، لا يُصيّر أي شيء
}

// src/app/(dashboard)/@sidebar/default.tsx
export default function SidebarDefault() {
  return (
    <div className="p-4">
      <h3 className="font-bold text-sm text-gray-500 uppercase">
        روابط سريعة
      </h3>
      <nav className="mt-3 space-y-2">
        <a href="/dashboard" className="block text-blue-600">لوحة التحكم</a>
        <a href="/dashboard/projects" className="block text-blue-600">المشاريع</a>
        <a href="/dashboard/settings" className="block text-blue-600">الإعدادات</a>
      </nav>
    </div>
  );
}

يتضمن شريطًا جانبيًا.

زيارة /dashboard:
- @modal لم يتم العثور على مسار مطابق → عرض ModalDefault (= null، لا يُصيّر)
- @sidebar لم يتم العثور على مسار مطابق → عرض SidebarDefault(روابط سريعة للتنقل)
- @team لم يتم العثور على مسار مطابق → عرض TeamDefault(قائمة أعضاء الفريق)

زيارة /dashboard/photos/1(بافتراض أن @modal وجد تطابقًا):
- @modal يطابق → عرض محتوى النافذة المنبثقة
- الفتحات الأخرى تعرض default.tsx الخاص بكل منها

رسم توضيحي: حاليًا في تدفق المحتوى؛ اعتراض (.)photo؛ عرض نافذة منبثقة في تدفق المحتوى؛ يقوم المستخدم بتحديث الصفحة؛ تجاوز الاعتراض عرض الصفحة بالكامل.

// ============================================
// Intercepting Route + Parallel Route
// النقر على الصورة في تدفق المحتوى → عرض نافذة منبثقة في الصفحة الحالية
// ============================================

// هيكل الدليل:
// app/
//   layout.tsx                    # التخطيط الجذري (مع @modal)
//   (feed)/
//     page.tsx                    # تدفق المحتوى
//     photos/
//       [id]/page.tsx             # صفحة كاملة: /photos/1
//   @modal/
//     default.tsx                 # لا نافذة منبثقة
//     (.)photos/
//       [id]/page.tsx             # اعتراض: عرض نافذة منبثقة في تدفق المحتوى

// src/app/layout.tsx — التخطيط الجذري (مع فتحة النافذة المنبثقة)
export default function RootLayout({
  children,
  modal,
}: {
  children: React.ReactNode;
  modal: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        {modal}
      </body>
    </html>
  );
}

// src/app/(feed)/page.tsx — صفحة تدفق المحتوى
import Link from "next/link";

export default function FeedPage() {
  const photos = Array.from({ length: 12 }, (_, i) => ({
    id: i + 1,
    url: `https://picsum.photos/seed/${i + 1}/300/300`,
    title: `صورة ${i + 1}`,
  }));

  return (
    <div className="max-w-4xl mx-auto p-8">
      <h1 className="text-3xl font-bold mb-6">تدفق الصور</h1>
      <div className="grid grid-cols-3 gap-4">
        {photos.map(photo => (
          <Link
            key={photo.id}
            href={`/photos/${photo.id}`}
            className="block overflow-hidden rounded-lg hover:opacity-90 transition-opacity"
          >
            <img
              src={photo.url}
              alt={photo.title}
              className="w-full h-64 object-cover"
            />
            <p className="mt-2 text-sm font-medium text-center">{photo.title}</p>
          </Link>
        ))}
      </div>
    </div>
  );
}

يُصيّر قائمة ديناميكية من العناصر باستخدام map().
المحتوى المرئي: تدفق الصور

// ============================================
// مسارات الاعتراض: فتح نافذة منبثقة في تدفق المحتوى
// الملف: src/app/@modal/(.)photos/[id]/page.tsx
// ============================================

'use client';

import { useRouter } from "next/navigation";

export default function PhotoModal({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const router = useRouter();
  const { id } = params;

  return (
    // قناع الخلفية
    <div
      className="fixed inset-0 bg-black/70 flex items-center justify-center z-50"
      onClick={() => router.back()}
    >
      {/* محتوى النافذة المنبثقة — النقر على الخلفية للإغلاق */}
      <div
        className="bg-white rounded-2xl overflow-hidden max-w-2xl w-full mx-4"
        onClick={e => e.stopPropagation()}
      >
        <img
          src={`https://picsum.photos/seed/${id}/800/600`}
          alt={`صورة ${id}`}
          className="w-full h-auto"
        />
        <div className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <h2 className="text-xl font-bold">صورة #{id}</h2>
              <p className="text-gray-500 text-sm mt-1">
                التقطها المصور
              </p>
            </div>
            <button
              onClick={() => router.back()}
              className="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-gray-200"
            >
              ✕
            </button>
          </div>
          <div className="flex gap-2 mt-4">
            <span className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">
              طبيعة
            </span>
            <span className="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm">
              مناظر طبيعية
            </span>
            <span className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm">
              عالية الدقة
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ============================================
// الصفحة الكاملة: عرض الصفحة الكاملة عند الوصول المستقل
// الملف: src/app/photos/[id]/page.tsx
// ============================================

import Link from "next/link";

export default function PhotoPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = params;

  return (
    <div className="max-w-4xl mx-auto p-8">
      <Link
        href="/"
        className="text-blue-600 hover:underline mb-4 inline-block"
      >
        &larr; العودة إلى تدفق المحتوى
      </Link>
      <img
        src={`https://picsum.photos/seed/${id}/1200/800`}
        alt={`صورة ${id}`}
        className="w-full rounded-lg"
      />
      <div className="mt-6">
        <h1 className="text-3xl font-bold">صورة #{id}</h1>
        <p className="text-gray-500 mt-2">
          عرض الصفحة الكاملة للصورة {id}. هذه الصفحة يمكن الوصول إليها مباشرة
          وتعمل حتى بدون JavaScript.
        </p>
        <div className="flex gap-4 mt-6">
          <Link
            href={`/photos/${Number(id) - 1}`}
            className="px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200"
          >
            ← السابق
          </Link>
          <Link
            href={`/photos/${Number(id) + 1}`}
            className="px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200"
          >
            التالي →
          </Link>
        </div>
      </div>
    </div>
  );
}

السيناريو 1: النقر على صورة من تدفق المحتوى
- حاليًا في / (شبكة تدفق الصور)
- النقر على الصورة 1
- عرض صورة أكبر في نافذة منبثقة(يتغير شريط العنوان إلى /photos/1)
- النقر على قناع الخلفية → router.back() → العودة إلى تدفق المحتوى
- النقر على زر الرجوع في المتصفح → إغلاق النافذة المنبثقة → تدفق المحتوى يبقى دون تغيير

السيناريو 2: الوصول المباشر إلى /photos/1
- تخطي مسارات الاعتراض
- عرض الصفحة الكاملة (صورة كبيرة بعرض كامل + أزرار السابق/التالي)
- يمكن تحديثها مباشرة، مشاركة الرابط

السيناريو 3: تحديث صفحة النافذة المنبثقة
- النافذة المنبثقة في تدفق المحتوى → الضغط على F5 للتحديث
- قواعد الاعتراض لا تعمل(ليس من تنقل تدفق المحتوى)
- عرض الصفحة الكاملة /photos/1

يتم تصيير الصفحة كما هو موصوف أعلاه، مع تحديث واجهة المستخدم بناءً على السلوك الموصوف.

// ============================================
// مثال على توجيه الاعتراض متعدد المستويات
// هيكل الدليل:
// app/
//   photos/
//     [id]/page.tsx                    → /photos/1(صفحة كاملة)
//   (feed)/
//     page.tsx                         → / (تدفق المحتوى)
//     categories/
//       [cat]/page.tsx                 → /categories/nature(صفحة الفئة)
//       (..)(..)photos/
//         [id]/page.tsx                → اعتراض /photos/1 → نافذة منبثقة على صفحة الفئات
// ============================================

// شرح قواعد المطابقة:
// مستويات (feed)/categories/[cat] = app/(feed)/categories/[cat]
// الهدف: app/photos/[id] المستويات = app/photos/[id]
// تحتاج إلى الصعود مستويين للمطابقة → (..)(..)

// app/(feed)/categories/(..)(..)photos/[id]/page.tsx
'use client';
import { useRouter } from "next/navigation";

export default function CategoryPhotoModal({ params }) {
  const router = useRouter();

  return (
    <div
      className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center"
      onClick={() => router.back()}
    >
      <div onClick={e => e.stopPropagation()} className="max-w-lg">
        <img
          src={`https://picsum.photos/seed/${params.id}/600/400`}
          alt=""
          className="rounded-lg"
        />
        <button
          onClick={() => router.back()}
          className="mt-2 px-4 py-2 bg-white rounded"
        >
          إغلاق
        </button>
      </div>
    </div>
  );
}

يقوم CategoryPhotoModal بتصيير واجهة المستخدم الخاصة به.

من /categories/nature، النقر على الصورة:
1. عرض صورة أكبر في نافذة منبثقة(شريط العنوان /photos/1)
2. النقر على إغلاق أو الخلفية → router.back() → العودة إلى /categories/nature
3. الوصول المباشر إلى /photos/1 → عرض الصفحة الكاملة(لا نوافذ منبثقة)
4. النافذة المنبثقة على صفحة الفئة تعمل بشكل صحيح

رسم توضيحي: إجراءات المستخدم؛ في تدفق المحتوى؟؛ فتحة @modal تطابق واعتراض المسارات؛ وصول مباشر عرض الصفحة الكاملة؛ عرض النافذة المنبثقة تحديث شريط العنوان؛ خروج المستخدم.

// ============================================
// نافذة منبثقة كاملة + Parallel Route + Intercepting Route
// تنفيذ نظام نوافذ منبثقة "قابل للتحديث، قابل للمشاركة، يمكن التراجع عنه"
// ============================================

// src/app/layout.tsx
export default function RootLayout({
  children,
  modal,
}: {
  children: React.ReactNode;
  modal: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        {modal}
      </body>
    </html>
  );
}

// src/app/@modal/default.tsx
export default function Default() {
  return null;
}

// src/app/@modal/(.)photos/[id]/page.tsx — اعتراض النوافذ المنبثقة
'use client';
import { useRouter } from "next/navigation";

export default function PhotoModal({ params }) {
  const router = useRouter();

  return (
    <div
      className="fixed inset-0 bg-black/80 flex items-center justify-center z-50"
      onClick={() => router.back()}
    >
      <div
        className="bg-white rounded-xl max-w-3xl w-full mx-4 shadow-2xl"
        onClick={e => e.stopPropagation()}
      >
        <div className="flex justify-end p-2">
          <button
            onClick={() => router.back()}
            className="w-8 h-8 flex items-center justify-center hover:bg-gray-100 rounded-full"
          >
            ✕
          </button>
        </div>
        <img
          src={`https://picsum.photos/seed/${params.id}/800/600`}
          alt=""
          className="w-full"
        />
        <div className="p-6">
          <h2 className="text-2xl font-bold">صورة #{params.id}</h2>
          <div className="flex gap-4 mt-4">
            <a
              href={`/photos/${params.id}`}
              className="text-sm text-blue-600 hover:underline"
              onClick={() => router.push(`/photos/${params.id}`)}
            >
              فتح في الصفحة الكاملة →
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

// src/app/(feed)/page.tsx — تدفق المحتوى
import Link from "next/link";

export default function Feed() {
  return (
    <div className="max-w-6xl mx-auto p-8">
      <h1 className="text-3xl font-bold mb-6">معرض الصور</h1>
      <div className="grid grid-cols-4 gap-4">
        {[1, 2, 3, 4, 5, 6, 7, 8].map(id => (
          <Link
            key={id}
            href={`/photos/${id}`}
            className="block group"
          >
            <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden">
              <img
                src={`https://picsum.photos/seed/${id}/400/400`}
                alt=""
                className="w-full h-full object-cover group-hover:scale-105 transition-transform"
              />
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}

يُصيّر: مكوّن تنقل باستخدام useRouter للتوجيه البرمجي.

تدفق المستخدم:

1. زيارة / → رؤية شبكة 8 صور
2. النقر على الصورة #3 → عرض صورة أكبر في نافذة منبثقة(URL: /photos/3)
3. النقر على ✕ في الزاوية العلوية → إغلاق النافذة المنبثقة(URL: /)
4. النقر على الصورة #5 مرة أخرى → نافذة منبثقة (URL: /photos/5)
5. النقر على زر الرجوع في المتصفح → إغلاق النافذة المنبثقة(URL: /)
6. الضغط على زر الرجوع مرة أخرى → الخروج من التطبيق(سلوك طبيعي)

سيناريو التحديث:
1. أثناء فتح النافذة المنبثقة، الضغط على F5 → تحديث الصفحة بالكامل
2. قواعد الاعتراض لا تعمل → عرض /photos/3 الصفحة الكاملة
3. الصفحة تعمل بشكل طبيعي، يوجد رابط تنقل للعودة

سيناريوهات المشاركة:
1. نسخ /photos/3 URL وإرساله إلى صديق
2. الصديق يفتح هذا → عرض الصفحة الكاملة(ليست نافذة منبثقة)
3. SEO للصفحة طبيعي، جميع المحتويات قابلة للفهرسة

رسم توضيحي للوصول القائم على الدور: admin (كامل)، editor (قراءة/كتابة)، viewer (قراءة فقط).

// ============================================
// التصيير الشرطي: عرض لوحة تحكم مختلفة حسب الدور
// ============================================

// src/app/(dashboard)/layout.tsx — تخطيط توجيه الأدوار
export default function DashboardLayout({
  children,
  admin,
  editor,
  viewer,
}: {
  children: React.ReactNode;
  admin: React.ReactNode;
  editor: React.ReactNode;
  viewer: React.ReactNode;
}) {
  // محاكاة الحصول على الدور من Cookie/Session
  const role = "admin";

  return (
    <div className="flex h-screen">
      {/* المحتوى الرئيسي */}
      <main className="flex-1 p-8">
        {children}
      </main>

      {/* عرض فتحات مختلفة بناءً على الدور */}
      <aside className="w-80 border-l p-4">
        {role === "admin" && admin}
        {role === "editor" && editor}
        {role === "viewer" && viewer}
      </aside>
    </div>
  );
}

يُصيّر واجهة مستخدم مكوّن ▶ مثال: لوحة تحكم مدفوعة بالدور كما هو موصوف في القسم.

// src/app/(dashboard)/@admin/default.tsx — لوحة المسؤول
export default function AdminPanel() {
  return (
    <div className="space-y-4">
      <h3 className="font-bold text-lg">عناصر تحكم المسؤول</h3>
      <div className="bg-red-50 border border-red-200 rounded-lg p-4">
        <p className="font-medium text-red-700">صحة النظام</p>
        <div className="mt-2 space-y-2">
          <div className="flex justify-between text-sm">
            <span>استخدام CPU</span>
            <span className="text-green-600">45%</span>
          </div>
          <div className="flex justify-between text-sm">
            <span>الذاكرة</span>
            <span className="text-yellow-600">72%</span>
          </div>
          <div className="flex justify-between text-sm">
            <span>المستخدمون النشطون</span>
            <span className="text-blue-600">1,234</span>
          </div>
        </div>
      </div>
      <div className="bg-white rounded-lg border p-4">
        <p className="font-medium">الموافقات المعلقة</p>
        <p className="text-2xl font-bold text-orange-600 mt-2">12</p>
      </div>
      <button className="w-full p-2 bg-blue-600 text-white rounded-lg">
        عرض جميع الإعدادات
      </button>
    </div>
  );
}

// src/app/(dashboard)/@editor/default.tsx — لوحة المحرر
export default function EditorPanel() {
  return (
    <div className="space-y-4">
      <h3 className="font-bold text-lg">أدوات المحرر</h3>
      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
        <p className="font-medium text-blue-700">عدد المسودات</p>
        <p className="text-3xl font-bold mt-2">8</p>
      </div>
      <div className="bg-white rounded-lg border p-4">
        <p className="font-medium">التعديلات الأخيرة</p>
        <div className="mt-2 space-y-2 text-sm">
          <p>• تحديث صورة الصفحة الرئيسية</p>
          <p>• إصلاح خطأ إملائي في صفحة حول</p>
          <p>• إضافة مقالة مدونة جديدة</p>
        </div>
      </div>
      <button className="w-full p-2 bg-green-600 text-white rounded-lg">
        إنشاء مقال جديد
      </button>
    </div>
  );
}

// src/app/(dashboard)/@viewer/default.tsx — لوحة المشاهد
export default function ViewerPanel() {
  return (
    <div className="space-y-4">
      <h3 className="font-bold text-lg">نظرة عامة</h3>
      <div className="bg-gray-50 border rounded-lg p-4">
        <p className="font-medium">لوحة التحكم الخاصة بك</p>
        <p className="text-sm text-gray-500 mt-2">
          لديك وصول للقراءة فقط. اتصل بالمسؤول للحصول على أذونات التحرير.
        </p>
      </div>
      <div className="bg-white border rounded-lg p-4">
        <p className="font-medium">روابط سريعة</p>
        <div className="mt-2 space-y-2 text-sm">
          <a href="/docs" className="block text-blue-600">التوثيق</a>
          <a href="/reports" className="block text-blue-600">التقارير</a>
          <a href="/help" className="block text-blue-600">مركز المساعدة</a>
        </div>
      </div>
    </div>
  );
}

المسؤول(role = "admin"):
┌────────────────────────────┬──────────────────────┐
│                            │  عناصر تحكم المسؤول    │
│    لوحة التحكم              │  ┌────────────────┐  │
│    مرحبًا بعودتك، أليس!     │  │ CPU: 45% ✅    │  │
│                            │  │ الذاكرة: 72% ⚠️ │  │
│    ملخص المشروع            │  │ المستخدمون: 1,234│  │
│    12 مشروعًا نشطًا         │  └────────────────┘  │
│    48 مهمة معلقة           │  الموافقات المعلقة     │
│    8 أعضاء فريق            │  12                   │
│                            │  [عرض جميع الإعدادات] │
└────────────────────────────┴──────────────────────┘

المحرر(role = "editor"):
┌────────────────────────────┬──────────────────────┐
│                            │  أدوات المحرر          │
│    لوحة التحكم              │  عدد المسودات: 8       │
│    مرحبًا بعودتك، بوب!      │  التعديلات الأخيرة:     │
│                            │  • تحديث الصفحة الرئيسية│
│    مشاريعي                 │  • إصلاح خطأ إملائي    │
│    5 مشاريع نشطة           │  • إضافة مقالة مدونة   │
│                            │  [إنشاء مقال جديد]    │
└────────────────────────────┴──────────────────────┘

المشاهد(role = "viewer"):
┌────────────────────────────┬──────────────────────┐
│                            │  نظرة عامة             │
│    لوحة التحكم              │  وصول للقراءة فقط      │
│    مرحبًا، تشارلي!          │  روابط سريعة:          │
│                            │  • التوثيق             │
│    نشاط الفريق             │  • التقارير            │
│    10 أعضاء فريق متصلون    │  • مركز المساعدة       │
│                            │                      │
└────────────────────────────┴──────────────────────┘

// ============================================
// مثال شامل: نظام توجيه متكامل لمنصات المحتوى
// يغطي Parallel Routes + Intercepting Routes + لوحة التحكم الشرطية
// ============================================

// src/app/layout.tsx — التخطيط الجذري (مع فتحة النافذة المنبثقة)
export default function RootLayout({
  children,
  modal,
}: {
  children: React.ReactNode;
  modal: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className="bg-gray-50">
        <header className="bg-white shadow-sm sticky top-0 z-40">
          <div className="max-w-6xl mx-auto px-4 py-3 flex justify-between">
            <a href="/" className="text-xl font-bold text-blue-600">PhotoVault</a>
            <nav className="flex gap-4">
              <a href="/" className="hover:text-blue-600">تدفق المحتوى</a>
              <a href="/dashboard" className="hover:text-blue-600">لوحة التحكم</a>
            </nav>
          </div>
        </header>
        {children}
        {modal}
      </body>
    </html>
  );
}

// src/app/@modal/default.tsx
export default function Default() {
  return null;
}

// src/app/@modal/(.)photos/[id]/page.tsx — اعتراض النوافذ المنبثقة
'use client';
import { useRouter } from "next/navigation";

export default function PhotoModal({ params }) {
  const router = useRouter();

  return (
    <div
      className="fixed inset-0 bg-black/70 flex items-center justify-center z-50"
      onClick={() => router.back()}
    >
      <div
        className="bg-white rounded-xl max-w-2xl w-full mx-4 overflow-hidden shadow-2xl"
        onClick={e => e.stopPropagation()}
      >
        <img
          src={`https://picsum.photos/seed/${params.id}/800/600`}
          alt=""
          className="w-full"
        />
        <div className="p-4 flex justify-between items-center">
          <div>
            <h2 className="font-bold">صورة #{params.id}</h2>
            <p className="text-sm text-gray-500">انقر على الخلفية للإغلاق</p>
          </div>
          <button
            onClick={() => router.push(`/photos/${params.id}`)}
            className="text-sm text-blue-600 hover:underline"
          >
            فتح الصفحة الكاملة
          </button>
        </div>
      </div>
    </div>
  );
}

// src/app/(feed)/page.tsx — تدفق المحتوى
import Link from "next/link";

export default function FeedPage() {
  const photos = Array.from({ length: 12 }, (_, i) => ({
    id: i + 1,
    url: `https://picsum.photos/seed/${i + 1}/400/400`,
    title: `صورة ${i + 1}`,
  }));

  return (
    <div className="max-w-6xl mx-auto p-8">
      <h1 className="text-3xl font-bold mb-6">تدفق الصور</h1>
      <div className="grid grid-cols-4 gap-4">
        {photos.map(photo => (
          <Link
            key={photo.id}
            href={`/photos/${photo.id}`}
            className="block aspect-square rounded-lg overflow-hidden bg-gray-100"
          >
            <img
              src={photo.url}
              alt={photo.title}
              className="w-full h-full object-cover hover:scale-105 transition-transform"
            />
          </Link>
        ))}
      </div>
    </div>
  );
}

// src/app/photos/[id]/page.tsx — صفحة الصورة الكاملة
export default async function PhotoPage({ params }) {
  const { id } = params;

  return (
    <div className="max-w-4xl mx-auto p-8">
      <a href="/" className="text-blue-600 hover:underline mb-4 inline-block">
        &larr; العودة إلى تدفق المحتوى
      </a>
      <img
        src={`https://picsum.photos/seed/${id}/1200/800`}
        alt=""
        className="w-full rounded-lg shadow-lg"
      />
      <div className="mt-6">
        <h1 className="text-3xl font-bold">صورة #{id}</h1>
        <p className="text-gray-500 mt-2">
          هذه هي عرض الصفحة الكاملة. شارك هذا الرابط مباشرة مع الآخرين.
        </p>
      </div>
    </div>
  );
}

// src/app/(dashboard)/layout.tsx — تخطيط التوجيه المتوازي للوحة التحكم
export default function DashboardLayout({
  children,
  admin,
}: {
  children: React.ReactNode;
  admin: React.ReactNode;
}) {
  const role = "admin";

  return (
    <div className="max-w-6xl mx-auto p-8 flex gap-8">
      <div className="flex-1">{children}</div>
      <aside className="w-80">
        {role === "admin" && admin}
      </aside>
    </div>
  );
}

// src/app/(dashboard)/@admin/default.tsx
export default function AdminPanel() {
  return (
    <div className="bg-white rounded-xl shadow-sm border p-6 space-y-4">
      <h3 className="font-bold text-lg">لوحة المسؤول</h3>
      <div className="space-y-2">
        <div className="flex justify-between">
          <span>إجمالي الصور</span>
          <span className="font-bold">1,234</span>
        </div>
        <div className="flex justify-between">
          <span>الرفع اليومي</span>
          <span className="font-bold text-green-600">+48</span>
        </div>
        <div className="flex justify-between">
          <span>المساحة المستخدمة</span>
          <span className="font-bold">237 GB</span>
        </div>
      </div>
      <button className="w-full p-2 bg-blue-600 text-white rounded-lg">
        إدارة المعرض
      </button>
    </div>
  );
}

// src/app/(dashboard)/page.tsx — الصفحة الرئيسية للوحة التحكم
export default function DashboardPage() {
  return (
    <div>
      <h1 className="text-2xl font-bold">لوحة التحكم</h1>
      <p className="text-gray-500 mt-2">نظرة عامة على معرض الصور الخاص بك</p>
      <div className="grid grid-cols-2 gap-4 mt-6">
        <div className="bg-white p-6 rounded-xl shadow-sm border">
          <p className="text-sm text-gray-500">هذا الأسبوع</p>
          <p className="text-3xl font-bold mt-1">342</p>
          <p className="text-sm text-green-600 mt-1">↑ 12% عن الأسبوع الماضي</p>
        </div>
        <div className="bg-white p-6 rounded-xl shadow-sm border">
          <p className="text-sm text-gray-500">إجمالي المشاهدات</p>
          <p className="text-3xl font-bold mt-1">89.4K</p>
          <p className="text-sm text-green-600 mt-1">↑ 8% عن الشهر الماضي</p>
        </div>
      </div>
    </div>
  );
}

1. زيارة / → شبكة 12 صورة
2. النقر على الصورة → عرض صورة أكبر في نافذة منبثقة(URL: /photos/5)
3. النقر على الخلفية → إغلاق النافذة المنبثقة، العودة إلى تدفق المحتوى
4. تحديث → عرض الصفحة الكاملة /photos/5
5. مشاركة /photos/5 → يرى الأصدقاء الصفحة الكاملة
6. زيارة /dashboard → عرض لوحة التحكم + لوحة المسؤول
7. من لوحة التحكم، النقر على الصورة → نفس تجربة النافذة المنبثقة (مسارات الاعتراض)