use ely_browser_core::BrowserSnapshot;
use ely_design_system::{ELY_THEME, colors, spacing};
use ely_domain::{ArchiveSource, ArchivedTab, BrowserTab, Space};
use gpui::{
    AnyElement, Context, InteractiveElement, IntoElement, ParentElement, Render, SharedString,
    StatefulInteractiveElement, Styled, Window, div, px, rgb,
};
use gpui_component::{
    IconName, Selectable, Sizable, StyledExt,
    button::{Button, ButtonVariants},
    input::Input,
};

use super::{ElyShell, ShellState};

impl Render for ElyShell {
    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        match &self.state {
            ShellState::Ready(core) => match (core.snapshot(), core.active_tab().cloned()) {
                (Ok(snapshot), Ok(active_tab)) => self.render_browser(snapshot, active_tab, cx),
                (Err(error), _) | (_, Err(error)) => render_error(error.to_string()),
            },
            ShellState::StartupError(message) => render_error(message.clone()),
        }
    }
}

impl ElyShell {
    fn render_browser(
        &mut self,
        snapshot: BrowserSnapshot,
        active_tab: BrowserTab,
        cx: &mut Context<Self>,
    ) -> AnyElement {
        div()
            .size_full()
            .track_focus(&self.focus_handle)
            .on_action(cx.listener(Self::on_close_current_tab))
            .on_action(cx.listener(Self::on_focus_address_bar))
            .on_action(cx.listener(Self::on_focus_command_mode))
            .on_action(cx.listener(Self::on_open_downloads))
            .on_action(cx.listener(Self::on_open_history))
            .on_action(cx.listener(Self::on_open_new_tab))
            .on_action(cx.listener(Self::on_open_settings))
            .on_action(cx.listener(Self::on_restore_closed_tab))
            .on_action(cx.listener(Self::on_select_next_tab))
            .on_action(cx.listener(Self::on_select_previous_tab))
            .on_action(cx.listener(Self::on_toggle_favorite_tab))
            .on_action(cx.listener(Self::on_toggle_pinned_tab))
            .bg(rgb(ELY_THEME.canvas))
            .text_color(rgb(ELY_THEME.ink))
            .flex()
            .flex_col()
            .child(self.render_command_bar(&snapshot, &active_tab, cx))
            .child(
                div()
                    .flex()
                    .flex_1()
                    .overflow_hidden()
                    .child(self.render_sidebar(&snapshot, cx))
                    .child(self.render_web_canvas(&active_tab, &snapshot, cx)),
            )
            .into_any_element()
    }

    fn render_command_bar(
        &mut self,
        snapshot: &BrowserSnapshot,
        active_tab: &BrowserTab,
        cx: &mut Context<Self>,
    ) -> AnyElement {
        let favorite_icon =
            if active_tab.flags().favorite { IconName::Star } else { IconName::StarOff };
        let favorite_tooltip =
            if active_tab.flags().favorite { "Remove Favorite" } else { "Add Favorite" };
        let pinned_tooltip = if active_tab.flags().pinned { "Unpin Tab" } else { "Pin Tab" };

        div()
            .h(px(spacing::COMMAND_BAR_HEIGHT))
            .px_4()
            .gap_3()
            .flex()
            .items_center()
            .border_b_1()
            .border_color(rgb(colors::HAIRLINE))
            .child(
                div()
                    .w(px(spacing::SIDEBAR_WIDTH - spacing::XL))
                    .flex()
                    .items_center()
                    .gap_2()
                    .child(div().text_size(px(18.0)).font_semibold().child("ELY Browser"))
                    .child(
                        div()
                            .text_xs()
                            .text_color(rgb(colors::MUTED))
                            .child(snapshot.active_space_name.clone()),
                    ),
            )
            .child(
                div()
                    .flex_1()
                    .h(px(40.0))
                    .rounded_md()
                    .border_1()
                    .border_color(rgb(colors::HAIRLINE_STRONG))
                    .bg(rgb(colors::SURFACE_CARD))
                    .px_3()
                    .child(Input::new(&self.command_input).appearance(false).cleanable(true)),
            )
            .child(
                Button::new("toggle-pinned-tab")
                    .ghost()
                    .small()
                    .selected(active_tab.flags().pinned)
                    .icon(IconName::Asterisk)
                    .tooltip(pinned_tooltip)
                    .on_click(cx.listener(|shell, _, _, cx| shell.toggle_active_tab_pinned(cx))),
            )
            .child(
                Button::new("toggle-favorite-tab")
                    .ghost()
                    .small()
                    .selected(active_tab.flags().favorite)
                    .icon(favorite_icon)
                    .tooltip(favorite_tooltip)
                    .on_click(cx.listener(|shell, _, _, cx| shell.toggle_active_tab_favorite(cx))),
            )
            .child(
                Button::new("new-tab")
                    .primary()
                    .small()
                    .icon(IconName::Plus)
                    .tooltip("New Tab")
                    .on_click(cx.listener(|shell, _, window, cx| shell.open_new_tab(window, cx))),
            )
            .into_any_element()
    }

