@extends('layouts.app')

@section('title', 'Forum Diskusi Kelas')

@section('content')
<div class="mx-auto max-w-4xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <p class="pkbm-dashboard__breadcrumb"><a class="text-blue-700" href="{{ route('student.dashboard') }}">Ruang Belajar</a><i class="bi bi-chevron-right" aria-hidden="true"></i>Forum Diskusi</p>
                <h1 class="pkbm-dashboard__title">Forum Diskusi Kelas</h1>
                <p class="pkbm-dashboard__subtitle">{{ $student->className ?: 'Kelas Anda' }} · Tanya jawab materi bersama pengajar dan teman sekelas</p>
            </div>
            <div class="flex items-center gap-2 rounded-xl bg-white/90 px-3.5 py-2 shadow-sm backdrop-blur">
                <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-100 text-blue-700"><i class="bi bi-chat-quote"></i></div>
                <div class="text-xs">
                    <span class="block text-[10px] font-bold uppercase text-slate-400">Siswa</span>
                    <span class="font-bold text-slate-800">{{ $student->name }}</span>
                </div>
            </div>
        </div>
    </header>

    @if (session('status'))<div role="status" class="settings-notice settings-notice--success">{{ session('status') }}</div>@endif
    @if ($errors->any())<div role="alert" class="settings-notice settings-notice--error">{{ $errors->first() }}</div>@endif

    <form method="GET" action="{{ route('student.discussion.index') }}" class="sp-card grid gap-3 p-4 sm:grid-cols-12 sm:items-end">
        <div class="sm:col-span-5">
            <label class="sp-form-label" for="mapel">Mata pelajaran</label>
            <select class="sp-form-control px-3 py-2" id="mapel" name="mapel" onchange="this.form.submit()">
                <option value="">-- Pilih mata pelajaran --</option>
                @foreach ($subjects as $subject)
                    <option value="{{ $subject->id }}" @selected($subjectId === (int) $subject->id)>{{ $subject->nama_mapel }}</option>
                @endforeach
            </select>
        </div>
        <div class="sm:col-span-5">
            <label class="sp-form-label" for="materi">Topik materi</label>
            <select class="sp-form-control px-3 py-2" id="materi" name="materi" onchange="this.form.submit()" @disabled(! $subjectId)>
                <option value="">Semua topik (umum)</option>
                @foreach ($materials as $material)
                    <option value="{{ $material->id }}" @selected($materialId === (int) $material->id)>{{ $material->judul }}</option>
                @endforeach
            </select>
        </div>
        <div class="sm:col-span-2">
            <button type="submit" class="sp-btn-primary w-full justify-center"><i class="bi bi-funnel" aria-hidden="true"></i>Tampilkan</button>
        </div>
    </form>

    @if (! $subjectId)
        <div class="sp-card p-12 text-center text-slate-400">
            <div class="mb-3 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-slate-100 text-slate-400"><i class="bi bi-chat-left-dots text-3xl" aria-hidden="true"></i></div>
            <h2 class="text-base font-bold text-slate-700">Pilih mata pelajaran terlebih dahulu</h2>
            <p class="mx-auto mt-1 max-w-sm text-sm text-slate-500">Riwayat diskusi kelas dimuat per mata pelajaran agar percakapan lebih terarah.</p>
        </div>
    @else
        <section class="sp-card overflow-hidden">
            <div class="flex items-center justify-between gap-3 bg-blue-600 px-4 py-3 text-white">
                <div class="flex items-center gap-2.5">
                    <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-white/20"><i class="bi bi-people" aria-hidden="true"></i></span>
                    <div>
                        <p class="text-sm font-bold leading-tight">{{ $subjects->firstWhere('id', $subjectId)?->nama_mapel ?: 'Diskusi' }}</p>
                        <p class="text-[11px] text-blue-100">{{ $materialId ? 'Topik: '.($materials->firstWhere('id', $materialId)?->judul ?? '-') : 'Semua topik materi' }}</p>
                    </div>
                </div>
                <span class="rounded-full bg-white/15 px-2.5 py-1 text-[11px] font-semibold"><i class="bi bi-arrow-repeat me-1" aria-hidden="true"></i>Pembaruan otomatis</span>
            </div>

            <div id="discussion-log" class="max-h-[28rem] space-y-3 overflow-y-auto bg-slate-50 p-4">
                @if ($messages->isEmpty())
                    <p class="mx-auto max-w-xs rounded-xl bg-white p-4 text-center text-sm text-slate-500 shadow-sm">
                        <i class="bi bi-chat-square-text mb-1 block text-lg text-blue-600" aria-hidden="true"></i>
                        Belum ada diskusi. Kirim pertanyaan pertama Anda!
                    </p>
                @else
                    @foreach ($messages as $message)
                        <article @class(['flex', 'justify-end' => $message->mine, 'justify-start' => ! $message->mine]) data-message-id="{{ $message->id }}">
                            <div @class([
                                'max-w-[85%] space-y-1 rounded-2xl p-3 text-sm shadow-sm',
                                'rounded-br-sm bg-blue-600 text-white' => $message->mine,
                                'rounded-bl-sm border border-slate-200 bg-white text-slate-700' => ! $message->mine,
                            ])>
                                <p class="text-[11px] font-bold {{ $message->mine ? 'text-blue-100' : 'text-blue-700' }}">
                                    {{ $message->sender_name }}
                                    @if ($message->judul_materi)<span class="font-normal opacity-80">· {{ $message->judul_materi }}</span>@endif
                                </p>
                                <p class="whitespace-pre-line break-words">{{ $message->pesan }}</p>
                                <p class="text-right text-[10px] {{ $message->mine ? 'text-blue-100' : 'text-slate-400' }}">{{ $message->waktu_format }}</p>
                                @if ($message->mine)
                                    <div class="flex justify-end gap-2 text-[11px]">
                                        <button type="button" class="font-semibold underline decoration-dotted" data-edit-message="{{ $message->id }}" data-content="{{ $message->pesan }}">Ubah</button>
                                        <form method="POST" action="{{ route('student.discussion.destroy', $message->id) }}" onsubmit="return confirm('Hapus pesan ini?');">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="font-semibold text-rose-600 underline decoration-dotted">Hapus</button>
                                        </form>
                                    </div>
                                @endif
                            </div>
                        </article>
                    @endforeach
                @endif
            </div>

            <form method="POST" action="{{ route('student.discussion.store') }}" id="discussion-form" class="space-y-3 border-t border-slate-100 bg-white p-4">
                @csrf
                <input type="hidden" name="id_mapel" value="{{ $subjectId }}">
                <input type="hidden" name="id_materi" value="{{ $materialId ?? '' }}">
                <div>
                    <label class="sp-form-label" for="pesan">Pesan diskusi</label>
                    <textarea class="sp-form-control px-3 py-2 text-sm" id="pesan" name="pesan" rows="3" maxlength="5000" required placeholder="Tuliskan pertanyaan atau jawaban Anda..."></textarea>
                </div>
                <div class="flex flex-wrap items-center justify-between gap-2">
                    <p class="text-xs text-slate-500">Berpaculah pada materi pelajaran. Data pribadi tidak perlu dibagikan di forum.</p>
                    <button type="submit" class="sp-btn-primary"><i class="bi bi-send" aria-hidden="true"></i>Kirim pesan</button>
                </div>
            </form>
        </section>

        <form id="edit-form" method="POST" action="" class="hidden space-y-3 rounded-xl border border-slate-200 bg-white p-4">
            @csrf @method('PUT')
            <label class="sp-form-label" for="edit-pesan">Ubah pesan diskusi</label>
            <textarea class="sp-form-control px-3 py-2 text-sm" id="edit-pesan" name="pesan" rows="3" maxlength="5000" required></textarea>
            <div class="flex gap-2">
                <button type="submit" class="sp-btn-primary"><i class="bi bi-save" aria-hidden="true"></i>Simpan perubahan</button>
                <button type="button" class="sp-btn-secondary" id="cancel-edit">Batal</button>
            </div>
        </form>
    @endif
