use dioxus::prelude::*;

use crate::app::Route;
use crate::components::page_header::PageHeader;
use crate::infrastructure::repositories::fetch_repositories;

#[component]
pub fn ChatIndexPage() -> Element {
    let repos = use_resource(|| async { fetch_repositories(1).await.ok() });

    rsx! {
        PageHeader {
            title: "AI Chat",
            description: "Ask questions about your codebase using RAG-augmented AI",
        }

        match &*repos.read() {
            Some(Some(data)) => {
                let repo_list = &data.data;
                if repo_list.is_empty() {
                    rsx! {
                        div { class: "card",
                            p { "No repositories found. Add a repository first." }
                        }
                    }
                } else {
                    rsx! {
                        div { class: "graph-index-grid",
                            for repo in repo_list {
                                {
                                    let repo_id = repo.id.map(|id| id.to_hex()).unwrap_or_default();
                                    let name = repo.name.clone();
                                    let url = repo.git_url.clone();
                                    let branch = repo.default_branch.clone();
                                    rsx! {
                                        Link {
                                            to: Route::ChatPage { repo_id },
                                            class: "graph-repo-card",
                                            div { class: "graph-repo-card-header",
                                                div { class: "graph-repo-card-icon", "\u{1F4AC}" }
                                                h3 { class: "graph-repo-card-name", "{name}" }
                                            }
                                            if !url.is_empty() {
                                                p { class: "graph-repo-card-url", "{url}" }
                                            }
                                            div { class: "graph-repo-card-meta",
                                                span { class: "graph-repo-card-tag",
                                                    "\u{E0A0} {branch}"
                                                }
                                                span { class: "graph-repo-card-tag",
                                                    "AI Chat"
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            },
            Some(None) => rsx! {
                div { class: "card", p { "Failed to load repositories." } }
            },
            None => rsx! {
                div { class: "loading", "Loading repositories..." }
            },
        }
    }
}