Zustand：
輕量全域狀態管理

// store/useCartStore.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

type CartItem = {
  id: string;
  name: string;
  price: number;
  qty: number;
};

type CartStore = {
  items: CartItem[];
  addItem: (product: Omit<CartItem, 'qty'>) => void;
  removeItem: (id: string) => void;
  updateQty: (id: string, qty: number) => void;
  clearCart: () => void;
  totalPrice: () => number;
};

export const useCartStore = create<CartStore>()(
  persist(  // ✅ 用 persist middleware 包裹，自動持久化到 localStorage！
    (set, get) => ({
      items: [],

      // 加入商品：如果已存在則 qty+1，否則新增
      addItem: (product) => set((state) => {
        const existing = state.items.find(i => i.id === product.id);
        if (existing) {
          return {
            items: state.items.map(i =>
              i.id === product.id ? { ...i, qty: i.qty + 1 } : i
            ),
          };
        }
        return { items: [...state.items, { ...product, qty: 1 }] };
      }),

      // 移除商品
      removeItem: (id) => set((state) => ({
        items: state.items.filter(i => i.id !== id),
      })),

      // 更新數量：qty <= 0 時自動移除
      updateQty: (id, qty) => set((state) => ({
        items: qty > 0
          ? state.items.map(i => i.id === id ? { ...i, qty } : i)
          : state.items.filter(i => i.id !== id),
      })),

      // 清空購物車
      clearCart: () => set({ items: [] }),

      // 衍生值：直接在 store 裡定義計算邏輯
      // 使用 get() 而非 set()，因為只是讀取當前 state
      totalPrice: () => get().items.reduce(
        (sum, i) => sum + i.price * i.qty,
        0
      ),
    }),
    {
      name: 'cart-storage',  // localStorage 的 key 名稱
      // 可選：partialize 只持久化特定欄位
      // partialize: (state) => ({ items: state.items }),
    }
  )
);

// 商品卡片：只需要 addItem
function ProductCard({ product }: { product: { id: string; name: string; price: number } }) {
  const addItem = useCartStore((state) => state.addItem);
  return (
    <div className="card">
      <h3>{product.name}</h3>
      <p>NT$ {product.price}</p>
      <button onClick={() => addItem(product)}>加入購物車</button>
    </div>
  );
}

// 導覽列購物車圖示：只顯示總數量
function CartBadge() {
  const items = useCartStore((state) => state.items);
  const totalQty = items.reduce((sum, i) => sum + i.qty, 0);
  // 只有 items 改變時才重渲染，與 totalPrice 無關
  return (
    <div className="relative">
      <ShoppingCartIcon />
      {totalQty > 0 && (
        <span className="badge">{totalQty}</span>
      )}
    </div>
  );
}

// 購物車總計：只需要 totalPrice
function CartTotal() {
  const totalPrice = useCartStore((state) => state.totalPrice);
  return <div className="text-xl font-bold">總計：NT$ {totalPrice()}</div>;
}

// 購物車列表：需要 items、updateQty、removeItem
function CartList() {
  const items = useCartStore((state) => state.items);
  const updateQty = useCartStore((state) => state.updateQty);
  const removeItem = useCartStore((state) => state.removeItem);

  return (
    <ul>
      {items.map(item => (
        <li key={item.id} className="flex items-center gap-4">
          <span>{item.name}</span>
          <input
            type="number"
            value={item.qty}
            onChange={(e) => updateQty(item.id, Number(e.target.value))}
            min={0}
          />
          <button onClick={() => removeItem(item.id)}>移除</button>
        </li>
      ))}
    </ul>
  );
}

// 根據應用規模選擇狀態管理方案

// 1. 小型專案 / 簡單共享狀態 → Context API
//    適合：主題切換（dark/light）、語言設定、登入使用者資訊
//    特點：零依賴、React 內建、概念簡單
const ThemeContext = createContext({ theme: 'light', toggle: () => {} });

// 2. 中大型專案 / 複雜 state 邏輯 → Zustand ⭐ 2026 年首選
//    適合：購物車、表單狀態、多步驟流程、跨元件共享的複雜 state
//    特點：輕量、TypeScript 友好、middleware 生態完整
const useAppStore = create<AppState>()(/* ... */);

// 3. 超大型應用 / 需要完整 DevTools 生態 → Redux Toolkit
//    適合：企業級應用、需要嚴格 action 追蹤、已有 Redux 技術債
//    特點：最成熟的生態系、最完整的工具鏈、學習成本最高
const store = configureStore({ reducer: { /* ... */ } });

// 判斷流程：
// Q: 只是主題/語言？→ Context
// Q: 有購物車/複雜 state？→ Zustand
// Q: 是 10 人以上團隊的大型 SaaS？→ Redux Toolkit 值得投資