import React, { useState } from 'react';
import { usePosts } from '../hooks/usePosts';
import ResourceListItem from '../components/ResourceListItem';
import './Resources.css';

// IMPORTANT: Slugs must match your WordPress Category Slugs
const CATEGORIES = {
    DOWNLOADS: 'downloads',
    COLUMNS: 'columns'
};

const Resources = () => {
    const [activeTab, setActiveTab] = useState('all'); // 'all', 'downloads', 'columns'

    // Logic: Show 10 items for all views as requested.
    const perPage = 10;

    // Fetch posts for each category using SLUGS
    const { posts: downloadPosts, loading: downloadsLoading } = usePosts(1, perPage, CATEGORIES.DOWNLOADS);
    const { posts: columnPosts, loading: columnsLoading } = usePosts(1, perPage, CATEGORIES.COLUMNS);

    const isLoading = downloadsLoading || columnsLoading;

    // Helper to render the list or empty message
    const renderList = (posts, emptyText) => {
        if (posts.length === 0) {
            return <div className="empty-message">{emptyText}</div>;
        }
        return (
            <div className="resources-list">
                {posts.map(post => (
                    <ResourceListItem key={post.id} post={post} />
                ))}
            </div>
        );
    };

    return (
        <div className="resources-container">
            <div className="resources-content-wrapper">


                <div className="resources-tabs">
                    <button
                        className={`tab-button ${activeTab === 'all' ? 'active' : ''}`}
                        onClick={() => setActiveTab('all')}
                    >
                        전체 보기
                    </button>
                    <button
                        className={`tab-button ${activeTab === 'downloads' ? 'active' : ''}`}
                        onClick={() => setActiveTab('downloads')}
                    >
                        자료실 (Downloads)
                    </button>
                    <button
                        className={`tab-button ${activeTab === 'columns' ? 'active' : ''}`}
                        onClick={() => setActiveTab('columns')}
                    >
                        전문가 칼럼
                    </button>
                </div>

                {isLoading ? (
                    <div className="text-center py-12">
                        <div className="loading-spinner mx-auto"></div>
                    </div>
                ) : (
                    <>
                        {activeTab === 'all' ? (
                            <div className="resources-all-grid">
                                <div className="resources-section">
                                    <h2 className="section-heading">📚 다운로드 자료</h2>
                                    {renderList(downloadPosts, "등록된 다운로드 자료가 없습니다.")}
                                </div>
                                <div className="resources-section">
                                    <h2 className="section-heading">✍️ 전문가 칼럼</h2>
                                    {renderList(columnPosts, "등록된 칼럼이 없습니다.")}
                                </div>
                            </div>
                        ) : (
                            <>
                                {activeTab === 'downloads' && (
                                    <div className="resources-section">
                                        <h2 className="section-heading">📚 다운로드 자료</h2>
                                        {renderList(downloadPosts, "등록된 다운로드 자료가 없습니다.")}
                                    </div>
                                )}

                                {activeTab === 'columns' && (
                                    <div className="resources-section">
                                        <h2 className="section-heading">✍️ 전문가 칼럼</h2>
                                        {renderList(columnPosts, "등록된 칼럼이 없습니다.")}
                                    </div>
                                )}
                            </>
                        )}
                    </>
                )}
            </div>
        </div>
    );
};
export default Resources;
