import { motion, Variants, AnimatePresence } from "framer-motion";
import { useState } from "react";
import SkillCard, { SkillCategory } from "../components/SkillCard";

interface ProfessionalSkill {
    skill: string;
    description: string;
}

const TECHNICAL_SKILLS: SkillCategory[] = [
    {
        category: "Languages",
        description: "Core programming languages I have utilized across professional roles, academic coursework, and personal projects.",
        skills: [
            { name: "JavaScript (ES6+)", description: "Used for frontend logic in 'Digital Resume', WordPress plugins at 'Allan's Landscaping', and the University of Saskatchewan class 'Full Stack Web Programming'." },
            { name: "TypeScript", description: "Primary language for 'Digital Resume' and 'Nutrien' cloud apps" },
            { name: "Python", description: "Utilized at 'CNH', 'Nutrien', and for the University of Saskatchewan classes 'Artificial Intelligence' & 'Information Visualization'." },
            { name: "Java", description: "Object-oriented language used in University of Saskatchewan classes 'Mobile & Cloud Computing', 'Algorithms & Machines', and 'Graphical User Interfaces'." },
            { name: "C", description: "Low-level programming applied in University of Saskatchewan classes 'Operating Systems' and 'Computer Networks' for memory and socket management." },
            { name: "C++", description: "Utilized for embedded software engineering at 'CNH' to perform whitebox testing" },
            { name: "Lua", description: "Lightweight scripting often used in embedded systems and game dev. My first foray into programming was with Lua" },
            { name: "HTML", description: "Structured 'Digital Resume', 'Allan's Landscaping' sites, and assignments for the University of Saskatchewan class 'Full Stack Web Programming'." },
            { name: "CSS", description: "Styled 'Digital Resume' with glassmorphism and interfaces for the University of Saskatchewan class 'Graphical User Interfaces' and 'Full Stack Web Programming'." },
            { name: "SQL", description: "Managed relational data for self-hosted services and in the University of Saskatchewan class 'Full Stack Web Programming'." }
        ]
    },
    {
        category: "Frameworks/Libraries",
        description: "Key frameworks and libraries that power my applications, enabling efficient and scalable development.",
        skills: [
            { name: "React", description: "Built UI for 'Digital Resume', 'Nutrien' tools, and projects for the University of Saskatchewan class 'Full Stack Web Programming'." },
            { name: "Express.js", description: "Minimalist web framework for Node.js servers. Used for early Server Testing" },
            { name: "Django REST Framework", description: "Toolkit for building Web APIs with Python/Django." },
            { name: "AWS Lambda", description: "Deployed serverless functions for cloud applications at 'Nutrien'." }
        ]
    },
    {
        category: "Databases",
        description: "Data storage solutions I have implemented for varied use cases, from relational structure to flexible document stores.",
        skills: [
            { name: "PostgreSQL", description: "Backend database for self-hosted services like Authentik and Immich. Used both professionally and at the University of Saskatchewan for various classes." },
            { name: "CouchDB", description: "Seamless multi-master sync capability database (No-SQL). Used for 'full stack web programming' class at the University of Saskatchewan." }
        ]
    },
    {
        category: "DevOps & Tools",
        description: "Tools and practices I employ to automate workflows, manage infrastructure, and ensure reliable deployments.",
        skills: [
            { name: "Docker", description: "Containerized the 'Digital Resume', 'Gitea Workers', and 20+ 'self-hosted' services." },
            { name: "CircleCI", description: "Managed CI/CD pipelines and deployment workflows at 'Nutrien'." },
            { name: "Git (CLI)", description: "Version control for all projects; self-hosted via 'Gitea' in 'self-hosted' services." },
            { name: "Postman", description: "API platform for building and testing APIs. Used regularly for testing backends" },
            { name: "AWS CDK", description: "Defined cloud infrastructure as code for enterprise apps at 'Nutrien'." },
            { name: "Linux CLI", description: "Daily driver for self-hosted services system administration and CI/CD scripting." }
        ]
    },
    {
        category: "AWS Technologies",
        description: "Cloud services I extensively utilized during my internship at Nutrien to build serverless and scalable solutions.",
        skills: [
            { name: "S3", description: "Utilized for scalable object storage and artifact management." },
            { name: "Cloudfront", description: "Configured content delivery for refined user experience." },
            { name: "Route 53", description: "Managed DNS records for cloud-hosted applications." },
            { name: "API Gateway", description: "Secured and published APIs for serverless backends." },
            { name: "Lambda", description: "Executed serverless logic for event-driven architectures." },
            { name: "RDS", description: "Provisioned managed relational databases for cloud applications." },
            { name: "VPC", description: "Network isolation and security configuration for cloud resources." },
            { name: "ECS", description: "Orchestrated containerized services in the cloud environment." },
            { name: "SQS", description: "Implemented message queues to decouple microservices." }
        ]
    },
    {
        category: "Concepts",
        description: "Fundamental software engineering principles and methodologies that guide my architectural decisions and development process.",
        skills: [
            { name: "RESTful APIs", description: "Designed and consumed APIs for 'Digital Resume', 'Nutrien', and the University of Saskatchewan class 'Mobile & Cloud Computing'." },
            { name: "Agile/Scrum", description: "Participated in iterative delivery and sprint planning at 'Nutrien'." },
            { name: "MVC Architecture", description: "Applied design patterns in University of Saskatchewan classes 'Mobile & Cloud Computing' and 'Full Stack Web Programming'." },
            { name: "Cloud Deployment", description: "Implemented strategies for 'Nutrien', self-hosted services, and the University of Saskatchewan class 'Mobile & Cloud Computing'." },
            { name: "Responsive Design", description: "Ensured mobile-compatibility for 'Digital Resume', 'Allan's Landscaping', and the University of Saskatchewan class 'Graphical User Interfaces'." }
        ]
    }
];

