<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-name="encoach_adaptive.SignalTimeline">
        <Layout display="{ controlPanel: {} }">
            <div class="o_signal_timeline">
                <div class="container-fluid py-3">

                    <t t-if="state.loading">
                        <div class="text-center py-5">
                            <i class="fa fa-spinner fa-spin fa-3x text-primary"/>
                            <p class="mt-2 text-muted">Loading timeline...</p>
                        </div>
                    </t>

                    <!-- Student Selector -->
                    <t t-elif="!state.studentId and state.studentList">
                        <h2 class="mb-3">Adaptive Signal Timeline</h2>
                        <p class="text-muted mb-4">Select a student to view their adaptive learning events.</p>
                        <div class="row g-3">
                            <t t-foreach="state.studentList" t-as="st" t-key="st.id">
                                <div class="col-lg-3 col-md-4 col-sm-6">
                                    <div class="card shadow-sm h-100 cursor-pointer st-student-card"
                                         t-on-click="() => this.selectStudent(st.id)">
                                        <div class="card-body text-center">
                                            <div class="rounded-circle bg-info bg-opacity-10 d-inline-flex align-items-center justify-content-center mb-2" style="width:48px;height:48px">
                                                <i class="fa fa-user text-info"/>
                                            </div>
                                            <h6 class="card-title mb-0" t-esc="st.name"/>
                                            <small class="text-muted" t-esc="st.email"/>
                                        </div>
                                    </div>
                                </div>
                            </t>
                        </div>
                    </t>

                    <!-- Timeline View -->
                    <t t-elif="state.student">
                        <div class="d-flex align-items-center mb-3">
                            <button class="btn btn-sm btn-outline-secondary me-3" t-on-click="goBack"
                                    t-if="!this.props.action?.context?.student_id">
                                <i class="fa fa-arrow-left me-1"/> Back
                            </button>
                            <div>
                                <h2 class="mb-0">Adaptive Timeline</h2>
                                <small class="text-muted">
                                    Student: <strong t-esc="state.student.name"/>
                                </small>
                            </div>
                        </div>

                        <!-- Filters -->
                        <div class="card shadow-sm mb-3">
                            <div class="card-body py-2">
                                <div class="row g-2 align-items-end">
                                    <div class="col-md-3">
                                        <label class="form-label small fw-bold mb-1">Event Type</label>
                                        <select class="form-select form-select-sm"
                                                t-on-change="(ev) => this.onFilterChange('eventType', ev)">
                                            <option value="">All Events</option>
                                            <option value="signal">Signals</option>
                                            <option value="decision">Decisions</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label small fw-bold mb-1">From Date</label>
                                        <input type="date" class="form-control form-control-sm"
                                               t-on-change="(ev) => this.onFilterChange('dateFrom', ev)"/>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label small fw-bold mb-1">To Date</label>
                                        <input type="date" class="form-control form-control-sm"
                                               t-on-change="(ev) => this.onFilterChange('dateTo', ev)"/>
                                    </div>
                                    <div class="col-md-3 text-end">
                                        <button class="btn btn-sm btn-outline-secondary" t-on-click="clearFilters">
                                            <i class="fa fa-refresh me-1"/> Reset
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Summary Badges -->
                        <div class="d-flex gap-3 mb-4">
                            <div class="bg-light rounded px-3 py-2 d-flex align-items-center">
                                <i class="fa fa-list me-2 text-secondary"/>
                                <strong class="me-1" t-esc="state.totalCount"/> events
                            </div>
                            <div class="bg-primary bg-opacity-10 rounded px-3 py-2 d-flex align-items-center">
                                <i class="fa fa-bolt me-2 text-primary"/>
                                <strong class="me-1" t-esc="signalCount"/> signals
                            </div>
                            <div class="bg-success bg-opacity-10 rounded px-3 py-2 d-flex align-items-center">
                                <i class="fa fa-gavel me-2 text-success"/>
                                <strong class="me-1" t-esc="decisionCount"/> decisions
                            </div>
                        </div>

                        <!-- Timeline -->
                        <div class="st-timeline">
                            <t t-foreach="state.filteredEvents" t-as="ev" t-key="ev.id">
                                <div class="st-timeline-item">
                                    <div class="st-timeline-marker"
                                         t-att-class="'bg-' + eventColor(ev.event_type)">
                                        <i class="fa" t-att-class="eventIcon(ev.event_type)"/>
                                    </div>
                                    <div class="st-timeline-content">
                                        <div class="card shadow-sm">
                                            <div class="card-body py-2 px-3">
                                                <div class="d-flex justify-content-between align-items-start mb-1">
                                                    <div>
                                                        <span class="badge me-1"
                                                              t-att-class="'bg-' + eventColor(ev.event_type)"
                                                              t-esc="ev.event_type"/>
                                                        <strong t-if="ev.signal_name" t-esc="ev.signal_name"/>
                                                        <strong t-elif="ev.decision">Decision</strong>
                                                    </div>
                                                    <small class="text-muted" t-esc="formatDate(ev.created_at)"/>
                                                </div>

                                                <!-- Signal details -->
                                                <div t-if="ev.event_type === 'signal'" class="mt-1">
                                                    <span class="text-muted small">Value: </span>
                                                    <span class="fw-bold" t-esc="ev.signal_value"/>
                                                    <t t-if="ev.course_id">
                                                        <span class="text-muted small ms-3">Course: </span>
                                                        <span t-esc="ev.course_id[1]"/>
                                                    </t>
                                                </div>

                                                <!-- Decision details -->
                                                <div t-if="ev.event_type === 'decision'" class="mt-1">
                                                    <span class="small" t-esc="ev.decision"/>
                                                    <t t-if="ev.course_id">
                                                        <span class="text-muted small ms-3">Course: </span>
                                                        <span t-esc="ev.course_id[1]"/>
                                                    </t>
                                                </div>

                                                <!-- Context (if any) -->
                                                <div t-if="parseContext(ev.context)" class="mt-1">
                                                    <small class="text-muted">
                                                        <i class="fa fa-info-circle me-1"/>
                                                        <t t-foreach="Object.entries(parseContext(ev.context) || {})" t-as="entry" t-key="entry[0]">
                                                            <span class="me-2">
                                                                <span class="fw-bold" t-esc="entry[0]"/>: <t t-esc="entry[1]"/>
                                                            </span>
                                                        </t>
                                                    </small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </t>

                            <t t-if="!state.filteredEvents.length">
                                <div class="text-center py-5 text-muted">
                                    <i class="fa fa-clock-o fa-3x mb-2 d-block"/>
                                    <p>No adaptive events found for this student.</p>
                                </div>
                            </t>
                        </div>
                    </t>

                    <t t-elif="!state.studentId">
                        <div class="text-center py-5 text-muted">
                            <i class="fa fa-clock-o fa-3x mb-3 d-block"/>
                            <p>No student selected. Open from a student record or select one above.</p>
                        </div>
                    </t>
                </div>
            </div>
        </Layout>
    </t>
</templates>
