Context API：告別 Props Drilling
跨元件共享狀態的正確方式

// App.tsx — 資料的源頭
function App() {
  const [user, setUser] = useState({ name: 'Joseph', email: 'fg6ts15@gmail.com' });

  // 把 user 傳給 Layout（但 Layout 其實不用它！）
  return <Layout user={user} />;
}

// Layout.tsx — 中間人，自己不用 user，但必須接收並轉傳
function Layout({ user }: { user: User }) {
  return (
    <div>
      <main>...</main>
      {/* 繼續往下傳給 Sidebar */}
      <Sidebar user={user} />
    </div>
  );
}

// Sidebar.tsx — 又是中間人
function Sidebar({ user }: { user: User }) {
  return (
    <nav>
      {/* 終於傳到真正需要的地方 */}
      <UserProfile user={user} />
    </nav>
  );
}

// UserProfile.tsx — 真正用到 user 的元件
function UserProfile({ user }: { user: User }) {
  return <div>{user.name}</div>;
}

// context/UserContext.tsx
import { createContext, useContext, useState } from 'react';

type User = {
  name: string;
  email: string;
};

type UserContextType = {
  user: User | null;
  setUser: (user: User | null) => void;
};

// 步驟 1：建立 Context
// undefined 作為預設值，讓我們在沒有 Provider 時能偵測到錯誤
const UserContext = createContext<UserContextType | undefined>(undefined);

// 步驟 2：建立 Provider 元件
// Provider 是「廣播站」，value 是要廣播的內容
export function UserProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

// 步驟 3：建立自訂 Hook 封裝存取（最佳實踐）
// 好處：不用每次都引入 UserContext，也確保一定在 Provider 內使用
export function useUser() {
  const context = useContext(UserContext);
  if (!context) {
    // 清楚的錯誤訊息，方便 debug
    throw new Error('useUser must be used within UserProvider');
  }
  return context;
}

// App.tsx — 用 Provider 包住整個 app
function App() {
  return (
    <UserProvider>
      <Layout />  {/* ← Layout 不需要任何 props！ */}
    </UserProvider>
  );
}

// Layout.tsx — 完全乾淨，不再是中間人
function Layout() {
  return (
    <div>
      <main>...</main>
      <Sidebar />  {/* ← Sidebar 也不需要任何 props！ */}
    </div>
  );
}

// Sidebar.tsx — 同樣不需要傳任何東西
function Sidebar() {
  return (
    <nav>
      <UserProfile />
    </nav>
  );
}

// UserProfile.tsx — 直接從 Context 取資料
function UserProfile() {
  const { user } = useUser();  // ← 直接收聽廣播！

  if (!user) return <div>未登入</div>;
  return <div>{user.name}</div>;
}

// context/ThemeContext.tsx
import { createContext, useContext, useState, useEffect } from 'react';

type Theme = 'light' | 'dark';

type ThemeContextType = {
  theme: Theme;
  toggleTheme: () => void;
};

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>('light');

  // 記住用戶偏好：app 啟動時從 localStorage 讀取
  useEffect(() => {
    const saved = localStorage.getItem('theme') as Theme;
    if (saved === 'light' || saved === 'dark') {
      setTheme(saved);
    }
  }, []);

  const toggleTheme = () => {
    setTheme(prev => {
      const next = prev === 'light' ? 'dark' : 'light';
      // 同時存進 localStorage，下次開啟 app 還記得
      localStorage.setItem('theme', next);
      return next;
    });
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {/* 根據 theme 加上 Tailwind 的 dark class */}
      <div className={theme === 'dark' ? 'dark' : ''}>
        {children}
      </div>
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) throw new Error('useTheme must be used within ThemeProvider');
  return context;
}

// 可以放在 app 的任何地方，不管層級多深
function ThemeToggleButton() {
  const { theme, toggleTheme } = useTheme();

  return (
    <button
      onClick={toggleTheme}
      className="px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-700"
    >
      {theme === 'dark' ? '☀️ 切換淺色' : '🌙 切換深色'}
    </button>
  );
}

// Header 裡使用
function Header() {
  const { theme } = useTheme();

  return (
    <header className={theme === 'dark' ? 'bg-gray-900 text-white' : 'bg-white text-gray-900'}>
      <ThemeToggleButton />
    </header>
  );
}

// 任意深度的子元件都能直接拿到 theme
function DeepNestedComponent() {
  const { theme } = useTheme();
  return <div className={theme === 'dark' ? 'text-white' : 'text-gray-900'}>...</div>;
}

// app/layout.tsx
import { ThemeProvider } from '@/context/ThemeContext';
import { UserProvider } from '@/context/UserContext';
import { CartProvider } from '@/context/CartContext';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-TW">
      <body>
        {/* 外層放最不常變動的 Context */}
        <ThemeProvider>
          {/* 中層放中等頻率更新的 */}
          <UserProvider>
            {/* 內層放較常更新的 */}
            <CartProvider>
              {children}
            </CartProvider>
          </UserProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}

// providers/AppProviders.tsx — 把所有 Provider 整合在一起
export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider>
      <UserProvider>
        <CartProvider>
          {children}
        </CartProvider>
      </UserProvider>
    </ThemeProvider>
  );
}

// app/layout.tsx — 乾淨很多
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <AppProviders>{children}</AppProviders>
      </body>
    </html>
  );
}

// ✅ 好做法：按更新頻率拆分
const CountContext = createContext(0);        // 高頻更新 → 單獨隔離
const UserContext = createContext(null);      // 低頻更新 → 獨立管理
const ThemeContext = createContext('light');  // 極低頻 → 獨立管理

// 現在：
// count 每秒更新 → 只有 useContext(CountContext) 的元件重渲染
// UserProfile 用 UserContext → 完全不受 count 影響
// ThemeToggle 用 ThemeContext → 同樣不受 count 影響