import { useEffect } from "react";
import { useParams, Link } from "react-router-dom";
import { motion } from "framer-motion";
import { SIDEQUESTS } from "./Projects";
import CodeBlock from "../components/CodeBlock";
import RichTextRenderer from "../components/RichTextRenderer";
import "../styles/pages/sidequestDetail.css";

export default function SidequestDetail() {
    const { id } = useParams<{ id: string }>();
    const project = SIDEQUESTS.find(p => p.id === Number(id));

    useEffect(() => {
        window.scrollTo(0, 0);
    }, []);

    if (!project) {
        return (
            <div className="sidequest-error-container">
                <h2>Sidequest not found</h2>
                <Link to="/projects" className="sidequest-back-link-error">Back to Projects</Link>
            </div>
        );
    }

    return (
        <div className="mainContentBlock sidequest-container">
            <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6 }}
                className="sidequest-content-wrapper"
            >
                <Link to="/projects" className="sidequest-back-link">
                    ← Back to Projects
                </Link>

                <div className="sidequest-header">
                    <h1 className="sidequest-title">{project.title}</h1>
                    <div className="sidequest-tech-stack">
                        {project.techStack.map(tech => (
                            <span key={tech} className="sidequest-tech-tag">
                                {tech}
                            </span>
                        ))}
                    </div>
                </div>

                <div className="sidequest-hero-image-container">
                    <img
                        src={project.image}
                        alt={project.title}
                        className="sidequest-hero-image"
                    />
                </div>

                <div className="sidequest-details-container">
                    {/* Dynamic Sections Rendering */}
                    {project.sections?.map((section, index) => {
                        switch (section.type) {
                            case 'text':
                                return (
                                    <section key={index} className="sidequest-section">
                                        {section.title && <h2 className="sidequest-section-title">{section.title}</h2>}
                                        <div className="sidequest-section-content">
                                            <RichTextRenderer content={section.content} />
                                        </div>
                                    </section>
                                );
                            case 'code':
                                return (
                                    <section key={index} className="sidequest-section">
                                        {section.title && <h2 className="sidequest-section-title">{section.title}</h2>}
                                        <CodeBlock language={section.language} code={section.code} />
                                    </section>
                                );
                            case 'image':
                                return (
                                    <section key={index} className="sidequest-section">
                                        {section.title && <h2 className="sidequest-section-title">{section.title}</h2>}
                                        <img src={section.src} alt={section.alt || ''} className="sidequest-section-image" />
                                        {section.caption && <p className="sidequest-section-caption">{section.caption}</p>}
                                    </section>
                                );
                            default:
                                return null;
                        }
                    })}

                    <div className="sidequest-footer-links">
                        {project.links.demo && (
                            <a href={project.links.demo} target="_blank" rel="noopener noreferrer" className="sidequest-footer-link">
                                Live Demo ↗
                            </a>
                        )}
                        {project.links.repo && (
                            <a href={project.links.repo} target="_blank" rel="noopener noreferrer" className="sidequest-footer-link">
                                View Code ↗
                            </a>
                        )}
                    </div>
                </div>
                <div className="sidequest-footer-spacer"></div>
            </motion.div>
        </div>
    );
}
