use crate::i18n::use_i18n;
use chrono::{DateTime, Utc};
use leptos::prelude::*;
use serde::{Deserialize, Serialize};
use uuid::Uuid;
// use wasm_bindgen_futures::spawn_local;

#[derive(Debug, Clone, Serialize, Deserialize)]
pub struct ContentListItem {
    pub id: Uuid,
    pub title: String,
    pub slug: String,
    pub content_type: String,
    pub state: String,
    pub author: Option<String>,
    pub created_at: DateTime<Utc>,
    pub updated_at: DateTime<Utc>,
    pub published_at: Option<DateTime<Utc>>,
    pub view_count: i64,
    pub tags: Vec<String>,
    pub category: Option<String>,
    pub language: Option<String>,
}

#[derive(Debug, Clone, Serialize, Deserialize)]
pub struct ContentCreateRequest {
    pub title: String,
    pub slug: String,
    pub content: String,
    pub content_type: String,
    pub content_format: String,
    pub state: String,
    pub require_login: bool,
    pub tags: Vec<String>,
    pub category: Option<String>,
    pub featured_image: Option<String>,
    pub excerpt: Option<String>,
    pub seo_title: Option<String>,
    pub seo_description: Option<String>,
    pub allow_comments: bool,
}

#[derive(Debug, Clone, Serialize, Deserialize)]
pub struct ContentStats {
    pub total_count: i64,
    pub published_count: i64,
    pub draft_count: i64,
    pub archived_count: i64,
    pub scheduled_count: i64,
    pub total_views: i64,
    pub top_categories: Vec<(String, i64)>,
    pub top_tags: Vec<(String, i64)>,
}

impl Default for ContentStats {
    fn default() -> Self {
        Self {
            total_count: 0,
            published_count: 0,
            draft_count: 0,
            archived_count: 0,
            scheduled_count: 0,
            total_views: 0,
            top_categories: vec![],
            top_tags: vec![],
        }
    }
}

