use crate::shared::state::AppState;
use axum::{
    extract::{Query, State},
    response::{Html, IntoResponse},
    routing::get,
    Router,
};
use serde::{Deserialize, Serialize};
use std::sync::Arc;

#[derive(Debug, Clone, Serialize, Deserialize)]
pub struct SearchQuery {
    pub q: Option<String>,
    pub category: Option<String>,
}

pub fn configure_sources_routes() -> Router<Arc<AppState>> {
    Router::new()
        // Tab endpoints - match frontend hx-get endpoints
        .route("/api/sources/prompts", get(handle_prompts))
        .route("/api/sources/templates", get(handle_templates))
        .route("/api/sources/news", get(handle_news))
        .route("/api/sources/mcp-servers", get(handle_mcp_servers))
        .route("/api/sources/llm-tools", get(handle_llm_tools))
        .route("/api/sources/models", get(handle_models))
        // Search
        .route("/api/sources/search", get(handle_search))
}

/// GET /api/sources/prompts - Prompts tab content
pub async fn handle_prompts(
    State(_state): State<Arc<AppState>>,
    Query(params): Query<SearchQuery>,
) -> impl IntoResponse {
    let category = params.category.unwrap_or_else(|| "all".to_string());

    let prompts = get_prompts_data(&category);

    let mut html = String::new();
    html.push_str("<div class=\"panel-layout\">");

    // Categories sidebar
    html.push_str("<aside class=\"categories-sidebar\">");
    html.push_str("<h3>Categories</h3>");
    html.push_str("<div class=\"category-list\">");

    let categories = vec![
        ("all", "All Prompts", ""),
        ("writing", "Writing", ""),
        ("coding", "Coding", ""),
        ("analysis", "Analysis", ""),
        ("creative", "Creative", ""),
        ("business", "Business", ""),
        ("education", "Education", ""),
    ];

    for (id, name, icon) in &categories {
        let active = if *id == category { " active" } else { "" };
        html.push_str("<button class=\"category-item");
        html.push_str(active);
        html.push_str("\" hx-get=\"/api/sources/prompts?category=");
        html.push_str(id);
        html.push_str("\" hx-target=\"#content-area\" hx-swap=\"innerHTML\">");
        html.push_str("<span class=\"category-icon\">");
        html.push_str(icon);
        html.push_str("</span>");
        html.push_str("<span class=\"category-name\">");
        html.push_str(name);
        html.push_str("</span>");
        html.push_str("</button>");
    }

    html.push_str("</div>");
    html.push_str("</aside>");

    // Prompts grid
    html.push_str("<div class=\"content-main\">");
    html.push_str("<div class=\"prompts-grid\" id=\"prompts-grid\">");

    for prompt in &prompts {
        html.push_str("<div class=\"prompt-card\">");
        html.push_str("<div class=\"prompt-header\">");
        html.push_str("<span class=\"prompt-icon\">");
        html.push_str(&prompt.icon);
        html.push_str("</span>");
        html.push_str("<h4>");
        html.push_str(&html_escape(&prompt.title));
        html.push_str("</h4>");
        html.push_str("</div>");
        html.push_str("<p class=\"prompt-description\">");
        html.push_str(&html_escape(&prompt.description));
        html.push_str("</p>");
        html.push_str("<div class=\"prompt-footer\">");
        html.push_str("<span class=\"prompt-category\">");
        html.push_str(&html_escape(&prompt.category));
        html.push_str("</span>");
        html.push_str("<button class=\"btn-use\" onclick=\"usePrompt('");
        html.push_str(&html_escape(&prompt.id));
        html.push_str("')\">Use</button>");
        html.push_str("</div>");
        html.push_str("</div>");
    }

    if prompts.is_empty() {
        html.push_str("<div class=\"empty-state\">");
        html.push_str("<p>No prompts found in this category</p>");
        html.push_str("</div>");
    }

    html.push_str("</div>");
    html.push_str("</div>");
    html.push_str("</div>");

    Html(html)
}

