use super::types::*;
// Types are already imported from super::types::*
use wasm_bindgen::JsCast;
use web_sys::HtmlSelectElement;
use yew::prelude::*;

#[function_component(RemindersTab)]
pub fn reminders_tab(props: &TabProps) -> Html {
    let data = &props.data;
    
    let on_reminder_change = {
        let data = data.clone();
        Callback::from(move |e: Event| {
            if let Some(target) = e.target() {
                if let Ok(select) = target.dyn_into::<HtmlSelectElement>() {
                    let mut event_data = (*data).clone();
                    event_data.reminder = match select.value().as_str() {
                        "15min" => ReminderType::Minutes15,
                        "30min" => ReminderType::Minutes30,
                        "1hour" => ReminderType::Hour1,
                        "1day" => ReminderType::Day1,
                        "2days" => ReminderType::Days2,
                        "1week" => ReminderType::Week1,
                        _ => ReminderType::None,
                    };
                    data.set(event_data);
                }
            }
        })
    };

    html! {
        <div class="tab-panel">
            <div class="form-group">
                <label for="event-reminder-main">{"Primary Reminder"}</label>
                <select
                    id="event-reminder-main"
                    class="form-input"
                    onchange={on_reminder_change}
                >
                    <option value="none" selected={matches!(data.reminder, ReminderType::None)}>{"No reminder"}</option>
                    <option value="15min" selected={matches!(data.reminder, ReminderType::Minutes15)}>{"15 minutes before"}</option>
                    <option value="30min" selected={matches!(data.reminder, ReminderType::Minutes30)}>{"30 minutes before"}</option>
                    <option value="1hour" selected={matches!(data.reminder, ReminderType::Hour1)}>{"1 hour before"}</option>
                    <option value="1day" selected={matches!(data.reminder, ReminderType::Day1)}>{"1 day before"}</option>
                    <option value="2days" selected={matches!(data.reminder, ReminderType::Days2)}>{"2 days before"}</option>
                    <option value="1week" selected={matches!(data.reminder, ReminderType::Week1)}>{"1 week before"}</option>
                </select>
                <p class="form-help-text">{"Choose when you'd like to be reminded about this event"}</p>
            </div>

            <div class="reminder-types">
                <h5>{"Reminder & Alarm Types"}</h5>
                <div class="alarm-examples">
                    <div class="alarm-type">
                        <strong>{"Display Alarm"}</strong>
                        <p>{"Pop-up notification on your device"}</p>
                    </div>
                    <div class="alarm-type">
                        <strong>{"Email Reminder"}</strong>
                        <p>{"Email notification sent to your address"}</p>
                    </div>
                    <div class="alarm-type">
                        <strong>{"Audio Alert"}</strong>
                        <p>{"Sound notification with custom audio"}</p>
                    </div>
                    <div class="alarm-type">
                        <strong>{"SMS/Text"}</strong>
                        <p>{"Text message reminder (enterprise feature)"}</p>
                    </div>
                </div>
                <p class="form-help-text">{"Multiple alarm types follow RFC 5545 VALARM standards"}</p>
            </div>

            <div class="reminder-info">
                <h5>{"Advanced Reminder Features"}</h5>
                <ul>
                    <li>{"Multiple reminders per event with different timing"}</li>
                    <li>{"Custom reminder messages and descriptions"}</li>
                    <li>{"Recurring reminders for recurring events"}</li>
                    <li>{"Snooze and dismiss functionality"}</li>
                    <li>{"Integration with system notifications"}</li>
                </ul>

                <div class="attachments-section">
                    <h6>{"File Attachments & Documents"}</h6>
                    <p>{"Future attachment features will include:"}</p>
                    <ul>
                        <li>{"Drag-and-drop file uploads"}</li>
                        <li>{"Document preview and thumbnails"}</li>
                        <li>{"Cloud storage integration (Google Drive, OneDrive)"}</li>
                        <li>{"Version control for updated documents"}</li>
                        <li>{"Shared access permissions for attendees"}</li>
                    </ul>
                    <p class="form-help-text">{"Attachment functionality will be implemented in a future release."}</p>
                </div>
            </div>
        </div>
    }
}