import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

const WORK_EXPERIENCES = [
    {
        company: "Tower Glass Ltd.",
        position: "Automotive Glass Installer/Salesman (Full-Time)",
        period: "July 2025 to Present",
        description: [
            "Install, repair, and replace windshields, side, and rear automotive glass on a variety of vehicle makes and models.",
            "Provide excellent customer service by explaining repair processes, timelines, and care instructions.",
            "Collaborate with team members to coordinate and work efficiently, delivering the best possible service."
        ],
        image: "/images/work/tgPic.jpg",
        highlighted: false
    },
    {
        company: "Allan's Landscaping and Disposal Services Ltd.",
        position: "Web Developer/Technical Support Specialist (Part-Time)",
        period: "Jan. 2024 to July 2025",
        description: [
            "Implementing and developing WordPress plugins to redesign Allan's Landscaping Website.",
            "Diagnosing technical issues across multiple devices, including routers, tablets, laptops and desktops on both a hardware and software level.",
            "Working with all members of the business to address technical support questions for various software and challenges."
        ],
        image: "/images/work/allanslandscaping.jpeg",
        highlighted: true
    },
    {
        company: "Nutrien",
        position: "Cloud DevOps Intern (Contract)",
        period: "Jan. 2023 - Dec. 2023",
        description: [
            "Worked with AWS CDK to develop fully cloud-based applications using CircleCI deployments and React front ends.",
            "Updated CircleCI build scripts to perform different workflows depending on the environment, such as dev and prod separated deployments.",
            "Wrote custom AWS CDK constructs to streamline cloud deployment and updating of constructs through an internal NPM library.",
            "Helped to centralize and streamline our deployment pipeline across hundreds of different repositories, leading to cleaner PR's, submitted code and making updates across repositories more efficient."
        ],
        image: "/images/work/nutrien.png",
        highlighted: true
    },
    {
        company: "CNH",
        position: "Embedded Software Engineering Intern (Contract)",
        period: "May 2022 - Aug. 2022",
        description: [
            "Developed an automated regression testing suite for tractor configurations, enhancing testing efficiency.",
            "Leveraged Python and OpenCV to control the simulator, ensuring accurate performance evaluations.",
            "Utilized C# to integrate controls into the testing framework, streamlining the automation process."
        ],
        image: "/images/work/cnh.png",
        highlighted: true
    },
    {
        company: "Home Depot",
        position: "Sales Associate - Lumber (Contract)",
        period: "Summer 2021",
        description: [
            "Worked as a sales associate in the lumber section, providing direct customer assistance.",
            "Obtained reach truck certification to efficiently handle inventory and assist customers with large orders.",
            "Maintained a safe and organized work environment in a high-traffic retail setting."
        ],
        image: "/images/work/homedepot.png",
        highlighted: false
    },
    {
        company: "Tower Glass Ltd.",
        position: "Journeyman Glass Apprentice",
        period: "Summers From 2016 to 2019",
        description: [
            "Assisted in high-volume automotive glass installations, developing fundamental skills in tool handling and glass preparation.",
            "Performed quality control checks, ensuring rigorous safety standards were met for every client.",
        ],
        image: "/images/work/tgPic.jpg",
        highlighted: false
    },
];

export default function WorkExperience() {
    const [showAll, setShowAll] = useState(false);

    const filteredExperiences = showAll
        ? WORK_EXPERIENCES
        : WORK_EXPERIENCES.filter(exp => exp.highlighted);

    return (
        <div className="mainContentBlock" style={{ minWidth: "66vw", alignItems: "center" }}>
            <div style={{ height: "30px" }}></div>
            <div className="verticalContentItem" style={{ justifyContent: "center", gap: "15px" }}>
                <div className="contentContainer">
                    {/* Toggle Switch */}
                    <div style={{
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'flex-end',
                        marginBottom: '20px',
                        gap: '15px'
                    }}>
                        <span style={{
                            color: !showAll ? 'white' : 'rgba(255,255,255,0.6)',
                            fontFamily: 'roboto, sans-serif',
                            fontWeight: !showAll ? 'bold' : 'normal',
                            transition: 'all 0.3s ease',
                            fontSize: '16px'
                        }}>Software Jobs</span>

                        <div
                            onClick={() => setShowAll(!showAll)}
                            style={{
                                width: '60px',
                                height: '30px',
                                backgroundColor: 'rgba(255,255,255,0.2)',
                                borderRadius: '15px',
                                position: 'relative',
                                cursor: 'pointer',
                                transition: 'background-color 0.3s ease',
                                border: '1px solid rgba(255,255,255,0.4)'
                            }}
                        >
                            <div style={{
                                width: '26px',
                                height: '26px',
                                backgroundColor: 'white',
                                borderRadius: '50%',
                                position: 'absolute',
                                top: '1px',
                                left: showAll ? '31px' : '1px',
                                transition: 'left 0.3s cubic-bezier(0.4, 0.0, 0.2, 1)',
                                boxShadow: '0 2px 4px rgba(0,0,0,0.2)'
                            }} />
                        </div>

                        <span style={{
                            color: showAll ? 'white' : 'rgba(255,255,255,0.6)',
                            fontFamily: 'roboto, sans-serif',
                            fontWeight: showAll ? 'bold' : 'normal',
                            transition: 'all 0.3s ease',
                            fontSize: '16px'
                        }}>All Jobs</span>
                    </div>

                    <AnimatePresence mode="popLayout">
                        {filteredExperiences.map((experience, index) => (
                            <motion.div
                                layout
                                key={`${experience.company}-${experience.period}`}
                                initial={{ opacity: 0, x: -20 }}
                                animate={{ opacity: 1, x: 0 }}
                                exit={{ opacity: 0, x: -20 }}
                                transition={{ duration: 0.3 }}
                                style={{
                                    marginBottom: "30px",
                                    padding: "20px",
                                    backgroundColor: "rgba(152, 116, 116, 0.1)",
                                    borderRadius: "10px",
                                    border: "1px solid rgba(255, 255, 255, 0.2)",
                                    display: "flex",
                                    gap: "20px",
                                    alignItems: "flex-start",
                                }}
                            >
                                {experience.image && (
                                    <img
                                        src={experience.image}
                                        alt={experience.company}
                                        style={{
                                            width: "120px",
                                            height: "120px",
                                            objectFit: "cover",
                                            borderRadius: "8px",
                                            flexShrink: 0
                                        }}
                                    />
                                )}
                                <div style={{ flex: 1 }}>
                                    <h2 style={{ margin: "0 0 5px 0", fontSize: "clamp(16px, 2vw, 24px)" }}>{experience.company}</h2>
                                    <p style={{ margin: "0 0 5px 0", fontSize: "clamp(12px, 1.5vw, 18px)", fontStyle: "italic", opacity: 0.9 }}>{experience.position}</p>
                                    <p style={{ margin: "0 0 15px 0", fontSize: "clamp(11px, 1.2vw, 16px)", opacity: 0.8 }}>{experience.period}</p>
                                    <ul style={{ margin: 0, paddingLeft: "20px" }}>
                                        {experience.description.map((item, idx) => (
                                            <li key={idx} style={{ fontSize: "clamp(10px, 1.2vw, 16px)", marginBottom: "8px", opacity: 0.9 }}>
                                                {item}
                                            </li>
                                        ))}
                                    </ul>
                                </div>
                            </motion.div>
                        ))}
                    </AnimatePresence>
                </div>
            </div>
        </div>
    );
}
