use dioxus::prelude::*;

use crate::client::ScheduledTaskResponse;

#[component]
pub fn Tasks(
    tasks: Vec<ScheduledTaskResponse>,
    #[props(default)] error: Option<String>,
    on_refresh: EventHandler<()>,
    on_toggle: EventHandler<String>,
    on_run_now: EventHandler<String>,
) -> Element {
    rsx! {
        div { class: "card mb-16",
            div { class: "card-header",
                h3 { class: "card-title", "Scheduled Tasks" }
                button {
                    class: "btn btn-sm btn-secondary",
                    onclick: move |_| on_refresh.call(()),
                    "\u{21bb} Refresh"
                }
            }

            if let Some(ref err) = error {
                div { class: "alert alert-error mb-8",
                    span { "{err}" }
                    button {
                        class: "btn btn-sm btn-secondary ml-8",
                        onclick: move |_| on_refresh.call(()),
                        "Retry"
                    }
                }
            }

            if tasks.is_empty() {
                div { class: "empty-state",
                    p { "No scheduled tasks configured." }
                }
            } else {
                table { class: "table",
                    thead {
                        tr {
                            th { "Enabled" }
                            th { "Name" }
                            th { "Schedule" }
                            th { "Last Run" }
                            th { "Next Run" }
                            th { "Status" }
                            th { "Actions" }
                        }
                    }
                    tbody {
                        for task in tasks.iter() {
                            {
                                let task_id_toggle = task.id.clone();
                                let task_id_run = task.id.clone();
                                let last_run = task.last_run.clone().unwrap_or_else(|| "-".to_string());
                                let next_run = task.next_run.clone().unwrap_or_else(|| "-".to_string());
                                let last_status = task.last_status.clone().unwrap_or_else(|| "-".to_string());
                                rsx! {
                                    tr {
                                        td {
                                            if task.enabled {
                                                span { class: "badge badge-success", "\u{2713}" }
                                            } else {
                                                span { class: "badge badge-muted", "\u{2715}" }
                                            }
                                        }
                                        td { "{task.name}" }
                                        td { "{task.schedule}" }
                                        td { "{last_run}" }
                                        td { "{next_run}" }
                                        td { "{last_status}" }
                                        td {
                                            button {
                                                class: "btn btn-sm btn-secondary mr-8",
                                                onclick: move |_| on_toggle.call(task_id_toggle.clone()),
                                                if task.enabled {
                                                    "Disable"
                                                } else {
                                                    "Enable"
                                                }
                                            }
                                            button {
                                                class: "btn btn-sm btn-primary",
                                                onclick: move |_| on_run_now.call(task_id_run.clone()),
                                                "Run Now"
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}