use dioxus::prelude::*;

// Skill data structure
#[derive(Clone, Debug, PartialEq)]
pub struct Skill {
    pub name: &'static str,
    pub abbreviation: &'static str,
    pub image: Option<Asset>,
    pub bg_color: &'static str,
    pub border_color: &'static str,
    pub drop_color: &'static str,
}

// Skill category structure
#[derive(Clone, Debug, PartialEq)]
pub struct SkillCategory {
    pub name: &'static str,
    pub skills: Vec<Skill>,
}

// Individual skill card component for the skills page
#[component]
pub fn SkillCard(skill: Skill) -> Element {
    rsx! {
        a {
            class: "card text-inherit decoration-none inline-flex flex-col border-1 border-solid border-[var(--border)] rounded-lg duration relative cursor-pointer decoration-none d1441skb",
            style: format!(
                "margin: 0px; --bg-img: url({}); --border-color: {}; --drop-color: {}; --bg-color: {};",
                skill.image.map(|img| img.to_string()).unwrap_or_default(),
                skill.border_color,
                skill.drop_color,
                skill.bg_color
            ),
            div {
                class: "card-bg-img flex-1 flex flex-col p-5 rounded-lg d1441skb",
                div {
                    class: "text-[var(--tertiary-text)]",
                    "{skill.name}"
                }
            }
        }
    }
}

// Small skill chip component for experience cards
#[component]
pub fn SkillChip(skill: Skill) -> Element {
    rsx! {
        div {
            class: "skill-chip",
            style: format!("background-color: {}", skill.bg_color),
            title: "{skill.name}",
            "{skill.abbreviation}"
        }
    }
}

// Skill list component for displaying multiple skills
#[component]
pub fn SkillList(skills: Vec<Skill>, display_mode: SkillDisplayMode) -> Element {
    let sorted_skills = match display_mode {
        SkillDisplayMode::Chips => {
            let mut skills = skills;
            skills.sort_by(|a, b| a.abbreviation.len().cmp(&b.abbreviation.len()));
            skills
        }
        _ => skills,
    };

    rsx! {
        div {
            class: match display_mode {
                SkillDisplayMode::Grid => "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 md:gap-3 lg:gap-5 mt-5",
                SkillDisplayMode::Chips => "experience-skills",
            },
            for skill in sorted_skills {
                match display_mode {
                    SkillDisplayMode::Grid => rsx! { SkillCard { skill: skill } },
                    SkillDisplayMode::Chips => rsx! { SkillChip { skill: skill } },
                }
            }
        }
    }
}

// Skill category component for the skills page
#[component]
pub fn SkillCategorySection(category: SkillCategory) -> Element {
    rsx! {
        div {
            class: "col gap-5 mb-7",
            div {
                class: "flex row items-center gap-5",
                div { class: "bg-[var(--main-hover)] h-[1px] w-[20px]" }
                p {
                    class: "text-[var(--main-close)]",
                    "{category.name}"
                }
                div { class: "flex-1 bg-[var(--main-hover)] h-[1px]" }
            }
            SkillList {
                skills: category.skills,
                display_mode: SkillDisplayMode::Grid
            }
        }
    }
}

#[derive(Clone, Copy, Debug, PartialEq)]
pub enum SkillDisplayMode {
    Grid,  // For skills page
    Chips, // For experience cards
}

// Skill data constants and helper functions
pub mod skill_data {
    use super::*;

