import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { API_BASE_URL } from "./config";

// 示例数据
const posts = [
    {
        post_id: "1",
        title: "欢迎来到G10论坛",
        content: "这里是G10 PT站的官方论坛,欢迎大家发帖交流!",
        author_id: "u1",
        author_name: "Alice",
        created_at: "2024-06-01 12:00",
        reply_count: 3,
        view_count: 120,
    },
    {
        post_id: "2",
        title: "经典电影合集",
        content: "90年代经典电影大家有什么推荐吗?",
        author_id: "u2",
        author_name: "Bob",
        created_at: "2024-06-02 09:30",
        reply_count: 1,
        view_count: 45,
    },
];

export default function ForumPage() {
    const navigate = useNavigate();
    const [posts, setPosts] = useState([]);

    useEffect(() => {
        // get userId from cookie
        const match = document.cookie.match('(^|;)\\s*userId=([^;]+)');
        const userId = match ? match[2] : null;
        console.log("User ID from cookie:", userId);
        if (!userId) return;
        fetch(`${API_BASE_URL}/api/forum`)
            .then(res => res.json())
            .then(data => setPosts(data))
            .catch(() => setPosts([]));
    }, []);

    return (
        <div style={{ maxWidth: 700, margin: "40px auto" }}>
            <div style={{ display: "flex", alignItems: "center", marginBottom: 24 }}>
                <h2 style={{ color: "#1a237e", margin: 0, marginRight: 24 }}>G10 论坛</h2>
                <input
                    type="text"
                    placeholder="搜索帖子内容"
                    style={{
                        flex: 1,
                        fontSize: 16,
                        padding: "8px 14px",
                        border: "1px solid #bfcfff",
                        borderRadius: 8,
                        outline: "none",
                        minWidth: 0,
                    }}
                />
                <button
                    style={{
                        marginLeft: 8,
                        fontSize: 16,
                        padding: "8px 18px",
                        border: "1px solid #bfcfff",
                        background: "#e0e7ff",
                        borderRadius: 8,
                        cursor: "pointer",
                    }}
                >
                    🔍
                </button>
            </div>
            {posts.map(post => (
                <div
                    key={post.post_id}
                    style={{
                        background: "#fff",
                        borderRadius: 12,
                        boxShadow: "0 2px 8px #e0e7ff",
                        padding: 24,
                        marginBottom: 24,
                        cursor: "pointer",
                        transition: "box-shadow 0.2s",
                    }}
                    onClick={() => navigate(`/forum/${post.post_id}`)}
                >
                    <div style={{ fontSize: 15, color: "#1976d2", marginBottom: 6 }}>
                        {post.author_name} · {post.created_at}
                    </div>
                    <div style={{ fontWeight: 600, fontSize: 20, marginBottom: 8, color: "#222" }}>
                        {post.title}
                    </div>
                    <div style={{ fontSize: 16, color: "#444", marginBottom: 18 }}>
                        {post.content}
                    </div>
                    <div style={{ display: "flex", justifyContent: "flex-start", gap: 32, fontSize: 14, color: "#888" }}>
                        <span>回复数: {post.reply_count}</span>
                        <span>观看数: {post.view_count}</span>
                    </div>
                </div>
            ))}
        </div>
    );
}