const PROFESSIONAL_SKILLS: ProfessionalSkill[] = [
    {
        skill: "Customer Service & Sales",
        description: "Clear communication and coordination with customers and clients"
    },
    {
        skill: "Technical Support",
        description: "Diagnosing and resolving hardware/software issues across all major devices."
    },
    {
        skill: "Web Development",
        description: "WordPress plugin development, front-end design, and site optimization."
    },
    {
        skill: "Scripting & Programming",
        description: "JavaScript, Python, HTML/CSS, Git, and NPM package management."
    },
    {
        skill: "Collaboration & Problem-Solving",
        description: "Working effectively with diverse teams to meet deadlines and ensure quality results."
    },
    {
        skill: "Adaptability",
        description: "Quickly learning new tools, technologies, and processes in dynamic work environments."
    }
];

const containerVariants: Variants = {
    hidden: { opacity: 0 },
    visible: {
        opacity: 1,
        transition: {
            staggerChildren: 0.1,
            delayChildren: 0.2
        }
    }
};

const itemVariants: Variants = {
    hidden: { y: 20, opacity: 0 },
    visible: {
        y: 0,
        opacity: 1,
        transition: { type: "spring", stiffness: 100 }
    }
};

export default function Skills() {
    const [expandedCategories, setExpandedCategories] = useState<string[]>([]);

    const toggleCategory = (category: string) => {
        setExpandedCategories(prev =>
            prev.includes(category)
                ? prev.filter(c => c !== category)
                : [...prev, category]
        );
    };

    const allExpanded = expandedCategories.length === TECHNICAL_SKILLS.length;

    const toggleAll = () => {
        if (allExpanded) {
            setExpandedCategories([]);
        } else {
            setExpandedCategories(TECHNICAL_SKILLS.map(c => c.category));
        }
    };

    return (
        <div className="mainContentBlock" style={{ minWidth: "66vw", display: "flex", justifyContent: "center" }}>
            <div style={{ height: "30px" }}></div>
            <motion.div
                className="skills-container"
                variants={containerVariants}
                initial="hidden"
                animate="visible"
                style={{ width: "100%", maxWidth: "1200px", padding: "0 40px", boxSizing: "border-box" }}
            >
                <motion.div variants={itemVariants} style={{ marginBottom: "50px" }}>
                    <div style={{
                        display: "flex",
                        justifyContent: "space-between",
                        alignItems: "center",
                        borderBottom: "1px solid rgba(255,255,255,0.2)",
                        marginBottom: "25px",
                        paddingBottom: "10px",
                        marginTop: "15px" // Restore approximate default h2 top margin
                    }}>
                        <h2 style={{ color: "white", margin: 0 }}>
                            Technical Skills
                        </h2>
                        <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
                            <span style={{ color: "rgba(255,255,255,0.8)", fontSize: "0.9rem" }}>Expand All</span>
                            <div
                                onClick={toggleAll}
                                style={{
                                    width: "40px",
                                    height: "22px",
                                    background: allExpanded ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.1)",
                                    borderRadius: "11px",
                                    display: "flex",
                                    alignItems: "center",
                                    padding: "2px",
                                    cursor: "pointer",
                                    boxSizing: "border-box",
                                    border: "1px solid rgba(255,255,255,0.2)",
                                    transition: "background 0.3s"
                                }}
                            >
                                <motion.div
                                    animate={{
                                        x: allExpanded ? 18 : 0,
                                        backgroundColor: allExpanded ? "#ffffff" : "rgba(255,255,255,0.5)"
                                    }}
                                    transition={{ type: "spring", stiffness: 500, damping: 30 }}
                                    style={{
                                        width: "16px",
                                        height: "16px",
                                        borderRadius: "50%",
                                        backgroundColor: "white",
                                        boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
                                    }}
                                />
                            </div>
                        </div>
                    </div>
                    <div className="tech-skills-grid" style={{
                        display: "grid",
                        gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
                        gap: "30px",
                        position: "relative" // For layout animations
                    }}>
                        <AnimatePresence>
                            {TECHNICAL_SKILLS.map((category) => (
                                <SkillCard
                                    key={category.category}
                                    category={category}
                                    isExpanded={expandedCategories.includes(category.category)}
                                    onToggle={() => toggleCategory(category.category)}
                                />
                            ))}
                        </AnimatePresence>
                    </div>
                </motion.div>

                <motion.div variants={itemVariants} style={{ marginBottom: "50px" }}>
                    <h2 style={{ color: "white", borderBottom: "1px solid rgba(255,255,255,0.2)", paddingBottom: "10px", marginBottom: "25px" }}>
                        Professional Skills
                    </h2>
                    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))", gap: "25px" }}>
                        {PROFESSIONAL_SKILLS.map((skill) => (
                            <motion.div
                                key={skill.skill}
                                style={{
                                    background: "rgba(255, 255, 255, 0.05)",
                                    backdropFilter: "blur(5px)",
                                    border: "1px solid rgba(255, 255, 255, 0.1)",
                                    borderRadius: "12px",
                                    padding: "20px",
                                    display: "flex",
                                    flexDirection: "column",
                                    gap: "8px"
                                }}
                                whileHover={{ x: 5, backgroundColor: "rgba(255, 255, 255, 0.08)" }}
                            >
                                <h3 style={{ color: "#fff", margin: 0, fontSize: "1.1rem" }}>{skill.skill}</h3>
                                <p style={{ color: "rgba(255, 255, 255, 0.7)", margin: 0, fontSize: "0.95rem", lineHeight: "1.5" }}>
                                    {skill.description}
                                </p>
                            </motion.div>
                        ))}
                    </div>
                </motion.div>
            </motion.div >
        </div >
    );
}
