use leptos::{
    IntoView, component,
    error::Error,
    html::Input,
    prelude::{
        ClassAttribute, CollectView, ElementChild, Get, GlobalAttributes, LocalResource, NodeRef,
        NodeRefAttribute, OnAttribute, OnTargetAttribute, PropAttribute, Set, Show, WriteSignal,
        signal,
    },
    view,
};
use log::{error, info};

use crate::components::get_id;

#[component]
#[expect(clippy::too_many_lines)]
pub fn InputPlaceholder(
    input_type: &'static str,
    label: &'static str,
    node_ref: NodeRef<Input>,
    #[prop(default = None)] initial_value: Option<String>,
    #[prop(default = None)] reactive: Option<WriteSignal<Option<String>>>,
    #[prop(default = None)] auto_complete: Option<
        LocalResource<Result<Option<Vec<String>>, Error>>,
    >,
) -> impl IntoView {
    let id = get_id();

    let (autocomplete_signal, autocomplete_set) = signal(String::new());

    view! {
        <div class="relative h-14">
            <input
                id=id.to_string()
                type=input_type
                autocomplete="off"
                class="\
                absolute \
                bottom-0 \
                bg-gray-200 \
                border-8 \
                border-b-2 \
                border-b-trasparent \
                border-gray-200 \
                focus:outline-none \
                h-10 \
                peer/input \
                group/input \
                placeholder-transparent \
                rounded-t-lg \
                text-gray-900 \
                w-full \
                "
                placeholder="sentinel value"
                node_ref=node_ref
                value=initial_value
                on:input:target=move |ev| {
                    if let Some(signal) = reactive {
                        signal.set(Some(ev.target().value()));
                        autocomplete_set.set(ev.target().value());
                    }
                }
                prop:value=autocomplete_signal
            />

            // TODO: Reference `var(--tw-border-2)` instead of the `2 px` <2025-10-01>
            <div class="\
            absolute \
            bottom-0 \
            h-[2px] \
            w-full \
            bg-gray-300 \
            peer-focus/input:bg-indigo-600 \
            " />

            <label
                for=id.to_string()
                class="\
                bottom-10 \
                absolute \
                left-0 \
                text-gray-700 \
                text-sm \
                transition-all \
                peer-focus/input:bottom-10 \
                peer-focus/input:left-0 \
                peer-focus/input:text-gray-700 \
                peer-focus/input:text-sm \
                peer-placeholder-shown/input:text-base \
                peer-placeholder-shown/input:text-gray-400 \
                peer-placeholder-shown/input:bottom-2 \
                peer-placeholder-shown/input:left-2 \
                "
            >
                {label}
            </label>

            <Show
                when=move || {
                    !autocomplete_signal.get().is_empty()
                }
                fallback=move || ()
            >
                <div class="\
                absolute \
                top-0 \
                left-0 \
                invisible \
                peer-focus/input:visible \
                in-focus:visible \
                ">
                    <div class="\
                    flex \
                    flex-row \
                    g-0 \
                    ">
                        // TODO: Reference `var(--tw-border-8)` instead of the `8 px` <2025-10-11>
                        <div class="w-[8px] h-full" />
                        <div class="\
                        flex \
                        flex-col \
                        g-0 \
                        ">
                            <div class="h-14 w-full peer/div" />
                            <div class="\
                            bg-white \
                            shadow \
                            outline \
                            outline-black/5 \
                            rounded-lg \
                            z-50 \
                            p-2 \
                            visible \
                            ">
                                {move || {
                                    auto_complete
                                        .map(|auto_complete| {
                                            provide_auto_completion(
                                                auto_complete,
                                                autocomplete_set,
                                                reactive
                                            )
                                        })
                                }}
                            </div>
                        </div>
                    </div>
                </div>
            </Show>
        </div>
    }
}

fn provide_auto_completion(
    auto_complete: LocalResource<Result<Option<Vec<String>>, Error>>,
    autocomplete_set: WriteSignal<String>,
    reactive: Option<WriteSignal<Option<String>>>,
) -> impl IntoView {
    match auto_complete.get() {
        Some(resource_result) => match resource_result {
            Ok(resource_fetch) => resource_fetch.map(|_| {
                view! {
                    <div class="flex flex-col g-1">
                        {move || {
                            auto_complete
                                .get()
                                .expect("Worked before")
                                .unwrap()
                                .unwrap()
                                .into_iter()
                                .map(|item| {
                                    let item2 = item.clone();
                                    view! {
                                        <button
                                            type="button"
                                            on:click=move |_| {
                                                autocomplete_set.set(item2.clone());
                                                reactive
                                                    .expect(
                                                    "Should be set, \
                                                    when autocomplete is used")
                                                    .set(Some(item2.clone()));

                                                info!("Set autocomplete to {item2}.");
                                            }
                                        >
                                            {item}
                                        </button>
                                    }
                                })
                                .collect_view()
                        }}
                    </div>
                }
            }),
            Err(err) => {
                error!(
                    "Error while loading \
                    autocompletion: {err}"
                );
                None
            }
        },
        None => None,
    }
}