    fn render_sidebar(&mut self, snapshot: &BrowserSnapshot, cx: &mut Context<Self>) -> AnyElement {
        div()
            .w(px(spacing::SIDEBAR_WIDTH))
            .h_full()
            .flex()
            .flex_col()
            .gap_3()
            .p_3()
            .border_r_1()
            .border_color(rgb(colors::HAIRLINE))
            .bg(rgb(colors::CANVAS))
            .child(section_label("Favorites"))
            .children(
                snapshot.favorites.iter().map(|tab| {
                    self.render_favorite_row(tab, tab.id() == &snapshot.active_tab_id, cx)
                }),
            )
            .child(section_label("Pinned"))
            .children(
                snapshot.pinned_tabs.iter().map(|tab| {
                    self.render_pinned_row(tab, tab.id() == &snapshot.active_tab_id, cx)
                }),
            )
            .child(section_label("Space"))
            .children(snapshot.spaces.iter().map(|space| {
                self.render_space_row(space, space.id() == &snapshot.active_space_id, cx)
            }))
            .child(section_label("Tabs"))
            .children(
                snapshot
                    .tabs
                    .iter()
                    .filter(|tab| !tab.flags().favorite)
                    .filter(|tab| !tab.flags().pinned)
                    .map(|tab| self.render_tab_row(tab, tab.id() == &snapshot.active_tab_id, cx)),
            )
            .child(section_label("Archive"))
            .children(
                snapshot
                    .archived_tabs
                    .iter()
                    .rev()
                    .map(|archived_tab| self.render_archived_row(archived_tab, cx)),
            )
            .child(div().flex_1())
            .child(section_label("Profile"))
            .child(
                div()
                    .text_sm()
                    .text_color(rgb(colors::BODY))
                    .child(snapshot.active_profile_name.clone()),
            )
            .into_any_element()
    }

    fn render_space_row(
        &mut self,
        space: &Space,
        active: bool,
        cx: &mut Context<Self>,
    ) -> AnyElement {
        let space_id = space.id().clone();
        let background = if active { colors::SURFACE_CARD } else { colors::CANVAS };
        let border = if active { colors::HAIRLINE_STRONG } else { colors::HAIRLINE };

        div()
            .id(SharedString::from(format!("space-{}", space.id().as_str())))
            .rounded_md()
            .border_1()
            .border_color(rgb(border))
            .bg(rgb(background))
            .px_3()
            .py_2()
            .gap_2()
            .flex()
            .items_center()
            .cursor_pointer()
            .hover(|style| style.bg(rgb(colors::SURFACE_CARD)))
            .active(|style| style.opacity(0.82))
            .on_click(cx.listener(move |shell, _, window, cx| {
                shell.select_space(&space_id, window, cx);
            }))
            .child(
                div()
                    .text_xs()
                    .font_semibold()
                    .text_color(rgb(colors::PRIMARY))
                    .child(space.icon().to_string()),
            )
            .child(div().text_sm().font_semibold().child(space.name().to_string()))
            .into_any_element()
    }

    fn render_favorite_row(
        &mut self,
        tab: &BrowserTab,
        active: bool,
        cx: &mut Context<Self>,
    ) -> AnyElement {
        let tab_id = tab.id().clone();
        let background = if active { colors::SURFACE_CARD } else { colors::CANVAS };
        let border = if active { colors::HAIRLINE_STRONG } else { colors::HAIRLINE };

        div()
            .id(SharedString::from(format!("favorite-{}", tab.id().as_str())))
            .rounded_md()
            .border_1()
            .border_color(rgb(border))
            .bg(rgb(background))
            .px_3()
            .py_2()
            .gap_2()
            .flex()
            .items_center()
            .cursor_pointer()
            .hover(|style| style.bg(rgb(colors::SURFACE_CARD)))
            .active(|style| style.opacity(0.82))
            .on_click(cx.listener(move |shell, _, window, cx| {
                shell.select_tab(&tab_id, window, cx);
            }))
            .child(div().text_color(rgb(colors::PRIMARY)).child(IconName::Star))
            .child(
                div()
                    .min_w_0()
                    .flex()
                    .flex_col()
                    .gap_1()
                    .child(
                        div()
                            .text_sm()
                            .font_semibold()
                            .text_color(rgb(colors::INK))
                            .child(tab.title().to_string()),
                    )
                    .child(div().text_xs().text_color(rgb(colors::MUTED)).child(tab.display_url())),
            )
            .into_any_element()
    }

