{# ============================================================================
   AI Preview Panel - Spec 026: AI Smart Scheduling

   Preview interface for reviewing AI-generated schedule suggestions.
   Features:
   - Assignment list with individual checkboxes
   - Expandable reasoning per assignment
   - Summary statistics (cost, hours, unfilled)
   - Locked shift visual treatment
   - Apply Selected and Dismiss buttons
   - Stale shift warnings

   SDD Reference: lines 1481-1496 (AiPreviewPanel component structure)
   PRD Reference: lines 106-120 (Review and Refinement flow)
   ============================================================================ #}

<div class="modal fade" id="aiPreviewModal" tabindex="-1" aria-labelledby="aiPreviewModalLabel" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="aiPreviewModalLabel">
                    <i class="fa-solid fa-robot me-2"></i>AI Schedule Suggestions
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0">
                {# Loading State #}
                <div id="aiPreviewLoading" class="text-center py-5">
                    <i class="fa-solid fa-spinner fa-spin fa-2x text-primary"></i>
                    <p class="mt-3 text-muted">Loading AI suggestions...</p>
                </div>

                {# Content (hidden until loaded) #}
                <div id="aiPreviewContent" class="d-none">
                    {# Stale Warning #}
                    <div id="aiStaleWarning" class="alert alert-warning m-3 d-none" role="alert">
                        <i class="fa-solid fa-exclamation-triangle me-2"></i>
                        <strong>Schedule has changed!</strong> Some shifts have been modified since these suggestions were generated.
                        Review carefully or regenerate for updated suggestions.
                    </div>

                    {# Summary Stats Bar #}
                    <div class="ai-preview-summary bg-light border-bottom p-3">
                        <div class="row text-center">
                            <div class="col-6 col-md-3 mb-2 mb-md-0">
                                <div class="h4 mb-0 text-success">
                                    <span id="aiFilledCount">0</span>
                                </div>
                                <small class="text-muted">Shifts Filled</small>
                            </div>
                            <div class="col-6 col-md-3 mb-2 mb-md-0">
                                <div class="h4 mb-0 text-warning">
                                    <span id="aiUnfilledCount">0</span>
                                </div>
                                <small class="text-muted">Remaining Open</small>
                            </div>
                            <div class="col-6 col-md-3">
                                <div class="h4 mb-0 text-primary">
                                    <span id="aiTotalHours">0</span>h
                                </div>
                                <small class="text-muted">Total Hours</small>
                            </div>
                            <div class="col-6 col-md-3">
                                <div class="h4 mb-0 text-info">
                                    $<span id="aiLaborCost">0.00</span>
                                </div>
                                <small class="text-muted">Est. Labor Cost</small>
                            </div>
                        </div>
                    </div>

                    {# LLM Unavailable Banner (Spec 038 Phase 7) #}
                    <div id="aiLlmUnavailableBanner" class="d-none mx-3 mt-3">
                        <div class="llm-unavailable-banner">
                            <i class="fa-solid fa-info-circle me-2"></i>
                            <span class="fw-medium">AI explanations unavailable</span>
                            <span class="ms-1">— Explanations generated from constraint data</span>
                        </div>
                    </div>

                    {# AI Schedule Summary - Human readable insights #}
                    <div id="aiScheduleSummarySection" class="border-bottom d-none">
                        <div class="p-3">
                            <div class="d-flex align-items-start">
                                <div class="me-3">
                                    <span class="ai-summary-icon">
                                        <i class="fa-solid fa-robot text-primary"></i>
                                    </span>
                                </div>
                                <div class="flex-grow-1">
                                    <p id="aiScheduleSummaryText" class="mb-0 ai-summary-text"></p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {# Solver Scorecard (Spec 038 Phase 7) #}
                    <div id="aiScorecardSection" class="border-bottom p-3 d-none" role="region" aria-label="Schedule quality metrics">
                        <h6 class="mb-3">
                            <i class="fa-solid fa-chart-line me-2 text-primary"></i>Schedule Quality Metrics
                        </h6>
                        <div class="solver-scorecard" id="aiScorecardContent">
                            {# Populated by JS renderScorecard() #}
                        </div>
                    </div>

                    {# Improvement Suggestions Panel (Spec 038 Phase 7) #}
                    <div id="aiImprovementSuggestionsSection" class="border-bottom d-none" role="region" aria-label="Improvement suggestions">
                        <button class="btn btn-link text-decoration-none w-100 text-start py-2 px-3 d-flex justify-content-between align-items-center"
                                type="button" data-bs-toggle="collapse" data-bs-target="#aiImprovementSuggestions"
                                aria-expanded="false" aria-controls="aiImprovementSuggestions">
                            <span>
                                <i class="fa-solid fa-lightbulb me-2 text-warning"></i>
                                <span class="fw-medium">Improvement Suggestions</span>
                                <span class="badge bg-info ms-2" id="aiImprovementSuggestionCount">0</span>
                            </span>
                            <i class="fa-solid fa-chevron-down text-muted improvement-chevron"></i>
                        </button>
                        <div class="collapse" id="aiImprovementSuggestions">
                            <div class="px-3 pb-3 improvement-suggestions-panel">
                                <div id="aiImprovementSuggestionsList">
                                    {# Populated by JS renderImprovementSuggestions() #}
                                </div>
                            </div>
                        </div>
                    </div>

                    {# Hours Distribution Section (Expandable) #}
                    <div id="aiHoursDistributionSection" class="border-bottom d-none">
                        <button class="btn btn-link text-decoration-none w-100 text-start py-2 px-3 d-flex justify-content-between align-items-center"
                                type="button" data-bs-toggle="collapse" data-bs-target="#aiHoursDistribution"
                                aria-expanded="false" aria-controls="aiHoursDistribution">
                            <span>
                                <i class="fa-solid fa-chart-pie me-2 text-primary"></i>
                                <span class="fw-medium">Hours Distribution by Employee</span>
                                <span class="badge bg-warning text-dark ms-2" id="aiOvertimeEmployeeCount">0</span>
                                <span class="small text-muted ms-1">in overtime</span>
                            </span>
                            <i class="fa-solid fa-chevron-down text-muted hours-chevron"></i>
                        </button>
                        <div class="collapse" id="aiHoursDistribution">
                            <div class="px-3 pb-3">
                                <div class="table-responsive">
                                    <table class="table table-sm table-hover mb-0">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Employee</th>
                                                <th class="text-center">Existing</th>
                                                <th class="text-center">+New</th>
                                                <th class="text-center">Total</th>
                                                <th class="text-center">OT Hours</th>
                                            </tr>
                                        </thead>
                                        <tbody id="aiHoursDistributionTable">
                                            {# Populated dynamically #}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    {# Day Tabs Navigation #}
                    <div class="ai-day-tabs border-bottom bg-white sticky-top">
                        <ul class="nav nav-tabs nav-fill border-bottom-0 px-2 pt-2" id="aiDayTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="ai-mon-tab" data-bs-toggle="tab" data-bs-target="#ai-mon" type="button" role="tab" aria-controls="ai-mon" aria-selected="true">
                                    Mon <span class="badge bg-secondary ms-1" id="aiMonCount">0</span>
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="ai-tue-tab" data-bs-toggle="tab" data-bs-target="#ai-tue" type="button" role="tab" aria-controls="ai-tue" aria-selected="false">
                                    Tue <span class="badge bg-secondary ms-1" id="aiTueCount">0</span>
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="ai-wed-tab" data-bs-toggle="tab" data-bs-target="#ai-wed" type="button" role="tab" aria-controls="ai-wed" aria-selected="false">
                                    Wed <span class="badge bg-secondary ms-1" id="aiWedCount">0</span>
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="ai-thu-tab" data-bs-toggle="tab" data-bs-target="#ai-thu" type="button" role="tab" aria-controls="ai-thu" aria-selected="false">
                                    Thu <span class="badge bg-secondary ms-1" id="aiThuCount">0</span>
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="ai-fri-tab" data-bs-toggle="tab" data-bs-target="#ai-fri" type="button" role="tab" aria-controls="ai-fri" aria-selected="false">
                                    Fri <span class="badge bg-secondary ms-1" id="aiFriCount">0</span>
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="ai-sat-tab" data-bs-toggle="tab" data-bs-target="#ai-sat" type="button" role="tab" aria-controls="ai-sat" aria-selected="false">
                                    Sat <span class="badge bg-secondary ms-1" id="aiSatCount">0</span>
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="ai-sun-tab" data-bs-toggle="tab" data-bs-target="#ai-sun" type="button" role="tab" aria-controls="ai-sun" aria-selected="false">
                                    Sun <span class="badge bg-secondary ms-1" id="aiSunCount">0</span>
                                </button>
                            </li>
                        </ul>
                    </div>

                    {# Select All / None Controls #}
                    <div class="d-flex justify-content-between align-items-center p-3 border-bottom bg-light">
                        <div>
                            <span class="fw-medium"><span id="aiSelectedCount">0</span> of <span id="aiTotalAssignments">0</span> selected</span>
                        </div>
                        <div class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-outline-primary" id="aiSelectAll">
                                <i class="fa-solid fa-check-double me-1"></i>Select All
                            </button>
                            <button type="button" class="btn btn-outline-secondary" id="aiSelectNone">
                                <i class="fa-solid fa-xmark me-1"></i>Select None
                            </button>
                        </div>
                    </div>

                    {# Day Tab Content #}
                    <div class="tab-content" id="aiDayTabContent">
                        <div class="tab-pane fade show active" id="ai-mon" role="tabpanel" aria-labelledby="ai-mon-tab">
                            <div class="ai-assignments-list" data-day="mon"></div>
                        </div>
                        <div class="tab-pane fade" id="ai-tue" role="tabpanel" aria-labelledby="ai-tue-tab">
                            <div class="ai-assignments-list" data-day="tue"></div>
                        </div>
                        <div class="tab-pane fade" id="ai-wed" role="tabpanel" aria-labelledby="ai-wed-tab">
                            <div class="ai-assignments-list" data-day="wed"></div>
                        </div>
                        <div class="tab-pane fade" id="ai-thu" role="tabpanel" aria-labelledby="ai-thu-tab">
                            <div class="ai-assignments-list" data-day="thu"></div>
                        </div>
                        <div class="tab-pane fade" id="ai-fri" role="tabpanel" aria-labelledby="ai-fri-tab">
                            <div class="ai-assignments-list" data-day="fri"></div>
                        </div>
                        <div class="tab-pane fade" id="ai-sat" role="tabpanel" aria-labelledby="ai-sat-tab">
                            <div class="ai-assignments-list" data-day="sat"></div>
                        </div>
                        <div class="tab-pane fade" id="ai-sun" role="tabpanel" aria-labelledby="ai-sun-tab">
                            <div class="ai-assignments-list" data-day="sun"></div>
                        </div>
                    </div>

                    {# Legacy container for backwards compatibility #}
                    <div id="aiAssignmentsList" class="d-none"></div>

                    {# No Assignments State #}
                    <div id="aiNoAssignments" class="text-center py-5 d-none">
                        <i class="fa-solid fa-calendar-xmark fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">No Assignments Generated</h5>
                        <p class="text-muted">The AI couldn't find suitable employees for the open shifts. This may be due to availability conflicts or hour limits.</p>
                    </div>

                    {# Locked Shifts Section (Manager recurring schedules) #}
                    <div id="aiLockedShiftsSection" class="d-none">
                        <div class="p-3 bg-light border-top">
                            <h6 class="text-muted mb-2">
                                <i class="fa-solid fa-lock me-2"></i>Locked Manager Shifts
                                <span class="badge bg-secondary ms-2" id="aiLockedCount">0</span>
                            </h6>
                            <p class="small text-muted mb-2">These shifts are pre-assigned and not editable by AI.</p>
                            <div id="aiLockedShiftsList" class="small">
                                {# Locked shifts listed here #}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <div>
                    <button type="button" class="btn btn-outline-danger" id="aiDismissBtn">
                        <i class="fa-solid fa-trash me-2"></i>Dismiss All
                    </button>
                </div>
                <div>
                    <button type="button" class="btn btn-secondary me-2" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-success" id="aiApplyBtn" disabled>
                        <i class="fa-solid fa-check me-2"></i>Apply Selected (<span id="aiApplyCount">0</span>)
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

{# Apply Confirmation Modal #}
<div class="modal fade" id="aiApplyConfirmModal" tabindex="-1" aria-labelledby="aiApplyConfirmLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="aiApplyConfirmLabel">
                    <i class="fa-solid fa-check-circle me-2"></i>Apply AI Assignments?
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>You're about to apply <strong><span id="aiConfirmApplyCount">0</span></strong> AI-suggested assignments to the schedule.</p>
                <div class="alert alert-info small">
                    <i class="fa-solid fa-info-circle me-2"></i>
                    <strong>What happens next:</strong>
                    <ul class="mb-0 mt-2">
                        <li>Selected shifts will be assigned to the suggested employees</li>
                        <li>Unselected suggestions will be discarded</li>
                        <li>Remaining open shifts can be filled manually</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="aiConfirmApplyBtn">
                    <i class="fa-solid fa-check me-2"></i>Apply Assignments
                </button>
            </div>
        </div>
    </div>
</div>

{# Dismiss Confirmation Modal #}
<div class="modal fade" id="aiDismissConfirmModal" tabindex="-1" aria-labelledby="aiDismissConfirmLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="aiDismissConfirmLabel">
                    <i class="fa-solid fa-trash me-2"></i>Dismiss All Suggestions?
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to dismiss all AI suggestions for this week?</p>
                <p class="text-muted small">You can regenerate new suggestions if you still have runs remaining.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="aiConfirmDismissBtn">
                    <i class="fa-solid fa-trash me-2"></i>Dismiss All
                </button>
            </div>
        </div>
    </div>
</div>

{# Assignment Item Template (Handlebars) #}
{% raw %}
<script id="ai-assignment-template" type="text/x-handlebars-template">
    <div class="ai-assignment-item {{#if isStale}}ai-assignment-stale{{/if}} {{#if isUnassigned}}ai-assignment-unfilled{{/if}}" data-assignment-id="{{shiftId}}">
        <div class="d-flex align-items-start p-3 border-bottom">
            <!-- Checkbox (hidden for unassigned shifts) -->
            {{#unless isUnassigned}}
            <div class="form-check me-3 mt-1">
                <input class="form-check-input ai-assignment-checkbox" type="checkbox"
                       id="aiAssignment{{shiftId}}" value="{{shiftId}}" checked
                       aria-label="Select assignment for {{employeeName}} on {{dayOfWeek}}">
            </div>
            {{/unless}}

            <!-- Employee Avatar (orange for unassigned) -->
            <div class="ai-assignment-employee me-3 {{#if isUnassigned}}ms-4{{/if}}">
                {{#if isUnassigned}}
                <div class="avatar-circle avatar-unfilled" title="Unassigned - No suitable employee found">
                    <i class="fa-solid fa-user-slash"></i>
                </div>
                {{else}}
                    {{#if photoUrl}}
                    <img src="{{photoUrl}}" alt="{{employeeName}}" class="avatar-circle avatar-img" title="{{employeeName}}">
                    {{else}}
                    <div class="avatar-circle {{avatarColor}}" title="{{employeeName}}">
                        {{initials}}
                    </div>
                    {{/if}}
                {{/if}}
            </div>

            <!-- Assignment Details -->
            <div class="flex-grow-1">
                <div class="d-flex justify-content-between align-items-start mb-1">
                    <div>
                        {{#if isUnassigned}}
                        <span class="fw-semibold text-warning">Unassigned</span>
                        {{else}}
                        <span class="fw-semibold">{{employeeName}}</span>
                        {{/if}}
                        <span class="badge bg-secondary ms-2">{{roleName}}</span>
                        {{#if isOvertime}}
                        <span class="badge bg-warning text-dark ms-1" title="Will result in overtime">
                            <i class="fa-solid fa-clock"></i> OT
                        </span>
                        {{/if}}
                        {{#if isUnassigned}}
                        <span class="badge bg-danger ms-1" title="This shift will remain open">
                            <i class="fa-solid fa-exclamation"></i> Open
                        </span>
                        {{/if}}
                    </div>
                    <div class="text-end">
                        <span class="text-muted small">{{dayOfWeek}}</span>
                    </div>
                </div>
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <div>
                        <i class="fa-regular fa-clock me-1 text-muted"></i>
                        <span>{{startTime}} - {{endTime}}</span>
                        <span class="text-muted ms-2">({{duration}}h)</span>
                    </div>
                    <div class="text-muted small">
                        {{#if isUnassigned}}
                        $0.00
                        {{else}}
                        ${{laborCost}}
                        {{/if}}
                    </div>
                </div>

                <!-- Expandable Reasoning -->
                <div class="ai-reasoning-toggle">
                    <button class="btn btn-link btn-sm p-0 text-decoration-none" type="button"
                            data-bs-toggle="collapse" data-bs-target="#reasoning{{shiftId}}"
                            aria-expanded="false" aria-controls="reasoning{{shiftId}}">
                        <i class="fa-solid fa-lightbulb me-1 text-warning"></i>
                        <span class="text-muted">{{#if isUnassigned}}Why couldn't this be filled?{{else}}Why this assignment?{{/if}}</span>
                        <i class="fa-solid fa-chevron-down ms-1 text-muted reasoning-chevron"></i>
                    </button>
                    <div class="collapse" id="reasoning{{shiftId}}">
                        <div class="ai-reasoning-content mt-2 p-2 bg-light rounded small">
                            {{reasoning}}
                        </div>
                    </div>
                </div>

                <!-- Stale Warning -->
                {{#if isStale}}
                <div class="ai-stale-badge mt-2">
                    <span class="badge bg-warning text-dark">
                        <i class="fa-solid fa-triangle-exclamation me-1"></i>
                        Shift modified since suggestion
                    </span>
                </div>
                {{/if}}
            </div>
        </div>
    </div>
</script>

<!-- Locked Shift Item Template -->
<script id="ai-locked-shift-template" type="text/x-handlebars-template">
    <div class="ai-locked-shift d-flex align-items-center py-1 text-muted">
        <i class="fa-solid fa-lock me-2"></i>
        <span>{{employeeName}}</span>
        <span class="mx-2">-</span>
        <span>{{dayOfWeek}} {{startTime}} - {{endTime}}</span>
    </div>
</script>
{% endraw %}