// src/utils/booksStorage.js
const STORAGE_KEY = 'bookshelf-books';
 
function normalize(list) {
  const byId = {};
  const allIds = [];
  for (const book of list) {
    byId[book.id] = book;
    allIds.push(book.id);
  }
  return { byId, allIds };
}
 
export function readBooksState() {
  const raw = localStorage.getItem(STORAGE_KEY);
  if (!raw) return { byId: {}, allIds: [] };
  const parsed = JSON.parse(raw);
  // 이전 배열 형태와 호환: 배열로 저장돼 있으면 정규화해서 돌려준다
  if (Array.isArray(parsed)) return normalize(parsed);
  return parsed;
}
 
export function writeBooksState(state) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
}

// src/reducers/booksReducer.js
export const initialBooksState = { byId: {}, allIds: [] };
 
export function booksReducer(state, action) {
  switch (action.type) {
    case 'books/hydrated': {
      return action.payload;
    }
    case 'books/added': {
      const book = action.payload;
      return {
        byId: { ...state.byId, [book.id]: book },
        allIds: [...state.allIds, book.id],
      };
    }
    case 'books/updated': {
      const { id, changes } = action.payload;
      const prev = state.byId[id];
      if (!prev) return state;
      return { ...state, byId: { ...state.byId, [id]: { ...prev, ...changes } } };
    }
    case 'books/toggled': {
      const prev = state.byId[action.payload.id];
      if (!prev) return state;
      const status = prev.status === 'done' ? 'reading' : 'done';
      return { ...state, byId: { ...state.byId, [prev.id]: { ...prev, status } } };
    }
    case 'books/deleted': {
      const { id } = action.payload;
      const nextById = { ...state.byId };
      delete nextById[id];
      return { byId: nextById, allIds: state.allIds.filter((bookId) => bookId !== id) };
    }
    default: {
      throw new Error('알 수 없는 액션 타입입니다: ' + action.type);
    }
  }
}

// src/hooks/useBooks.js
import { useReducer, useEffect, useCallback } from 'react';
import { booksReducer, initialBooksState } from '../reducers/booksReducer';
import { readBooksState, writeBooksState } from '../utils/booksStorage';
 
export function useBooks() {
  const [state, dispatch] = useReducer(booksReducer, initialBooksState, readBooksState);
 
  useEffect(() => {
    writeBooksState(state);
  }, [state]);
 
  const addBook = useCallback((book) => dispatch({ type: 'books/added', payload: book }), []);
  const updateBook = useCallback(
    (id, changes) => dispatch({ type: 'books/updated', payload: { id, changes } }),
    []
  );
  const toggleBook = useCallback((id) => dispatch({ type: 'books/toggled', payload: { id } }), []);
  const deleteBook = useCallback((id) => dispatch({ type: 'books/deleted', payload: { id } }), []);
 
  return { booksById: state.byId, bookIds: state.allIds, addBook, updateBook, toggleBook, deleteBook };
}

// src/pages/BookListPage.jsx
import { useMemo, useState } from 'react';
import { Link } from 'react-router';
import { useBooks } from '../hooks/useBooks';
import { useDebounce } from '../hooks/useDebounce';
import BookCard from '../components/BookCard';
 
export default function BookListPage() {
  const { booksById, bookIds, toggleBook, deleteBook } = useBooks();
  const [keyword, setKeyword] = useState('');
  const debouncedKeyword = useDebounce(keyword, 300);
 
  // 파생 값: 검색어에 맞는 아이디 목록을 렌더마다 계산한다. state로 만들지 않는다.
  const visibleIds = useMemo(() => {
    const term = debouncedKeyword.trim().toLowerCase();
    if (!term) return bookIds;
    return bookIds.filter((id) => {
      const book = booksById[id];
      return book.title.toLowerCase().includes(term) || book.author.toLowerCase().includes(term);
    });
  }, [bookIds, booksById, debouncedKeyword]);
 
  return (
    <section>
      <h1>내 책장</h1>
      {/* ...기존 ThemeToggle 유지 */}
      <input
        type="search"
        value={keyword}
        onChange={(event) => setKeyword(event.target.value)}
        placeholder="제목 또는 저자 검색"
        aria-label="책 검색"
      />
      <p>{visibleIds.length}권 표시 중 (전체 {bookIds.length}권)</p>
      <ul>
        {visibleIds.map((id) => (
          <li key={id}>
            <BookCard book={booksById[id]} onToggle={() => toggleBook(id)} onDelete={() => deleteBook(id)} />
          </li>
        ))}
      </ul>
      <Link to="/books/new">새 책 추가</Link>
    </section>
  );
}

// src/pages/BookDetailPage.jsx
import { useLoaderData } from 'react-router';
import { readBooksState } from '../utils/booksStorage';
 
export async function bookDetailLoader({ params }) {
  const { byId } = readBooksState();
  const book = byId[params.bookId];
  if (!book) {
    throw new Response('책을 찾을 수 없습니다', { status: 404 });
  }
  return book;
}
 
export default function BookDetailPage() {
  const book = useLoaderData();
 
  return (
    <article>
      <h1>{book.title}</h1>
      <p>저자: {book.author}</p>
      <p>상태: {book.status}</p>
    </article>
  );
}

npm run dev