use leptos::prelude::*;

/// Example component showcasing DaisyUI components
#[component]
pub fn DaisyExample() -> impl IntoView {
    let (count, set_count) = signal(0);
    let (modal_open, set_modal_open) = signal(false);

    view! {
        <div class="container mx-auto p-6">
            <h1 class="text-4xl font-bold text-center mb-8">"DaisyUI Components Example"</h1>

            <DaisyButtons/>
            <DaisyCards/>
            <DaisyForms count=count set_count=set_count/>
            <DaisyAlerts/>
            <DaisyBadges/>
            <DaisyModal modal_open=modal_open set_modal_open=set_modal_open/>
            <DaisyProgress/>
            <DaisyTabs/>
            <DaisyLoading/>
        </div>
    }
}

#[component]
fn DaisyButtons() -> impl IntoView {
    view! {
        <div class="mb-8">
            <h2 class="text-2xl font-semibold mb-4">"Buttons"</h2>
            <div class="flex flex-wrap gap-2">
                <button class="btn">"Default"</button>
                <button class="btn btn-primary">"Primary"</button>
                <button class="btn btn-secondary">"Secondary"</button>
                <button class="btn btn-accent">"Accent"</button>
                <button class="btn btn-info">"Info"</button>
                <button class="btn btn-success">"Success"</button>
                <button class="btn btn-warning">"Warning"</button>
                <button class="btn btn-error">"Error"</button>
            </div>
        </div>
    }
}

#[component]
fn DaisyCards() -> impl IntoView {
    view! {
        <div class="mb-8">
            <h2 class="text-2xl font-semibold mb-4">"Cards"</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title">"Card Title"</h2>
                        <p>"This is a simple card with some content."</p>
                        <div class="card-actions justify-end">
                            <button class="btn btn-primary">"Action"</button>
                        </div>
                    </div>
                </div>
                <div class="card bg-primary text-primary-content">
                    <div class="card-body">
                        <h2 class="card-title">"Colored Card"</h2>
                        <p>"This card has a primary color background."</p>
                        <div class="card-actions justify-end">
                            <button class="btn">"Action"</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
}

#[component]
fn DaisyForms(count: ReadSignal<i32>, set_count: WriteSignal<i32>) -> impl IntoView {
    view! {
        <div class="mb-8">
            <h2 class="text-2xl font-semibold mb-4">"Forms & Interactive Counter"</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h3 class="card-title">"Form Elements"</h3>
                        <div class="form-control w-full max-w-xs">
                            <label class="label">
                                <span class="label-text">"What is your name?"</span>
                            </label>
                            <input type="text" placeholder="Type here" class="input input-bordered w-full max-w-xs" />
                        </div>
                        <div class="form-control">
                            <label class="label cursor-pointer">
                                <span class="label-text">"Remember me"</span>
                                <input type="checkbox" class="checkbox" />
                            </label>
                        </div>
                    </div>
                </div>
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h3 class="card-title">"Interactive Counter"</h3>
                        <div class="text-center">
                            <div class="text-6xl font-bold text-primary mb-4">
                                {move || count.get()}
                            </div>
                            <div class="flex justify-center gap-2">
                                <button
                                    class="btn btn-primary"
                                    on:click=move |_| set_count.update(|c| *c += 1)
                                >
                                    "+"
                                </button>
                                <button
                                    class="btn btn-secondary"
                                    on:click=move |_| set_count.update(|c| *c -= 1)
                                >
                                    "-"
                                </button>
                                <button
                                    class="btn btn-accent"
                                    on:click=move |_| set_count.set(0)
                                >
                                    "Reset"
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
}

#[component]
fn DaisyAlerts() -> impl IntoView {
    view! {
        <div class="mb-8">
            <h2 class="text-2xl font-semibold mb-4">"Alerts"</h2>
            <div class="space-y-4">
                <div class="alert alert-info">
                    <span>"New software update available."</span>
                </div>
                <div class="alert alert-success">
                    <span>"Your purchase has been confirmed!"</span>
                </div>
                <div class="alert alert-warning">
                    <span>"Warning: Invalid email address!"</span>
                </div>
                <div class="alert alert-error">
                    <span>"Error! Task failed successfully."</span>
                </div>
            </div>
        </div>
    }
}

#[component]
fn DaisyBadges() -> impl IntoView {
    view! {
        <div class="mb-8">
            <h2 class="text-2xl font-semibold mb-4">"Badges"</h2>
            <div class="flex flex-wrap gap-2">
                <div class="badge">"default"</div>
                <div class="badge badge-primary">"primary"</div>
                <div class="badge badge-secondary">"secondary"</div>
                <div class="badge badge-accent">"accent"</div>
                <div class="badge badge-info">"info"</div>
                <div class="badge badge-success">"success"</div>
                <div class="badge badge-warning">"warning"</div>
                <div class="badge badge-error">"error"</div>
            </div>
        </div>
    }
}

#[component]
fn DaisyModal(modal_open: ReadSignal<bool>, set_modal_open: WriteSignal<bool>) -> impl IntoView {
    view! {
        <div class="mb-8">
            <h2 class="text-2xl font-semibold mb-4">"Modal"</h2>
            <button
                class="btn btn-primary"
                on:click=move |_| set_modal_open.set(true)
            >
                "Open Modal"
            </button>

            <div class=move || format!("modal {}", if modal_open.get() { "modal-open" } else { "" })>
                <div class="modal-box">
                    <h3 class="font-bold text-lg">"Hello there!"</h3>
                    <p class="py-4">"This is a modal dialog box created with DaisyUI."</p>
                    <div class="modal-action">
                        <button
                            class="btn btn-primary"
                            on:click=move |_| set_modal_open.set(false)
                        >
                            "Close"
                        </button>
                    </div>
                </div>
            </div>
        </div>
    }
}

#[component]
fn DaisyProgress() -> impl IntoView {
    view! {
        <div class="mb-8">
            <h2 class="text-2xl font-semibold mb-4">"Progress"</h2>
            <div class="space-y-4">
                <progress class="progress w-56" value="0" max="100"></progress>
                <progress class="progress progress-primary w-56" value="25" max="100"></progress>
                <progress class="progress progress-secondary w-56" value="50" max="100"></progress>
                <progress class="progress progress-accent w-56" value="75" max="100"></progress>
                <progress class="progress progress-success w-56" value="100" max="100"></progress>
            </div>
        </div>
    }
}

#[component]
fn DaisyTabs() -> impl IntoView {
    view! {
        <div class="mb-8">
            <h2 class="text-2xl font-semibold mb-4">"Tabs"</h2>
            <div class="tabs">
                <a class="tab tab-lifted tab-active">"Tab 1"</a>
                <a class="tab tab-lifted">"Tab 2"</a>
                <a class="tab tab-lifted">"Tab 3"</a>
            </div>
        </div>
    }
}

#[component]
fn DaisyLoading() -> impl IntoView {
    view! {
        <div class="mb-8">
            <h2 class="text-2xl font-semibold mb-4">"Loading"</h2>
            <div class="flex flex-wrap gap-4">
                <span class="loading loading-spinner loading-xs"></span>
                <span class="loading loading-spinner loading-sm"></span>
                <span class="loading loading-spinner loading-md"></span>
                <span class="loading loading-spinner loading-lg"></span>
            </div>
            <div class="flex flex-wrap gap-4 mt-4">
                <span class="loading loading-dots loading-xs"></span>
                <span class="loading loading-dots loading-sm"></span>
                <span class="loading loading-dots loading-md"></span>
                <span class="loading loading-dots loading-lg"></span>
            </div>
        </div>
    }
}
