@model PlanTempus.Application.Features.Employees.Components.EmployeeWorkScheduleViewModel

@{
    string GetTimeDisplay(ShiftData? shift)
    {
        if (shift == null) return "—";
        return shift.Status switch
        {
            "work" => $"{shift.Start} - {shift.End}",
            "vacation" => Model.LabelVacation,
            "sick" => Model.LabelSick,
            _ => "—"
        };
    }

    string GetTimeClass(ShiftData? shift)
    {
        if (shift == null) return "off";
        return shift.Status switch
        {
            "work" => "",
            "vacation" => "vacation",
            "sick" => "sick",
            _ => "off"
        };
    }

    bool IsClosed(string date) => Model.ClosedDays.Contains(date);
}

<swp-schedule-container>
    <!-- Edit button -->
    <swp-schedule-actions>
        <swp-btn class="primary" id="scheduleEditBtn">
            <i class="ph ph-pencil-simple"></i>
            @Model.ButtonEdit
        </swp-btn>
    </swp-schedule-actions>

    <!-- Schedule table -->
    <swp-schedule-scroll>
        <swp-schedule-table id="scheduleTable">
        <!-- Header row -->
        <swp-schedule-cell class="header week-number">@Model.LabelWeek @Model.WeekNumber</swp-schedule-cell>
        @foreach (var day in Model.Days)
        {
            <swp-schedule-cell class="header @(IsClosed(day.Date) ? "closed" : "")" data-date="@day.Date">
                <swp-day-name>@day.DayName</swp-day-name>
                <swp-day-date>@day.DisplayDate</swp-day-date>
            </swp-schedule-cell>
        }

        <!-- Employee rows -->
        @foreach (var employee in Model.Employees)
        {
            <swp-schedule-cell class="employee">
                <swp-employee-name>@employee.Name</swp-employee-name>
                <swp-employee-hours>@employee.WeeklyHours @Model.LabelHours</swp-employee-hours>
            </swp-schedule-cell>

            @foreach (var day in Model.Days)
            {
                var shift = employee.Schedule.GetValueOrDefault(day.Date);
                var isClosed = IsClosed(day.Date);
                <swp-schedule-cell class="day @(isClosed ? "closed-day" : "")"
                                   data-employee="@employee.Name"
                                   data-employee-id="@employee.EmployeeId"
                                   data-date="@day.Date"
                                   data-day="@day.ShortDayName">
                    <swp-time-display class="@GetTimeClass(shift)">@GetTimeDisplay(shift)</swp-time-display>
                </swp-schedule-cell>
            }
        }
        </swp-schedule-table>
    </swp-schedule-scroll>
</swp-schedule-container>

<!-- Schedule Drawer -->
<div id="schedule-drawer" data-drawer="lg">
    <swp-drawer-header>
        <swp-drawer-title>@Model.LabelEditShift</swp-drawer-title>
        <swp-drawer-close data-drawer-close>
            <i class="ph ph-x"></i>
        </swp-drawer-close>
    </swp-drawer-header>

    <swp-drawer-body>
        <!-- Employee & Date -->
        <swp-form-row>
            <swp-form-label>Medarbejder</swp-form-label>
            <swp-employee-display id="scheduleFieldEmployee" class="empty">
                <swp-employee-avatar id="scheduleFieldAvatar">?</swp-employee-avatar>
                <swp-form-value id="scheduleFieldEmployeeName">Vælg celle...</swp-form-value>
            </swp-employee-display>
        </swp-form-row>

        <swp-form-row>
            <swp-form-label>Dato</swp-form-label>
            <swp-form-value id="scheduleFieldDate">—</swp-form-value>
        </swp-form-row>

        <swp-form-divider></swp-form-divider>

        <!-- Status -->
        <swp-form-row>
            <swp-form-label>@Model.LabelStatus</swp-form-label>
            <swp-status-options id="scheduleStatusOptions">
                <swp-status-option data-status="work" class="selected">@Model.LabelWork</swp-status-option>
                <swp-status-option data-status="off">@Model.LabelOff</swp-status-option>
                <swp-status-option data-status="vacation">@Model.LabelVacation</swp-status-option>
                <swp-status-option data-status="sick">@Model.LabelSick</swp-status-option>
            </swp-status-options>
        </swp-form-row>

        <!-- Time range -->
        <swp-form-row id="scheduleTimeRow">
            <swp-form-label>@Model.LabelTimeRange</swp-form-label>
            <swp-time-range id="scheduleTimeRange">
                <swp-time-range-slider>
                    <swp-time-range-track></swp-time-range-track>
                    <swp-time-range-fill></swp-time-range-fill>
                    <input type="range" class="range-start" min="0" max="60" value="12" step="1">
                    <input type="range" class="range-end" min="0" max="60" value="44" step="1">
                </swp-time-range-slider>
                <swp-time-range-label>
                    <swp-time-range-times>09:00 – 17:00</swp-time-range-times>
                    <swp-time-range-duration>8 timer</swp-time-range-duration>
                </swp-time-range-label>
            </swp-time-range>
        </swp-form-row>

        <!-- Note -->
        <swp-form-row>
            <swp-form-label>@Model.LabelNote <span class="optional">(valgfrit)</span></swp-form-label>
            <input type="text" id="scheduleFieldNote" placeholder="F.eks. Aftenvagt">
        </swp-form-row>

        <swp-form-divider></swp-form-divider>

        <!-- Type toggle -->
        <swp-form-row>
            <swp-form-label>@Model.LabelType</swp-form-label>
            <swp-toggle-options id="scheduleTypeOptions">
                <swp-toggle-option data-value="single">@Model.LabelSingle</swp-toggle-option>
                <swp-toggle-option data-value="template" class="selected">@Model.LabelRepeat</swp-toggle-option>
            </swp-toggle-options>
        </swp-form-row>

        <!-- Repeat settings -->
        <swp-form-group id="scheduleRepeatGroup">
            <swp-form-row>
                <swp-form-label>@Model.LabelRepeatInterval</swp-form-label>
                <swp-form-select>
                    <select id="scheduleRepeatInterval">
                        <option value="1">Hver uge</option>
                        <option value="2">Hver 2. uge</option>
                        <option value="3">Hver 3. uge</option>
                        <option value="4">Hver 4. uge</option>
                    </select>
                </swp-form-select>
            </swp-form-row>

            <swp-form-hint>Gentagelser bruger valgt dato som startuge.</swp-form-hint>

            <swp-form-row>
                <swp-form-label>@Model.LabelRepeatEnd <span class="optional">(valgfrit)</span></swp-form-label>
                <input type="date" id="scheduleRepeatEndDate">
            </swp-form-row>

            <swp-form-row>
                <swp-form-label>@Model.LabelWeekday <span class="auto">(auto)</span></swp-form-label>
                <swp-form-value id="scheduleFieldWeekday">—</swp-form-value>
            </swp-form-row>
        </swp-form-group>
    </swp-drawer-body>

    <swp-drawer-footer>
        <swp-btn class="secondary" data-drawer-close>@Model.LabelCancel</swp-btn>
        <swp-btn class="primary" id="scheduleDrawerSave">@Model.LabelSave</swp-btn>
    </swp-drawer-footer>
</div>