'use client';

import { useEffect, useState } from 'react';
import ReactMarkdown from 'react-markdown';

interface NewsItem {
    id: number;
    title: string;
    content: string;
    author: string | null;
    publishedAt: string;
    featured: boolean;
    special: {
        id: number;
        name: string;
    } | null;
}

export default function NewsSection() {
    const [news, setNews] = useState<NewsItem[]>([]);
    const [isExpanded, setIsExpanded] = useState(false);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetchNews();
    }, []);

    const fetchNews = async () => {
        try {
            const res = await fetch('/api/news?limit=3');
            if (res.ok) {
                const data = await res.json();
                setNews(data);
            }
        } catch (error) {
            console.error('Failed to fetch news:', error);
        } finally {
            setLoading(false);
        }
    };

    if (loading || news.length === 0) {
        return null; // Don't show anything if no news
    }

    return (
        <div style={{
            background: '#f9fafb',
            borderRadius: '0.5rem',
            margin: '1rem auto',
            maxWidth: '800px',
            overflow: 'hidden',
            border: '1px solid #e5e7eb'
        }}>
            {/* Header */}
            <button
                onClick={() => setIsExpanded(!isExpanded)}
                style={{
                    width: '100%',
                    padding: '0.75rem 1rem',
                    background: 'transparent',
                    border: 'none',
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    cursor: 'pointer',
                    fontSize: '0.875rem',
                    fontWeight: '600',
                    color: '#374151'
                }}
            >
                <span>📰 News & Updates</span>
                <span style={{ fontSize: '0.75rem', color: '#9ca3af' }}>
                    {isExpanded ? '▼' : '▶'}
                </span>
            </button>

            {/* Content */}
            {isExpanded && (
                <div style={{
                    padding: '0 1rem 1rem 1rem',
                    borderTop: '1px solid #e5e7eb'
                }}>
                    {news.map((item, index) => (
                        <div
                            key={item.id}
                            style={{
                                padding: '0.75rem 0',
                                borderBottom: index < news.length - 1 ? '1px solid #e5e7eb' : 'none'
                            }}
                        >
                            {/* Title */}
                            <div style={{
                                display: 'flex',
                                alignItems: 'center',
                                gap: '0.5rem',
                                marginBottom: '0.25rem'
                            }}>
                                {item.featured && (
                                    <span style={{
                                        background: '#fef3c7',
                                        color: '#92400e',
                                        padding: '0.125rem 0.375rem',
                                        borderRadius: '0.25rem',
                                        fontSize: '0.625rem',
                                        fontWeight: '600'
                                    }}>
                                        ⭐ FEATURED
                                    </span>
                                )}
                                <h3 style={{
                                    margin: 0,
                                    fontSize: '0.875rem',
                                    fontWeight: '600',
                                    color: '#111827'
                                }}>
                                    {item.title}
                                </h3>
                            </div>

                            {/* Metadata */}
                            <div style={{
                                fontSize: '0.75rem',
                                color: '#6b7280',
                                marginBottom: '0.5rem',
                                display: 'flex',
                                gap: '0.5rem',
                                flexWrap: 'wrap'
                            }}>
                                <span>
                                    {new Date(item.publishedAt).toLocaleDateString('de-DE', {
                                        day: '2-digit',
                                        month: '2-digit',
                                        year: 'numeric'
                                    })}
                                </span>
                                {item.author && (
                                    <>
                                        <span>•</span>
                                        <span>by {item.author}</span>
                                    </>
                                )}
                                {item.special && (
                                    <>
                                        <span>•</span>
                                        <span style={{ color: '#be185d' }}>
                                            ★ {item.special.name}
                                        </span>
                                    </>
                                )}
                            </div>

                            {/* Content */}
                            <div
                                className="news-content"
                                style={{
                                    fontSize: '0.875rem',
                                    color: '#374151',
                                    lineHeight: '1.5'
                                }}
                            >
                                <ReactMarkdown
                                    components={{
                                        p: ({ children }) => <p style={{ margin: '0.5rem 0' }}>{children}</p>,
                                        a: ({ children, href }) => (
                                            <a
                                                href={href}
                                                target="_blank"
                                                rel="noopener noreferrer"
                                                style={{ color: '#4f46e5', textDecoration: 'underline' }}
                                            >
                                                {children}
                                            </a>
                                        ),
                                        strong: ({ children }) => <strong style={{ fontWeight: '600' }}>{children}</strong>,
                                        em: ({ children }) => <em style={{ fontStyle: 'italic' }}>{children}</em>,
                                        ul: ({ children }) => <ul style={{ margin: '0.5rem 0', paddingLeft: '1.5rem' }}>{children}</ul>,
                                        ol: ({ children }) => <ol style={{ margin: '0.5rem 0', paddingLeft: '1.5rem' }}>{children}</ol>,
                                        li: ({ children }) => <li style={{ margin: '0.25rem 0' }}>{children}</li>
                                    }}
                                >
                                    {item.content}
                                </ReactMarkdown>
                            </div>
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
}