// app/dashboard/page.tsx — Streaming with Suspense
import { Suspense } from 'react';
import { DashboardStats } from '@/components/DashboardStats';
import { RecentOrders } from '@/components/RecentOrders';
import { UserActivity } from '@/components/UserActivity';
import { StatsLoading, OrdersLoading, ActivityLoading } from '@/components/Skeletons';

// Each component fetches its own data independently
export default function DashboardPage() {
  return (
    <div className="dashboard">
      <h1>Dashboard</h1>

      {/* Stats load independently — don't block the page */}
      <Suspense fallback={<StatsLoading />}>
        <DashboardStats />  {/* Fetches from /api/stats */}
      </Suspense>

      <div className="grid grid-cols-2 gap-6">
        {/* Orders and activity load in parallel */}
        <Suspense fallback={<OrdersLoading />}>
          <RecentOrders />  {/* Fetches from /api/orders */}
        </Suspense>

        <Suspense fallback={<ActivityLoading />}>
          <UserActivity />  {/* Fetches from /api/activity */}
        </Suspense>
      </div>
    </div>
  );
}

// app/components/DashboardStats.tsx — Server Component with async data
async function getDashboardStats() {
  // This runs on the server — can be slow
  const [revenue, users, orders] = await Promise.all([
    fetch('https://api.example.com/revenue').then(r => r.json()),
    fetch('https://api.example.com/users/count').then(r => r.json()),
    fetch('https://api.example.com/orders/today').then(r => r.json()),
  ]);
  return { revenue, users, orders };
}

export async function DashboardStats() {
  const stats = await getDashboardStats(); // Suspense catches the promise

  return (
    <div className="grid grid-cols-3 gap-4">
      <StatCard label="Revenue" value={stats.revenue} />
      <StatCard label="Users" value={stats.users} />
      <StatCard label="Orders" value={stats.orders} />
    </div>
  );
}

// app/api/geo/route.ts — Edge Runtime example
export const runtime = 'edge'; // Enable Edge Runtime

export async function GET(request: Request) {
  // Access geo data from edge (Vercel only)
  const { geo } = request as any;

  return Response.json({
    country: geo?.country ?? 'Unknown',
    city: geo?.city ?? 'Unknown',
    latency: 'sub-10ms', // Response from nearest edge node
  });
}

// middleware.ts — Middleware ALWAYS runs on Edge Runtime
import { NextRequest, NextResponse } from 'next/server';

export function middleware(request: NextRequest) {
  const country = request.geo?.country;

  // Redirect based on geography — executed at the edge
  if (country === 'CN') {
    return NextResponse.redirect(new URL('/cn', request.url));
  }

  return NextResponse.next();
}

app/
  layout.tsx           ← Contains @team and @analytics slots
  @team/
    page.tsx           ← Renders in team slot
  @analytics/
    page.tsx           ← Renders in analytics slot
  page.tsx

// app/layout.tsx — Root layout with parallel route slots
interface LayoutProps {
  children: React.ReactNode;
  team: React.ReactNode;       // @team slot
  analytics: React.ReactNode;  // @analytics slot
}

export default function Layout({ children, team, analytics }: LayoutProps) {
  return (
    <div className="grid grid-cols-[1fr_300px] gap-6">
      <div className="main-content">
        {children}
      </div>
      <aside className="sidebar space-y-6">
        {team}       {/* Renders app/@team/page.tsx */}
        {analytics}  {/* Renders app/@analytics/page.tsx */}
      </aside>
    </div>
  );
}

app/
  photos/
    [id]/
      page.tsx         ← Full photo page (direct navigation)
  @modal/
    (.)photos/[id]/    ← (.) intercepts same-level route
      page.tsx         ← Photo shown in modal
  layout.tsx           ← Contains the @modal slot

// app/@modal/(.)photos/[id]/page.tsx — Intercepting modal
import { PhotoModal } from '@/components/PhotoModal';

export default function PhotoModalPage({ params }: { params: { id: string } }) {
  return <PhotoModal photoId={params.id} />;
}

// app/photos/[id]/page.tsx — Full page (when accessed directly)
import { PhotoDetail } from '@/components/PhotoDetail';

export default function PhotoPage({ params }: { params: { id: string } }) {
  return <PhotoDetail photoId={params.id} />;
}

// lib/data/posts.ts — Caching examples

// 1. Static cache — cached until revalidation (default)
export async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { tags: ['posts'] }, // Tag for targeted revalidation
  });
  return res.json();
}

// 2. Time-based revalidation (ISR behavior)
export async function getPopularPosts() {
  const res = await fetch('https://api.example.com/posts/popular', {
    next: { revalidate: 3600 }, // Revalidate every hour
  });
  return res.json();
}

// 3. No cache — always fresh (dynamic)
export async function getLivePrices() {
  const res = await fetch('https://api.example.com/prices', {
    cache: 'no-store', // Never cache
  });
  return res.json();
}

// 4. Tag-based revalidation in a Server Action
import { revalidateTag } from 'next/cache';

export async function publishPost(id: string) {
  'use server';
  await prisma.post.update({ where: { id }, data: { published: true } });
  revalidateTag('posts'); // Invalidates all fetches tagged with 'posts'
}

// app/dashboard/page.tsx — Forces dynamic rendering
import { cookies } from 'next/headers'; // Opting into dynamic rendering

export default async function Dashboard() {
  const sessionCookie = cookies().get('session'); // Makes page dynamic
  const userData = await getUserData(sessionCookie?.value);

  return <DashboardView user={userData} />;
}

// app/shop/@cart/default.tsx — Cart slot (always visible)
import { getCart } from '@/lib/cart';

export default async function CartSidebar() {
  const cart = await getCart();

  return (
    <div className="cart-sidebar">
      <h3>Cart ({cart.items.length})</h3>
      {cart.items.map(item => (
        <CartItem key={item.id} item={item} />
      ))}
      <p className="font-bold">Total: ${cart.total}</p>
    </div>
  );
}

// app/shop/@modal/(.)product/[id]/page.tsx — Quick-view modal
import { Modal } from '@/components/Modal';
import { getProduct } from '@/lib/products';

export default async function QuickView({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id);

  return (
    <Modal>
      <div className="p-6">
        <h2>{product.name}</h2>
        <p>{product.description}</p>
        <AddToCartButton productId={product.id} />
      </div>
    </Modal>
  );
}