/// GET /api/sources/templates - Templates tab content
pub async fn handle_templates(State(_state): State<Arc<AppState>>) -> impl IntoResponse {
    let templates = get_templates_data();

    let mut html = String::new();
    html.push_str("<div class=\"templates-container\">");
    html.push_str("<div class=\"templates-header\">");
    html.push_str("<h3>Bot Templates</h3>");
    html.push_str("<p>Pre-built bot configurations ready to deploy</p>");
    html.push_str("</div>");
    html.push_str("<div class=\"templates-grid\">");

    for template in &templates {
        html.push_str("<div class=\"template-card\">");
        html.push_str("<div class=\"template-icon\">");
        html.push_str(&template.icon);
        html.push_str("</div>");
        html.push_str("<div class=\"template-info\">");
        html.push_str("<h4>");
        html.push_str(&html_escape(&template.name));
        html.push_str("</h4>");
        html.push_str("<p>");
        html.push_str(&html_escape(&template.description));
        html.push_str("</p>");
        html.push_str("<div class=\"template-meta\">");
        html.push_str("<span class=\"template-category\">");
        html.push_str(&html_escape(&template.category));
        html.push_str("</span>");
        html.push_str("</div>");
        html.push_str("</div>");
        html.push_str("<div class=\"template-actions\">");
        html.push_str("<button class=\"btn-preview\">Preview</button>");
        html.push_str("<button class=\"btn-use-template\">Use Template</button>");
        html.push_str("</div>");
        html.push_str("</div>");
    }

    html.push_str("</div>");
    html.push_str("</div>");

    Html(html)
}

/// GET /api/sources/news - News tab content
pub async fn handle_news(State(_state): State<Arc<AppState>>) -> impl IntoResponse {
    let news_items = vec![
        ("", "General Bots 6.0 Released", "Major update with improved performance and new features", "2 hours ago"),
        ("", "New MCP Server Integration", "Connect to external tools more easily with our new MCP support", "1 day ago"),
        ("", "Analytics Dashboard Update", "Real-time metrics and improved visualizations", "3 days ago"),
        ("", "Security Enhancement", "Enhanced encryption and authentication options", "1 week ago"),
        ("", "Multi-language Support", "Now supporting 15+ languages for bot conversations", "2 weeks ago"),
    ];

    let mut html = String::new();
    html.push_str("<div class=\"news-container\">");
    html.push_str("<div class=\"news-header\">");
    html.push_str("<h3>Latest News</h3>");
    html.push_str("<p>Updates and announcements from the General Bots team</p>");
    html.push_str("</div>");
    html.push_str("<div class=\"news-list\">");

    for (icon, title, description, time) in &news_items {
        html.push_str("<div class=\"news-item\">");
        html.push_str("<div class=\"news-icon\">");
        html.push_str(icon);
        html.push_str("</div>");
        html.push_str("<div class=\"news-content\">");
        html.push_str("<h4>");
        html.push_str(&html_escape(title));
        html.push_str("</h4>");
        html.push_str("<p>");
        html.push_str(&html_escape(description));
        html.push_str("</p>");
        html.push_str("<span class=\"news-time\">");
        html.push_str(time);
        html.push_str("</span>");
        html.push_str("</div>");
        html.push_str("</div>");
    }

    html.push_str("</div>");
    html.push_str("</div>");

    Html(html)
}

/// GET /api/sources/mcp-servers - MCP Servers tab content
pub async fn handle_mcp_servers(State(_state): State<Arc<AppState>>) -> impl IntoResponse {
    let servers = vec![
        ("", "Database Server", "PostgreSQL, MySQL, SQLite connections", "Active", true),
        ("", "Filesystem Server", "Local and cloud file access", "Active", true),
        ("", "Web Server", "HTTP/REST API integrations", "Active", true),
        ("", "Email Server", "SMTP/IMAP email handling", "Inactive", false),
        ("", "Slack Server", "Slack workspace integration", "Active", true),
        ("", "Analytics Server", "Data processing and reporting", "Active", true),
    ];

    let mut html = String::new();
    html.push_str("<div class=\"mcp-container\">");
    html.push_str("<div class=\"mcp-header\">");
    html.push_str("<h3>MCP Servers</h3>");
    html.push_str("<p>Model Context Protocol servers for extended capabilities</p>");
    html.push_str("<button class=\"btn-add-server\">+ Add Server</button>");
    html.push_str("</div>");
    html.push_str("<div class=\"mcp-grid\">");

    for (icon, name, description, status, is_active) in &servers {
        let status_class = if *is_active { "status-active" } else { "status-inactive" };
        html.push_str("<div class=\"mcp-card\">");
        html.push_str("<div class=\"mcp-icon\">");
        html.push_str(icon);
        html.push_str("</div>");
        html.push_str("<div class=\"mcp-info\">");
        html.push_str("<h4>");
        html.push_str(&html_escape(name));
        html.push_str("</h4>");
        html.push_str("<p>");
        html.push_str(&html_escape(description));
        html.push_str("</p>");
        html.push_str("</div>");
        html.push_str("<div class=\"mcp-status ");
        html.push_str(status_class);
        html.push_str("\">");
        html.push_str(status);
        html.push_str("</div>");
        html.push_str("<div class=\"mcp-actions\">");
        html.push_str("<button class=\"btn-configure\">Configure</button>");
        if *is_active {
            html.push_str("<button class=\"btn-disable\">Disable</button>");
        } else {
            html.push_str("<button class=\"btn-enable\">Enable</button>");
        }
        html.push_str("</div>");
        html.push_str("</div>");
    }

    html.push_str("</div>");
    html.push_str("</div>");

    Html(html)
}

