import { channels } from '@/data/channels';
import { notFound } from 'next/navigation';
import styles from './channel-page.module.css';
import SafeImage from '@/components/SafeImage';
import Link from 'next/link';
import TestimonialSlider from '@/components/TestimonialSlider';
import {
    Calendar, Eye, BarChart, Trophy, Inbox, ShieldCheck,
    Palette, Layout, Smartphone, Zap, PenTool, Repeat,
    CheckCircle
} from 'lucide-react';

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

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

export async function generateMetadata(props: PageProps) {
    const params = await props.params;
    const channel = channels.find((c) => c.slug === params.slug);
    if (!channel) return { title: 'Channel Not Found' };

    return {
        title: `${channel.title} Management Tool - SocialBuddy`,
        description: channel.description,
    };
}

// Icon mapping helper
const getIcon = (iconName: string) => {
    switch (iconName) {
        case 'Calendar': return <Calendar />;
        case 'Eye': return <Eye />;
        case 'BarChart': return <BarChart />;
        case 'Trophy': return <Trophy />;
        case 'Inbox': return <Inbox />;
        case 'ShieldCheck': return <ShieldCheck />;
        case 'Palette': return <Palette />;
        case 'Layout': return <Layout />;
        case 'Smartphone': return <Smartphone />;
        case 'Zap': return <Zap />;
        case 'PenTool': return <PenTool />;
        case 'Repeat': return <Repeat />;
        case 'CheckCircle': return <CheckCircle />;
        default: return <CheckCircle />;
    }
};

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

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

    const channel = channels.find((c) => c.slug === params.slug);

    if (!channel) {
        notFound();
    }

    return (
        <main className={styles.page}>
            {/* 1. Hero Section */}
            <section className={styles.hero}>
                <div className={styles.container}>
                    <div className={styles.heroContent}>
                        <h1 className={styles.heroTitle}>{channel.title}</h1>
                        <div className={styles.breadcrumbs}>
                            <Link href="/">Home</Link> <span>/</span> <span>Channels</span> <span>/</span> {channel.title}
                        </div>
                    </div>
                </div>
            </section>

            {/* 2. About Section */}
            {channel.about && (
                <section className={styles.aboutSection}>
                    <div className={styles.container}>
                        <div className={styles.aboutGrid}>
                            <div className={styles.aboutImages}>
                                <div className={styles.aboutMainImgWrapper}>
                                    <SafeImage
                                        src={channel.about.mainImage}
                                        alt={`${channel.title} Main Feature`}
                                        className={styles.img}
                                        fallbackSrc={`https://placehold.co/600x800/png?text=${encodeURIComponent(channel.title)}+Main`}
                                    />
                                </div>
                                <div className={styles.aboutSubImgWrapper}>
                                    <SafeImage
                                        src={channel.about.subImage}
                                        alt={`${channel.title} Sub Feature`}
                                        className={styles.img}
                                        fallbackSrc={`https://placehold.co/400x400/png?text=${encodeURIComponent(channel.title)}+Sub`}
                                    />
                                </div>
                            </div>
                            <div className={styles.aboutContent}>
                                <span className={styles.sectionSubtitle}>{channel.about.subTitle}</span>
                                <h2 className={styles.sectionTitle}>{channel.about.title}</h2>
                                <p className={styles.aboutDescription}>{channel.about.description}</p>
                                <div className={styles.aboutPoints}>
                                    {channel.about.bulletPoints.map((point, i) => (
                                        <div key={i} className={styles.aboutPointItem}>
                                            <span className={styles.aboutPointIcon}>
                                                {getIcon(point.icon)}
                                            </span>
                                            <span className={styles.aboutPointText}>{point.text}</span>
                                        </div>
                                    ))}
                                </div>
                                <a href="#" className="btn btn-primary">Start Free Trial</a>
                            </div>
                        </div>
                    </div>
                </section>
            )}

            {/* 3. Benefits / Why Choose */}
            <section className={styles.benefitsSection}>
                <div className={styles.container}>
                    <div className={styles.benefitsContainer}>
                        <div className={styles.benefitsContent}>
                            <span className={styles.sectionSubtitle}>Why SocialBuddy for {channel.title}</span>
                            <h2 className={styles.sectionTitle}>Tools Built for Growth</h2>
                            <p className={styles.aboutDescription}>
                                We've built specific tools to help you succeed on {channel.title}.
                                Stop guessing and start growing with data-driven insights.
                            </p>
                            <a href="#" className="btn btn-primary">See All Features</a>
                        </div>
                        <div className={styles.benefitsGrid}>
                            {channel.benefits.slice(0, 4).map((benefit, index) => (
                                <div key={index} className={styles.benefitCard}>
                                    <div className={styles.benefitIcon}>
                                        {getIcon(benefit.icon)}
                                    </div>
                                    <h3 className={styles.benefitCardTitle}>{benefit.title}</h3>
                                    <p className={styles.benefitCardDesc}>{benefit.description}</p>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </section>

            {/* 4. Testimonials */}
            {channel.testimonials && channel.testimonials.length > 0 && (
                <section className={styles.testimonialSection}>
                    <div className={styles.container}>
                        <div className={styles.testimonialGrid}>
                            <div className={styles.testimonialImages}>
                                <div className={styles.testImgWrapper}>
                                    <SafeImage
                                        src={channel.heroImage}
                                        alt="Happy Customer"
                                        className={styles.img}
                                        fallbackSrc="https://placehold.co/400x400/png?text=Customer+1"
                                    />
                                </div>
                                <div className={styles.testImgWrapper}>
                                    <SafeImage
                                        src={channel.about.mainImage}
                                        alt="Community"
                                        className={styles.img}
                                        fallbackSrc="https://placehold.co/400x400/png?text=Customer+2"
                                    />
                                </div>
                            </div>
                            <div className={styles.testimonialSliderWrapper}>
                                <span className={styles.sectionSubtitle}>Testimonials</span>
                                <h2 className={styles.sectionTitle}>Loved by {channel.title} Creators</h2>
                                <TestimonialSlider testimonials={channel.testimonials} />
                            </div>
                        </div>
                    </div>
                </section>
            )}

            {/* 5. FAQ */}
            {channel.faqs && channel.faqs.length > 0 && (
                <section className={styles.faqSection}>
                    <div className={styles.container}>
                        <div className={styles.faqGrid}>
                            <div className={styles.faqContent}>
                                <span className={styles.sectionSubtitle}>FAQ</span>
                                <h2 className={styles.sectionTitle}>Frequently Asked Questions about {channel.title}</h2>
                                <div className={styles.accordion}>
                                    {channel.faqs.map((faq, index) => (
                                        <details key={index} className={styles.accordionItem}>
                                            <summary className={styles.accordionTrigger}>
                                                {faq.question}
                                                <span className={styles.accordionIcon}>+</span>
                                            </summary>
                                            <div className={styles.accordionContentOpen}>
                                                <p style={{ paddingBottom: '1.5rem', color: 'var(--text-secondary)' }}>{faq.answer}</p>
                                            </div>
                                        </details>
                                    ))}
                                </div>
                            </div>
                            <div className={styles.faqImageWrapper}>
                                <SafeImage
                                    src="/images/faq-illustration.png"
                                    alt="FAQ Illustration"
                                    className={styles.img}
                                    fallbackSrc="https://placehold.co/600x600/png?text=FAQ+Support"
                                />
                            </div>
                        </div>
                    </div>
                </section>
            )}

            {/* 6. CTA (Full Width Floating) */}
            <section className={styles.ctaFullWidth}>
                <SafeImage
                    src="/images/shape-left.png"
                    alt=""
                    className={`${styles.floatElem} ${styles.floatLeft}`}
                    fallbackSrc="https://placehold.co/150x150/png?text=Shape"
                />
                <SafeImage
                    src="/images/shape-right.png"
                    alt=""
                    className={`${styles.floatElem} ${styles.floatRight}`}
                    fallbackSrc="https://placehold.co/150x150/png?text=Shape"
                />

                <div className={styles.ctaContentCentered}>
                    <h2 className={styles.ctaFullTitle}>Ready to Master {channel.title}?</h2>
                    <p className={styles.ctaFullText}>
                        Join thousands of marketers who are growing their {channel.title} presence with SocialBuddy.
                    </p>
                    <a href="https://app.socialbuddy.co/signup" className={styles.ctaFullBtn}>
                        Start Free Trial
                    </a>
                </div>
            </section>
        </main>
    );
}