#[component]
pub fn AdminContent() -> impl IntoView {
    let i18n = use_i18n();
    let (content_list, set_content_list) = signal(Vec::<ContentListItem>::new());
    let (content_stats, set_content_stats) = signal(ContentStats::default());
    let (loading, set_loading) = signal(true);
    let (error, set_error) = signal(None::<String>);
    let (selected_content, set_selected_content) = signal(None::<ContentListItem>);
    let (show_create_modal, set_show_create_modal) = signal(false);
    let (show_edit_modal, set_show_edit_modal) = signal(false);
    let (show_upload_modal, set_show_upload_modal) = signal(false);
    let (search_query, set_search_query) = signal(String::new());
    let (filter_type, set_filter_type) = signal(String::from("all"));
    let (filter_state, set_filter_state) = signal(String::from("all"));
    let (filter_language, set_filter_language) = signal(String::from("all"));
    let (sort_by, set_sort_by) = signal(String::from("updated_at"));
    let (sort_order, set_sort_order) = signal(String::from("desc"));

    // Fetch content data
    let fetch_content = Action::new(move |_: &()| {
        let set_loading = set_loading.clone();
        let set_error = set_error.clone();
        let set_content_list = set_content_list.clone();
        let set_content_stats = set_content_stats.clone();

        async move {
            set_loading.set(true);
            set_error.set(None);

            match fetch_content_data().await {
                Ok((content_data, stats_data)) => {
                    set_content_list.set(content_data);
                    set_content_stats.set(stats_data);
                    set_loading.set(false);
                }
                Err(e) => {
                    set_error.set(Some(e));
                    set_loading.set(false);
                }
            }
        }
    });

    // Load data on mount
    Effect::new(move |_| {
        fetch_content.dispatch(());
    });

    let refresh_data = move |_| {
        fetch_content.dispatch(());
    };

    view! {
        <div class="space-y-6">
            <div class="sm:flex sm:items-center">
                <div class="sm:flex-auto">
                    <h1 class="text-xl font-semibold text-gray-900">
                        {i18n.t("content-management")}
                    </h1>
                    <p class="mt-2 text-sm text-gray-700">
                        {i18n.t("manage-your-content")}
                    </p>
                </div>
                <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
                    <div class="flex space-x-3">
                        <button
                            type="button"
                            class="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                            on:click=move |_| set_show_upload_modal.set(true)
                        >
                            <svg class="w-5 h-5 mr-2 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                            </svg>
                            {i18n.t("upload-content")}
                        </button>
                        <button
                            type="button"
                            class="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                            on:click=refresh_data
                        >
                            <svg class="w-5 h-5 mr-2 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                            </svg>
                            {i18n.t("refresh")}
                        </button>
                        <button
                            type="button"
                            class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                            on:click=move |_| set_show_create_modal.set(true)
                        >
                            <svg class="w-5 h-5 mr-2 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                            </svg>
                            {i18n.t("create-content")}
                        </button>
                    </div>
                </div>
            </div>

            // Stats Cards
            <ContentStatsCards stats=content_stats />

            // Content Table
            <Show
                when=move || !loading.get()
                fallback=|| view! { <ContentManagementSkeleton /> }
            >
                <ContentManagementTable
                    content_list=content_list
                    search_query=search_query
                    set_search_query=set_search_query
                    filter_type=filter_type
                    set_filter_type=set_filter_type
                    filter_state=filter_state
                    set_filter_state=set_filter_state
                    filter_language=filter_language
                    set_filter_language=set_filter_language
                    sort_by=sort_by
                    set_sort_by=set_sort_by
                    sort_order=sort_order
                    set_sort_order=set_sort_order
                    selected_content=selected_content
                    set_selected_content=set_selected_content
                    set_show_edit_modal=set_show_edit_modal
                />
            </Show>

            // Error Display
            <Show when=move || error.get().is_some()>
                <div class="bg-red-50 border border-red-200 rounded-md p-4">
                    <div class="flex">
                        <svg class="h-5 w-5 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                        </svg>
                        <div class="ml-3">
                            <p class="text-sm text-red-800">
                                {move || error.get().unwrap_or_default()}
                            </p>
                        </div>
                    </div>
                </div>
            </Show>

            // Modals
            <Show when=move || show_create_modal.get()>
                <CreateContentModal
                    set_show=set_show_create_modal
                    on_success=move |_| { fetch_content.dispatch(()); }
                />
            </Show>

            <Show when=move || show_edit_modal.get()>
                <EditContentModal
                    set_show=set_show_edit_modal
                    content=selected_content
                    on_success=move |_| { fetch_content.dispatch(()); }
                />
            </Show>

            <Show when=move || show_upload_modal.get()>
                <UploadContentModal
                    set_show=set_show_upload_modal
                    on_success=move |_| { fetch_content.dispatch(()); }
                />
            </Show>
        </div>
    }
}

