use super::types::*;
use wasm_bindgen::JsCast;
use web_sys::HtmlInputElement;
use yew::prelude::*;

#[function_component(CategoriesTab)]
pub fn categories_tab(props: &TabProps) -> Html {
    let data = &props.data;
    
    let on_categories_input = {
        let data = data.clone();
        Callback::from(move |e: InputEvent| {
            if let Some(target) = e.target() {
                if let Ok(input) = target.dyn_into::<HtmlInputElement>() {
                    let mut event_data = (*data).clone();
                    event_data.categories = input.value();
                    data.set(event_data);
                }
            }
        })
    };

    let add_category = {
        let data = data.clone();
        move |category: &str| {
            let data = data.clone();
            let category = category.to_string();
            Callback::from(move |_| {
                let mut event_data = (*data).clone();
                if event_data.categories.is_empty() {
                    event_data.categories = category.clone();
                } else {
                    event_data.categories = format!("{}, {}", event_data.categories, category);
                }
                data.set(event_data);
            })
        }
    };

    html! {
        <div class="tab-panel">
            <div class="form-group">
                <label for="event-categories">{"Categories"}</label>
                <input
                    type="text"
                    id="event-categories"
                    class="form-input"
                    value={data.categories.clone()}
                    oninput={on_categories_input}
                    placeholder="work, meeting, personal, project, urgent"
                />
                <p class="form-help-text">{"Enter categories separated by commas to help organize and filter your events"}</p>
            </div>

            <div class="categories-suggestions">
                <h5>{"Common Categories"}</h5>
                <div class="category-tags">
                    <button type="button" class="category-tag" onclick={add_category("work")}>{"work"}</button>
                    <button type="button" class="category-tag" onclick={add_category("meeting")}>{"meeting"}</button>
                    <button type="button" class="category-tag" onclick={add_category("personal")}>{"personal"}</button>
                    <button type="button" class="category-tag" onclick={add_category("project")}>{"project"}</button>
                    <button type="button" class="category-tag" onclick={add_category("urgent")}>{"urgent"}</button>
                    <button type="button" class="category-tag" onclick={add_category("social")}>{"social"}</button>
                    <button type="button" class="category-tag" onclick={add_category("travel")}>{"travel"}</button>
                    <button type="button" class="category-tag" onclick={add_category("health")}>{"health"}</button>
                </div>
                <p class="form-help-text">{"Click to add these common categories to your event"}</p>
            </div>

            <div class="categories-info">
                <h5>{"Event Organization & Filtering"}</h5>
                <ul>
                    <li>{"Categories help organize events in calendar views"}</li>
                    <li>{"Filter events by category to focus on specific types"}</li>
                    <li>{"Categories are searchable and can be used for reporting"}</li>
                    <li>{"Multiple categories per event are fully supported"}</li>
                </ul>

                <div class="categories-examples">
                    <h6>{"Category Usage Examples"}</h6>
                    <div class="category-example">
                        <strong>{"Work Events:"}</strong>
                        <span>{"work, meeting, project, urgent, deadline"}</span>
                    </div>
                    <div class="category-example">
                        <strong>{"Personal Events:"}</strong>
                        <span>{"personal, family, health, social, travel"}</span>
                    </div>
                    <div class="category-example">
                        <strong>{"Mixed Events:"}</strong>
                        <span>{"work, travel, client, important"}</span>
                    </div>
                    <p class="form-help-text">{"Categories follow RFC 5545 CATEGORIES property standards"}</p>
                </div>
            </div>
        </div>
    }
}