// Kanban column component with drag & drop support

use leptos::prelude::*;

use crate::api::Task;
use crate::components::TaskCard;

/// Kanban column component
#[component]
pub fn KanbanColumn(
    title: &'static str,
    #[prop(default = "from-cyan-500/90 to-cyan-600/90")] color: &'static str,
    tasks: Signal<Vec<Task>>,
) -> impl IntoView {
    let (over, set_over) = signal(false);

    view! {
        <div class="flex flex-col h-full bg-black/20 rounded-lg p-2 gap-2">
            <div class="text-center py-3 px-3 rounded-full bg-white/10 border border-white/20">
                <div class="text-sm font-semibold text-white">
                    {title}
                </div>
                <div class="text-xs text-white/60 mt-1">
                    {move || tasks.get().len()} " tasks"
                </div>
            </div>

            <div
                class=move || {
                    format!(
                        "flex-1 overflow-y-auto space-y-2 p-2 rounded-lg transition-colors {}",
                        if over.get() {
                            "bg-white/10 border-2 border-cyan-400/50"
                        } else {
                            "border-2 border-transparent"
                        }
                    )
                }
                on:dragover=move |ev| {
                    ev.prevent_default();
                    set_over.set(true);
                }
                on:dragleave=move |_| {
                    set_over.set(false);
                }
                on:drop=move |ev| {
                    ev.prevent_default();
                    set_over.set(false);
                    // TODO: Handle drop in Phase 3 with state management
                }
            >
                <For
                    each=move || tasks.get()
                    key=|task| task.id.clone().unwrap_or_default()
                    children=move |task| {
                        view! {
                            <TaskCard task=task />
                        }
                    }
                />
            </div>
        </div>
    }
}
