use maud::{html, Markup};
use rand::prelude::*;

use crate::components::icon;
use crate::views::wrapper;
use crate::url;
use crate::leaderboard;

pub enum CustomUrl {
    HasIdentifier(String),
    NoIdentifier,
    Error(url::Error),
}

pub enum AutogeneratedUrl {
    HasIdentifier(String),
    NoIdentifier,
    Error(url::Error),
}

pub enum RootData {
    Auto(AutogeneratedUrl),
    Custom(CustomUrl)
}

/// Renders the `root` page template
pub fn render(data: RootData) -> Markup {
    let home_content = html! {
        main class="space-y-4 flex flex-col items-center justify-center flex-1" {
            (heading())

            (form(&data))

            @match data {
                RootData::Auto(a) => {
                    @if let AutogeneratedUrl::HasIdentifier(identifier) = a {
                        (url_list(identifier))
                    }
                },
                RootData::Custom(c) => {
                    @if let CustomUrl::HasIdentifier(identifier) = c {
                        (url_list(identifier))
                    }
                },
            }
        }
    };

    wrapper(&home_content)
}

fn form(data: &RootData) -> Markup {
    html! {
        form
            id="url-form"
            class="flex flex-col w-full"
            action=(if let RootData::Custom(_) = data { "/?custom_url=t" } else { "/" })
            method="POST" {
            div class="mx-auto flex w-full sm:w-4/5 shadow-md dark:shadow-black/[0.2]" {
                input
                    id="url"
                    autofocus="true"
                    autocomplete="off"
                    class="flex-1 outline-none placeholder:text-gray-400 dark:placeholder:text-su-dark-fg-1/[0.6] text-su-fg-1 dark:text-su-dark-fg-1 w-10/12 rounded-l-md bg-white dark:bg-su-dark-bg-2 p-2.5 text-lg"
                    type="text"
                    placeholder="https://youtube.com/sekunho"
                    name="url"
                    required;

                button title="Why?" class="hover:bg-gray-100 dark:hover:bg-white/[0.1] flex items-center justify-center flex-none w-12 p-1 border-red-200 rounded-r-md bg-white dark:bg-su-dark-bg-2 text-su-fg-1 dark:text-su-dark-fg-1" type="submit" { (icon::arrow_right()) }
            }

            div id="identifier-field" class=(if let RootData::Custom(_) = data { "" } else { "hidden" }) {
                div class="mx-auto mt-2 text-center font-serif font-semibold text-lg text-su-fg-1 dark:text-su-dark-fg-1" { "to" }

                div class="shadow-md dark:shadow-black/[0.2] mx-auto flex w-full sm:w-4/5 mt-2" {
                    div class="w-2/5 sm:w-1/5 h-full text-lg text-su-fg-1 dark:text-su-dark-fg-1 bg-gray-200 dark:bg-white/[0.3] px-2 py-2 rounded-l-md" {
                          "emojied.net/"
                      }

                      // Set required if user chose to set the custom ID
                    @match data {
                        RootData::Auto(_) => {
                            input
                                id="identifier"
                                class="w-3/5 sm:w-4/5 text-su-fg-1 dark:text-su-dark-fg-1 rounded-r-md bg-white dark:bg-su-dark-bg-2 p-2 text-lg"
                                type="text"
                                name="identifier"
                                autocomplete="off";
                        }

                        RootData::Custom(_) => {
                            input
                                id="identifier"
                                required
                                class="w-3/5 sm:w-4/5 text-su-fg-1 dark:text-su-dark-fg-1 rounded-r-md bg-white dark:bg-su-dark-bg-2 p-2 text-lg"
                                type="text"
                                name="identifier"
                                autocomplete="off";
                        }
                    }
                }
            }

            @match data {
                RootData::Auto(_) => {
                    noscript {
                        div class="w-full sm:w-4/5 mt-2 mx-auto text-su-fg-1 dark:text-su-dark-fg-1" {
                            a href="?custom_url=t" type="button" class="font-medium underline" {
                                "Custom URL"
                            }
                        }
                    }
                }

                RootData::Custom(_) => {
                    noscript {
                        div class="w-full sm:w-4/5 mt-2 mx-auto text-su-fg-1 dark:text-su-dark-fg-1" {
                            a href="/" type="button" class="font-medium underline" {
                                "Autogenerate a custom URL for me"
                            }
                        }
                    }
                }
            }
        }
    }
}

