import { resources } from '@/data/resources';
import { notFound } from 'next/navigation';
import SafeImage from '@/components/SafeImage';
import styles from '../resources.module.css';
import Link from 'next/link';

interface PageProps {
    params: Promise<{ slug: string }>;
}

export async function generateStaticParams() {
    return resources.map((resource) => ({
        slug: resource.slug,
    }));
}

export async function generateMetadata(props: PageProps) {
    const params = await props.params;
    const resource = resources.find((r) => r.slug === params.slug);
    if (!resource) return { title: 'Resource Not Found' };

    return {
        title: `${resource.title} - SocialBuddy Resources`,
        description: resource.excerpt,
    };
}

export default async function ResourceDetailPage(props: PageProps) {
    const params = await props.params;

    if (!params?.slug) {
        notFound();
    }

    const resource = resources.find((r) => r.slug === params.slug);

    if (!resource) {
        notFound();
    }

    return (
        <article className={styles.detailPage}>
            {/* Standardized Hero/Banner Section */}
            <section
                className={styles.hero}
                style={resource.bannerImage ? { backgroundImage: `url('${resource.bannerImage}')` } : undefined}
            >
                <div className={styles.container}>
                    <div className={styles.heroContent}>
                        <h1 className={styles.heroTitle}>{resource.title}</h1>
                        <div className={styles.breadcrumbs}>
                            <Link href="/">Home</Link> <span>/</span> <Link href="/resources">Resources</Link> <span>/</span> {resource.title}
                        </div>
                    </div>
                </div>
            </section>

            {/* Featured Image */}
            <div className={styles.container}>
                <div className={styles.detailImageWrapper}>
                    <SafeImage
                        src={resource.bigImage}
                        alt={resource.title}
                        className={styles.image}
                        style={{ width: '100%', height: 'auto', display: 'block' }}
                        fallbackSrc={`https://placehold.co/1200x600/png?text=${encodeURIComponent(resource.title)}`}
                    />
                </div>
            </div>

            {/* Content Body */}
            {/* Content Body */}
            <div className={styles.container}>
                <div
                    className={styles.detailContent}
                    dangerouslySetInnerHTML={{ __html: resource.content }}
                />
            </div>

            {/* Back to Resources */}
            <div style={{ textAlign: 'center', paddingBottom: '4rem' }}>
                <Link href="/resources" className="btn btn-primary">
                    View All Resources
                </Link>
            </div>
        </article>
    );
}