use leptos::prelude::*;
use leptos::html::Div;
use leptos::wasm_bindgen::JsCast;
use web_sys::HtmlElement;

#[derive(Clone, Debug, serde::Serialize, serde::Deserialize, PartialEq)]
pub struct Project {
    pub id: usize,
    pub title: String,
    pub description: String,
    pub image_url: String,
    pub download_url: String,
    pub code_url: String,
}

fn get_all_projects() -> Vec<Project> {
    vec![
        Project {
            id: 1,
            title: "Malxte.de Rust Website".into(),
            description: "Eine voll in Rust mit Yew Programmierte Website mit allen Links und allem über mich.".into(),
            image_url: "/assets/malxte_de.png".into(),
            download_url: "https://github.com/.../releases".into(), // Dein Link
            code_url: "https://gitea.malxte.de/Bytemalte/malxte_de.git".into(),             // Dein Code Link
        },
        Project {
            id: 2,
            title: "Bytemalte.de Community Website".into(),
            description: "Die Webseite auf der du dich gerade befindest, gebaut mit Leptos für die Bytemalte Community.".into(),
            image_url: "/assets/bytemalte_de.png".into(),
            download_url: "#".into(),
            code_url: "https://gitea.malxte.de/Bytemalte/bytemalte_de".into(),
        },
        Project {
            id: 3,
            title: "Logo Design".into(),
            description: "Das offizielle Bytemalte Logo. (Nicht frei verwendbar!)".into(),
            image_url: "/assets/Logo.jpg".into(), // JPG geht natürlich auch
            download_url: "/assets/Logo.jpg".into(), // Man kann Bilder auch direkt verlinken
            code_url: "#".into(),
        },
    ]
}

#[component]
pub fn HomePage() -> impl IntoView {
    let (projects, set_projects) = signal(Vec::<Project>::new());
    let (page, set_page) = signal(1);
    let (loading, set_loading) = signal(false);
    let (all_loaded, set_all_loaded) = signal(false);
    
    let items_per_page = 3; // Wie viele Projekte pro Scroll-Schub geladen werden
    let sentinel = NodeRef::<Div>::new();

    let fetch_projects = move |p: usize| {
        if all_loaded.get_untracked() { return; }
        
        set_loading.set(true);
        
        // Simuliert eine kurze Ladezeit für das Feeling
        set_timeout(move || {
            let all_my_projects = get_all_projects();
            let start = (p - 1) * items_per_page;
            let end = (start + items_per_page).min(all_my_projects.len());

            if start >= all_my_projects.len() {
                set_all_loaded.set(true);
                set_loading.set(false);
                return;
            }

            let slice = &all_my_projects[start..end];
            set_projects.update(|projs| projs.extend(slice.to_vec()));
            
            if end >= all_my_projects.len() {
                set_all_loaded.set(true);
            }
            set_loading.set(false);
        }, std::time::Duration::from_millis(400));
    };

    // Initialer Load
    Effect::new(move |_| {
        fetch_projects(page.get());
    });

    // Scroll-Event-Listener
    Effect::new(move |_| {
        let w = window(); 
        let w_clone = w.clone();
        
        let handle = gloo_events::EventListener::new(&w, "scroll", move |_| {
            if all_loaded.get_untracked() || loading.get_untracked() { return; }

            if let Some(doc) = w_clone.document() {
                if let Some(el) = doc.document_element().and_then(|e| e.dyn_into::<HtmlElement>().ok()) {
                    let scroll_y = w_clone.scroll_y().unwrap_or(0.0);
                    let inner_height = w_clone.inner_height().unwrap().as_f64().unwrap_or(0.0);
                    let total_height = el.offset_height() as f64;

                    if scroll_y + inner_height >= total_height - 200.0 {
                        set_page.update(|p| *p += 1);
                        fetch_projects(page.get_untracked());
                    }
                }
            }
        });
        handle.forget();
    });

    view! {
        <div class="home-container">
            <header class="home-hero">
                <h1>"Bytemalte."</h1>
                <p>"Entdecke meine neuesten Projekte - Bytemalte."</p>
            </header>

            <main class="projects-grid">
                <For
                    each=move || projects.get()
                    key=|p| p.id
                    children=|p| {
                        view! {
                            <div class="project-card">
                                <div class="project-image">
                                    <img src=p.image_url alt=p.title.clone() />
                                </div>
                                <div class="project-content">
                                    <h3>{p.title}</h3>
                                    <p>{p.description}</p>
                                    <div class="project-links">
                                        <a href=p.download_url target="_blank" class="btn-download">"Download"</a>
                                        <a href=p.code_url target="_blank" class="btn-code">"Source Code"</a>
                                    </div>
                                </div>
                            </div>
                        }
                    }
                />
            </main>

            <div node_ref=sentinel class="loading-trigger">
                {move || {
                    if loading.get() { 
                        view! { <div class="spinner"></div> }.into_any()
                    } else if all_loaded.get() {
                        view! { <p class="end-msg">"Das waren alle Projekte ✨"</p> }.into_any()
                    } else { 
                        view! { <p>"Mehr laden..."</p> }.into_any()
                    }
                }}
            </div>
        </div>
    }
}