use dioxus::prelude::*;

#[component]
pub(crate) fn Foundation() -> Element {
    rsx! {
        main { class: "browse-page product-shell",
            header { class: "foundation-intro",
                h1 { "Foundation" }
                p { class: "product-lede", "Self-hosted typography, blueprint tokens, and reusable front-end states for upcoming product slices." }
            }

            section { id: "browse-foundation", class: "foundation-hero blueprint-panel",
                div { class: "foundation-hero-copy",
                    p { class: "eyebrow", "Token and asset check" }
                    h2 { "Blueprint styling foundation" }
                    p { "This route keeps the front-end primitives visible without making implementation scaffolding the product home." }
                    div { class: "button-row",
                        button { class: "button button-primary", "Primary action" }
                        button { class: "button button-ghost", "Ghost action" }
                    }
                }
                div { class: "blueprint-preview", aria_label: "Blueprint placeholder preview",
                    div { class: "blueprint-preview-grid" }
                    span { class: "blueprint-axis blueprint-axis-x", "X" }
                    span { class: "blueprint-axis blueprint-axis-y", "Y" }
                    span { class: "blueprint-dimension", "120 × 86 × 42 mm" }
                }
            }

            section { class: "foundation-grid", aria_label: "Foundation primitives",
                for item in foundation_items() { FoundationCard { item } }
            }

            section { id: "ui-states", class: "state-grid", aria_label: "Reusable states",
                div { class: "state-card loading-state", span { class: "status-pill", "Loading" } div { class: "skeleton-line skeleton-wide" } div { class: "skeleton-line" } div { class: "skeleton-box" } }
                div { class: "state-card empty-state", span { class: "status-pill status-muted", "Empty" } h2 { "No projects yet" } p { "Empty browse states can use this panel before live feeds are connected." } }
                div { class: "state-card error-state", span { class: "status-pill status-error", "Error" } h2 { "Feed unavailable" } p { "Error states keep the browse surface useful without inventing data plumbing in this slice." } }
            }
        }
    }
}

#[derive(Clone, Copy, PartialEq)]
struct FoundationItem {
    label: &'static str,
    title: &'static str,
    body: &'static str,
    meta: &'static str,
}

fn foundation_items() -> [FoundationItem; 3] {
    [
        FoundationItem {
            label: "Panel",
            title: "Project card surface",
            body: "A crisp bordered card for future model summaries, previews, and maker metadata.",
            meta: "primitive/card",
        },
        FoundationItem {
            label: "Input",
            title: "Search and filter shell",
            body: "Reusable input styling for browse, profile, and publish flows without binding to a data source yet.",
            meta: "primitive/input",
        },
        FoundationItem {
            label: "Status",
            title: "Metadata and chips",
            body: "Compact mono labels for license, dimensions, file state, and feed status.",
            meta: "primitive/status",
        },
    ]
}

#[component]
fn FoundationCard(item: FoundationItem) -> Element {
    rsx! {
        article { class: "foundation-card card-surface",
            div { class: "card-media blueprint-media", span { class: "status-pill", "{item.label}" } }
            div { class: "card-body", h2 { class: "card-title", "{item.title}" } p { "{item.body}" } span { class: "card-meta", "{item.meta}" } }
        }
    }
}

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn foundation_items_cover_base_primitives() {
        let items = foundation_items();
        assert!(items.iter().any(|item| item.label == "Panel"));
        assert!(items.iter().any(|item| item.label == "Input"));
        assert!(items.iter().any(|item| item.label == "Status"));
    }

    #[test]
    fn foundation_copy_avoids_workflow_marketing() {
        let combined = foundation_items()
            .iter()
            .map(|item| item.body)
            .collect::<Vec<_>>()
            .join(" ");
        assert!(!combined.contains("Jira"));
        assert!(!combined.contains("Polytoken"));
    }
}