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

#[function_component(LocationTab)]
pub fn location_tab(props: &TabProps) -> Html {
    let data = &props.data;
    
    let on_location_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.location = input.value();
                    data.set(event_data);
                }
            }
        })
    };

    let set_location = {
        let data = data.clone();
        move |location: &str| {
            let data = data.clone();
            let location = location.to_string();
            Callback::from(move |_| {
                let mut event_data = (*data).clone();
                event_data.location = location.clone();
                data.set(event_data);
            })
        }
    };

    html! {
        <div class="tab-panel">
            <div class="form-group">
                <label for="event-location-detailed">{"Event Location"}</label>
                <input
                    type="text"
                    id="event-location-detailed"
                    class="form-input"
                    value={data.location.clone()}
                    oninput={on_location_input}
                    placeholder="Conference Room A, 123 Main St, City, State 12345"
                />
                <p class="form-help-text">{"Enter the full address or location description for the event"}</p>
            </div>

            <div class="location-suggestions">
                <h5>{"Common Locations"}</h5>
                <div class="location-tags">
                    <button type="button" class="location-tag" onclick={set_location("Conference Room")}>{"Conference Room"}</button>
                    <button type="button" class="location-tag" onclick={set_location("Online Meeting")}>{"Online Meeting"}</button>
                    <button type="button" class="location-tag" onclick={set_location("Main Office")}>{"Main Office"}</button>
                    <button type="button" class="location-tag" onclick={set_location("Client Site")}>{"Client Site"}</button>
                    <button type="button" class="location-tag" onclick={set_location("Home Office")}>{"Home Office"}</button>
                    <button type="button" class="location-tag" onclick={set_location("Remote")}>{"Remote"}</button>
                </div>
                <p class="form-help-text">{"Click to quickly set common location types"}</p>
            </div>

            <div class="location-info">
                <h5>{"Location Features & Integration"}</h5>
                <ul>
                    <li>{"Location information is included in calendar invitations"}</li>
                    <li>{"Supports both physical addresses and virtual meeting links"}</li>
                    <li>{"Compatible with mapping and navigation applications"}</li>
                    <li>{"Room booking integration available for enterprise setups"}</li>
                </ul>

                <div class="geo-section">
                    <h6>{"Geographic Coordinates (Advanced)"}</h6>
                    <p>{"Future versions will support:"}</p>
                    <div class="geo-features">
                        <div class="geo-item">
                            <strong>{"GPS Coordinates:"}</strong>
                            <span>{"Precise latitude/longitude positioning"}</span>
                        </div>
                        <div class="geo-item">
                            <strong>{"Map Integration:"}</strong>
                            <span>{"Embedded maps in event details"}</span>
                        </div>
                        <div class="geo-item">
                            <strong>{"Travel Time:"}</strong>
                            <span>{"Automatic travel time calculation"}</span>
                        </div>
                        <div class="geo-item">
                            <strong>{"Proximity Alerts:"}</strong>
                            <span>{"Location-based notifications"}</span>
                        </div>
                    </div>
                    <p class="form-help-text">{"Advanced geographic features will be implemented in future releases"}</p>
                </div>

                <div class="virtual-meeting-section">
                    <h6>{"Virtual Meeting Integration"}</h6>
                    <div class="meeting-platforms">
                        <div class="platform-item">
                            <strong>{"Video Conferencing:"}</strong>
                            <span>{"Zoom, Teams, Google Meet links"}</span>
                        </div>
                        <div class="platform-item">
                            <strong>{"Phone Conference:"}</strong>
                            <span>{"Dial-in numbers and access codes"}</span>
                        </div>
                        <div class="platform-item">
                            <strong>{"Webinar Links:"}</strong>
                            <span>{"Live streaming and presentation URLs"}</span>
                        </div>
                    </div>
                    <p class="form-help-text">{"Paste meeting links directly in the location field for virtual events"}</p>
                </div>
            </div>
        </div>
    }
}