@extends('layouts.app')
@section('title', 'Find Student')
@section('content')

<div class="mb-4">
    <h4 class="page-title">Find Student</h4>
    <p class="page-subtitle">Search by name, student ID, email or phone — or pick one of your students below.</p>
</div>

<div class="card mb-4">
    <div class="card-body">
        <div class="proc-search">
            <i class="bi bi-search"></i>
            <input type="search" id="searchInput" class="form-control form-control-lg"
                   placeholder="Type a name, student ID or phone…" autofocus autocomplete="off">
        </div>
        <div class="form-text mt-2" id="searchHint">Type at least 2 characters. Press <kbd>Enter</kbd> to open the first result.</div>
    </div>
</div>

{{-- Live results replace the default lists --}}
<div id="searchResults" class="d-none mb-4"></div>

<div id="defaultLists">
    @if($assignments->isNotEmpty())
    <h6 class="proc-section-title"><i class="bi bi-people-fill text-primary"></i> My assigned students</h6>
    <div class="row g-2 mb-4">
        @foreach($assignments as $assign)
        @php
            $s   = $assign->student;
            $p   = $progressMap[$s->id . '_' . $assign->semester_id] ?? null;
            $ph  = $s->studentProfile?->photo_path;
        @endphp
        <div class="col-md-6">
            <a href="{{ route('ci.student.profile', $s) }}" class="student-row">
                @if($ph)
                <img src="{{ asset('storage/' . $ph) }}" class="student-avatar" alt="">
                @else
                <span class="student-avatar d-inline-flex align-items-center justify-content-center">
                    {{ strtoupper(mb_substr($s->name, 0, 1)) }}
                </span>
                @endif

                <span class="min-w-0 flex-grow-1">
                    <span class="d-block fw-semibold small text-truncate">{{ $s->name }}</span>
                    <span class="d-block text-muted text-truncate" style="font-size:.75rem">
                        {{ $s->studentProfile?->student_id ?: '—' }} · {{ $assign->semester?->name }}
                    </span>
                    @if($p)
                    <span class="d-flex align-items-center gap-2 mt-1">
                        <span class="progress progress-xs flex-grow-1">
                            <span class="progress-bar bg-primary" style="width:{{ $p['percent'] }}%"></span>
                        </span>
                        <span class="text-muted" style="font-size:.7rem">{{ $p['percent'] }}%</span>
                    </span>
                    @endif
                </span>

                <i class="bi bi-chevron-right text-muted flex-shrink-0"></i>
            </a>
        </div>
        @endforeach
    </div>
    @endif

    @if($recentStudents->isNotEmpty())
    <h6 class="proc-section-title"><i class="bi bi-clock-history text-muted"></i> Recently assessed by you</h6>
    <div class="row g-2">
        @foreach($recentStudents as $s)
        <div class="col-md-6">
            <a href="{{ route('ci.student.profile', $s) }}" class="student-row">
                @if($s->studentProfile?->photo_path)
                <img src="{{ asset('storage/' . $s->studentProfile->photo_path) }}" class="student-avatar" alt="">
                @else
                <span class="student-avatar d-inline-flex align-items-center justify-content-center">
                    {{ strtoupper(mb_substr($s->name, 0, 1)) }}
                </span>
                @endif
                <span class="min-w-0 flex-grow-1">
                    <span class="d-block fw-semibold small text-truncate">{{ $s->name }}</span>
                    <span class="d-block text-muted text-truncate" style="font-size:.75rem">
                        {{ $s->studentProfile?->student_id ?: '—' }}
                        @if($s->studentProfile?->currentSemester) · {{ $s->studentProfile->currentSemester->name }} @endif
                    </span>
                </span>
                <i class="bi bi-chevron-right text-muted flex-shrink-0"></i>
            </a>
        </div>
        @endforeach
    </div>
    @endif

    @if($assignments->isEmpty() && $recentStudents->isEmpty())
    <div class="card">
        <div class="card-body text-center text-muted py-5">
            <i class="bi bi-search d-block fs-3 mb-2 opacity-50"></i>
            <div class="fw-semibold small">Nothing to show yet</div>
            <div class="small">Search above to find any student in the system.</div>
        </div>
    </div>
    @endif
