use super::types::*;
use wasm_bindgen::JsCast;
use web_sys::{HtmlInputElement, HtmlTextAreaElement};
use yew::prelude::*;

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

    let on_attendees_input = {
        let data = data.clone();
        Callback::from(move |e: InputEvent| {
            if let Some(target) = e.target() {
                if let Ok(textarea) = target.dyn_into::<HtmlTextAreaElement>() {
                    let mut event_data = (*data).clone();
                    event_data.attendees = textarea.value();
                    data.set(event_data);
                }
            }
        })
    };

    html! {
        <div class="tab-panel">
            <div class="form-group">
                <label for="event-organizer">{"Organizer"}</label>
                <input
                    type="email"
                    id="event-organizer"
                    class="form-input"
                    value={data.organizer.clone()}
                    oninput={on_organizer_input}
                    placeholder="organizer@example.com"
                />
                <p class="form-help-text">{"Email address of the person organizing this event"}</p>
            </div>

            <div class="form-group">
                <label for="event-attendees">{"Attendees"}</label>
                <textarea
                    id="event-attendees"
                    class="form-input"
                    value={data.attendees.clone()}
                    oninput={on_attendees_input}
                    placeholder="attendee1@example.com, attendee2@example.com, attendee3@example.com"
                    rows="4"
                ></textarea>
                <p class="form-help-text">{"Enter attendee email addresses separated by commas"}</p>
            </div>

            <div class="people-info">
                <h5>{"Invitation & Response Management"}</h5>
                <ul>
                    <li>{"Invitations are sent automatically when the event is saved"}</li>
                    <li>{"Attendees can respond with Accept, Decline, or Tentative"}</li>
                    <li>{"Response tracking follows RFC 5545 PARTSTAT standards"}</li>
                    <li>{"Delegation and role management available after event creation"}</li>
                </ul>

                <div class="people-validation">
                    <h6>{"Email Validation"}</h6>
                    <p>{"Email addresses will be validated when you save the event. Invalid emails will be highlighted and must be corrected before proceeding."}</p>
                </div>
            </div>

            <div class="attendee-roles-preview">
                <h5>{"Advanced Attendee Features"}</h5>
                <div class="role-examples">
                    <div class="role-item">
                        <strong>{"Required Participant:"}</strong>
                        <span>{"Must attend for meeting to proceed"}</span>
                    </div>
                    <div class="role-item">
                        <strong>{"Optional Participant:"}</strong>
                        <span>{"Attendance welcome but not required"}</span>
                    </div>
                    <div class="role-item">
                        <strong>{"Resource:"}</strong>
                        <span>{"Meeting room, equipment, or facility"}</span>
                    </div>
                    <div class="role-item">
                        <strong>{"Non-Participant:"}</strong>
                        <span>{"For information only"}</span>
                    </div>
                </div>
                <p class="form-help-text">{"Advanced role assignment and RSVP management will be available in future versions"}</p>
            </div>
        </div>
    }
}