// src/pages/NewBookPage.jsx
import { useActionState } from 'react';
import { useNavigate } from 'react-router';
 
const STORAGE_KEY = 'bookshelf-books';
const COVER_COLORS = ['#2563eb', '#16a34a', '#f59e0b', '#db2777', '#7c3aed', '#0891b2'];
const initialState = { error: null };
 
function loadBooks() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    return raw ? JSON.parse(raw) : [];
  } catch {
    return [];
  }
}
 
function saveBooks(books) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(books));
}
 
export default function NewBookPage() {
  const navigate = useNavigate();
 
  async function submitNewBook(prevState, formData) {
    const title = formData.get('title').trim();
    const author = formData.get('author').trim();
 
    if (title === '' || author === '') {
      return { error: '제목과 저자는 반드시 입력합니다.' };
    }
 
    const books = loadBooks();
    const nextId = books.length === 0 ? 1 : Math.max(...books.map((book) => book.id)) + 1;
    const pagesInput = Number(formData.get('pages'));
 
    const newBook = {
      id: nextId,
      title,
      author,
      status: formData.get('status'),
      rating: 0,
      pages: Number.isNaN(pagesInput) ? 0 : pagesInput,
      coverColor: COVER_COLORS[Math.floor(Math.random() * COVER_COLORS.length)],
      startedAt: null,
      finishedAt: null,
      memo: formData.get('memo').trim(),
    };
 
    saveBooks([...books, newBook]);
    navigate('/');
    return { error: null };
  }
 
  const [state, formAction, isPending] = useActionState(submitNewBook, initialState);
 
  return (
    <div className="page">
      <h1>책 추가</h1>
 
      <form action={formAction}>
        <label htmlFor="new-book-title">제목</label>
        <input id="new-book-title" name="title" type="text" placeholder="예: 클린 코드" />
 
        <label htmlFor="new-book-author">저자</label>
        <input id="new-book-author" name="author" type="text" placeholder="예: 로버트 씨 마틴" />
 
        <label htmlFor="new-book-pages">쪽수</label>
        <input id="new-book-pages" name="pages" type="number" min="0" placeholder="예: 584" />
 
        <label htmlFor="new-book-status">상태</label>
        <select id="new-book-status" name="status" defaultValue="wish">
          <option value="wish">읽고 싶어요</option>
          <option value="reading">읽는 중</option>
          <option value="done">다 읽음</option>
        </select>
 
        <label htmlFor="new-book-memo">메모</label>
        <textarea id="new-book-memo" name="memo" placeholder="선택 입력" />
 
        {state.error && (
          <p className="form-error" role="alert">
            {state.error}
          </p>
        )}
 
        <button type="submit" disabled={isPending}>
          {isPending ? '추가하는 중...' : '추가'}
        </button>
      </form>
    </div>
  );
}

// src/router.jsx (일부)
import NewBookPage from './pages/NewBookPage.jsx';
// ...기존 import 유지
 
export const router = createBrowserRouter([
  // ...기존 '/' 라우트 유지
  {
    path: '/books/new',
    element: <NewBookPage />,
    errorElement: <RouteErrorPage />,
  },
  // ...기존 '/books/:bookId' 라우트 유지
]);

// src/pages/BookListPage.jsx (일부)
import { Link } from 'react-router';
import { useReducer, useState, useEffect } from 'react';
import { useTheme } from '../context/ThemeContext.jsx';
import { booksReducer } from '../reducers/booksReducer.js';
import BookList from '../components/BookList.jsx';
import ThemeToggle from '../components/ThemeToggle.jsx';
// BookForm import는 지웁니다. 더 이상 이 페이지에서 쓰지 않습니다.
 
// ...기존 STORAGE_KEY, loadInitialBooks 유지
 
export default function BookListPage() {
  // ...기존 useReducer, useState, useEffect 유지
 
  return (
    <div className={`page page--${theme}`}>
      <header className="page-header">
        <h1>내 책장</h1>
        <ThemeToggle />
      </header>
 
      <Link to="/books/new" className="add-book-link">
        책 추가
      </Link>
 
      {/* ...기존 filter-bar, BookList 유지 */}
    </div>
  );
}

npm run dev