/// ProjectBox — individual project card with tab bar and content panes.
///
/// Mirrors the Svelte app's ProjectBox.svelte: header (status dot + name + CWD),
/// tab bar (Model/Docs/Files), and content area. The Model tab contains
/// AgentPane + TerminalArea.

use dioxus::prelude::*;

use crate::state::{
    AgentSession, AgentStatus, ProjectConfig, ProjectTab,
    demo_messages, demo_terminal_lines,
};
use crate::components::agent_pane::AgentPane;
use crate::components::terminal::TerminalArea;
use crate::components::pulsing_dot::{PulsingDot, DotState};

#[component]
pub fn ProjectBox(
    project: ProjectConfig,
    initial_status: AgentStatus,
) -> Element {
    let mut active_tab = use_signal(|| ProjectTab::Model);

    // Per-project agent session state
    let session = use_signal(|| {
        let mut s = AgentSession::new();
        s.status = initial_status;
        s.messages = demo_messages();
        s.cost_usd = 0.0847;
        s.tokens_used = 24_350;
        s
    });

    let terminal_lines = demo_terminal_lines();
    let dot_state = match initial_status {
        AgentStatus::Running => DotState::Running,
        AgentStatus::Idle => DotState::Idle,
        AgentStatus::Done => DotState::Done,
        AgentStatus::Stalled => DotState::Stalled,
        AgentStatus::Error => DotState::Error,
    };

    rsx! {
        div {
            class: "project-box",
            style: "--accent: {project.accent};",

            // Header
            div { class: "project-header",
                PulsingDot { state: dot_state.clone() }
                div { class: "project-name", "{project.name}" }
                span { class: "provider-badge", "{project.provider}" }
                div { class: "project-cwd", "{project.cwd}" }
            }

            // Tab bar
            div { class: "tab-bar",
                for tab in ProjectTab::all().iter() {
                    {
                        let tab = *tab;
                        let is_active = *active_tab.read() == tab;
                        rsx! {
                            div {
                                class: if is_active { "tab active" } else { "tab" },
                                onclick: move |_| active_tab.set(tab),
                                "{tab.label()}"
                            }
                        }
                    }
                }
            }

            // Tab content — uses display:flex/none to keep state across switches
            // (same pattern as the Svelte app's ProjectBox)
            div { class: "tab-content",
                // Model tab
                div {
                    style: if *active_tab.read() == ProjectTab::Model { "display: flex; flex-direction: column; flex: 1; min-height: 0;" } else { "display: none;" },
                    AgentPane {
                        session: session,
                        project_name: project.name.clone(),
                    }
                    TerminalArea { lines: terminal_lines.clone() }
                }

                // Docs tab
                div {
                    style: if *active_tab.read() == ProjectTab::Docs { "display: flex; flex-direction: column; flex: 1;" } else { "display: none;" },
                    DocsTab { project_name: project.name.clone() }
                }

                // Files tab
                div {
                    style: if *active_tab.read() == ProjectTab::Files { "display: flex; flex-direction: column; flex: 1;" } else { "display: none;" },
                    FilesTab { cwd: project.cwd.clone() }
                }
            }
        }
    }
}

/// Docs tab — shows a list of markdown files.
#[component]
fn DocsTab(project_name: String) -> Element {
    let docs = vec![
        "README.md",
        "docs/architecture.md",
        "docs/decisions.md",
        "docs/phases.md",
        "docs/findings.md",
        "docs/sidecar.md",
        "docs/orchestration.md",
    ];

    rsx! {
        div { class: "docs-pane",
            for doc in docs.iter() {
                div { class: "docs-entry",
                    "\u{1F4C4} {doc}"
                }
            }
        }
    }
}

/// Files tab — shows a mock file tree.
#[component]
fn FilesTab(cwd: String) -> Element {
    let files = vec![
        ("dir", "src/"),
        ("dir", "  components/"),
        ("file", "    sidebar.rs"),
        ("file", "    project_box.rs"),
        ("file", "    agent_pane.rs"),
        ("file", "  main.rs"),
        ("file", "  state.rs"),
        ("file", "  theme.rs"),
        ("file", "  backend.rs"),
        ("dir", "tests/"),
        ("file", "Cargo.toml"),
        ("file", "Dioxus.toml"),
    ];

    rsx! {
        div { class: "files-pane",
            for (kind, name) in files.iter() {
                div { class: "file-tree-item",
                    span { class: "file-tree-icon",
                        if *kind == "dir" { "\u{1F4C1}" } else { "\u{1F4C4}" }
                    }
                    span { "{name}" }
                }
            }
        }
    }
}
