use gloo_timers::callback::Interval;
use yew::prelude::*;

use crate::api;
use crate::components::status_badge::StatusBadge;
use crate::types::Status;

/// Format a UTC datetime string as a relative time like "in 2h 15m".
fn format_next_run(datetime_str: &str) -> String {
    let now_ms = js_sys::Date::new_0().get_time();
    let parsed = js_sys::Date::parse(datetime_str);

    // NaN means parse failed
    if parsed.is_nan() {
        return datetime_str.to_string();
    }

    let delta_ms = parsed - now_ms;
    if delta_ms <= 0.0 {
        return "soon".to_string();
    }
    let total_mins = (delta_ms / 60_000.0) as u64;
    let hours = total_mins / 60;
    let mins = total_mins % 60;
    if hours > 0 {
        format!("in {hours}h {mins}m")
    } else {
        format!("in {mins}m")
    }
}

#[function_component(DashboardPage)]
pub fn dashboard() -> Html {
    let status = use_state(|| None::<Status>);
    let error = use_state(|| None::<String>);
    let message = use_state(|| None::<String>);

    // Fetch status function
    let fetch_status = {
        let status = status.clone();
        let error = error.clone();
        Callback::from(move |_: ()| {
            let status = status.clone();
            let error = error.clone();
            wasm_bindgen_futures::spawn_local(async move {
                match api::get_status().await {
                    Ok(s) => {
                        error.set(None);
                        status.set(Some(s));
                    }
                    Err(e) => error.set(Some(e.0)),
                }
            });
        })
    };

    // Initial fetch
    {
        let fetch = fetch_status.clone();
        use_effect_with((), move |_| {
            fetch.emit(());
        });
    }

    // Auto-refresh every 5 seconds
    {
        let fetch = fetch_status.clone();
        use_effect_with((), move |_| {
            let interval = Interval::new(1_000, move || {
                fetch.emit(());
            });
            // Keep the interval alive for the component's lifetime
            move || drop(interval)
        });
    }

    // Action handlers
    let on_sync = {
        let message = message.clone();
        let error = error.clone();
        let fetch = fetch_status.clone();
        Callback::from(move |_: MouseEvent| {
            let message = message.clone();
            let error = error.clone();
            let fetch = fetch.clone();
            wasm_bindgen_futures::spawn_local(async move {
                match api::sync_downloads().await {
                    Ok(s) => {
                        message.set(Some(format!(
                            "Synced: {} enqueued, {} skipped",
                            s.enqueued, s.skipped
                        )));
                        fetch.emit(());
                    }
                    Err(e) => error.set(Some(e.0)),
                }
            });
        })
    };

    let on_process = {
        let message = message.clone();
        let error = error.clone();
        let fetch = fetch_status.clone();
        Callback::from(move |_: MouseEvent| {
            let message = message.clone();
            let error = error.clone();
            let fetch = fetch.clone();
            wasm_bindgen_futures::spawn_local(async move {
                match api::process_downloads().await {
                    Ok(t) => {
                        message.set(Some(format!(
                            "Downloads started (task: {})",
                            &t.task_id[..8]
                        )));
                        fetch.emit(());
                    }
                    Err(e) => error.set(Some(e.0)),
                }
            });
        })
    };

    let on_index = {
        let message = message.clone();
        let error = error.clone();
        let fetch = fetch_status.clone();
        Callback::from(move |_: MouseEvent| {
            let message = message.clone();
            let error = error.clone();
            let fetch = fetch.clone();
            wasm_bindgen_futures::spawn_local(async move {
                match api::trigger_index().await {
                    Ok(t) => {
                        message.set(Some(format!("Indexing started ({})", &t.task_id[..8])));
                        fetch.emit(());
                    }
                    Err(e) => error.set(Some(e.0)),
                }
            });
        })
    };

    let on_tag = {
        let message = message.clone();
        let error = error.clone();
        let fetch = fetch_status.clone();
        Callback::from(move |_: MouseEvent| {
            let message = message.clone();
            let error = error.clone();
            let fetch = fetch.clone();
            wasm_bindgen_futures::spawn_local(async move {
                match api::trigger_tag().await {
                    Ok(t) => {
                        message.set(Some(format!("Tagging started ({})", &t.task_id[..8])));
                        fetch.emit(());
                    }
                    Err(e) => error.set(Some(e.0)),
                }
            });
        })
    };

    let on_organize = {
        let message = message.clone();
        let error = error.clone();
        let fetch = fetch_status.clone();
        Callback::from(move |_: MouseEvent| {
            let message = message.clone();
            let error = error.clone();
            let fetch = fetch.clone();
            wasm_bindgen_futures::spawn_local(async move {
                match api::trigger_organize().await {
                    Ok(t) => {
                        message.set(Some(format!("Organizing started ({})", &t.task_id[..8])));
                        fetch.emit(());
                    }
                    Err(e) => error.set(Some(e.0)),
                }
            });
        })
    };

    let on_monitor_check = {
        let message = message.clone();
        let error = error.clone();
        let fetch = fetch_status.clone();
        Callback::from(move |_: MouseEvent| {
            let message = message.clone();
            let error = error.clone();
            let fetch = fetch.clone();
            wasm_bindgen_futures::spawn_local(async move {
                match api::trigger_monitor_check().await {
                    Ok(t) => {
                        message.set(Some(format!(
                            "Monitor check started (task: {})",
                            &t.task_id[..8]
                        )));
                        fetch.emit(());
                    }
                    Err(e) => error.set(Some(e.0)),
                }
            });
        })
    };

    let on_pipeline = {
        let message = message.clone();
        let error = error.clone();
        let fetch = fetch_status.clone();
        Callback::from(move |_: MouseEvent| {
            let message = message.clone();
            let error = error.clone();
            let fetch = fetch.clone();
            wasm_bindgen_futures::spawn_local(async move {
                match api::trigger_pipeline().await {
                    Ok(p) => {
                        message.set(Some(format!(
                            "Pipeline started — {} tasks queued",
                            p.task_ids.len()
                        )));
                        fetch.emit(());
                    }
                    Err(e) => error.set(Some(e.0)),
                }
            });
        })
    };

    if let Some(ref err) = *error {
        return html! { <div class="error">{ format!("Error: {err}") }</div> };
    }

    let Some(ref s) = *status else {
        return html! { <p class="loading">{ "Loading..." }</p> };
    };

    let pipeline_active = s
        .tasks
        .iter()
        .any(|t| t.status == "Pending" || t.status == "Running");

    // Pre-compute scheduled task rows
    let scheduled_rows = {
        let mut rows = Vec::new();
        if let Some(ref sched) = s.scheduled {
            if let Some(ref next) = sched.next_pipeline {
                rows.push(html! {
                    <tr>
                        <td>{ "Auto Pipeline" }</td>
                        <td><span class="badge badge-pending">{ "Scheduled" }</span></td>
                        <td></td>
                        <td class="text-sm text-muted">{ format!("Next run: {}", format_next_run(next)) }</td>
                    </tr>
                });
            }
            if let Some(ref next) = sched.next_monitor {
                rows.push(html! {
                    <tr>
                        <td>{ "Monitor Check" }</td>
                        <td><span class="badge badge-pending">{ "Scheduled" }</span></td>
                        <td></td>
                        <td class="text-sm text-muted">{ format!("Next run: {}", format_next_run(next)) }</td>
                    </tr>
                });
            }
        }
        rows
    };
    let has_scheduled = !scheduled_rows.is_empty();

    html! {
        <div>
            <div class="page-header">
                <h2>{ "Dashboard" }</h2>
            </div>

            if let Some(ref msg) = *message {
                <div class="card" style="border-color: var(--success);">
                    <p>{ msg }</p>
                </div>
            }

            // Stats grid
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="value">{ s.library.total_items }</div>
                    <div class="label">{ "Total Items" }</div>
                </div>
                <div class="stat-card">
                    <div class="value">{ s.library.wanted }</div>
                    <div class="label">{ "Wanted" }</div>
                </div>
                <div class="stat-card">
                    <div class="value">{ s.library.downloaded }</div>
                    <div class="label">{ "Downloaded" }</div>
                </div>
                <div class="stat-card">
                    <div class="value">{ s.library.owned }</div>
                    <div class="label">{ "Owned" }</div>
                </div>
            </div>

            // Pipeline
            <div class="card">
                <div class="flex items-center justify-between">
                    <h3>{ "Pipeline" }</h3>
                    <button class="btn btn-primary" onclick={on_pipeline} disabled={pipeline_active}>
                        { "Set Sail" }
                    </button>
                </div>
                <p class="text-sm text-muted mt-1">
                    { "Sync \u{2192} Download \u{2192} Index \u{2192} Tag \u{2192} Organize \u{2192} Enrich" }
                </p>
            </div>

            // Individual Actions
            <div class="card">
                <h3>{ "Individual Actions" }</h3>
                <div class="actions mt-1">
                    <button class="btn btn-secondary" onclick={on_sync}>{ "Sync Watchlist" }</button>
                    <button class="btn btn-secondary" onclick={on_process}>{ "Process Downloads" }</button>
                    <button class="btn btn-secondary" onclick={on_index}>{ "Re-index" }</button>
                    <button class="btn btn-secondary" onclick={on_tag}>{ "Auto-tag" }</button>
                    <button class="btn btn-secondary" onclick={on_organize}>{ "Organize" }</button>
                    <button class="btn btn-secondary" onclick={on_monitor_check}>{ "Check Monitored Artists" }</button>
                </div>
            </div>

            // Background Tasks (always show if there are tasks or scheduled items)
            if !s.tasks.is_empty() || has_scheduled {
                <div class="card">
                    <h3>{ "Background Tasks" }</h3>
                    <table class="tasks-table">
                        <thead>
                            <tr><th>{ "Type" }</th><th>{ "Status" }</th><th>{ "Progress" }</th><th>{ "Result" }</th></tr>
                        </thead>
                        <tbody>
                            { for scheduled_rows.into_iter() }
                            { for s.tasks.iter().map(|t| {
                                let progress_html = if let Some(ref p) = t.progress {
                                    if p.total > 0 {
                                        let pct = (p.current as f64 / p.total as f64 * 100.0) as u32;
                                        html! {
                                            <div>
                                                <div class="text-sm">{ &p.message }{ format!(" ({}/{})", p.current, p.total) }</div>
                                                <div style="background: var(--bg-card); border-radius: 4px; height: 8px; margin-top: 4px;">
                                                    <div style={format!("background: var(--accent); border-radius: 4px; height: 100%; width: {pct}%;")}></div>
                                                </div>
                                            </div>
                                        }
                                    } else {
                                        html! { <span class="text-sm text-muted">{ &p.message }</span> }
                                    }
                                } else {
                                    html! {}
                                };
                                html! {
                                    <tr>
                                        <td>{ &t.task_type }</td>
                                        <td><StatusBadge status={t.status.clone()} /></td>
                                        <td>{ progress_html }</td>
                                        <td class="text-sm text-muted">{ t.result.as_deref().unwrap_or("") }</td>
                                    </tr>
                                }
                            })}
                        </tbody>
                    </table>
                </div>
            }

            // Download Queue Items
            if !s.queue.items.is_empty() {
                <div class="card">
                    <h3>{ format!("Download Queue ({} pending, {} downloading, {} failed)",
                        s.queue.pending, s.queue.downloading, s.queue.failed) }</h3>
                    <table>
                        <thead>
                            <tr><th>{ "Query" }</th><th>{ "Status" }</th><th>{ "Error" }</th></tr>
                        </thead>
                        <tbody>
                            { for s.queue.items.iter().map(|item| html! {
                                <tr>
                                    <td>{ &item.query }</td>
                                    <td><StatusBadge status={item.status.clone()} /></td>
                                    <td class="text-sm text-muted">{ item.error_message.as_deref().unwrap_or("") }</td>
                                </tr>
                            })}
                        </tbody>
                    </table>
                </div>
            } else if s.queue.pending > 0 || s.queue.downloading > 0 {
                <div class="card">
                    <h3>{ "Download Queue" }</h3>
                    <p>{ format!("{} pending, {} downloading", s.queue.pending, s.queue.downloading) }</p>
                </div>
            }

            // Tagging Queue
            if let Some(ref tagging) = s.tagging {
                if tagging.needs_tagging > 0 {
                    <div class="card">
                        <h3>{ format!("Tagging Queue ({} tracks need metadata)", tagging.needs_tagging) }</h3>
                        if !tagging.items.is_empty() {
                            <table>
                                <thead>
                                    <tr><th>{ "Title" }</th><th>{ "Artist" }</th><th>{ "Album" }</th><th>{ "MBID" }</th></tr>
                                </thead>
                                <tbody>
                                    { for tagging.items.iter().map(|t| html! {
                                        <tr>
                                            <td>{ t.title.as_deref().unwrap_or("Unknown") }</td>
                                            <td>{ t.artist.as_deref().unwrap_or("") }</td>
                                            <td class="text-muted">{ t.album.as_deref().unwrap_or("—") }</td>
                                            <td class="text-sm text-muted">
                                                if t.album.is_some() {
                                                    { "needs album link" }
                                                } else {
                                                    { "needs metadata" }
                                                }
                                            </td>
                                        </tr>
                                    })}
                                </tbody>
                            </table>
                        }
                    </div>
                }
            }
        </div>
    }
}