/// GET /api/sources/llm-tools - LLM Tools tab content
pub async fn handle_llm_tools(State(_state): State<Arc<AppState>>) -> impl IntoResponse {
    let tools = vec![
        ("", "Web Search", "Search the web for real-time information", true),
        ("", "Calculator", "Perform mathematical calculations", true),
        ("", "Calendar", "Manage calendar events and schedules", true),
        ("", "Note Taking", "Create and manage notes", true),
        ("", "Weather", "Get weather forecasts and conditions", false),
        ("", "News Reader", "Fetch and summarize news articles", false),
        ("", "URL Fetcher", "Retrieve and parse web content", true),
        ("", "Code Executor", "Run code snippets safely", false),
    ];

    let mut html = String::new();
    html.push_str("<div class=\"tools-container\">");
    html.push_str("<div class=\"tools-header\">");
    html.push_str("<h3>LLM Tools</h3>");
    html.push_str("<p>Extend your bot's capabilities with these tools</p>");
    html.push_str("</div>");
    html.push_str("<div class=\"tools-grid\">");

    for (icon, name, description, enabled) in &tools {
        let enabled_class = if *enabled { "enabled" } else { "disabled" };
        html.push_str("<div class=\"tool-card ");
        html.push_str(enabled_class);
        html.push_str("\">");
        html.push_str("<div class=\"tool-icon\">");
        html.push_str(icon);
        html.push_str("</div>");
        html.push_str("<div class=\"tool-info\">");
        html.push_str("<h4>");
        html.push_str(&html_escape(name));
        html.push_str("</h4>");
        html.push_str("<p>");
        html.push_str(&html_escape(description));
        html.push_str("</p>");
        html.push_str("</div>");
        html.push_str("<label class=\"toggle-switch\">");
        if *enabled {
            html.push_str("<input type=\"checkbox\" checked>");
        } else {
            html.push_str("<input type=\"checkbox\">");
        }
        html.push_str("<span class=\"toggle-slider\"></span>");
        html.push_str("</label>");
        html.push_str("</div>");
    }

    html.push_str("</div>");
    html.push_str("</div>");

    Html(html)
}

