@if (!student()) {
<div class="empty-panel">
    <span class="empty-text">Select a student</span>
</div>
} @else {
<!-- Modals -->
@if (showAddGoalModal()) {
<app-add-goal-modal [studentId]="studentId()!" [existingGoals]="goals()" [nextIepDate]="nextIepDate()"
    (goalCreated)="onGoalCreated($event)" (cancelled)="showAddGoalModal.set(false)" />
}
@if (showEditGoalModal() && selectedGoal()) {
<app-edit-goal-modal [studentId]="studentId()!" [goal]="selectedGoal()!" (saved)="onEditGoalSaved()"
    (closed)="showEditGoalModal.set(false)" />
}
@if (showEditBenchmarkModal()) {
<app-edit-benchmark-modal [studentId]="studentId()!" [benchmark]="showEditBenchmarkModal()!"
    (saved)="onEditBenchmarkSaved()" (closed)="showEditBenchmarkModal.set(null)" />
}
@if (showEditEventModal()) {
<app-edit-event-modal [studentId]="studentId()!" [goalId]="selectedGoal()!.goalId"
    [goalCategory]="selectedGoal()!.category" [benchmarks]="goalBenchmarks()"
    [event]="showEditEventModal() === 'new' ? null : $any(showEditEventModal())" (saved)="onEventSaved()"
    (closed)="showEditEventModal.set(null)" />
}

<!-- Student Header -->
<div class="student-header">
    <div class="student-info">
        <h1 class="student-name">{{ student()!.identifier }}</h1>
        <span class="student-iep">IEP {{ formatDate(student()!.nextIepDate) }}</span>
    </div>
    <div class="goal-tabs">
        @for (g of goals(); track g.goalId) {
        <button class="goal-tab" [class.active]="selectedGoalId() === g.goalId || (selectedGoal()?.goalId === g.goalId)"
            [style.border-color]="(selectedGoalId() === g.goalId || selectedGoal()?.goalId === g.goalId) ? getCatColor(g.category).border : '#E5E5E0'"
            [style.background]="(selectedGoalId() === g.goalId || selectedGoal()?.goalId === g.goalId) ? getCatColor(g.category).bg : '#FFF'"
            [style.color]="(selectedGoalId() === g.goalId || selectedGoal()?.goalId === g.goalId) ? getCatColor(g.category).text : '#666'"
            (click)="onSelectGoal(g.goalId)">
            {{ g.category }}
        </button>
        }
        <button class="goal-tab add-goal" (click)="onAddGoal()">+ Goal</button>
    </div>
</div>

<!-- Goal Detail -->
@if (selectedGoal()) {
<div class="workspace-body">
    <!-- Goal Card -->
    <div class="goal-card">
        <div class="goal-card-header">
            <span class="goal-badge" [style.color]="goalColors().text"
                [style.background]="goalColors().bg">{{ selectedGoal()!.category }} Goal</span>
            @if (selectedGoal()!.targetCompletionDate) {
            <span class="goal-due">Due {{ formatDate(selectedGoal()!.targetCompletionDate) }}</span>
            }
            <button class="edit-icon" (click)="onEditGoal()" aria-label="Edit goal">
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="#999" stroke-width="1.5"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M11.5 1.5l3 3L5 14H2v-3L11.5 1.5z" />
                </svg>
            </button>
        </div>
        <p class="goal-description">{{ selectedGoal()!.description }}</p>
    </div>

    <!-- Sub Tabs -->
    <div class="sub-tabs">
        <button class="sub-tab" [class.active]="activeTab() === 'benchmarks'"
            [style.color]="activeTab() === 'benchmarks' ? goalColors().text : '#888'"
            [style.border-bottom-color]="activeTab() === 'benchmarks' ? goalColors().accent : 'transparent'"
            (click)="onTabChange('benchmarks')">
            Benchmarks ({{ goalBenchmarks().length }})
        </button>
        <button class="sub-tab" [class.active]="activeTab() === 'progress'"
            [style.color]="activeTab() === 'progress' ? goalColors().text : '#888'"
            [style.border-bottom-color]="activeTab() === 'progress' ? goalColors().accent : 'transparent'"
            (click)="onTabChange('progress')">
            Progress Events ({{ sortedProgressEvents().length }})
        </button>
    </div>

    <!-- Benchmarks Tab -->
    @if (activeTab() === 'benchmarks') {
    <div class="tab-content">
        @for (b of goalBenchmarks(); track b.benchmarkId) {
        <div class="benchmark-card">
            <div class="benchmark-header">
                <span class="benchmark-name" [style.color]="goalColors().text">{{ b.shortName || b.benchmark }}</span>
                <button class="edit-icon" (click)="onEditBenchmark(b)" aria-label="Edit benchmark">
                    <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="#999" stroke-width="1.5"
                        stroke-linecap="round" stroke-linejoin="round">
                        <path d="M11.5 1.5l3 3L5 14H2v-3L11.5 1.5z" />
                    </svg>
                </button>
            </div>
            <p class="benchmark-desc">{{ b.benchmark }}</p>
        </div>
        }
        <button class="add-btn" (click)="onAddBenchmark()">+ Add Benchmark</button>
    </div>
    }

    <!-- Progress Tab -->
    @if (activeTab() === 'progress') {
    <div class="tab-content timeline">
        <div class="timeline-line"></div>
        @for (ev of sortedProgressEvents(); track ev.progressEventId) {
        <div class="timeline-item">
            <div class="timeline-dot" [style.background]="goalColors().bg"
                [style.border-color]="goalColors().border"></div>
            <div class="event-card">
                <div class="event-header">
                    <span class="event-date">{{ formatDate(ev.createdAt) }}</span>
                    <button class="edit-icon" (click)="onEditEvent(ev)" aria-label="Edit event">
                        <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="#bbb" stroke-width="1.5"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path d="M11.5 1.5l3 3L5 14H2v-3L11.5 1.5z" />
                        </svg>
                    </button>
                </div>
                <p class="event-content">{{ ev.content }}</p>
            </div>
        </div>
        }
        <button class="add-btn" (click)="onNewEvent()">+ Log Progress Event</button>
    </div>
    }
</div>
} @else {
<div class="empty-panel">
    <span class="empty-text">Add a goal to get started</span>
</div>
}
}