    // Image assets
    const JS_IMAGE: Asset = asset!("/assets/images/js.png");
    const PHP_IMAGE: Asset = asset!("/assets/images/php.jpg");
    const PYTHON_IMAGE: Asset = asset!("/assets/images/python-logo.png");
    const SQL_IMAGE: Asset = asset!("/assets/images/sql-logo.jpg");
    const PLSQL_IMAGE: Asset = asset!("/assets/images/plsql-logo.png");
    const RUST_IMAGE: Asset = asset!("/assets/images/rust-logo.png");
    const AUTO_IT_IMAGE: Asset = asset!("/assets/images/autoit-logo.jpg");
    const HTML_IMAGE: Asset = asset!("/assets/images/html-logo.png");
    const CSS_IMAGE: Asset = asset!("/assets/images/css-logo.png");
    const SASS_IMAGE: Asset = asset!("/assets/images/sass-logo.png");
    const LARAVEL_IMAGE: Asset = asset!("/assets/images/laravel-logo.png");
    const CODEIGNITER_IMAGE: Asset = asset!("/assets/images/codeigniter-logo.png");
    const REACTJS_IMAGE: Asset = asset!("/assets/images/reactjs-logo.png");
    const SVELTE_IMAGE: Asset = asset!("/assets/images/svelte-logo.png");
    const D3JS_IMAGE: Asset = asset!("/assets/images/d3js-logo.png");
    const PHASERIO_IMAGE: Asset = asset!("/assets/images/phaser-logo.png");
    const FASTAPI_IMAGE: Asset = asset!("/assets/images/fastapi-logo.jpg");
    const DIOXUS_IMAGE: Asset = asset!("/assets/images/dioxus-logo.png");
    const TAILWINDCSS_IMAGE: Asset = asset!("/assets/images/tailwindcss-logo.png");
    const BOOTSTRAP_IMAGE: Asset = asset!("/assets/images/bootstrap-logo.png");
    const SEMANTICUI_IMAGE: Asset = asset!("/assets/images/semanticui-logo.png");
    const AWS_IMAGE: Asset = asset!("/assets/images/aws-logo.png");
    const GCP_IMAGE: Asset = asset!("/assets/images/gcp-logo.png");
    const OVH_IMAGE: Asset = asset!("/assets/images/ovh-logo.png");
    const CLOUDFLARE_IMAGE: Asset = asset!("/assets/images/cloudflare-logo.png");
    const GIT_IMAGE: Asset = asset!("/assets/images/git-logo.png");
    const DOCKER_IMAGE: Asset = asset!("/assets/images/docker-logo.png");
    const OUTSYSTEMS_IMAGE: Asset = asset!("/assets/images/outsystems-logo.png");
    const TERRAFORM_IMAGE: Asset = asset!("/assets/images/terraform-logo.png");

    // Helper function to get skill by name/abbreviation
    pub fn get_skill_by_name(name: &str) -> Option<Skill> {
        match name.to_lowercase().as_str() {
            "javascript" | "js" => Some(javascript_skill()),
            "html" => Some(html_skill()),
            "css" => Some(css_skill()),
            "php" => Some(php_skill()),
            "python" => Some(python_skill()),
            "sql" => Some(sql_skill()),
            "rust" => Some(rust_skill()),
            "laravel" => Some(laravel_skill()),
            _ => None,
        }
    }

    // Programming
    pub fn javascript_skill() -> Skill {
        Skill {
            name: "JAVASCRIPT",
            abbreviation: "JS",
            image: Some(JS_IMAGE),
            bg_color: "#f7df1e",
            border_color: "#f7df1e80",
            drop_color: "#f7df1e26",
        }
    }

    pub fn php_skill() -> Skill {
        Skill {
            name: "PHP",
            abbreviation: "PHP",
            image: Some(PHP_IMAGE),
            bg_color: "#777bb4",
            border_color: "#777bb480",
            drop_color: "#777bb426",
        }
    }

    pub fn python_skill() -> Skill {
        Skill {
            name: "PYTHON",
            abbreviation: "PY",
            image: Some(PYTHON_IMAGE),
            bg_color: "#3776ab",
            border_color: "#3776ab80",
            drop_color: "#3776ab26",
        }
    }

    pub fn rust_skill() -> Skill {
        Skill {
            name: "RUST",
            abbreviation: "RS",
            image: Some(RUST_IMAGE),
            bg_color: "#ce422b",
            border_color: "#ce422b80",
            drop_color: "#ce422b26",
        }
    }

    pub fn sql_skill() -> Skill {
        Skill {
            name: "SQL",
            abbreviation: "SQL",
            image: Some(SQL_IMAGE),
            bg_color: "#336791",
            border_color: "#33679180",
            drop_color: "#33679126",
        }
    }

    pub fn plsql_skill() -> Skill {
        Skill {
            name: "PL/SQL",
            abbreviation: "PLSQL",
            image: Some(PLSQL_IMAGE),
            bg_color: "#d6393c",
            border_color: "#d6393c",
            drop_color: "#d6393c",
        }
    }

