//! Server avatars list page component.

use leptos::prelude::*;

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

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

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

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

    view! {
        <PageHeader title="Server Avatars" subtitle="Manage pre-configured avatar templates">
            <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/avatars/new" class="btn btn-primary">"Create Avatar"</a>
            </div>
        </PageHeader>

        <Card>
            <Suspense fallback=|| view! { <p>"Loading avatars..."</p> }>
                {move || {
                    avatars.get().map(|maybe_avatars: Option<Vec<AvatarSummary>>| {
                        match maybe_avatars {
                            Some(avatar_list) if !avatar_list.is_empty() => {
                                if view_mode.get() == ViewMode::Table {
                                    view! { <AvatarsTable avatars=avatar_list.clone() /> }.into_any()
                                } else {
                                    view! { <AvatarsGrid avatars=avatar_list.clone() /> }.into_any()
                                }
                            }
                            _ => view! {
                                <EmptyState
                                    message="No server avatars found."
                                    action_href="/admin/avatars/new"
                                    action_text="Create Avatar"
                                />
                            }.into_any()
                        }
                    })
                }}
            </Suspense>
        </Card>
    }
}

/// Table view for avatars.
#[component]
fn AvatarsTable(avatars: Vec<AvatarSummary>) -> impl IntoView {
    view! {
        <div class="table-container">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>"Thumbnail"</th>
                        <th>"Name"</th>
                        <th>"Slug"</th>
                        <th>"Public"</th>
                        <th>"Active"</th>
                        <th>"Created"</th>
                    </tr>
                </thead>
                <tbody>
                    {avatars.into_iter().map(|avatar| {
                        let thumbnail_url = avatar.thumbnail_path.clone()
                            .map(|p| format!("/assets/{}", p));
                        view! {
                            <tr>
                                <td>
                                    {thumbnail_url.map(|url| view! {
                                        <img
                                            src=url
                                            alt=avatar.name.clone()
                                            class="avatar-thumbnail"
                                            style="width: 48px; height: 48px; object-fit: contain; border-radius: 4px;"
                                        />
                                    })}
                                </td>
                                <td>
                                    <a href=format!("/admin/avatars/{}", avatar.id) class="table-link">
                                        {avatar.name}
                                    </a>
                                </td>
                                <td><code>{avatar.slug}</code></td>
                                <td>
                                    {if avatar.is_public {
                                        view! { <span class="status-badge status-active">"Public"</span> }.into_any()
                                    } else {
                                        view! { <span class="status-badge status-inactive">"Private"</span> }.into_any()
                                    }}
                                </td>
                                <td>
                                    {if avatar.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>{avatar.created_at}</td>
                            </tr>
                        }
                    }).collect_view()}
                </tbody>
            </table>
        </div>
    }
}

/// Grid view for avatars with thumbnails.
#[component]
fn AvatarsGrid(avatars: Vec<AvatarSummary>) -> impl IntoView {
    view! {
        <div class="avatars-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; padding: 16px;">
            {avatars.into_iter().map(|avatar| {
                let thumbnail_url = avatar.thumbnail_path.clone()
                    .map(|p| format!("/assets/{}", p))
                    .unwrap_or_else(|| "/static/placeholder-avatar.svg".to_string());
                let avatar_url = format!("/admin/avatars/{}", avatar.id);
                let avatar_name_for_title = avatar.name.clone();
                let avatar_name_for_alt = avatar.name.clone();
                let avatar_name_for_label = avatar.name;
                let is_active = avatar.is_active;
                let is_public = avatar.is_public;
                view! {
                    <a
                        href=avatar_url
                        class="avatars-grid-item"
                        style="display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; padding: 12px; border-radius: 8px; background: var(--bg-secondary, #1e293b); transition: background 0.2s; position: relative;"
                        title=avatar_name_for_title
                    >
                        <img
                            src=thumbnail_url
                            alt=avatar_name_for_alt
                            style="width: 80px; height: 80px; object-fit: contain; border-radius: 4px;"
                        />
                        <span style="font-size: 0.75rem; margin-top: 8px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;">
                            {avatar_name_for_label}
                        </span>
                        <div style="display: flex; gap: 4px; margin-top: 4px;">
                            {if is_public {
                                view! { <span class="status-badge status-active" style="font-size: 0.6rem; padding: 2px 4px;">"Public"</span> }.into_any()
                            } else {
                                view! { <span class="status-badge status-inactive" style="font-size: 0.6rem; padding: 2px 4px;">"Private"</span> }.into_any()
                            }}
                            {if !is_active {
                                view! { <span class="status-badge status-inactive" style="font-size: 0.6rem; padding: 2px 4px;">"Inactive"</span> }.into_any()
                            } else {
                                view! {}.into_any()
                            }}
                        </div>
                    </a>
                }
            }).collect_view()}
        </div>
    }
}
