use dioxus::prelude::*;

use crate::components::page_header::PageHeader;

#[component]
pub fn SettingsPage() -> Element {
    let mut litellm_url = use_signal(|| "http://localhost:4000".to_string());
    let mut litellm_model = use_signal(|| "gpt-4o".to_string());
    let mut github_token = use_signal(String::new);
    let mut gitlab_url = use_signal(|| "https://gitlab.com".to_string());
    let mut gitlab_token = use_signal(String::new);
    let mut jira_url = use_signal(String::new);
    let mut jira_email = use_signal(String::new);
    let mut jira_token = use_signal(String::new);
    let mut jira_project = use_signal(String::new);
    let mut searxng_url = use_signal(|| "http://localhost:8888".to_string());

    rsx! {
        PageHeader {
            title: "Settings",
            description: "Configure integrations and scanning parameters",
        }

        div { class: "card",
            div { class: "card-header", "LiteLLM Configuration" }
            div { class: "form-group",
                label { "LiteLLM URL" }
                input {
                    r#type: "text",
                    value: "{litellm_url}",
                    oninput: move |e| litellm_url.set(e.value()),
                }
            }
            div { class: "form-group",
                label { "Model" }
                input {
                    r#type: "text",
                    value: "{litellm_model}",
                    oninput: move |e| litellm_model.set(e.value()),
                }
            }
        }

        div { class: "card",
            div { class: "card-header", "GitHub Integration" }
            div { class: "form-group",
                label { "Personal Access Token" }
                input {
                    r#type: "password",
                    placeholder: "ghp_...",
                    value: "{github_token}",
                    oninput: move |e| github_token.set(e.value()),
                }
            }
        }

        div { class: "card",
            div { class: "card-header", "GitLab Integration" }
            div { class: "form-group",
                label { "GitLab URL" }
                input {
                    r#type: "text",
                    value: "{gitlab_url}",
                    oninput: move |e| gitlab_url.set(e.value()),
                }
            }
            div { class: "form-group",
                label { "Access Token" }
                input {
                    r#type: "password",
                    placeholder: "glpat-...",
                    value: "{gitlab_token}",
                    oninput: move |e| gitlab_token.set(e.value()),
                }
            }
        }

        div { class: "card",
            div { class: "card-header", "Jira Integration" }
            div { class: "form-group",
                label { "Jira URL" }
                input {
                    r#type: "text",
                    placeholder: "https://your-org.atlassian.net",
                    value: "{jira_url}",
                    oninput: move |e| jira_url.set(e.value()),
                }
            }
            div { class: "form-group",
                label { "Email" }
                input {
                    r#type: "email",
                    value: "{jira_email}",
                    oninput: move |e| jira_email.set(e.value()),
                }
            }
            div { class: "form-group",
                label { "API Token" }
                input {
                    r#type: "password",
                    value: "{jira_token}",
                    oninput: move |e| jira_token.set(e.value()),
                }
            }
            div { class: "form-group",
                label { "Project Key" }
                input {
                    r#type: "text",
                    placeholder: "SEC",
                    value: "{jira_project}",
                    oninput: move |e| jira_project.set(e.value()),
                }
            }
        }

        div { class: "card",
            div { class: "card-header", "SearXNG" }
            div { class: "form-group",
                label { "SearXNG URL" }
                input {
                    r#type: "text",
                    value: "{searxng_url}",
                    oninput: move |e| searxng_url.set(e.value()),
                }
            }
        }

        div { style: "margin-top: 16px;",
            button {
                class: "btn btn-primary",
                onclick: move |_| {
                    tracing::info!("Settings save not yet implemented - settings are managed via .env");
                },
                "Save Settings"
            }
            p {
                style: "margin-top: 8px; font-size: 12px; color: var(--text-secondary);",
                "Note: Settings are currently configured via environment variables (.env file). Dashboard-based settings persistence coming soon."
            }
        }
    }
}