    pub fn autoit_skill() -> Skill {
        Skill {
            name: "AUTO IT",
            abbreviation: "AIT",
            image: Some(AUTO_IT_IMAGE),
            bg_color: "#ffff0003",
            border_color: "#ffff0080",
            drop_color: "#ffff0026",
        }
    }

    // Markup & Style
    pub fn html_skill() -> Skill {
        Skill {
            name: "HTML",
            abbreviation: "HTML",
            image: Some(HTML_IMAGE),
            bg_color: "#e34f26",
            border_color: "#e34f2680",
            drop_color: "#e34f2626",
        }
    }

    pub fn css_skill() -> Skill {
        Skill {
            name: "CSS",
            abbreviation: "CSS",
            image: Some(CSS_IMAGE),
            bg_color: "#1572b6",
            border_color: "#1572b680",
            drop_color: "#1572b626",
        }
    }

    pub fn sass_skill() -> Skill {
        Skill {
            name: "SASS",
            abbreviation: "SASS",
            image: Some(SASS_IMAGE),
            bg_color: "#B755B1",
            border_color: "#B755B1",
            drop_color: "#B755B1",
        }
    }

    //Frameworks
    pub fn laravel_skill() -> Skill {
        Skill {
            name: "LARAVEL",
            abbreviation: "LARAVEL",
            image: Some(LARAVEL_IMAGE),
            bg_color: "#f53003",
            border_color: "#f53003",
            drop_color: "#f53003",
        }
    }

    pub fn codeigniter_skill() -> Skill {
        Skill {
            name: "CODEIGNITER",
            abbreviation: "CI",
            image: Some(CODEIGNITER_IMAGE),
            bg_color: "#dd4814",
            border_color: "#dd4814",
            drop_color: "#dd4814",
        }
    }

    pub fn reactjs_skill() -> Skill {
        Skill {
            name: "REACTJS",
            abbreviation: "REACTJS",
            image: Some(REACTJS_IMAGE),
            bg_color: "#2D89C9",
            border_color: "#2D89C9",
            drop_color: "#2D89C9",
        }
    }

    pub fn svelte_skill() -> Skill {
        Skill {
            name: "SVELTE",
            abbreviation: "SVELTE",
            image: Some(SVELTE_IMAGE),
            bg_color: "#FF5100",
            border_color: "#FF5100",
            drop_color: "#FF5100",
        }
    }

    pub fn d3js_skill() -> Skill {
        Skill {
            name: "D3.JS",
            abbreviation: "D3.JS",
            image: Some(D3JS_IMAGE),
            bg_color: "#FF7D00",
            border_color: "#FF7D00",
            drop_color: "#FF7D00",
        }
    }

    pub fn phaserio_skill() -> Skill {
        Skill {
            name: "PHASER.IO",
            abbreviation: "PHASER.IO",
            image: Some(PHASERIO_IMAGE),
            bg_color: "#62eff7",
            border_color: "#62eff7",
            drop_color: "#62eff7",
        }
    }

    pub fn fastapi_skill() -> Skill {
        Skill {
            name: "FAST API",
            abbreviation: "FASTAPI",
            image: Some(FASTAPI_IMAGE),
            bg_color: "#009485",
            border_color: "#009485",
            drop_color: "#009485",
        }
    }

    pub fn dioxus_skill() -> Skill {
        Skill {
            name: "DIOXUS",
            abbreviation: "DIOXUS",
            image: Some(DIOXUS_IMAGE),
            bg_color: "#EF7E2B",
            border_color: "#EF7E2B",
            drop_color: "#EF7E2B",
        }
    }

    pub fn tailwindcss_skill() -> Skill {
        Skill {
            name: "TAILWIND CSS",
            abbreviation: "TAILWINDCSS",
            image: Some(TAILWINDCSS_IMAGE),
            bg_color: "#4CADDC",
            border_color: "#4CADDC",
            drop_color: "#4CADDC",
        }
    }

    pub fn bootstrap_skill() -> Skill {
        Skill {
            name: "BOOTSTRAP",
            abbreviation: "BOOTSTRAP",
            image: Some(BOOTSTRAP_IMAGE),
            bg_color: "#922BEF",
            border_color: "#922BEF",
            drop_color: "#922BEF",
        }
    }

