use crate::components::{
    skill_data::{self},
    Skill, SkillDisplayMode, SkillList,
};
use dioxus::prelude::*;

#[derive(Clone, Debug)]
struct Experience {
    title: &'static str,
    company: &'static str,
    location: &'static str,
    employment_type: &'static str,
    start_date: &'static str,
    end_date: &'static str,
    duration: &'static str,
    description: &'static str,
    skills: Vec<Skill>,
    border_color: &'static str,
    drop_color: &'static str,
    bg_color: &'static str,
}

#[component]
pub fn ExperienceList() -> Element {
    let experiences = vec![
        Experience {
            title: " Senior Full Stack Developer ",
            company: "Startechup Inc.",
            location: "Cebu, Philippines ",
            employment_type: "Full Time ",
            start_date: " September 2022",
            end_date: "Present",
            duration: " 2 yrs & 10 months",
            description: "Successfully managed projects on schedule, optimized AWS for 50% cost savings, modernized backend systems, enhanced security, and promoted technical excellence through mentoring and code reviews.",
            skills: vec![
                skill_data::php_skill(),
                skill_data::python_skill(),
                skill_data::sql_skill(),
                skill_data::html_skill(),
                skill_data::css_skill(),
                skill_data::javascript_skill(),
                skill_data::laravel_skill(),
                skill_data::fastapi_skill(),
                skill_data::tailwindcss_skill(),
                skill_data::aws_skill(),
                skill_data::gcp_skill(),
                skill_data::git_skill(),
                skill_data::docker_skill(),
                skill_data::terraform_skill(),
            ],
            border_color: "#EF5A6A",
            drop_color: "#EF5A6A",
            bg_color: "#EF5A6A",
        },
        Experience {
            title: "Technical Lead/Full Stack Developer",
            company: "Herohub Inc.",
            location: "San Juan, Philippines",
            employment_type: "Full Time",
            start_date: "April 2017",
            end_date: "January 2021",
            duration: "3 yrs & 10 months ",
            description: "Aligned technology with business goals, implemented low-code platforms for rapid app development, maintained core infrastructure, mentored teams, and collaborated on the long-term roadmap.",
            skills: vec![
                skill_data::javascript_skill(),
                skill_data::php_skill(),
                skill_data::sql_skill(),
                skill_data::html_skill(),
                skill_data::css_skill(),
                skill_data::laravel_skill(),
                skill_data::reactjs_skill(),
                skill_data::bootstrap_skill(),
                skill_data::semanticui_skill(),
                skill_data::aws_skill(),
                skill_data::gcp_skill(),
                skill_data::git_skill(),
                skill_data::outsystem_skill(),
                skill_data::plsql_skill(),
                skill_data::docker_skill(),
            ],
            border_color: "#E88F4D",
            drop_color: "#E88F4D",
            bg_color: "#E88F4D",
        },
        Experience {
            title: "Full Stack Developer",
            company: "Fountainhead Technologies Inc.",
            location: "Quezon City, Philippines",
            employment_type: "Full Time",
            start_date: "December 2013",
            end_date: "January 2017",
            duration: "3 yrs & 2 months ",
            description: "Managed and motivated developers for project success. Handled large SQL databases, owned the development lifecycle, gathered requirements, created flow proposals, coded and tested modules, and integrated APIs.",
            skills: vec![
                skill_data::javascript_skill(),
                skill_data::php_skill(),
                skill_data::sql_skill(),
                skill_data::html_skill(),
                skill_data::css_skill(),
                skill_data::laravel_skill(),
                skill_data::reactjs_skill(),
                skill_data::bootstrap_skill(),
                skill_data::semanticui_skill(),
                skill_data::aws_skill(),
                skill_data::git_skill(),
                skill_data::phaserio_skill(),
                skill_data::plsql_skill(),
                skill_data::sass_skill(),
            ],
            border_color: "#7CB768",
            drop_color: "#7CB768",
            bg_color: "#7CB768",
        },
        Experience {
            title: "Web Developer",
            company: "Mindblow Internet Ideas",
            location: "Mandaluyong, Philippines",
            employment_type: "Full Time",
            start_date: "May 2012",
            end_date: "August 2013",
            duration: "1 yr & 4 months ",
            description: "Participated in client meetings to understand project requirements. Managed small-to-medium projects, including CMS and e-commerce deployments, integrated APIs, collaborated with teams, trained interns, and applied SEO best practices",
            skills: vec![
                skill_data::javascript_skill(),
                skill_data::php_skill(),
                skill_data::sql_skill(),
                skill_data::html_skill(),
                skill_data::css_skill(),
                skill_data::codeigniter_skill(),
                skill_data::bootstrap_skill(),
            ],
            border_color: "#4EA232",
            drop_color: "#4EA232",
            bg_color: "#4EA232",
        },
    ];

    rsx! {
        div {
            class: "col items-center relative mt-10 flex-1",

            // Vertical timeline line
            // div {
            //     class: "w-[0.5px] hidden lg:flex top-0 bottom-0 py-50px bg-[var(--border)] absolute rounded justify-center "
            // }

            // Experience Items
            for (index, experience) in experiences.iter().enumerate() {
                div {
                    class: "relative items-center w-full my-[10px]",

                    // Left/Right spacer
                    div {
                        class: "flex-1 hidden lg:flex timeline-spacer ",
                        style: "flex: 0 0 15%;"
                    }

                    // Timeline dot
                    // div {
                    //     class: "hidden lg:inline p-15px bg-[var(--main)] rounded ",
                    //     i {
                    //         class: "i-carbon-condition-point "
                    //     }
                    // }

                    // Experience Card
                    div {
                        class: "experience-card ",
                        style: format!("--border-hover: {}", experience.border_color),
                            // Header section with avatar and title
                            div {
                                class: "flex items-start gap-4",

                                // Avatar
                                // div {
                                //     class: "experience-avatar ",
                                //     div {
                                //         class: "experience-avatar-inner "
                                //     }
                                // }

                                // Content
                                div {
                                    class: "col ml-0 md:ml-[20px] gap-3 w-full ",

                                    // Title
                                    div {
                                        class: "col",
                                        h2 {
                                            class: "flex text-[2em] flex-col items-start sm:flex-row sm:items-center justify-between sm:gap-5 md:flex-col md:items-start md:gap-0 lg:flex-row lg:items-center bold",
                                            h2 {
                                                class: "font-[var(--title-f)] text-2em bold",
                                                "{experience.title}"
                                            }
                                        }
                                    }

                                    // Company, Location, Type tags
                                    div {
                                        class: "flex flex-wrap gap-2 mb-3",

                                        // Company tag
                                        span {
                                            class: "flex items-center gap-1 px-2 py-1 bg-[var(--secondary)] border border-[var(--border)] rounded text-xs text-[var(--secondary-text)]",
                                            i { class: "i-carbon-building text-xs " }
                                            span { "{experience.company}" }
                                        }

                                        // Location tag
                                        span {
                                            class: "flex items-center gap-1 px-2 py-1 bg-[var(--secondary)] border border-[var(--border)] rounded text-xs text-[var(--secondary-text)]",
                                            i { class: "i-carbon-location text-xs " }
                                            span { "{experience.location}" }
                                        }

                                        // Employment type tag
                                        span {
                                            class: "flex items-center gap-1 px-2 py-1 bg-[var(--secondary)] border border-[var(--border)] rounded text-xs text-[var(--secondary-text)]",
                                            i { class: "i-carbon-user text-xs " }
                                            span { "{experience.employment_type}" }
                                        }
                                    }

                                    // Date and duration info
                                    div {
                                        class: "text-[var(--text)] text-[0.9em]",

                                        // Date range
                                        div {
                                            class: "row items-center gap-2",
                                            i { class: "i-carbon-calendar text-1.25em" }
                                            "{experience.start_date} - {experience.end_date}"
                                        }

                                        div {
                                            class: "bg-[var(--border)] h-1px m-y-10px"
                                        }

                                        // Duration
                                        div {
                                            class: "row items-center gap-2",
                                            i { class: "i-carbon-time text-1.25em" }
                                            "{experience.duration}"
                                        }

                                        div {
                                            class: "bg-[var(--border)] h-1px m-y-10px"
                                        }
                                    }

                                    // Description
                                    div {
                                        class: "experience-description text-[0.9em] mb-4 mt-4",
                                        "{experience.description}"
                                    }

                                    // Skills
                                    if !experience.skills.is_empty() {
                                        SkillList {
                                            skills: experience.skills.clone(),
                                            display_mode: SkillDisplayMode::Chips
                                        }
                                    }
                                }
                            }
                    }
                }
            }
        }
    }
}
