use dioxus::prelude::*;

use crate::components::{PageHeader, ToolCard};
use crate::models::{McpTool, ToolCategory, ToolStatus};

/// Tools page displaying a grid of MCP tool cards with toggle switches.
///
/// Shows all available MCP tools with their status and allows
/// enabling/disabling them via toggle buttons.
#[component]
pub fn ToolsPage() -> Element {
    let mut tools = use_signal(mock_tools);

    // Toggle a tool's enabled state by its ID
    let on_toggle = move |id: String| {
        tools.write().iter_mut().for_each(|t| {
            if t.id == id {
                t.enabled = !t.enabled;
            }
        });
    };

    let tool_list = tools.read().clone();

    rsx! {
        section { class: "tools-page",
            PageHeader {
                title: "Tools".to_string(),
                subtitle: "Manage MCP servers and tool integrations".to_string(),
            }
            div { class: "tools-grid",
                for tool in tool_list {
                    ToolCard { key: "{tool.id}", tool, on_toggle }
                }
            }
        }
    }
}

/// Returns mock MCP tools for the tools grid.
fn mock_tools() -> Vec<McpTool> {
    vec![
        McpTool {
            id: "calculator".into(),
            name: "Calculator".into(),
            description: "Mathematical computation and unit conversion".into(),
            category: ToolCategory::Compute,
            status: ToolStatus::Active,
            enabled: true,
            icon: "calculator".into(),
        },
        McpTool {
            id: "tavily".into(),
            name: "Tavily Search".into(),
            description: "AI-optimized web search API for real-time information".into(),
            category: ToolCategory::Search,
            status: ToolStatus::Active,
            enabled: true,
            icon: "search".into(),
        },
        McpTool {
            id: "searxng".into(),
            name: "SearXNG".into(),
            description: "Privacy-respecting metasearch engine".into(),
            category: ToolCategory::Search,
            status: ToolStatus::Active,
            enabled: true,
            icon: "globe".into(),
        },
        McpTool {
            id: "file-reader".into(),
            name: "File Reader".into(),
            description: "Read and parse local files in various formats".into(),
            category: ToolCategory::FileSystem,
            status: ToolStatus::Active,
            enabled: true,
            icon: "file".into(),
        },
        McpTool {
            id: "code-exec".into(),
            name: "Code Executor".into(),
            description: "Sandboxed code execution for Python and JavaScript".into(),
            category: ToolCategory::Code,
            status: ToolStatus::Inactive,
            enabled: false,
            icon: "terminal".into(),
        },
        McpTool {
            id: "web-scraper".into(),
            name: "Web Scraper".into(),
            description: "Extract structured data from web pages".into(),
            category: ToolCategory::Search,
            status: ToolStatus::Active,
            enabled: true,
            icon: "download".into(),
        },
        McpTool {
            id: "email".into(),
            name: "Email Sender".into(),
            description: "Send emails via configured SMTP server".into(),
            category: ToolCategory::Communication,
            status: ToolStatus::Inactive,
            enabled: false,
            icon: "mail".into(),
        },
        McpTool {
            id: "git".into(),
            name: "Git Operations".into(),
            description: "Interact with Git repositories for version control".into(),
            category: ToolCategory::Code,
            status: ToolStatus::Active,
            enabled: true,
            icon: "git".into(),
        },
    ]
}