    pub fn semanticui_skill() -> Skill {
        Skill {
            name: "SEMANTIC UI",
            abbreviation: "SEMANTIC_UI",
            image: Some(SEMANTICUI_IMAGE),
            bg_color: "#15B5B9",
            border_color: "#15B5B9",
            drop_color: "#15B5B9",
        }
    }

    // Cloud Platforms
    pub fn aws_skill() -> Skill {
        Skill {
            name: "AMAZON (AWS)",
            abbreviation: "AWS",
            image: Some(AWS_IMAGE),
            bg_color: "#EC8439",
            border_color: "#EC8439",
            drop_color: "#EC8439",
        }
    }

    pub fn gcp_skill() -> Skill {
        Skill {
            name: "GOOGLE CLOUD PLATFORM",
            abbreviation: "GCP",
            image: Some(GCP_IMAGE),
            bg_color: "#3984EC",
            border_color: "#3984EC",
            drop_color: "#3984EC",
        }
    }

    pub fn ovh_skill() -> Skill {
        Skill {
            name: "OVHCLOUD",
            abbreviation: "OVH",
            image: Some(OVH_IMAGE),
            bg_color: "#1537B9",
            border_color: "#1537B9",
            drop_color: "#1537B9",
        }
    }

    pub fn cloudflare_skill() -> Skill {
        Skill {
            name: "CLOUDFLARE",
            abbreviation: "CF",
            image: Some(CLOUDFLARE_IMAGE),
            bg_color: "#ea9f2e",
            border_color: "#ea9f2e",
            drop_color: "#ea9f2e",
        }
    }

    pub fn git_skill() -> Skill {
        Skill {
            name: "GIT",
            abbreviation: "GIT",
            image: Some(GIT_IMAGE),
            bg_color: "#DE570D",
            border_color: "#DE570D",
            drop_color: "#DE570D",
        }
    }

    pub fn docker_skill() -> Skill {
        Skill {
            name: "DOCKER",
            abbreviation: "DOCKER",
            image: Some(DOCKER_IMAGE),
            bg_color: "#1F95DA",
            border_color: "#1F95DA",
            drop_color: "#1F95DA",
        }
    }

    pub fn outsystem_skill() -> Skill {
        Skill {
            name: "OUTSYSTEMS",
            abbreviation: "OUTSYSTEMS",
            image: Some(OUTSYSTEMS_IMAGE),
            bg_color: "#BD2031",
            border_color: "#BD2031",
            drop_color: "#BD2031",
        }
    }

    pub fn terraform_skill() -> Skill {
        Skill {
            name: "TERRAFORM",
            abbreviation: "TF",
            image: Some(TERRAFORM_IMAGE),
            bg_color: "#8179ea",
            border_color: "#8179ea",
            drop_color: "#8179ea",
        }
    }

    // Get all skill categories for the skills page
    pub fn get_all_skill_categories() -> Vec<SkillCategory> {
        vec![
            SkillCategory {
                name: "Programming Languages",
                skills: vec![
                    javascript_skill(),
                    php_skill(),
                    python_skill(),
                    sql_skill(),
                    plsql_skill(),
                    rust_skill(),
                    autoit_skill(),
                ],
            },
            SkillCategory {
                name: "Markup & Style",
                skills: vec![html_skill(), css_skill(), sass_skill()],
            },
            SkillCategory {
                name: "Frameworks",
                skills: vec![
                    laravel_skill(),
                    codeigniter_skill(),
                    reactjs_skill(),
                    svelte_skill(),
                    d3js_skill(),
                    phaserio_skill(),
                    fastapi_skill(),
                    dioxus_skill(),
                    tailwindcss_skill(),
                    bootstrap_skill(),
                    semanticui_skill(),
                ],
            },
            SkillCategory {
                name: "Cloud Platforms",
                skills: vec![aws_skill(), gcp_skill(), ovh_skill(), cloudflare_skill()],
            },
            SkillCategory {
                name: "Other Tools",
                skills: vec![
                    git_skill(),
                    docker_skill(),
                    outsystem_skill(),
                    terraform_skill(),
                ],
            },
        ]
    }
}
