//! Scenes list page component.

use leptos::prelude::*;
use leptos_router::hooks::use_params_map;

use crate::components::{Card, EmptyState, PageHeader};
use crate::hooks::use_fetch_if;
use crate::models::SceneSummary;

/// Scenes list page component.
#[component]
pub fn ScenesPage() -> impl IntoView {
    let params = use_params_map();
    let realm_slug = move || params.get().get("slug").unwrap_or_default();
    let initial_slug = params.get_untracked().get("slug").unwrap_or_default();

    let scenes = use_fetch_if::<Vec<SceneSummary>>(
        move || !realm_slug().is_empty(),
        move || format!("/api/admin/realms/{}/scenes", realm_slug()),
    );

    let slug_for_create = initial_slug.clone();
    let slug_for_back = initial_slug.clone();

    view! {
        <PageHeader title="Scenes" subtitle="Manage scenes for realm">
            <a href=format!("/admin/realms/{}/scenes/new", slug_for_create) class="btn btn-primary">"Create Scene"</a>
        </PageHeader>

        <div class="mb-4">
            <a href=format!("/admin/realms/{}", slug_for_back) class="btn btn-secondary">"Back to Realm"</a>
        </div>

        <Card>
            <Suspense fallback=|| view! { <p>"Loading scenes..."</p> }>
                {move || {
                    let slug = realm_slug();
                    scenes.get().map(|maybe_scenes: Option<Vec<SceneSummary>>| {
                        match maybe_scenes {
                            Some(scene_list) if !scene_list.is_empty() => {
                                view! {
                                    <div class="table-container">
                                        <table class="data-table">
                                            <thead>
                                                <tr>
                                                    <th>"Name"</th>
                                                    <th>"Slug"</th>
                                                    <th>"Order"</th>
                                                    <th>"Entry Point"</th>
                                                    <th>"Hidden"</th>
                                                    <th>"Background"</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {scene_list.into_iter().map(|scene| {
                                                    let scene_id = scene.id.to_string();
                                                    let slug_clone = slug.clone();
                                                    view! {
                                                        <tr>
                                                            <td>
                                                                <a href=format!("/admin/realms/{}/scenes/{}", slug_clone, scene_id) class="table-link">
                                                                    {scene.name}
                                                                </a>
                                                            </td>
                                                            <td>{scene.slug}</td>
                                                            <td>{scene.sort_order}</td>
                                                            <td>
                                                                {if scene.is_entry_point {
                                                                    view! { <span class="badge badge-success">"Yes"</span> }.into_any()
                                                                } else {
                                                                    view! { <span class="text-muted">"-"</span> }.into_any()
                                                                }}
                                                            </td>
                                                            <td>
                                                                {if scene.is_hidden {
                                                                    view! { <span class="badge badge-warning">"Hidden"</span> }.into_any()
                                                                } else {
                                                                    view! { <span class="text-muted">"-"</span> }.into_any()
                                                                }}
                                                            </td>
                                                            <td>
                                                                {if let Some(color) = scene.background_color {
                                                                    view! {
                                                                        <span style=format!("display:inline-block;width:20px;height:20px;background:{};border:1px solid #555;border-radius:3px", color)></span>
                                                                    }.into_any()
                                                                } else if scene.background_image_path.is_some() {
                                                                    view! { <span class="text-muted">"Image"</span> }.into_any()
                                                                } else {
                                                                    view! { <span class="text-muted">"-"</span> }.into_any()
                                                                }}
                                                            </td>
                                                        </tr>
                                                    }
                                                }).collect_view()}
                                            </tbody>
                                        </table>
                                    </div>
                                }.into_any()
                            }
                            _ => {
                                let slug_for_empty = slug.clone();
                                view! {
                                    <EmptyState
                                        message="No scenes found for this realm."
                                        action_href=format!("/admin/realms/{}/scenes/new", slug_for_empty).leak()
                                        action_text="Create Scene"
                                    />
                                }.into_any()
                            }
                        }
                    })
                }}
            </Suspense>
        </Card>
    }
}
