</div>

<div>
        <select {...register('difficulty')}>
          <option value="easy">Easy</option>
          <option value="medium">Medium</option>
          <option value="hard">Hard</option>
        </select>
      </div>

<button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Creating...' : 'Create Flashcard'}
      </button>
    </form>
  )
}
```

### 2. 複雜表單範例

```typescript
// src/components/forms/GenerateFlashcardsForm.tsx
import { useFieldArray, useForm } from 'react-hook-form'

interface GenerateFormData {
  sourceText: string
  settings: {
    count: number
    difficulty: string
    includeExamples: boolean
  }
  customWords: Array<{ word: string; required: boolean }>
}

export function GenerateFlashcardsForm() {
  const { control, register, handleSubmit, watch } = useForm<GenerateFormData>({
    defaultValues: {
      settings: {
        count: 10,
        difficulty: 'auto',
        includeExamples: true,
      },
      customWords: [],
    },
  })

const { fields, append, remove } = useFieldArray({
    control,
    name: 'customWords',
  })

const onSubmit = (data: GenerateFormData) => {
    console.log('Generating flashcards:', data)
  }

return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <textarea
        {...register('sourceText', { required: true })}
        placeholder="Paste your text here..."
      />

<div>
        <label>
          Number of cards:
          <input
            type="number"
            {...register('settings.count', { min: 1, max: 50 })}
          />
        </label>
      </div>

<div>
        <label>
          <input
            type="checkbox"
            {...register('settings.includeExamples')}
          />
          Include example sentences
        </label>
      </div>

<div>
        <h3>Custom Words</h3>
        {fields.map((field, index) => (
          <div key={field.id}>
            <input
              {...register(`customWords.${index}.word`)}
              placeholder="Word"
            />
            <label>
              <input
                type="checkbox"
                {...register(`customWords.${index}.required`)}
              />
              Required
            </label>
            <button type="button" onClick={() => remove(index)}>
              Remove
            </button>
          </div>
        ))}
        <button
          type="button"
          onClick={() => append({ word: '', required: false })}
        >
          Add Word
        </button>
      </div>

<button type="submit">Generate</button>
    </form>
  )
}
```

## 🎨 組件狀態最佳實踐

### 1. 狀態提升原則

```typescript
// ❌ 錯誤：過度使用全局狀態
function BadComponent() {
  const { modalOpen, setModalOpen } = useStore() // 不需要全局
  return <Modal open={modalOpen} />
}

// ✅ 正確：使用本地狀態
function GoodComponent() {
  const [modalOpen, setModalOpen] = useState(false)
  return <Modal open={modalOpen} onClose={() => setModalOpen(false)} />
}
```

### 2. 狀態分離

```typescript
// ✅ 分離 UI 狀態和業務狀態
function FlashcardList() {
  // 業務狀態（服務端）
  const { data: flashcards } = useFlashcards()

// UI 狀態（本地）
  const [selectedId, setSelectedId] = useState<string>()
  const [filter, setFilter] = useState('all')

// 衍生狀態
  const filteredCards = useMemo(() => {
    if (filter === 'all') return flashcards
    return flashcards?.filter(card => card.status === filter)
  }, [flashcards, filter])

return (
    // ...
  )
}
```

### 3. 自定義 Hook 封裝

```typescript
// src/hooks/useFlashcardLearning.ts
export function useFlashcardLearning(deckId: string) {
  const { data: flashcards, isLoading } = useFlashcards(deckId)
  const [currentIndex, setCurrentIndex] = useState(0)
  const [memorized, setMemorized] = useState<Set<string>>(new Set())
  const [flipped, setFlipped] = useState(false)

const currentCard = flashcards?.[currentIndex]
  const progress = (memorized.size / (flashcards?.length || 1)) * 100

const nextCard = () => {
    setFlipped(false)
    setCurrentIndex(prev =>
      prev < (flashcards?.length || 0) - 1 ? prev + 1 : prev
    )
  }

const markAsMemorized = () => {
    if (currentCard) {
      setMemorized(prev => new Set([...prev, currentCard.id]))
      nextCard()
    }
  }

const flipCard = () => setFlipped(!flipped)

return {
    currentCard,
    isLoading,
    flipped,
    progress,
    actions: {
      nextCard,
      markAsMemorized,
      flipCard,
    },
  }
}
```

## 📊 狀態調試工具

### 1. Zustand DevTools

```typescript
// 開發環境自動啟用
if (process.env.NODE_ENV === 'development') {
  import('zustand/middleware').then(({ devtools }) => {
    // DevTools 會自動連接
  })
}
```

### 2. React Query DevTools

```typescript
// 已在 Providers 中配置
// 按 Shift + Alt + R 開啟
```

### 3. 自定義調試 Hook

```typescript
// src/hooks/useDebugState.ts
export function useDebugState<T>(name: string, initialValue: T) {
  const [state, setState] = useState<T>(initialValue)

useEffect(() => {
    console.log(`[${name}] State updated:`, state)
  }, [name, state])

const setDebugState = useCallback((value: T | ((prev: T) => T)) => {
    console.log(`[${name}] Setting state...`)
    setState(value)
  }, [name])

return [state, setDebugState] as const
}
```

## ⚡ 性能優化建議

1. **使用選擇器避免不必要的重新渲染**
```typescript
// ✅ 只訂閱需要的狀態
const username = useStore(state => state.user?.name)
```

2. **適當使用 memo 和 useMemo**
```typescript
const expensiveValue = useMemo(() =>
  calculateExpensive(data), [data]
)
```

3. **分割大型 Store**
```typescript
// 將不相關的狀態分離到不同的 store
const useAuthStore = create(...)
const useUIStore = create(...)
```

4. **使用 Suspense 處理載入狀態**
```typescript
<Suspense fallback={<Loading />}>
  <FlashcardList />
</Suspense>
```