//! Home page component

use crate::components::loading::Loading;
use leptos::prelude::*;

/// Home page component
///
/// The main dashboard view showing project overview and recent activity.
/// This is the landing page of the application.
#[component]
pub fn HomePage() -> impl IntoView {
    // Signal to track loading state (for future API integration)
    let (loading, _set_loading) = signal(false);

    view! {
        <div class="space-y-6">
            <div class="dash-card">
                <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
                    "Welcome to Syntaxis Dashboard"
                </h2>
                <p class="text-gray-600 dark:text-gray-400">
                    "Monitor and manage your projects in real-time"
                </p>
            </div>

            <Show
                when=move || loading.get()
                fallback=|| view! {
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        <StatCard
                            title="Active Projects"
                            value="0"
                            icon="📊"
                            color="blue"
                        />
                        <StatCard
                            title="Completed"
                            value="0"
                            icon="✅"
                            color="green"
                        />
                        <StatCard
                            title="In Progress"
                            value="0"
                            icon="🔄"
                            color="yellow"
                        />
                    </div>
                }
            >
                <Loading message="Loading dashboard..."/>
            </Show>

            <div class="dash-card">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
                    "Recent Activity"
                </h3>
                <p class="text-gray-600 dark:text-gray-400 text-center py-8">
                    "No recent activity to display"
                </p>
            </div>

            <div class="dash-card bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-500">
                <h3 class="text-lg font-semibold text-blue-900 dark:text-blue-300 mb-2">
                    "Getting Started"
                </h3>
                <ul class="space-y-2 text-gray-700 dark:text-gray-300">
                    <li>"• Dashboard foundation is ready (Phase 1 complete)"</li>
                    <li>"• API integration coming in Phase 2"</li>
                    <li>"• Real-time updates via WebSocket in Phase 3"</li>
                </ul>
            </div>
        </div>
    }
}

/// Statistics card component
///
/// Displays a single statistic with an icon and colored accent.
#[component]
fn StatCard(
    /// Card title
    title: &'static str,
    /// Main value to display
    value: &'static str,
    /// Emoji icon
    icon: &'static str,
    /// Color theme (blue, green, yellow, etc.)
    color: &'static str,
) -> impl IntoView {
    let border_class = format!("border-l-4 border-{}-500", color);
    let icon_bg_class = format!("bg-{}-100 dark:bg-{}-900/50", color, color);

    view! {
        <div class=format!("dash-card {}", border_class)>
            <div class="flex items-center justify-between">
                <div class="flex-1">
                    <p class="text-sm font-medium text-gray-600 dark:text-gray-400">
                        {title}
                    </p>
                    <p class="text-3xl font-bold text-gray-900 dark:text-white mt-2">
                        {value}
                    </p>
                </div>
                <div class=format!("text-4xl p-3 rounded-lg {}", icon_bg_class)>
                    {icon}
                </div>
            </div>
        </div>
    }
}