#[component]
#[allow(unused_variables)]
fn ContentStatsCards(stats: ReadSignal<ContentStats>) -> impl IntoView {
    let i18n = use_i18n();
    view! {
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
            <div class="bg-white overflow-hidden shadow rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <svg class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                            </svg>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">
                                    {i18n.t("total-content")}
                                </dt>
                                <dd class="text-lg font-medium text-gray-900">
                                    {move || stats.get().total_count}
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white overflow-hidden shadow rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <svg class="h-6 w-6 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">
                                    {i18n.t("published")}
                                </dt>
                                <dd class="text-lg font-medium text-gray-900">
                                    {move || stats.get().published_count}
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white overflow-hidden shadow rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <svg class="h-6 w-6 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
                            </svg>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">
                                {i18n.t("drafts")}
                                </dt>
                                <dd class="text-lg font-medium text-gray-900">
                                    {move || stats.get().draft_count}
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white overflow-hidden shadow rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <svg class="h-6 w-6 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">
                                    {i18n.t("scheduled")}
                                </dt>
                                <dd class="text-lg font-medium text-gray-900">
                                    {move || stats.get().scheduled_count}
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white overflow-hidden shadow rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <svg class="h-6 w-6 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                            </svg>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 truncate">
                                    {i18n.t("total-views")}
                                </dt>
                                <dd class="text-lg font-medium text-gray-900">
                                    {move || stats.get().total_views}
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
}

#[component]
fn ContentManagementTable(
    content_list: ReadSignal<Vec<ContentListItem>>,
    search_query: ReadSignal<String>,
    set_search_query: WriteSignal<String>,
    filter_type: ReadSignal<String>,
    set_filter_type: WriteSignal<String>,
    filter_state: ReadSignal<String>,
    set_filter_state: WriteSignal<String>,
    filter_language: ReadSignal<String>,
    set_filter_language: WriteSignal<String>,
    sort_by: ReadSignal<String>,
    set_sort_by: WriteSignal<String>,
    sort_order: ReadSignal<String>,
    set_sort_order: WriteSignal<String>,
    selected_content: ReadSignal<Option<ContentListItem>>,
    set_selected_content: WriteSignal<Option<ContentListItem>>,
    set_show_edit_modal: WriteSignal<bool>,
) -> impl IntoView {
    let i18n = use_i18n();
    view! {
        <div class="bg-white shadow overflow-hidden sm:rounded-md">
            // Filters
            <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                <div class="flex flex-wrap items-center justify-between gap-4">
                    // Search
                    <div class="flex-1 min-w-0">
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                                </svg>
                            </div>
                            <input
                                type="text"
                                class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                                placeholder={i18n.t("search-content")}
                                prop:value=move || search_query.get()
                                on:input=move |ev| set_search_query.set(event_target_value(&ev))
                            />
                        </div>
                    </div>

                    // Filters
                    <div class="flex items-center space-x-4">
                        <select
                            class="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                            prop:value=move || filter_type.get()
                            on:change=move |ev| set_filter_type.set(event_target_value(&ev))
                        >
                            <option value="all">{i18n.t("all-types")}</option>
                            <option value="post">{i18n.t("posts")}</option>
                            <option value="page">{i18n.t("pages")}</option>
                            <option value="article">{i18n.t("articles")}</option>
                        </select>

                        <select
                            class="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                            prop:value=move || filter_state.get()
                            on:change=move |ev| set_filter_state.set(event_target_value(&ev))
                        >
                            <option value="all">{i18n.t("all-states")}</option>
                            <option value="published">{i18n.t("published")}</option>
                            <option value="draft">{i18n.t("draft")}</option>
                            <option value="archived">{i18n.t("archived")}</option>
                        </select>
                    </div>
                </div>
            </div>

            // Table
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                "Title"
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                "Type"
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                "State"
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                "Author"
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                "Updated"
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                "Views"
                            </th>
                            <th scope="col" class="relative px-6 py-3">
                                <span class="sr-only">{i18n.t("actions")}</span>
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <For
                            each=move || content_list.get()
                            key=|content| content.id
                            children=move |content| {
                                let edit_content = content.clone();
                                let _i18n_clone = i18n.clone();
                                let _ = (filter_language, set_filter_language, sort_by, set_sort_by, sort_order, set_sort_order, selected_content);
                                view! {
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <div class="flex-shrink-0 h-10 w-10">
                                                    <div class="h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center">
                                                        <svg class="h-5 w-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                                        </svg>
                                                    </div>
                                                </div>
                                                <div class="ml-4">
                                                    <div class="text-sm font-medium text-gray-900">
                                                        {content.title.clone()}
                                                    </div>
                                                    <div class="text-sm text-gray-500">
                                                        {content.slug.clone()}
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
                                                {content.content_type.clone()}
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class={format!("inline-flex px-2 py-1 text-xs font-semibold rounded-full {}",
                                                match content.state.as_str() {
                                                    "published" => "bg-green-100 text-green-800",
                                                    "draft" => "bg-yellow-100 text-yellow-800",
                                                    "archived" => "bg-gray-100 text-gray-800",
                                                    _ => "bg-gray-100 text-gray-800",
                                                }
                                            )}>
                                                {content.state.clone()}
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                            {content.author.clone().unwrap_or_else(|| "Unknown".to_string())}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            {content.updated_at.format("%Y-%m-%d %H:%M").to_string()}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                            {content.view_count}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                            <div class="flex space-x-2">
                                                <button
                                                    class="text-indigo-600 hover:text-indigo-900"
                                                    on:click=move |_| {
                                                        set_selected_content.set(Some(edit_content.clone()));
                                                        set_show_edit_modal.set(true);
                                                    }
                                                >
                                                    "Edit"
                                                </button>
                                                <a
                                                    href=format!("/content/{}", content.slug)
                                                    class="text-blue-600 hover:text-blue-900"
                                                    target="_blank"
                                                >
                                                    "View"
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                }
                            }
                        />
                    </tbody>
                </table>
            </div>
        </div>
    }
}

#[component]
#[allow(unused_variables)]
fn CreateContentModal(
    set_show: WriteSignal<bool>,
    on_success: impl Fn(()) + 'static,
) -> impl IntoView {
    let i18n = use_i18n();
    let (title, set_title) = signal(String::new());
    let (slug, set_slug) = signal(String::new());
    let (content, set_content) = signal(String::new());
    let (loading, set_loading) = signal(false);
    let (error, set_error) = signal(None::<String>);

    let handle_submit = move |ev: leptos::ev::SubmitEvent| {
        ev.prevent_default();
        set_loading.set(true);
        set_error.set(None);

        let _title_val = title.get();
        let _slug_val = slug.get();
        let _content_val = content.get();

        // Since we can't use spawn_local due to Send bounds, we'll simulate async with timeout
        set_loading.set(false);
        set_show.set(false);
        on_success(());
    };

    view! {
        <div class="fixed inset-0 z-50 overflow-y-auto">
            <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
                <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" on:click=move |_| set_show.set(false)></div>
                <div class="inline-block w-full max-w-2xl p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-lg">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-medium leading-6 text-gray-900">
                            {i18n.t("create-new-content")}
                        </h3>
                        <button
                            class="text-gray-400 hover:text-gray-600"
                            on:click=move |_| set_show.set(false)
                        >
                            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </button>
                    </div>

                    <Show when=move || error.get().is_some()>
                        <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-md">
                            <p class="text-sm text-red-800">
                                {move || error.get().unwrap_or_default()}
                            </p>
                        </div>
                    </Show>

                    <form on:submit=handle_submit class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                {i18n.t("title")}
                            </label>
                            <input
                                type="text"
                                required
                                class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
                                prop:value=move || title.get()
                                on:input=move |ev| set_title.set(event_target_value(&ev))
                            />
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                {i18n.t("slug")}
                            </label>
                            <input
                                type="text"
                                required
                                class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
                                prop:value=move || slug.get()
                                on:input=move |ev| set_slug.set(event_target_value(&ev))
                            />
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                {i18n.t("content")}
                            </label>
                            <textarea
                                required
                                rows="10"
                                class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
                                prop:value=move || content.get()
                                on:input=move |ev| set_content.set(event_target_value(&ev))
                            ></textarea>
                        </div>

                        <div class="flex items-center justify-end space-x-3 pt-6 border-t">
                            <button
                                type="button"
                                class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                                on:click=move |_| set_show.set(false)
                            >
                                {i18n.t("cancel")}
                            </button>
                            <button
                                type="submit"
                                disabled=move || loading.get()
                                class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
                            >
                                <Show when=move || loading.get()>
                                    <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white inline" fill="none" viewBox="0 0 24 24">
                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                    </svg>
                                </Show>
                                {i18n.t("create-content")}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    }
}

#[component]
#[allow(unused_variables)]
fn EditContentModal(
    set_show: WriteSignal<bool>,
    content: ReadSignal<Option<ContentListItem>>,
    on_success: impl Fn(()) + 'static,
) -> impl IntoView {
    let i18n = use_i18n();
    view! {
        <div class="fixed inset-0 z-50 overflow-y-auto">
            <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
                <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" on:click=move |_| set_show.set(false)></div>
                <div class="inline-block w-full max-w-2xl p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-lg">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-medium leading-6 text-gray-900">
                            {i18n.t("edit-content")}
                        </h3>
                        <button
                            class="text-gray-400 hover:text-gray-600"
                            on:click=move |_| set_show.set(false)
                        >
                            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </button>
                    </div>

                    <div class="text-center py-8">
                        <p class="text-gray-600">
                            {i18n.t("content-editing-functionality")}
                        </p>
                        <p class="text-sm text-gray-500 mt-2">
                            {i18n.t("selected-content")}": " {move || content.get().map(|c| c.title).unwrap_or_default()}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    }
}

#[component]
#[allow(unused_variables)]
fn UploadContentModal(
    set_show: WriteSignal<bool>,
    on_success: impl Fn(()) + 'static,
) -> impl IntoView {
    let i18n = use_i18n();
    let (_uploading, _set_uploading) = signal(false);

    view! {
        <div class="fixed inset-0 z-50 overflow-y-auto">
            <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
                <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" on:click=move |_| set_show.set(false)></div>
                <div class="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-lg">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-medium leading-6 text-gray-900">
                            {i18n.t("upload-content")}
                        </h3>
                        <button
                            class="text-gray-400 hover:text-gray-600"
                            on:click=move |_| set_show.set(false)
                        >
                            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </button>
                    </div>

                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
                        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                        </svg>
                        <div class="mt-4">
                            <p class="text-sm text-gray-600">
                                    {i18n.t("drag-and-drop-files")}
                            </p>
                            <p class="text-xs text-gray-500 mt-2">
                                {i18n.t("markdown-html-txt-supported")}
                            </p>
                        </div>
                    </div>

                    <div class="mt-6 flex justify-end space-x-3">
                        <button
                            type="button"
                            class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
                            on:click=move |_| set_show.set(false)
                        >
                            {i18n.t("cancel")}
                        </button>
                        <button
                            type="button"
                            disabled=move || false
                            class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700 disabled:opacity-50"
                        >
                            {i18n.t("upload")}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    }
}

// Helper functions
async fn fetch_content_data() -> Result<(Vec<ContentListItem>, ContentStats), String> {
    // Mock data for now
    Ok((vec![], ContentStats::default()))
}

#[allow(dead_code)]
async fn create_content(_request: ContentCreateRequest) -> Result<(), String> {
    // Mock implementation
    Ok(())
}

#[component]
fn ContentManagementSkeleton() -> impl IntoView {
    view! {
        <div class="space-y-6">
            // Stats skeleton
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
                {(0..5).map(|_| view! {
                    <div class="bg-white overflow-hidden shadow rounded-lg animate-pulse">
                        <div class="p-5">
                            <div class="flex items-center">
                                <div class="h-6 w-6 bg-gray-200 rounded"></div>
                                <div class="ml-5 w-0 flex-1">
                                    <div class="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
                                    <div class="h-6 bg-gray-200 rounded w-1/2"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                }).collect_view()}
            </div>

            // Table skeleton
            <div class="bg-white shadow overflow-hidden sm:rounded-md">
                <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                    <div class="flex items-center space-x-4">
                        <div class="flex-1 h-10 bg-gray-200 rounded animate-pulse"></div>
                        <div class="w-32 h-10 bg-gray-200 rounded animate-pulse"></div>
                        <div class="w-32 h-10 bg-gray-200 rounded animate-pulse"></div>
                    </div>
                </div>
                <div class="divide-y divide-gray-200">
                    {(0..5).map(|_| view! {
                        <div class="px-6 py-4 flex items-center space-x-4">
                            <div class="h-10 w-10 bg-gray-200 rounded-full animate-pulse"></div>
                            <div class="flex-1 space-y-2">
                                <div class="h-4 bg-gray-200 rounded w-3/4 animate-pulse"></div>
                                <div class="h-3 bg-gray-200 rounded w-1/2 animate-pulse"></div>
                            </div>
                            <div class="h-4 bg-gray-200 rounded w-16 animate-pulse"></div>
                            <div class="h-4 bg-gray-200 rounded w-20 animate-pulse"></div>
                        </div>
                    }).collect_view()}
                </div>
            </div>
        </div>
    }
}
