import React, { useEffect, useState } from 'react';
import { useParams, Link } from 'react-router-dom';
import { wpApi } from '../api/wordpress';
import './NewsDetail.css';

const NewsDetail = () => {
    const { slug } = useParams();
    const [post, setPost] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchPost = async () => {
            try {
                setLoading(true);
                const data = await wpApi.getPostBySlug(slug);
                if (!data) {
                    throw new Error('Post not found');
                }
                setPost(data);
            } catch (err) {
                setError(err);
            } finally {
                setLoading(false);
            }
        };

        if (slug) {
            fetchPost();
        }
    }, [slug]);

    if (loading) {
        return (
            <div className="news-detail-loading">
                <div className="loading-spinner"></div>
            </div>
        );
    }

    if (error || !post) {
        return (
            <div className="news-detail-error">
                <div className="container">
                    <h2 className="error-title">Post Not Found</h2>
                    <p className="error-message">The article you are looking for does not exist or has been removed.</p>
                    <Link to="/news" className="back-link">← Back to News</Link>
                </div>
            </div>
        );
    }

    const featuredImage = post._embedded?.['wp:featuredmedia']?.[0]?.source_url;
    const authorName = post._embedded?.author?.[0]?.name || 'Admin';
    const date = new Date(post.date).toLocaleDateString();

    return (
        <div className="news-detail-container">
            <article className="news-article">
                {/* Header Section */}
                <header className="article-header">
                    <div className="article-meta">
                        <span className="article-date">{date}</span>
                        <span className="article-meta-divider">•</span>
                        <span className="article-author">{authorName}</span>
                    </div>
                    <h1 className="article-title" dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
                </header>

                {/* Featured Image */}
                {featuredImage && (
                    <div className="article-image-wrapper">
                        <img
                            src={featuredImage}
                            alt={post.title.rendered}
                            className="article-image"
                        />
                    </div>
                )}

                {/* Content */}
                <div
                    className="article-content"
                    dangerouslySetInnerHTML={{ __html: post.content.rendered }}
                />

                {/* Footer / Navigation */}
                <footer className="article-footer">
                    <Link to="/news" className="back-button">
                        목록으로 돌아가기
                    </Link>
                </footer>
            </article>
        </div>
    );
};

export default NewsDetail;