use dioxus::prelude::*;
use dioxus_free_icons::icons::bs_icons::*;
use dioxus_free_icons::Icon;

use crate::app::Route;
use crate::components::page_header::PageHeader;
use crate::infrastructure::dast::fetch_dast_targets;
use crate::infrastructure::pentest::{
    create_pentest_session, fetch_pentest_sessions, fetch_pentest_stats,
};

#[component]
pub fn PentestDashboardPage() -> Element {
    let mut sessions = use_resource(|| async { fetch_pentest_sessions().await.ok() });
    let stats = use_resource(|| async { fetch_pentest_stats().await.ok() });
    let targets = use_resource(|| async { fetch_dast_targets().await.ok() });

    let mut show_modal = use_signal(|| false);
    let mut new_target_id = use_signal(String::new);
    let mut new_strategy = use_signal(|| "comprehensive".to_string());
    let mut new_message = use_signal(String::new);
    let mut creating = use_signal(|| false);

    let on_create = move |_| {
        let tid = new_target_id.read().clone();
        let strat = new_strategy.read().clone();
        let msg = new_message.read().clone();
        if tid.is_empty() || msg.is_empty() {
            return;
        }
        creating.set(true);
        spawn(async move {
            match create_pentest_session(tid, strat, msg).await {
                Ok(resp) => {
                    let session_id = resp
                        .data
                        .get("_id")
                        .and_then(|v| v.get("$oid"))
                        .and_then(|v| v.as_str())
                        .unwrap_or("")
                        .to_string();
                    creating.set(false);
                    show_modal.set(false);
                    new_target_id.set(String::new());
                    new_message.set(String::new());
                    if !session_id.is_empty() {
                        navigator().push(Route::PentestSessionPage {
                            session_id: session_id.clone(),
                        });
                    } else {
                        sessions.restart();
                    }
                }
                Err(_) => {
                    creating.set(false);
                }
            }
        });
    };

    // Extract stats values
    let running_sessions = {
        let s = stats.read();
        match &*s {
            Some(Some(data)) => data
                .data
                .get("running_sessions")
                .and_then(|v| v.as_u64())
                .unwrap_or(0),
            _ => 0,
        }
    };
    let total_vulns = {
        let s = stats.read();
        match &*s {
            Some(Some(data)) => data
                .data
                .get("total_vulnerabilities")
                .and_then(|v| v.as_u64())
                .unwrap_or(0),
            _ => 0,
        }
    };
    let tool_invocations = {
        let s = stats.read();
        match &*s {
            Some(Some(data)) => data
                .data
                .get("tool_invocations")
                .and_then(|v| v.as_u64())
                .unwrap_or(0),
            _ => 0,
        }
    };
    let success_rate = {
        let s = stats.read();
        match &*s {
            Some(Some(data)) => data
                .data
                .get("success_rate")
                .and_then(|v| v.as_f64())
                .unwrap_or(0.0),
            _ => 0.0,
        }
    };

    // Severity counts from stats
    let severity_critical = {
        let s = stats.read();
        match &*s {
            Some(Some(data)) => data
                .data
                .get("severity_critical")
                .and_then(|v| v.as_u64())
                .unwrap_or(0),
            _ => 0,
        }
    };
    let severity_high = {
        let s = stats.read();
        match &*s {
            Some(Some(data)) => data
                .data
                .get("severity_high")
                .and_then(|v| v.as_u64())
                .unwrap_or(0),
            _ => 0,
        }
    };
    let severity_medium = {
        let s = stats.read();
        match &*s {
            Some(Some(data)) => data
                .data
                .get("severity_medium")
                .and_then(|v| v.as_u64())
                .unwrap_or(0),
            _ => 0,
        }
    };
    let severity_low = {
        let s = stats.read();
        match &*s {
            Some(Some(data)) => data
                .data
                .get("severity_low")
                .and_then(|v| v.as_u64())
                .unwrap_or(0),
            _ => 0,
        }
    };

    rsx! {
        PageHeader {
            title: "Pentest Dashboard",
            description: "AI-powered penetration testing sessions — autonomous security assessment",
        }

        // Stat cards
        div { class: "stat-cards", style: "margin-bottom: 24px;",
            div { class: "stat-card-item",
                div { class: "stat-card-value", "{running_sessions}" }
                div { class: "stat-card-label",
                    Icon { icon: BsPlayCircle, width: 14, height: 14 }
                    " Running Sessions"
                }
            }
            div { class: "stat-card-item",
                div { class: "stat-card-value", "{total_vulns}" }
                div { class: "stat-card-label",
                    Icon { icon: BsShieldExclamation, width: 14, height: 14 }
                    " Total Vulnerabilities"
                }
            }
            div { class: "stat-card-item",
                div { class: "stat-card-value", "{tool_invocations}" }
                div { class: "stat-card-label",
                    Icon { icon: BsWrench, width: 14, height: 14 }
                    " Tool Invocations"
                }
            }
            div { class: "stat-card-item",
                div { class: "stat-card-value", "{success_rate:.0}%" }
                div { class: "stat-card-label",
                    Icon { icon: BsCheckCircle, width: 14, height: 14 }
                    " Success Rate"
                }
            }
        }

        // Severity distribution
        div { class: "card", style: "margin-bottom: 24px; padding: 16px;",
            div { style: "display: flex; align-items: center; gap: 16px; flex-wrap: wrap;",
                span { style: "font-weight: 600; color: var(--text-secondary); font-size: 0.85rem;", "Severity Distribution" }
                span {
                    class: "badge",
                    style: "background: #dc2626; color: #fff;",
                    "Critical: {severity_critical}"
                }
                span {
                    class: "badge",
                    style: "background: #ea580c; color: #fff;",
                    "High: {severity_high}"
                }
                span {
                    class: "badge",
                    style: "background: #d97706; color: #fff;",
                    "Medium: {severity_medium}"
                }
                span {
                    class: "badge",
                    style: "background: #2563eb; color: #fff;",
                    "Low: {severity_low}"
                }
            }
        }

        // Actions row
        div { style: "display: flex; gap: 12px; margin-bottom: 24px;",
            button {
                class: "btn btn-primary",
                onclick: move |_| show_modal.set(true),
                Icon { icon: BsPlusCircle, width: 14, height: 14 }
                " New Pentest"
            }
        }

        // Sessions list
        div { class: "card",
            div { class: "card-header", "Recent Pentest Sessions" }
            match &*sessions.read() {
                Some(Some(data)) => {
                    let sess_list = &data.data;
                    if sess_list.is_empty() {
                        rsx! {
                            div { style: "padding: 32px; text-align: center; color: var(--text-secondary);",
                                p { "No pentest sessions yet. Start one to begin autonomous security testing." }
                            }
                        }
                    } else {
                        rsx! {
                            div { style: "display: grid; gap: 12px; padding: 16px;",
                                for session in sess_list {
                                    {
                                        let id = session.get("_id")
                                            .and_then(|v| v.get("$oid"))
                                            .and_then(|v| v.as_str())
                                            .unwrap_or("-").to_string();
                                        let target_name = session.get("target_name").and_then(|v| v.as_str()).unwrap_or("Unknown Target").to_string();
                                        let status = session.get("status").and_then(|v| v.as_str()).unwrap_or("unknown").to_string();
                                        let strategy = session.get("strategy").and_then(|v| v.as_str()).unwrap_or("-").to_string();
                                        let findings_count = session.get("findings_count").and_then(|v| v.as_u64()).unwrap_or(0);
                                        let tool_count = session.get("tool_invocations").and_then(|v| v.as_u64()).unwrap_or(0);
                                        let created_at = session.get("created_at").and_then(|v| v.as_str()).unwrap_or("-").to_string();
                                        let status_style = match status.as_str() {
                                            "running" => "background: #16a34a; color: #fff;",
                                            "completed" => "background: #2563eb; color: #fff;",
                                            "failed" => "background: #dc2626; color: #fff;",
                                            "paused" => "background: #d97706; color: #fff;",
                                            _ => "background: var(--bg-tertiary); color: var(--text-secondary);",
                                        };
                                        rsx! {
                                            Link {
                                                to: Route::PentestSessionPage { session_id: id.clone() },
                                                class: "card",
                                                style: "padding: 16px; text-decoration: none; cursor: pointer; transition: border-color 0.15s;",
                                                div { style: "display: flex; justify-content: space-between; align-items: flex-start;",
                                                    div {
                                                        div { style: "font-weight: 600; font-size: 1rem; margin-bottom: 4px; color: var(--text-primary);",
                                                            "{target_name}"
                                                        }
                                                        div { style: "display: flex; gap: 8px; align-items: center; flex-wrap: wrap;",
                                                            span {
                                                                class: "badge",
                                                                style: "{status_style}",
                                                                "{status}"
                                                            }
                                                            span {
                                                                class: "badge",
                                                                style: "background: var(--bg-tertiary); color: var(--text-secondary);",
                                                                "{strategy}"
                                                            }
                                                        }
                                                    }
                                                    div { style: "text-align: right; font-size: 0.85rem; color: var(--text-secondary);",
                                                        div { style: "margin-bottom: 4px;",
                                                            Icon { icon: BsShieldExclamation, width: 12, height: 12 }
                                                            " {findings_count} findings"
                                                        }
                                                        div { style: "margin-bottom: 4px;",
                                                            Icon { icon: BsWrench, width: 12, height: 12 }
                                                            " {tool_count} tools"
                                                        }
                                                        div { "{created_at}" }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                },
                Some(None) => rsx! { p { style: "padding: 16px;", "Failed to load sessions." } },
                None => rsx! { p { style: "padding: 16px;", "Loading..." } },
            }
        }

        // New Pentest Modal
        if *show_modal.read() {
            div {
                style: "position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000;",
                onclick: move |_| show_modal.set(false),
                div {
                    style: "background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 24px; width: 480px; max-width: 90vw;",
                    onclick: move |e| e.stop_propagation(),
                    h3 { style: "margin: 0 0 16px 0;", "New Pentest Session" }

                    // Target selection
                    div { style: "margin-bottom: 12px;",
                        label { style: "display: block; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 4px;",
                            "Target"
                        }
                        select {
                            class: "chat-input",
                            style: "width: 100%; padding: 8px; resize: none; height: auto;",
                            value: "{new_target_id}",
                            onchange: move |e| new_target_id.set(e.value()),
                            option { value: "", "Select a target..." }
                            match &*targets.read() {
                                Some(Some(data)) => {
                                    rsx! {
                                        for target in &data.data {
                                            {
                                                let tid = target.get("_id")
                                                    .and_then(|v| v.get("$oid"))
                                                    .and_then(|v| v.as_str())
                                                    .unwrap_or("").to_string();
                                                let tname = target.get("name").and_then(|v| v.as_str()).unwrap_or("Unknown").to_string();
                                                let turl = target.get("base_url").and_then(|v| v.as_str()).unwrap_or("").to_string();
                                                rsx! {
                                                    option { value: "{tid}", "{tname} ({turl})" }
                                                }
                                            }
                                        }
                                    }
                                },
                                _ => rsx! {},
                            }
                        }
                    }

                    // Strategy selection
                    div { style: "margin-bottom: 12px;",
                        label { style: "display: block; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 4px;",
                            "Strategy"
                        }
                        select {
                            class: "chat-input",
                            style: "width: 100%; padding: 8px; resize: none; height: auto;",
                            value: "{new_strategy}",
                            onchange: move |e| new_strategy.set(e.value()),
                            option { value: "comprehensive", "Comprehensive" }
                            option { value: "quick", "Quick Scan" }
                            option { value: "owasp_top_10", "OWASP Top 10" }
                            option { value: "api_focused", "API Focused" }
                            option { value: "authentication", "Authentication" }
                        }
                    }

                    // Initial message
                    div { style: "margin-bottom: 16px;",
                        label { style: "display: block; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 4px;",
                            "Initial Instructions"
                        }
                        textarea {
                            class: "chat-input",
                            style: "width: 100%; min-height: 80px;",
                            placeholder: "Describe the scope and goals of this pentest...",
                            value: "{new_message}",
                            oninput: move |e| new_message.set(e.value()),
                        }
                    }

                    div { style: "display: flex; justify-content: flex-end; gap: 8px;",
                        button {
                            class: "btn btn-ghost",
                            onclick: move |_| show_modal.set(false),
                            "Cancel"
                        }
                        button {
                            class: "btn btn-primary",
                            disabled: *creating.read() || new_target_id.read().is_empty() || new_message.read().is_empty(),
                            onclick: on_create,
                            if *creating.read() { "Creating..." } else { "Start Pentest" }
                        }
                    }
                }
            }
        }
    }
}
