#React Server Components (RSC)

'use client'; // <--- 这里是 Client Boundary 的起点

import { useState } from 'react';
import Button from './Button'; // Button.tsx 没有 "use client"，但会被包含在客户端 bundle 中
import Tooltip from './Tooltip'; // Tooltip.tsx 也没有 "use client"，同样会被包含

export default function InteractiveCard() {
  const [isActive, setIsActive] = useState(false);

  return (
    <div onClick={() => setIsActive(!isActive)}>
      <p>Click me!</p>
      <Button />
      <Tooltip text="This is a card" />
    </div>
  );
}

// Server Component（默认，无需标记）
import CounterButton from './CounterButton'; // 这是一个 Client Component

async function getPageData() {
  // 在服务端获取数据
  const res = await fetch('https://api.example.com/data');
  return res.json();
}

export default async function Page() {
  const data = await getPageData();

  return (
    <div>
      <h1>{data.title}</h1> {/* 服务端渲染 */}
      <p>This part is static.</p>
      {/* Client Component 可以无缝嵌入 Server Component */}
      <CounterButton />
    </div>
  );
}

'use client'; // Client Component

import { useState } from 'react';

export default function CounterButton() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
}

'use client'; // Client Component

import React, { useState } from 'react';

interface TabsProps {
  tabLabels: string[];
  children: React.ReactNode;
}

export default function Tabs({ tabLabels, children }: TabsProps) {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <div>
      <nav>
        {tabLabels.map((label, index) => (
          <button key={label} onClick={() => setActiveTab(index)}>
            {label}
          </button>
        ))}
      </nav>
      {/* React.Children.toArray 会确保只渲染活跃的子组件 */}
      <div>{React.Children.toArray(children)[activeTab]}</div>
    </div>
  );
}

// Server Component（默认）
import Tabs from '../components/Tabs';
import Analytics from '../components/Analytics'; // Server Component
import UserSettings from '../components/UserSettings'; // Server Component

export default function DashboardPage() {
  const labels = ['Analytics', 'Settings'];

  return (
    <main>
      <h1>Dashboard</h1>
      {/*
        这里，Tabs 是 Client Component（负责交互逻辑），
        但 Analytics 和 UserSettings 是在服务端渲染好的 Server Component，
        它们作为 children prop 传递给 Tabs 组件。
        这样既保持了交互性，又最大化利用了服务端渲染的优势。
      */}
      <Tabs tabLabels={labels}>
        <Analytics />
        <UserSettings />
      </Tabs>
    </main>
  );
}

// Server Component 通过 props 接收 loaderData
export default function UserPage({ loaderData }: { loaderData: { name: string } }) {
  return <div>Welcome, {loaderData.name}</div>;
}

'use client';
// Client Component 同样可以通过 props 接收 loaderData
export default function UserPage({ loaderData }: { loaderData: { name: string } }) {
  return <div>Welcome, {loaderData.name}</div>;
}

// Server Component 定义在 data loader 文件中
function UserProfile() {
  return <div>User Profile (Server Rendered)</div>;
}

export const loader = async () => {
  const userData = await fetchUserData();

  return {
    user: userData,
    // 返回一个 Server Component 作为数据的一部分
    ProfileComponent: <UserProfile />,
  };
};

'use client';
import { Outlet } from '@modern-js/runtime/router';

export default function UserLayout({
  loaderData,
}: {
  loaderData: { user: any; ProfileComponent: React.ReactNode };
}) {
  const { user, ProfileComponent } = loaderData;

  return (
    <div>
      {/* 在 Client Component 中直接渲染 Server Component */}
      {ProfileComponent}
      <div>User: {user.name}</div>
      <Outlet />
    </div>
  );
}

import { getRequest } from '@modern-js/runtime';

export default async function Page() {
  const request = getRequest();
  const url = new URL(request.url);
  const searchParams = url.searchParams;
  const query = searchParams.get('q');

  return <div>Search query: {query}</div>;
}

import { setHeaders } from '@modern-js/runtime';

export default async function Page() {
  setHeaders({
    'X-Custom-Header': 'custom-value',
    'Cache-Control': 'public, max-age=3600',
  });

  return <div>Page content</div>;
}

import { setStatus } from '@modern-js/runtime';

export default async function Page() {
  setStatus(201);
  return <div>Resource created</div>;
}

import { redirect } from '@modern-js/runtime';

export default async function Page() {
  // 简单重定向，使用默认状态码 307
  redirect('/new-path');

  // 指定状态码
  redirect('/new-path', 301);

  // 指定状态码和响应头
  redirect('/new-path', {
    status: 301,
    headers: {
      'X-Redirect-From': '/old-path',
    },
  });

  return null; // redirect 后不会执行到这里
}

'use client';

export default function Page() {
  // 现有的客户端逻辑保持不变
}