// src/pages/BoardsPage.js
import React, { useState } from "react";
import BoardList from "../components/Board/BoardList";
import PostList from "../components/Board/PostList";
import PostSearchPanel from "../components/Board/PostSearchPanel";
import PostForm from "../components/Board/PostForm";

const BoardsPage = () => {
  const [selectedBoard, setSelectedBoard] = useState(null);
  const [search, setSearch] = useState("");
  const [tag, setTag] = useState("");
  const [showForm, setShowForm] = useState(false);
  const [refreshKey, setRefreshKey] = useState(0);  // 게시글 새로고침 트리거

  const handleCreated = () => setRefreshKey(prev => prev + 1);

  return (
    <div className="grid grid-cols-3 gap-4 p-4">
      {/* 좌측: 게시판 리스트 */}
      <div>
        <BoardList
          selectedBoard={selectedBoard}
          onSelectBoard={(slug) => {
            setSelectedBoard(slug);
            setSearch("");
            setTag("");
          }}
        />
      </div>

      {/* 중앙: 게시글 리스트 or 등록폼 */}
      <div>
        {selectedBoard && !showForm && (
          <div className="mb-2">
            <button
              className="bg-green-500 text-white px-4 py-2 rounded"
              onClick={() => setShowForm(true)}
            >
              ➕ 게시글 등록
            </button>
          </div>
        )}

        {showForm ? (
          <PostForm
            boardSlug={selectedBoard}
            onClose={() => setShowForm(false)}
            onCreated={handleCreated}
          />
        ) : (
          <PostList
            boardSlug={selectedBoard}
            search={search}
            tag={tag}
            key={refreshKey}
          />
        )}
      </div>

      {/* 우측: 검색 + 태그 */}
      <div>
        <PostSearchPanel
          boardSlug={selectedBoard}
          onSearch={setSearch}
          onTagSelect={setTag}
        />
      </div>
    </div>
  );
};

export default BoardsPage;