fn url_list(identifier: String) -> Markup {
    html! {
        noscript class="w-full sm:w-4/5" {
            div class="divide-y divide-su-bg-2 dark:divide-su-dark-bg-2 shadow-md px-2.5 bg-su-bg-2 dark:bg-black/[0.3] rounded-md border border-su-dark-bg-2 mx-auto"
                id="url-list" {
                div class="py-2 flex justify-between text-su-fg-1 dark:text-su-dark-fg-1" {
                    a href=(format!("/{}", identifier)) {
                        (format!("emojied.net/{}", identifier))
                    }

                    div class="flex space-x-2.5 text-sm" {
                        a href=(format!("/stats/{}", identifier)) {
                            (icon::chart_bar())
                        }
                    }
                }
            }
        }
    }
}

pub fn view_stats(url_stats: &leaderboard::Entry) -> Markup {
    let content = html! {
        div class="flex-1 flex flex-col items-center justify-center" {
            div class="flex flex-col justify-center items-center" {
                span class="text-9xl font-bold text-su-fg-1 dark:text-su-dark-fg-1" {
                    (url_stats.clicks)
                }
                span class="text-lg font-medium text-su-fg-1/[0.8] dark:text-su-dark-fg-1/[0.8]" {
                    @if url_stats.clicks == 1 {
                        "click"
                    } @else if url_stats.clicks == 0 {
                        "clicks "
                        span class="font-italic" { "*crickets*" }
                    } @else {
                        "clicks"
                    }
                }
            }

            h1 class="text-xl mt-8" {
                a href=(format!("/{}", url_stats.identifier)) {
                    span class="text-su-fg-1/[0.8] dark:text-su-dark-fg-1/[0.8]" {
                        "emojied.net/"
                    }
                    (url_stats.identifier)
                }
            }

            h2 class="text-xl text-su-fg-1/[0.8] text-center dark:text-su-dark-fg-1/[0.8]" {
                a href=(url_stats.url) target="_blank" {
                    (url_stats.url)
                }
            }

            a target="_blank" class="flex space-x-2 mt-6 text-su-fg-1 dark:text-su-dark-fg-1 underline" href=(create_mailto(url_stats.identifier.clone())) {
                (icon::shield_exclamation())
                span {
                    ("Report this URL as malicious")
                }
            }
        }
    };

    wrapper(&content)
}

pub fn create_mailto(identifier: String) -> String {
    format!(
        "mailto:report@emojied.net?subject=Malicious%20Url&body=I would like to report \
        https://emojied.net/{} as malicious because ",
        identifier
    )
}

fn heading() -> Markup {
    html! {
        div class="mb-4 sm:mb-8 flex flex-col justify-center" {
            a href="/" class="text-5xl sm:text-7xl font-serif font-semibold text-su-fg-1 dark:text-su-dark-fg-1 text-center" {
                "em"
                span class="text-3xl sm:text-5xl" { (get_random_emoji()) }
                "jied!"
            }

            p class="text-center text-lg" {
                span class="text-su-fg-1 dark:text-su-dark-fg-1/[0.7]" {
                    "Shorten your links with "
                }
                span class="text-su-fg-1 dark:text-su-dark-fg-1/[0.7] underline" {
                    "only"
                }
                span class="text-su-fg-1 dark:text-su-dark-fg-1/[0.7]" {
                    " emojis "
                }
                "ğŸ’–âœ¨"
            }
        }
    }
}

/// Randomly picks out an emoji from the list
fn get_random_emoji() -> String {
    let mut rng = thread_rng();

    ['ğŸ�µ', 'ğŸ�†', 'ğŸ�±', 'ğŸ˜¶']
        .into_iter()
        .map(String::from)
        .choose(&mut rng)
        .unwrap()
}
