Day 24: 【前端 #5】狀態管理的哲學：讓 UI 成為數據的鏡子

# 角色 (Role)

你是一位資深的 JavaScript 前端架構師，精通「數據驅動 UI」與「狀態管理」的設計模式。你擅長將傳統的命令式 DOM 操作，重構為以「單一真理之源 (Single Source of Truth)」為核心的現代化、宣告式 UI 架構。

# 目標 (Objective)

請對現有的 `@frontend/script.js` 進行一次架構性重構，**為應用程式注入一個輕量的「狀態管理」核心**。你需要建立一個中央的 `state` 物件、一個主 `render()` 函式以及一個 `setState()` 更新器，徹底改造應用程式的數據流與渲染機制，使其完全由狀態驅動。

# 上下文與關鍵資訊 (Context & Key Information)

  * **目標重構檔案**: `@frontend/script.js` (其中已包含 Modal 邏輯和初版的數據獲取函式)。
  * **依賴模組**: `@frontend/api.js` (提供 `fetchHabits` 函式)。
  * **核心理念**: 我們的目標是讓 DOM 成為 `state` 的鏡像。我們不再手動操作 UI，而是只修改 `state`，然後由渲染引擎根據最新的 `state` 自動重繪介面。

# 產出格式與要求 (Your Task & Output Requirements)

請直接重寫 `@frontend/script.js` 的完整內容，並嚴格遵循以下所有架構設計步驟：

### **Part 1: 建立「狀態中心 (State Center)」**

  * 在檔案的最上方，建立一個名為 `state` 的 `const` 物件，作為整個應用的「單一真理之源」。
  * 初始 `state` 應包含**所有**描述 UI 可能狀態的屬性：
    ```javascript
    const state = {
      habits: [],
      isLoading: true, // 用於顯示載入提示
      error: null,     // 用於顯示錯誤訊息
    };
    ```

### **Part 2: 建立「主渲染引擎 (Main Render Engine)」**

  * 建立一個名為 `render` 的主函式。此函式將成為未來所有渲染邏輯的入口。
  * 在 `render` 函式內部，呼叫一個更具體的渲染函式，例如 `renderHabitList()`。
  * 接著，建立 `renderHabitList` 函式，其**唯一職責**是根據 `state` 的當前內容，來渲染習慣列表：
      * **清空容器**: 首先，清空 `.habit-list-container` 的現有內容。
      * **處理載入狀態**: 如果 `state.isLoading` 為 `true`，則在容器中顯示載入提示（例如：`<p>Loading...</p>`），並提前返回。
      * **處理錯誤狀態**: 如果 `state.error` 存在，則在容器中顯示錯誤訊息，並提前返回。
      * **處理空狀態**: 如果 `state.habits` 陣列為空，則顯示一個友好的提示（例如：`<p>今天沒有習慣，快新增一個吧！</p>`）。
      * **渲染列表**: 遍歷 `state.habits` 陣列，為每個 `habit` 物件生成對應的 HTML 列表項字串，最後將所有字串一次性插入到容器中。

### **Part 3: 建立「狀態更新器 (State Updater)」**

  * 建立一個名為 `setState` 的函式，它接收一個 `newState` 物件作為參數。
  * **更新邏輯**:
      * 使用 `Object.assign(state, newState);` 將傳入的新狀態**淺合併**到現有的 `state` 物件中。
      * **關鍵**: 在狀態更新之後，**立即呼叫主 `render()` 函式**，觸發 UI 的自動同步。

### **Part 4: 改造初始資料載入邏輯**

  * 改造 `loadInitialData` 這個 `async` 函式，使其能夠管理完整的數據流狀態：
    1.  在函式開始時，立即呼叫 `setState({ isLoading: true, error: null });` 進入載入狀態。
    2.  在 `try` 區塊中，成功 `await fetchHabits()` 並獲取到 `data` 後，呼叫 `setState({ habits: data, isLoading: false });` 來更新中央狀態並結束載入。
    3.  如果 `fetchHabits()` 返回 `null`，則呼叫 `setState({ error: 'Failed to load habits.', isLoading: false });`。
    4.  在 `catch` 區塊中，捕獲到意外錯誤時，也應更新狀態：`setState({ error: 'An unexpected error occurred.', isLoading: false });`。

### **Part 5: 整合與執行**

  * 確保在 `DOMContentLoaded` 事件中，`loadInitialData` 函式被正確呼叫，以啟動整個應用程式。
  * **保留現有邏輯**: 確保 Modal 等其他不直接依賴 `state.habits` 的現有事件監聽器和功能被完整保留。

import { fetchHabits } from "./api.js";

// --- 1. 狀態中心 (單一真理之源) ---
const state = {
  habits: [],
  isLoading: true,
  error: null,
};

// --- 2. 元素選擇器 ---
const habitListContainer = document.querySelector(".habit-list-container");

// --- 3. 主渲染引擎 ---

function renderHabitList() {
  habitListContainer.innerHTML = "";

  if (state.isLoading) {
    habitListContainer.innerHTML = "<p>正在載入您的習慣...</p>";
    return;
  }

  if (state.error) {
    habitListContainer.innerHTML = `<p class="error-message">${state.error}</p>`;
    return;
  }

  if (state.habits.length === 0) {
    habitListContainer.innerHTML = "<p>您尚未新增任何習慣。點擊「新增習慣」開始吧！</p>";
    return;
  }

  const habitElements = state.habits
    .map((habit) => {
      const isCompleted = false; // 暫時寫死
      return `
        <div
          class="habit-item ${isCompleted ? "completed" : ""}"
          tabindex="0"
          role="button"
          aria-pressed="${isCompleted}"
          data-habit-id="${habit.id}"
        >
          <div class="habit-checkbox">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
            </svg>
          </div>
          <span class="habit-name">${habit.name}</span>
        </div>
      `;
    })
    .join("");

  habitListContainer.innerHTML = habitElements;
}

function render() {
  renderHabitList();
}

// --- 4. 狀態更新器 ---

function setState(newState) {
  Object.assign(state, newState);
  render();
}

// --- 5. 應用程式邏輯與事件監聽器 ---

document.addEventListener("DOMContentLoaded", () => {
  async function loadInitialData() {
    setState({ isLoading: true, error: null });
    try {
      const data = await fetchHabits();
      if (data) {
        setState({ habits: data, isLoading: false });
      } else {
        setState({ error: "讀取習慣失敗。", isLoading: false });
      }
    } catch (error) {
      console.error("在初始數據載入期間發生未預期的錯誤:", error);
      setState({ error: "發生未預期的錯誤。", isLoading: false });
    }
  }

  // 其他 UI 邏輯 (Modal 等) ...
  // ...省略
  
  loadInitialData();
});