/// GET /api/sources/models - Models tab content
pub async fn handle_models(State(_state): State<Arc<AppState>>) -> impl IntoResponse {
    let models = vec![
        ("🧠", "GPT-4o", "OpenAI", "Latest multimodal model with vision capabilities", "Active"),
        ("🧠", "GPT-4o-mini", "OpenAI", "Fast and efficient for most tasks", "Active"),
        ("🦙", "Llama 3.1 70B", "Meta", "Open source large language model", "Available"),
        ("🔷", "Claude 3.5 Sonnet", "Anthropic", "Advanced reasoning and analysis", "Available"),
        ("💎", "Gemini Pro", "Google", "Multimodal AI with long context", "Available"),
        ("", "Mistral Large", "Mistral AI", "European AI model with strong performance", "Available"),
    ];

    let mut html = String::new();
    html.push_str("<div class=\"models-container\">");
    html.push_str("<div class=\"models-header\">");
    html.push_str("<h3>AI Models</h3>");
    html.push_str("<p>Available language models for your bots</p>");
    html.push_str("</div>");
    html.push_str("<div class=\"models-grid\">");

    for (icon, name, provider, description, status) in &models {
        let status_class = if *status == "Active" { "model-active" } else { "model-available" };
        html.push_str("<div class=\"model-card ");
        html.push_str(status_class);
        html.push_str("\">");
        html.push_str("<div class=\"model-icon\">");
        html.push_str(icon);
        html.push_str("</div>");
        html.push_str("<div class=\"model-info\">");
        html.push_str("<div class=\"model-header\">");
        html.push_str("<h4>");
        html.push_str(&html_escape(name));
        html.push_str("</h4>");
        html.push_str("<span class=\"model-provider\">");
        html.push_str(&html_escape(provider));
        html.push_str("</span>");
        html.push_str("</div>");
        html.push_str("<p>");
        html.push_str(&html_escape(description));
        html.push_str("</p>");
        html.push_str("<div class=\"model-footer\">");
        html.push_str("<span class=\"model-status\">");
        html.push_str(status);
        html.push_str("</span>");
        if *status == "Active" {
            html.push_str("<button class=\"btn-configure\">Configure</button>");
        } else {
            html.push_str("<button class=\"btn-activate\">Activate</button>");
        }
        html.push_str("</div>");
        html.push_str("</div>");
        html.push_str("</div>");
    }

    html.push_str("</div>");
    html.push_str("</div>");

    Html(html)
}

/// GET /api/sources/search - Search across all sources
pub async fn handle_search(
    State(_state): State<Arc<AppState>>,
    Query(params): Query<SearchQuery>,
) -> impl IntoResponse {
    let query = params.q.unwrap_or_default();

    if query.is_empty() {
        return Html("<div class=\"search-prompt\"><p>Enter a search term</p></div>".to_string());
    }

    let query_lower = query.to_lowercase();

    // Search across prompts
    let prompts = get_prompts_data("all");
    let matching_prompts: Vec<_> = prompts
        .iter()
        .filter(|p| {
            p.title.to_lowercase().contains(&query_lower)
                || p.description.to_lowercase().contains(&query_lower)
        })
        .collect();

    // Search across templates
    let templates = get_templates_data();
    let matching_templates: Vec<_> = templates
        .iter()
        .filter(|t| {
            t.name.to_lowercase().contains(&query_lower)
                || t.description.to_lowercase().contains(&query_lower)
        })
        .collect();

    let mut html = String::new();
    html.push_str("<div class=\"search-results\">");
    html.push_str("<div class=\"search-header\">");
    html.push_str("<h3>Search Results for \"");
    html.push_str(&html_escape(&query));
    html.push_str("\"</h3>");
    html.push_str("</div>");

    if matching_prompts.is_empty() && matching_templates.is_empty() {
        html.push_str("<div class=\"no-results\">");
        html.push_str("<p>No results found</p>");
        html.push_str("<p class=\"hint\">Try different keywords</p>");
        html.push_str("</div>");
    } else {
        if !matching_prompts.is_empty() {
            html.push_str("<div class=\"result-section\">");
            html.push_str("<h4>Prompts (");
            html.push_str(&matching_prompts.len().to_string());
            html.push_str(")</h4>");
            html.push_str("<div class=\"results-grid\">");
            for prompt in matching_prompts {
                html.push_str("<div class=\"result-item prompt-result\">");
                html.push_str("<span class=\"result-icon\">");
                html.push_str(&prompt.icon);
                html.push_str("</span>");
                html.push_str("<div class=\"result-info\">");
                html.push_str("<strong>");
                html.push_str(&html_escape(&prompt.title));
                html.push_str("</strong>");
                html.push_str("<p>");
                html.push_str(&html_escape(&prompt.description));
                html.push_str("</p>");
                html.push_str("</div>");
                html.push_str("</div>");
            }
            html.push_str("</div>");
            html.push_str("</div>");
        }

        if !matching_templates.is_empty() {
            html.push_str("<div class=\"result-section\">");
            html.push_str("<h4>Templates (");
            html.push_str(&matching_templates.len().to_string());
            html.push_str(")</h4>");
            html.push_str("<div class=\"results-grid\">");
            for template in matching_templates {
                html.push_str("<div class=\"result-item template-result\">");
                html.push_str("<span class=\"result-icon\">");
                html.push_str(&template.icon);
                html.push_str("</span>");
                html.push_str("<div class=\"result-info\">");
                html.push_str("<strong>");
                html.push_str(&html_escape(&template.name));
                html.push_str("</strong>");
                html.push_str("<p>");
                html.push_str(&html_escape(&template.description));
                html.push_str("</p>");
                html.push_str("</div>");
                html.push_str("</div>");
            }
            html.push_str("</div>");
            html.push_str("</div>");
        }
    }

    html.push_str("</div>");

    Html(html)
}