    fn render_pinned_row(
        &mut self,
        tab: &BrowserTab,
        active: bool,
        cx: &mut Context<Self>,
    ) -> AnyElement {
        let tab_id = tab.id().clone();
        let background = if active { colors::SURFACE_CARD } else { colors::CANVAS };
        let border = if active { colors::HAIRLINE_STRONG } else { colors::HAIRLINE };

        div()
            .id(SharedString::from(format!("pinned-{}", tab.id().as_str())))
            .rounded_md()
            .border_1()
            .border_color(rgb(border))
            .bg(rgb(background))
            .px_3()
            .py_2()
            .gap_2()
            .flex()
            .items_center()
            .cursor_pointer()
            .hover(|style| style.bg(rgb(colors::SURFACE_CARD)))
            .active(|style| style.opacity(0.82))
            .on_click(cx.listener(move |shell, _, window, cx| {
                shell.select_tab(&tab_id, window, cx);
            }))
            .child(div().text_color(rgb(colors::MUTED)).child(IconName::Asterisk))
            .child(
                div()
                    .min_w_0()
                    .flex()
                    .flex_col()
                    .gap_1()
                    .child(
                        div()
                            .text_sm()
                            .font_semibold()
                            .text_color(rgb(colors::INK))
                            .child(tab.title().to_string()),
                    )
                    .child(div().text_xs().text_color(rgb(colors::MUTED)).child(tab.display_url())),
            )
            .into_any_element()
    }

    fn render_tab_row(
        &mut self,
        tab: &BrowserTab,
        active: bool,
        cx: &mut Context<Self>,
    ) -> AnyElement {
        let tab_id = tab.id().clone();
        let background = if active { colors::SURFACE_CARD } else { colors::CANVAS };
        let border = if active { colors::HAIRLINE_STRONG } else { colors::HAIRLINE };

        div()
            .id(SharedString::from(tab.id().as_str().to_string()))
            .rounded_md()
            .border_1()
            .border_color(rgb(border))
            .bg(rgb(background))
            .px_3()
            .py_2()
            .gap_1()
            .flex()
            .flex_col()
            .cursor_pointer()
            .hover(|style| style.bg(rgb(colors::SURFACE_CARD)))
            .active(|style| style.opacity(0.82))
            .on_click(cx.listener(move |shell, _, window, cx| {
                shell.select_tab(&tab_id, window, cx);
            }))
            .child(
                div()
                    .text_sm()
                    .font_semibold()
                    .text_color(rgb(colors::INK))
                    .child(tab.title().to_string()),
            )
            .child(div().text_xs().text_color(rgb(colors::MUTED)).child(tab.display_url()))
            .into_any_element()
    }

    fn render_archived_row(
        &mut self,
        archived_tab: &ArchivedTab,
        cx: &mut Context<Self>,
    ) -> AnyElement {
        let tab = archived_tab.tab();
        let tab_id = tab.id().clone();

        div()
            .id(SharedString::from(format!("archived-{}", tab.id().as_str())))
            .rounded_md()
            .border_1()
            .border_color(rgb(colors::HAIRLINE))
            .bg(rgb(colors::CANVAS))
            .px_3()
            .py_2()
            .gap_2()
            .flex()
            .items_center()
            .cursor_pointer()
            .hover(|style| style.bg(rgb(colors::SURFACE_CARD)))
            .active(|style| style.opacity(0.82))
            .on_click(cx.listener(move |shell, _, window, cx| {
                shell.restore_archived_tab(&tab_id, window, cx);
            }))
            .child(div().text_color(rgb(colors::MUTED)).child(IconName::Undo2))
            .child(
                div()
                    .min_w_0()
                    .flex()
                    .flex_col()
                    .gap_1()
                    .child(
                        div()
                            .text_sm()
                            .font_semibold()
                            .text_color(rgb(colors::INK))
                            .child(tab.title().to_string()),
                    )
                    .child(div().text_xs().text_color(rgb(colors::MUTED)).child(format!(
                        "{} - {}",
                        tab.display_url(),
                        archive_source_label(archived_tab.source())
                    ))),
            )
            .into_any_element()
    }
}

fn render_error(message: String) -> AnyElement {
    div()
        .size_full()
        .bg(rgb(colors::CANVAS))
        .text_color(rgb(colors::ERROR))
        .flex()
        .items_center()
        .justify_center()
        .child(message)
        .into_any_element()
}

fn section_label(label: &'static str) -> impl IntoElement {
    div().text_xs().font_semibold().text_color(rgb(colors::MUTED)).child(label)
}

fn archive_source_label(source: &ArchiveSource) -> &'static str {
    match source {
        ArchiveSource::ManualClose => "Closed",
        ArchiveSource::AutoArchive => "Auto archived",
    }
}