</div>

@push('scripts')
<script>
(function () {
    const input    = document.getElementById('searchInput');
    const results  = document.getElementById('searchResults');
    const defaults = document.getElementById('defaultLists');
    const hint     = document.getElementById('searchHint');
    const url      = @json(route('ci.search.results'));

    let timer;
    let controller;      // aborts a superseded request
    let firstUrl = null;

    function showDefaults() {
        results.classList.add('d-none');
        results.innerHTML = '';
        defaults.classList.remove('d-none');
        firstUrl = null;
    }

    input.addEventListener('input', () => {
        clearTimeout(timer);
        const q = input.value.trim();

        if (q.length < 2) {
            controller?.abort();
            showDefaults();
            return;
        }

        timer = setTimeout(() => run(q), 250);
    });

    input.addEventListener('keydown', e => {
        if (e.key === 'Enter' && firstUrl) {
            e.preventDefault();
            window.location.href = firstUrl;
        }
        if (e.key === 'Escape') {
            input.value = '';
            showDefaults();
        }
    });

    async function run(q) {
        // Cancel any in-flight request so a slow earlier one cannot overwrite
        // the results of a newer keystroke.
        controller?.abort();
        controller = new AbortController();

        defaults.classList.add('d-none');
        results.classList.remove('d-none');
        results.innerHTML = '<div class="text-muted small py-3"><span class="spinner-border spinner-border-sm me-2"></span>Searching…</div>';

        let data;
        try {
            const res = await fetch(url + '?q=' + encodeURIComponent(q), {
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
                signal: controller.signal,
            });
            if (!res.ok) throw new Error('Request failed');
            data = await res.json();
        } catch (err) {
            if (err.name === 'AbortError') return;
            results.innerHTML = '<div class="alert alert-danger py-2 small mb-0">Search failed. Please try again.</div>';
            return;
        }

        if (!data.length) {
            firstUrl = null;
            results.innerHTML = '<div class="card"><div class="card-body text-center text-muted py-4">'
                + '<i class="bi bi-person-x d-block fs-4 mb-2 opacity-50"></i>'
                + '<div class="small">No students match “' + escapeHtml(q) + '”.</div></div></div>';
            return;
        }

        firstUrl = data[0].profile_url;
        hint.textContent = data.length + ' result' + (data.length === 1 ? '' : 's');

        results.innerHTML = '<div class="row g-2">' + data.map(s => `
            <div class="col-md-6">
              <a href="${s.profile_url}" class="student-row">
                ${s.photo
                    ? `<img src="${s.photo}" class="student-avatar" alt="">`
                    : `<span class="student-avatar d-inline-flex align-items-center justify-content-center">${escapeHtml(s.initial)}</span>`}
                <span class="min-w-0 flex-grow-1">
                  <span class="d-block fw-semibold small text-truncate">
                    ${escapeHtml(s.name)}
                    ${s.assigned ? '<span class="badge bg-primary-subtle text-primary-emphasis ms-1">Assigned to you</span>' : ''}
                  </span>
                  <span class="d-block text-muted text-truncate" style="font-size:.75rem">
                    ${escapeHtml(s.student_id)} · ${escapeHtml(s.intake)}${s.semester ? ' · ' + escapeHtml(s.semester) : ''}
                  </span>
                  ${s.percent !== null ? `
                  <span class="d-flex align-items-center gap-2 mt-1">
                    <span class="progress progress-xs flex-grow-1">
                      <span class="progress-bar bg-primary" style="width:${s.percent}%"></span>
                    </span>
                    <span class="text-muted" style="font-size:.7rem">${s.passed}/${s.total}</span>
                  </span>` : ''}
                </span>
                <i class="bi bi-chevron-right text-muted flex-shrink-0"></i>
              </a>
            </div>`).join('') + '</div>';
    }

    function escapeHtml(value) {
        return String(value ?? '').replace(/[&<>"']/g, c => ({
            '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
        })[c]);
    }
})();
</script>
@endpush
@endsection