// Data structures

struct PromptData {
    id: String,
    title: String,
    description: String,
    category: String,
    icon: String,
}

struct TemplateData {
    name: String,
    description: String,
    category: String,
    icon: String,
}

fn get_prompts_data(category: &str) -> Vec<PromptData> {
    let all_prompts = vec![
        PromptData {
            id: "summarize".to_string(),
            title: "Summarize Text".to_string(),
            description: "Create concise summaries of long documents or articles".to_string(),
            category: "writing".to_string(),
            icon: "".to_string(),
        },
        PromptData {
            id: "code-review".to_string(),
            title: "Code Review".to_string(),
            description: "Analyze code for bugs, improvements, and best practices".to_string(),
            category: "coding".to_string(),
            icon: "".to_string(),
        },
        PromptData {
            id: "data-analysis".to_string(),
            title: "Data Analysis".to_string(),
            description: "Extract insights and patterns from data sets".to_string(),
            category: "analysis".to_string(),
            icon: "".to_string(),
        },
        PromptData {
            id: "creative-writing".to_string(),
            title: "Creative Writing".to_string(),
            description: "Generate stories, poems, and creative content".to_string(),
            category: "creative".to_string(),
            icon: "".to_string(),
        },
        PromptData {
            id: "email-draft".to_string(),
            title: "Email Draft".to_string(),
            description: "Compose professional emails quickly".to_string(),
            category: "business".to_string(),
            icon: "".to_string(),
        },
        PromptData {
            id: "explain-concept".to_string(),
            title: "Explain Concept".to_string(),
            description: "Break down complex topics into simple explanations".to_string(),
            category: "education".to_string(),
            icon: "".to_string(),
        },
        PromptData {
            id: "debug-code".to_string(),
            title: "Debug Code".to_string(),
            description: "Find and fix issues in your code".to_string(),
            category: "coding".to_string(),
            icon: "🐛".to_string(),
        },
        PromptData {
            id: "meeting-notes".to_string(),
            title: "Meeting Notes".to_string(),
            description: "Organize and format meeting discussions".to_string(),
            category: "business".to_string(),
            icon: "".to_string(),
        },
    ];

    if category == "all" {
        all_prompts
    } else {
        all_prompts
            .into_iter()
            .filter(|p| p.category == category)
            .collect()
    }
}

fn get_templates_data() -> Vec<TemplateData> {
    vec![
        TemplateData {
            name: "Customer Support Bot".to_string(),
            description: "Handle customer inquiries and support tickets automatically".to_string(),
            category: "Support".to_string(),
            icon: "🎧".to_string(),
        },
        TemplateData {
            name: "FAQ Bot".to_string(),
            description: "Answer frequently asked questions from your knowledge base".to_string(),
            category: "Support".to_string(),
            icon: "".to_string(),
        },
        TemplateData {
            name: "Lead Generation Bot".to_string(),
            description: "Qualify leads and collect prospect information".to_string(),
            category: "Sales".to_string(),
            icon: "".to_string(),
        },
        TemplateData {
            name: "Onboarding Bot".to_string(),
            description: "Guide new users through your product or service".to_string(),
            category: "HR".to_string(),
            icon: "👋".to_string(),
        },
        TemplateData {
            name: "Survey Bot".to_string(),
            description: "Collect feedback through conversational surveys".to_string(),
            category: "Research".to_string(),
            icon: "".to_string(),
        },
        TemplateData {
            name: "Appointment Scheduler".to_string(),
            description: "Book and manage appointments automatically".to_string(),
            category: "Productivity".to_string(),
            icon: "".to_string(),
        },
    ]
}

fn html_escape(s: &str) -> String {
    s.replace('&', "&amp;")
        .replace('<', "&lt;")
        .replace('>', "&gt;")
        .replace('"', "&quot;")
        .replace('\'', "&#39;")
}