</div>
@endsection

@push('scripts')
<script>
(function () {
    const log = document.getElementById('discussion-log');
    const editForm = document.getElementById('edit-form');
    const editInput = document.getElementById('edit-pesan');
    if (! log || ! editForm) {
        return;
    }
    const endpoint = @json(route('student.discussion.history', ['mapel' => $subjectId, 'materi' => $materialId ?? '']));
    const editRoute = @json(route('student.discussion.update', ['diskusi' => '__ID__']));

    document.addEventListener('click', (event) => {
        const trigger = event.target.closest('[data-edit-message]');
        if (trigger) {
            editForm.classList.remove('hidden');
            editForm.action = editRoute.replace('__ID__', trigger.dataset.editMessage);
            editInput.value = trigger.dataset.content;
            editInput.focus();
            return;
        }
        if (event.target.id === 'cancel-edit') {
            editForm.classList.add('hidden');
            editForm.action = '';
        }
    });

    function bubble(message) {
        const wrapper = document.createElement('article');
        wrapper.className = 'flex ' + (message.mine ? 'justify-end' : 'justify-start');
        const box = document.createElement('div');
        box.className = 'max-w-[85%] space-y-1 rounded-2xl p-3 text-sm shadow-sm '
            + (message.mine ? 'rounded-br-sm bg-blue-600 text-white' : 'rounded-bl-sm border border-slate-200 bg-white text-slate-700');
        const name = document.createElement('p');
        name.className = message.mine ? 'text-[11px] font-bold text-blue-100' : 'text-[11px] font-bold text-blue-700';
        name.textContent = message.sender + (message.material ? ' · ' + message.material : '');
        const body = document.createElement('p');
        body.className = 'whitespace-pre-line break-words';
        body.textContent = message.message;
        const time = document.createElement('p');
        time.className = 'text-right text-[10px] ' + (message.mine ? 'text-blue-100' : 'text-slate-400');
        time.textContent = message.time;
        box.append(name, body, time);
        wrapper.append(box);

        return wrapper;
    }

    async function refresh() {
        if (document.activeElement && log.contains(document.activeElement)) {
            return;
        }
        try {
            const response = await fetch(endpoint, {headers: {'Accept': 'application/json'}});
            if (! response.ok) {
                return;
            }
            const payload = await response.json();
            if (! payload.messages.length) {
                return;
            }
            const scrollBottom = log.scrollHeight - log.scrollTop - log.clientHeight < 80;
            log.innerHTML = '';
            payload.messages.forEach((message) => log.append(bubble(message)));
            if (scrollBottom) {
                log.scrollTop = log.scrollHeight;
            }
        } catch (error) {
            console.error('Gagal memuat diskusi:', error);
        }
    }

    setInterval(refresh, 5000);
})();
</script>
@endpush