use dioxus::prelude::*;

use crate::components::{MemberRow, PageHeader};
use crate::models::{BillingUsage, MemberRole, OrgMember};

/// Organization dashboard with billing stats, member table, and invite modal.
///
/// Shows current billing usage, a table of organization members
/// with role management, and a button to invite new members.
#[component]
pub fn OrgDashboardPage() -> Element {
    let members = use_signal(mock_members);
    let usage = mock_usage();
    let mut show_invite = use_signal(|| false);
    let mut invite_email = use_signal(String::new);

    let members_list = members.read().clone();

    // Format token counts for display
    let tokens_display = format_tokens(usage.tokens_used);
    let tokens_limit_display = format_tokens(usage.tokens_limit);

    rsx! {
        section { class: "org-dashboard-page",
            PageHeader {
                title: "Organization".to_string(),
                subtitle: "Manage members and billing".to_string(),
                actions: rsx! {
                    button { class: "btn-primary", onclick: move |_| show_invite.set(true), "Invite Member" }
                },
            }

            // Stats bar
            div { class: "org-stats-bar",
                div { class: "org-stat",
                    span { class: "org-stat-value", "{usage.seats_used}/{usage.seats_total}" }
                    span { class: "org-stat-label", "Seats Used" }
                }
                div { class: "org-stat",
                    span { class: "org-stat-value", "{tokens_display}" }
                    span { class: "org-stat-label", "of {tokens_limit_display} tokens" }
                }
                div { class: "org-stat",
                    span { class: "org-stat-value", "{usage.billing_cycle_end}" }
                    span { class: "org-stat-label", "Cycle Ends" }
                }
            }

            // Members table
            div { class: "org-table-wrapper",
                table { class: "org-table",
                    thead {
                        tr {
                            th { "Name" }
                            th { "Email" }
                            th { "Role" }
                            th { "Joined" }
                        }
                    }
                    tbody {
                        for member in members_list {
                            MemberRow {
                                key: "{member.id}",
                                member,
                                on_role_change: move |_| {},
                            }
                        }
                    }
                }
            }

            // Invite modal
            if *show_invite.read() {
                div {
                    class: "modal-overlay",
                    onclick: move |_| show_invite.set(false),
                    div {
                        class: "modal-content",
                        // Prevent clicks inside modal from closing it
                        onclick: move |evt: Event<MouseData>| evt.stop_propagation(),
                        h3 { "Invite New Member" }
                        div { class: "form-group",
                            label { "Email Address" }
                            input {
                                class: "form-input",
                                r#type: "email",
                                placeholder: "colleague@company.com",
                                value: "{invite_email}",
                                oninput: move |evt: Event<FormData>| {
                                    invite_email.set(evt.value());
                                },
                            }
                        }
                        div { class: "modal-actions",
                            button {
                                class: "btn-secondary",
                                onclick: move |_| show_invite.set(false),
                                "Cancel"
                            }
                            button {
                                class: "btn-primary",
                                onclick: move |_| show_invite.set(false),
                                "Send Invite"
                            }
                        }
                    }
                }
            }
        }
    }
}

/// Formats a token count into a human-readable string (e.g. "1.2M").
fn format_tokens(count: u64) -> String {
    const M: u64 = 1_000_000;
    const K: u64 = 1_000;

    if count >= M {
        format!("{:.1}M", count as f64 / M as f64)
    } else if count >= K {
        format!("{:.0}K", count as f64 / K as f64)
    } else {
        count.to_string()
    }
}

/// Returns mock organization members.
fn mock_members() -> Vec<OrgMember> {
    vec![
        OrgMember {
            id: "m1".into(),
            name: "Max Mustermann".into(),
            email: "max@example.com".into(),
            role: MemberRole::Admin,
            joined_at: "2026-01-10".into(),
        },
        OrgMember {
            id: "m2".into(),
            name: "Erika Musterfrau".into(),
            email: "erika@example.com".into(),
            role: MemberRole::Member,
            joined_at: "2026-01-15".into(),
        },
        OrgMember {
            id: "m3".into(),
            name: "Johann Schmidt".into(),
            email: "johann@example.com".into(),
            role: MemberRole::Member,
            joined_at: "2026-02-01".into(),
        },
        OrgMember {
            id: "m4".into(),
            name: "Anna Weber".into(),
            email: "anna@example.com".into(),
            role: MemberRole::Viewer,
            joined_at: "2026-02-10".into(),
        },
    ]
}

/// Returns mock billing usage data.
fn mock_usage() -> BillingUsage {
    BillingUsage {
        seats_used: 4,
        seats_total: 25,
        tokens_used: 847_000,
        tokens_limit: 1_000_000,
        billing_cycle_end: "2026-03-01".into(),
    }
}