---
import yaml from "js-yaml";
import configYaml from "../../data/storeConfig.yaml?raw";

const config = yaml.load(configYaml) as any;
const { editor_title, form } = config.ui.tables.events;
---

<!-- Event Editor Dialog -->
<dialog id="eventEditor" class="modal">
    <div class="modal-box w-11/12 max-w-4xl">
        <h3 class="font-bold text-lg mb-6">{editor_title}</h3>
        <form class="space-y-6" id="eventForm" novalidate>
            <!-- Basic Info Section -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="form-control">
                    <label class="label" for="editorEventId">
                        <span class="label-text">{form.event_id.label}</span>
                    </label>
                    <input
                        type="text"
                        id="editorEventId"
                        class="input input-bordered w-full"
                        placeholder={form.event_id.placeholder}
                        pattern="[A-Za-z0-9_-]+"
                        minlength="3"
                        maxlength="50"
                        required
                    />
                    <label class="label">
                        <span
                            class="label-text-alt text-error hidden"
                            id="eventIdError">This field is required</span
                        >
                    </label>
                </div>

                <div class="form-control">
                    <label class="label" for="editorEventCode">
                        <span class="label-text">{form.event_code.label}</span>
                    </label>
                    <input
                        type="text"
                        id="editorEventCode"
                        class="input input-bordered w-full"
                        placeholder={form.event_code.placeholder}
                        pattern="[A-Za-z0-9_-]+"
                        minlength="3"
                        maxlength="20"
                        required
                    />
                    <label class="label">
                        <span
                            class="label-text-alt text-error hidden"
                            id="eventCodeError">This field is required</span
                        >
                    </label>
                </div>
            </div>

            <div class="form-control">
                <label class="label" for="editorEventName">
                    <span class="label-text">{form.event_name.label}</span>
                </label>
                <input
                    type="text"
                    id="editorEventName"
                    class="input input-bordered w-full"
                    placeholder={form.event_name.placeholder}
                    minlength="3"
                    maxlength="100"
                    required
                />
                <label class="label">
                    <span
                        class="label-text-alt text-error hidden"
                        id="eventNameError">This field is required</span
                    >
                </label>
            </div>

            <!-- Date/Time Section -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="space-y-4">
                    <h4 class="font-medium text-sm opacity-70">
                        Start Date/Time
                    </h4>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div class="form-control">
                            <label class="label" for="editorStartDate">
                                <span class="label-text"
                                    >{form.start_date.date_label}</span
                                >
                            </label>
                            <input
                                type="date"
                                id="editorStartDate"
                                class="input input-bordered w-full"
                                placeholder={form.start_date.date_placeholder}
                                required
                            />
                            <label class="label">
                                <span
                                    class="label-text-alt text-error hidden"
                                    id="startDateError"
                                    >This field is required</span
                                >
                            </label>
                        </div>
                        <div class="form-control">
                            <label class="label" for="editorStartTime">
                                <span class="label-text"
                                    >{form.start_date.time_label}</span
                                >
                            </label>
                            <input
                                type="time"
                                id="editorStartTime"
                                class="input input-bordered w-full"
                                placeholder={form.start_date.time_placeholder}
                                required
                            />
                            <label class="label">
                                <span
                                    class="label-text-alt text-error hidden"
                                    id="startTimeError"
                                    >This field is required</span
                                >
                            </label>
                        </div>
                    </div>
                </div>

                <div class="space-y-4">
                    <h4 class="font-medium text-sm opacity-70">
                        End Date/Time
                    </h4>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div class="form-control">
                            <label class="label" for="editorEndDate">
                                <span class="label-text"
                                    >{form.end_date.date_label}</span
                                >
                            </label>
                            <input
                                type="date"
                                id="editorEndDate"
                                class="input input-bordered w-full"
                                placeholder={form.end_date.date_placeholder}
                                required
                            />
                            <label class="label">
                                <span
                                    class="label-text-alt text-error hidden"
                                    id="endDateError"
                                    >This field is required</span
                                >
                            </label>
                        </div>
                        <div class="form-control">
                            <label class="label" for="editorEndTime">
                                <span class="label-text"
                                    >{form.end_date.time_label}</span
                                >
                            </label>
                            <input
                                type="time"
                                id="editorEndTime"
                                class="input input-bordered w-full"
                                placeholder={form.end_date.time_placeholder}
                                required
                            />
                            <label class="label">
                                <span
                                    class="label-text-alt text-error hidden"
                                    id="endTimeError"
                                    >This field is required</span
                                >
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Additional Info Section -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="form-control">
                    <label class="label" for="editorPointsToReward">
                        <span class="label-text"
                            >{form.points_to_reward.label}</span
                        >
                    </label>
                    <input
                        type="number"
                        id="editorPointsToReward"
                        class="input input-bordered w-full"
                        placeholder={form.points_to_reward.placeholder}
                        min="0"
                        max="1000"
                        required
                    />
                    <label class="label">
                        <span
                            class="label-text-alt text-error hidden"
                            id="pointsError">This field is required</span
                        >
                    </label>
                </div>

                <div class="form-control">
                    <label class="label" for="editorLocation">
                        <span class="label-text">{form.location.label}</span>
                    </label>
                    <input
                        type="text"
                        id="editorLocation"
                        class="input input-bordered w-full"
                        placeholder={form.location.placeholder}
                        maxlength="200"
                    />
                    <label class="label">
                        <span
                            class="label-text-alt text-error hidden"
                            id="locationError"></span>
                    </label>
                </div>
            </div>

            <!-- Files Section -->
            <div class="form-control">
                <label class="label" for="editorFiles">
                    <span class="label-text">{form.files.label}</span>
                </label>
                <input
                    type="file"
                    id="editorFiles"
                    class="file-input file-input-bordered w-full"
                    multiple
                    accept=".pdf,.doc,.docx,.txt,.jpg,.jpeg,.png"
                />
                <div id="currentFiles" class="mt-4 space-y-2"></div>
                <label class="label">
                    <span class="label-text-alt opacity-70"
                        >{form.files.help_text}</span
                    >
                </label>
            </div>

            <div class="modal-action flex-wrap gap-2">
                <button
                    type="button"
                    class="btn btn-ghost order-1 sm:order-none"
                    onclick="eventEditor.close()"
                >
                    {form.buttons.cancel}
                </button>
                <button
                    type="submit"
                    id="saveEventButton"
                    class="btn btn-primary flex-1 sm:flex-none"
                >
                    {form.buttons.save}
                </button>
            </div>
        </form>
    </div>
    <form method="dialog" class="modal-backdrop">
        <button>close</button>
    </form>
</dialog>