use dioxus::prelude::*;

use crate::components::{H4, HR};

#[component]
pub fn CV() -> Element {
    rsx! {
        div {
            class: "flex flex-col ",
            Introduction {},
            HR {}
            div {
                class: "flex justify-between",
                WorkExperience {},
                Miscellaneous {},
            },
            HR {},
            Socials {}
        }
    }
}

fn Introduction() -> Element {
    rsx! {
        div {
            class: "flex",
            img {
                class: "rounded-full w-16 h-16 mx-16",
                src: "/pictures/portrait.webp"
            }
            P {
                "While studying for my bachelors degree I collected a lot of
                industry and academic experience. My professional and personal
                intererests are DevOps/IaC, Systems/Software Security and Computer
                Networking. All of which I deepen in personal projects such as my
                homelab and CTF challenges."
            }
        }
    }
}

fn WorkExperience() -> Element {
    rsx! {
        div {
            class: "ms-8 max-w-3/4",
            H4 { "Work Experience" },
            ol {
                class:"relative border-s border-gray-200 dark:border-gray-700",
                CVEntry {time: "2021 - now", title: "Research Assistant @ UDE",
                    technologies: vec!["Rust".to_string(), "Python".to_string(), "P4".to_string(), "Linux".to_string(), "Docker".to_string(), "Kubernetes".to_string()],
                    description:
                    "While working for the Network Communication System Research
                    Group at the University Duisburg-Essen as a research assistant
                    I've assisted in research around software defined networking,
                    5G, congestion control algorithms and federated machine learning.
                    I've established and managed the research groups on-premise and
                    cloud infractructure, inventory system and online presence."
                },
                CVEntry {time: "2021 - 2022", title: "Mentoring @ UDE",
                    technologies: vec!["Powerpoint".to_string()],
                    description:
                    "As a mentor for students enrolling into the computer
                    science program of the University Duisburg-Essen I
                    introduced groups of ~20 freshmen to their new academic
                    environment at the beginning of each semester. Offering
                    additional organizational and technical guidance for an
                     two-semesters."
                },
                CVEntry {time: "2018 - 2020", title: "Software Engineer @ gefeba Engineering GmbH",
                    technologies: vec!["C#".to_string(), "Angular".to_string(), "bootstrap".to_string(), "Entity Framework".to_string()],
                    description:
                    "As a software engineer at gefeba Engineering I worked
                    worked the companies main software product, which was a
                    frame-based data exchange system to monitor industry
                    machinary using C# and Entity Framework. Another project
                    I worked on was a real time log visualization application
                    for the same machinary."
                },
                CVEntry {time: "2016 - 2019", title: "Student Council Member @ UDE",
                    technologies: vec!["Linux".to_string(), "Networking".to_string(), "LaTeX".to_string()],
                    description:
                    "As a student council member I participated in faculty
                    committees and organized social events. My 
                    main responsabilities as a member were the management
                    of the IT infrastructure and supporting students, be it
                    organizationally or subject-specific."
                },
                CVEntry {time: "2013 - 2015", title: "Software Engineer @ gefeba Engineering GmbH",
                    technologies: vec!["C#".to_string(), "HTML".to_string(), "Javascript".to_string(), "CSS".to_string()],
                    description:
                    "After a school internship I got offered a job as a
                    Software Engineer. I mostly worked on internal ERP
                    projects, designed a tool which aided in managing
                    project related mail traffic and worked on the 
                    internal master data management tool."
                },
            }
        },
    }
}

fn Miscellaneous() -> Element {
    rsx! {
        div {
            class: "",
            Education {},
            Skills {},
            Languages {},
            Interests {},
        }
    }
}

fn Education() -> Element {
    rsx! {
        div {
            H4 {"Education"},
            Entry {
                title: "BSc Systems Engineering",
                time { class:"mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500", "2015 - now"},
            },
        }
    }
}

fn Skills() -> Element {
    rsx! {
        div {
            H4 {"Skills"},
            Entry {
                title: "DevOps",
                P { "Ansible" },
                P { "Kubernetes" },
                P { "GitOps" },
            }Entry {
                title: "Software Development",
                P { "Rust" },
                P { "Python" },
                P { "Java" },
            }
        }
    }
}

fn Languages() -> Element {
    rsx! {
        div {
            H4 {"Languages"},
            Entry {
                P { "German (Native)" },
                P { "English (C2)" },
                P { "Vietnamese (B1)" },
                P { "Japanese (A1)" },
            }
        }
    }
}

fn Interests() -> Element {
    rsx! {
        div {
            H4 {"Interests"}
            Entry {
                P { "Coffee" },
                P { "Mechanical Keyboards" },
                P { "Tech/IT" },
                P { "Music" },
            }
        }
    }
}

#[derive(PartialEq, Props, Clone)]
struct EntryProps {
    #[props(default = "mb-4".to_string())]
    class: String,
    #[props(default = "".to_string())]
    title: String,
    children: Element,
}

fn Entry(props: EntryProps) -> Element {
    rsx! {
        div {
            class: "{props.class}",
            h6 { class: "font-semibold text-gray-900 dark:text-white", "{props.title}"}
            {props.children},
        }
    }
}

#[derive(PartialEq, Props, Clone)]
struct CVEntryProps {
    #[props(default = "mb-10 ms-4".to_string())]
    class: String,
    time: String,
    title: String,
    technologies: Vec<String>,
    #[props(default = "".to_string())]
    description: String,
    children: Element,
}

fn CVEntry(props: CVEntryProps) -> Element {
    rsx! {
        li {
            class: "max-w-xl",
            class: "{props.class}",
            div { class:"absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -start-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"},
            time { class:"mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500", "{props.time}"},
            h6 { class: "text-lg font-semibold text-gray-900 dark:text-white", "{props.title}"}
            for tech in props.technologies {
                RandomBadge {text: "{tech}"}
            }
            p { class:"text-base font-normal text-gray-500 dark:text-gray-400", "{props.description}"},
            {props.children}
        }
    }
}

#[component]
fn RandomBadge(text: String) -> Element {
    let badge_color = random_badge_color(text.len());
    rsx! {
        span {
            class:"text-xs font-medium me-2 px-2.5 py-0.5 rounded ",
            class: "{badge_color}",
            "{text}"
        }
    }
}

fn random_badge_color(seed: usize) -> String {
    let colors = [
        "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
        "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300",
        "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300",
        "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
        "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300",
        "bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300",
        "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300",
        "bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300",
    ];

    colors[seed % colors.len()].to_string()
}

fn Socials() -> Element {
    rsx! {
        div {
            "todo!()"
        }
    }
}

#[component]
fn P(children: Element) -> Element {
    rsx! {
        p {
            class: "text-base font-normal text-gray-500 dark:text-gray-400",
            {children},
        }
    }
}