//! Props list page component.

use leptos::prelude::*;

use crate::components::{Card, EmptyState, PageHeader};
use crate::hooks::use_fetch;
use crate::models::PropSummary;

/// View mode for props listing.
#[derive(Clone, Copy, PartialEq, Eq)]
pub enum ViewMode {
    Table,
    Grid,
}

/// Props page component with table and grid views.
#[component]
pub fn PropsPage() -> impl IntoView {
    let (view_mode, set_view_mode) = signal(ViewMode::Table);

    let props = use_fetch::<Vec<PropSummary>>(|| "/api/admin/props".to_string());

    view! {
        <PageHeader title="All Props" subtitle="Manage server props and avatar items">
            <div class="flex gap-2">
                <button
                    type="button"
                    class=move || if view_mode.get() == ViewMode::Table {
                        "btn btn-primary"
                    } else {
                        "btn btn-secondary"
                    }
                    on:click=move |_| set_view_mode.set(ViewMode::Table)
                >
                    "Table"
                </button>
                <button
                    type="button"
                    class=move || if view_mode.get() == ViewMode::Grid {
                        "btn btn-primary"
                    } else {
                        "btn btn-secondary"
                    }
                    on:click=move |_| set_view_mode.set(ViewMode::Grid)
                >
                    "Grid"
                </button>
                <a href="/admin/props/new" class="btn btn-primary">"Create Prop"</a>
            </div>
        </PageHeader>

        <Card>
            <Suspense fallback=|| view! { <p>"Loading props..."</p> }>
                {move || {
                    props.get().map(|maybe_props: Option<Vec<PropSummary>>| {
                        match maybe_props {
                            Some(prop_list) if !prop_list.is_empty() => {
                                if view_mode.get() == ViewMode::Table {
                                    view! { <PropsTable props=prop_list.clone() /> }.into_any()
                                } else {
                                    view! { <PropsGrid props=prop_list.clone() /> }.into_any()
                                }
                            }
                            _ => view! {
                                <EmptyState
                                    message="No props found."
                                    action_href="/admin/props/new"
                                    action_text="Create Prop"
                                />
                            }.into_any()
                        }
                    })
                }}
            </Suspense>
        </Card>
    }
}

/// Table view for props.
#[component]
fn PropsTable(props: Vec<PropSummary>) -> impl IntoView {
    view! {
        <div class="table-container">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>"Preview"</th>
                        <th>"Name"</th>
                        <th>"Slug"</th>
                        <th>"Layer"</th>
                        <th>"Active"</th>
                        <th>"Created"</th>
                    </tr>
                </thead>
                <tbody>
                    {props.into_iter().map(|prop| {
                        let asset_url = format!("/assets/{}", prop.asset_path);
                        view! {
                            <tr>
                                <td>
                                    <img
                                        src=asset_url
                                        alt=prop.name.clone()
                                        class="prop-thumbnail"
                                        style="width: 32px; height: 32px; object-fit: contain;"
                                    />
                                </td>
                                <td>
                                    <a href=format!("/admin/props/{}", prop.id) class="table-link">
                                        {prop.name}
                                    </a>
                                </td>
                                <td><code>{prop.slug}</code></td>
                                <td>
                                    {prop.default_layer.map(|l| l.to_string()).unwrap_or_else(|| "-".to_string())}
                                </td>
                                <td>
                                    {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()
                                    }}
                                </td>
                                <td>{prop.created_at}</td>
                            </tr>
                        }
                    }).collect_view()}
                </tbody>
            </table>
        </div>
    }
}

/// Grid view for props with 64x64 thumbnails.
#[component]
fn PropsGrid(props: Vec<PropSummary>) -> impl IntoView {
    view! {
        <div class="props-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 16px; padding: 16px;">
            {props.into_iter().map(|prop| {
                let asset_url = format!("/assets/{}", prop.asset_path);
                let prop_url = format!("/admin/props/{}", prop.id);
                let prop_name_for_title = prop.name.clone();
                let prop_name_for_alt = prop.name.clone();
                let prop_name_for_label = prop.name;
                view! {
                    <a
                        href=prop_url
                        class="props-grid-item"
                        style="display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; padding: 8px; border-radius: 8px; background: var(--bg-secondary, #1e293b); transition: background 0.2s;"
                        title=prop_name_for_title
                    >
                        <img
                            src=asset_url
                            alt=prop_name_for_alt
                            style="width: 64px; height: 64px; object-fit: contain;"
                        />
                        <span style="font-size: 0.75rem; margin-top: 4px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;">
                            {prop_name_for_label}
                        </span>
                    </a>
                }
            }).collect_view()}
        </div>
    }
}
