use dioxus::prelude::*;

use crate::components::page_header::PageHeader;
use crate::components::pagination::Pagination;

#[component]
pub fn IssuesPage() -> Element {
    let mut page = use_signal(|| 1u64);

    let issues = use_resource(move || {
        let p = page();
        async move { crate::infrastructure::issues::fetch_issues(p).await.ok() }
    });

    rsx! {
        PageHeader {
            title: "Issues",
            description: "Cross-tracker issue view - GitHub, GitLab, and Jira",
        }

        match &*issues.read() {
            Some(Some(resp)) => {
                let total_pages = resp.total.unwrap_or(0).div_ceil(20).max(1);
                rsx! {
                    div { class: "card",
                        div { class: "table-wrapper",
                            table {
                                thead {
                                    tr {
                                        th { "Tracker" }
                                        th { "ID" }
                                        th { "Title" }
                                        th { "Status" }
                                        th { "Created" }
                                        th { "Link" }
                                    }
                                }
                                tbody {
                                    for issue in &resp.data {
                                        tr {
                                            td {
                                                span { class: "badge badge-info", "{issue.tracker_type}" }
                                            }
                                            td {
                                                style: "font-family: monospace;",
                                                "{issue.external_id}"
                                            }
                                            td { "{issue.title}" }
                                            td {
                                                span { class: "badge badge-info", "{issue.status}" }
                                            }
                                            td {
                                                style: "font-size: 12px; color: var(--text-secondary);",
                                                {issue.created_at.format("%Y-%m-%d %H:%M").to_string()}
                                            }
                                            td {
                                                a {
                                                    href: "{issue.external_url}",
                                                    target: "_blank",
                                                    style: "color: var(--accent); text-decoration: none;",
                                                    "Open"
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        Pagination {
                            current_page: page(),
                            total_pages: total_pages,
                            on_page_change: move |p| page.set(p),
                        }
                    }
                }
            },
            Some(None) => rsx! {
                div { class: "card", p { "Failed to load issues." } }
            },
            None => rsx! {
                div { class: "loading", "Loading issues..." }
            },
        }
    }
}
