//! Prop detail page component.

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

use crate::components::{Card, DetailGrid, DetailItem, PageHeader};
use crate::hooks::use_fetch_if;
use crate::models::PropDetail;

/// Prop detail page component.
#[component]
pub fn PropsDetailPage() -> impl IntoView {
    let params = use_params_map();
    let prop_id = move || params.get().get("prop_id").unwrap_or_default();
    let initial_prop_id = params.get_untracked().get("prop_id").unwrap_or_default();

    let prop = use_fetch_if::<PropDetail>(
        move || !prop_id().is_empty(),
        move || format!("/api/admin/props/{}", prop_id()),
    );

    view! {
        <PageHeader title="Prop Details" subtitle=initial_prop_id>
            <a href="/admin/props" class="btn btn-secondary">"Back to Props"</a>
        </PageHeader>

        <Suspense fallback=|| view! { <p>"Loading prop..."</p> }>
            {move || {
                prop.get().map(|maybe_prop| {
                    match maybe_prop {
                        Some(p) => view! {
                            <PropDetailView prop=p />
                        }.into_any(),
                        None => view! {
                            <Card>
                                <p class="text-error">"Prop not found or you don't have permission to view."</p>
                            </Card>
                        }.into_any()
                    }
                })
            }}
        </Suspense>
    }
}

#[component]
fn PropDetailView(prop: PropDetail) -> impl IntoView {
    let asset_url = format!("/assets/{}", prop.asset_path);
    let tags_display = if prop.tags.is_empty() {
        "None".to_string()
    } else {
        prop.tags.join(", ")
    };

    view! {
        <Card>
            <div class="prop-header" style="display: flex; gap: 24px; align-items: flex-start;">
                <div class="prop-preview" style="flex-shrink: 0;">
                    <img
                        src=asset_url
                        alt=prop.name.clone()
                        style="width: 128px; height: 128px; object-fit: contain; border: 1px solid var(--color-border, #334155); border-radius: 8px; background: var(--color-bg-tertiary, #0f172a);"
                    />
                </div>
                <div class="prop-info" style="flex: 1;">
                    <h2 style="margin: 0 0 8px 0;">{prop.name.clone()}</h2>
                    <p class="text-muted" style="margin: 0;"><code>{prop.slug.clone()}</code></p>
                    {prop.description.clone().map(|desc| view! {
                        <p style="margin-top: 12px; color: var(--color-text-secondary, #94a3b8);">{desc}</p>
                    })}
                </div>
            </div>
        </Card>

        <Card title="Details">
            <DetailGrid>
                <DetailItem label="Prop ID">
                    <code>{prop.id.clone()}</code>
                </DetailItem>
                <DetailItem label="Tags">
                    {tags_display}
                </DetailItem>
                <DetailItem label="Default Layer">
                    {prop.default_layer.clone().unwrap_or_else(|| "Not set".to_string())}
                </DetailItem>
                <DetailItem label="Default Position">
                    {match prop.default_position {
                        Some(pos) => {
                            let labels = ["Top-Left", "Top-Center", "Top-Right",
                                         "Middle-Left", "Center", "Middle-Right",
                                         "Bottom-Left", "Bottom-Center", "Bottom-Right"];
                            labels.get(pos as usize).map(|s| s.to_string())
                                .unwrap_or_else(|| format!("{}", pos))
                        },
                        None => "Not set".to_string(),
                    }}
                </DetailItem>
                <DetailItem label="Default Scale">
                    {format!("{}%", (prop.default_scale * 100.0) as i32)}
                </DetailItem>
                <DetailItem label="Status">
                    {if prop.is_active {
                        view! { <span class="status-badge status-active">"Active"</span> }.into_any()
                    } else {
                        view! { <span class="status-badge status-inactive">"Inactive"</span> }.into_any()
                    }}
                </DetailItem>
            </DetailGrid>
        </Card>

        <Card title="Properties">
            <DetailGrid>
                <DetailItem label="Unique">
                    {if prop.is_unique { "Yes" } else { "No" }}
                </DetailItem>
                <DetailItem label="Transferable">
                    {if prop.is_transferable { "Yes" } else { "No" }}
                </DetailItem>
                <DetailItem label="Portable">
                    {if prop.is_portable { "Yes" } else { "No" }}
                </DetailItem>
            </DetailGrid>
        </Card>

        <Card title="Availability">
            <DetailGrid>
                <DetailItem label="Available From">
                    {prop.available_from.clone().unwrap_or_else(|| "Always".to_string())}
                </DetailItem>
                <DetailItem label="Available Until">
                    {prop.available_until.clone().unwrap_or_else(|| "No end date".to_string())}
                </DetailItem>
                <DetailItem label="Created">
                    {prop.created_at.clone()}
                </DetailItem>
                <DetailItem label="Updated">
                    {prop.updated_at.clone()}
                </DetailItem>
            </DetailGrid>
        </Card>
    }
}