@extends('student.layouts.app')
@section('content')

{{-- ✅ MAIN CONTAINER: Changed pb-40 to pb-36 to remove the big gap above the reply box --}}
<div class="p-4 max-w-2xl mx-auto pb-32">
    
    {{-- ✅ STICKY COMPACT HEADER: Stays fixed at top, saves space --}}
 <div class="sticky top-0 z-20 bg-white/95 backdrop-blur-md border-b border-slate-200 shadow-sm -mx-4 px-4 pt-4 pb-3">
     <div class="flex items-center justify-between mb-2">
         <a href="{{ route('student.homework.index', ['slug' => session('student_school_slug')]) }}" class="w-8 h-8 bg-slate-100 rounded-full flex items-center justify-center text-slate-500 active:scale-95 transition-all">
             <i class="fa-solid fa-arrow-left text-xs"></i>
         </a>
         <h1 class="text-sm font-black text-slate-800 tracking-tight">Assignment Details</h1>
         <div class="w-8"></div>
     </div>
     <div class="flex items-start gap-2.5 bg-slate-50 p-2.5 rounded-xl border border-slate-100">
         <div class="w-8 h-8 rounded-lg bg-orange-100 text-orange-600 flex items-center justify-center flex-shrink-0">
             <i class="fa-solid fa-book-open text-xs"></i>
         </div>
         <div class="flex-1 min-w-0">
             <div class="flex items-center justify-between gap-2 mb-0.5">
                 <h2 class="text-xs font-black text-slate-800 truncate">{{ $homework->title ?: 'Untitled' }}</h2>
                 <span class="text-[9px] text-slate-500 font-bold whitespace-nowrap">{{ \Carbon\Carbon::parse($homework->created_at)->format('d M, h:i A') }}</span>
             </div>
             <p class="text-[10px] text-orange-600 font-bold mb-1">{{ $homework->subject_name ?? 'General' }}</p>
             {{-- ✅ REMOVED line-clamp-2 so full message is visible in header if short, or scrolls if long --}}
             <p class="text-[10px] text-slate-600 leading-snug whitespace-pre-line">{{ $homework->message }}</p>
                          @php $attachments = json_decode($homework->attachment ?? '[]', true) ?? []; @endphp
             @if(!empty($attachments))
             <div class="mt-2">
                 <p class="text-[9px] font-black text-slate-500 uppercase tracking-wider mb-1">Attached Photos</p>
                 <div class="grid grid-cols-3 gap-1.5">
                     @foreach($attachments as $photo)
                     <a href="{{ asset('storage/'.$photo) }}" target="_blank" class="relative aspect-square rounded-lg overflow-hidden border border-slate-200 group block">
                         <img src="{{ asset('storage/'.$photo) }}" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                         <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
                             <i class="fa-solid fa-magnifying-glass-plus text-white opacity-0 group-hover:opacity-100 text-xs drop-shadow-md"></i>
                         </div>
                     </a>
                     @endforeach
                 </div>
             </div>
             @endif
         </div>
     </div>
 </div>

    {{-- ✅ CONVERSATION THREAD --}}
    <div class="p-4 space-y-3" id="chatThread">
        @forelse($replies as $reply)
            @php $isStudent = !empty($reply->student_id); @endphp
            <div class="flex {{ $isStudent ? 'justify-end' : 'justify-start' }}">
                <div class="max-w-[85%] flex {{ $isStudent ? 'flex-row-reverse' : 'flex-row' }} items-end gap-2">
                    <div class="w-7 h-7 rounded-full flex items-center justify-center text-[10px] font-black flex-shrink-0 shadow-sm
                        {{ $isStudent ? 'bg-indigo-100 text-indigo-600' : 'bg-orange-100 text-orange-600' }}">
                        {{ $isStudent ? substr($reply->student_name ?? 'S', 0, 1) : substr($reply->teacher_name ?? 'T', 0, 1) }}
                    </div>
                    <div class="p-3 rounded-2xl shadow-sm text-[11px] leading-relaxed
                        {{ $isStudent ? 'bg-indigo-600 text-white rounded-br-none' : 'bg-white border border-slate-200 text-slate-700 rounded-bl-none' }}">
                        <p class="whitespace-pre-line">{{ $reply->message }}</p>
                        @if($reply->attachment)
                        <a href="{{ filter_var($reply->attachment, FILTER_VALIDATE_URL) ? $reply->attachment : asset('storage/'.$reply->attachment) }}" target="_blank" 
                           class="mt-2 inline-flex items-center gap-1 text-[9px] font-bold underline {{ $isStudent ? 'text-indigo-200' : 'text-orange-600' }}">
                            <i class="fa-solid fa-paperclip"></i> View Attachment
                        </a>
                        @endif
                        <p class="text-[8px] mt-1.5 {{ $isStudent ? 'text-indigo-300' : 'text-slate-400' }} text-right font-semibold">
                            {{ \Carbon\Carbon::parse($reply->created_at)->format('h:i A') }}
                        </p>
                    </div>
                </div>
            </div>
        @empty
            <p class="text-center text-[10px] text-slate-400 italic py-4">No replies yet. Start the conversation below.</p>
        @endforelse
    </div>
</div>

{{-- ✅ FIXED REPLY BAR — Matches student layout max-w-md (448px) exactly --}}
<div class="fixed bottom-16 left-0 right-0 z-30 flex justify-center pointer-events-none">
    <div class="w-full max-w-md pointer-events-auto">
        <div class="bg-white/95 backdrop-blur-md border-t border-slate-200 p-3 shadow-[0_-5px_20px_rgba(0,0,0,0.06)]">
            <form id="replyForm" action="{{ route('student.homework.reply', ['slug' => session('student_school_slug'), 'id' => $homework->id]) }}" method="POST" enctype="multipart/form-data" class="w-full flex items-end gap-2 px-1">
                @csrf
                <label for="replyAttachment" class="w-10 h-10 bg-slate-100 rounded-full flex items-center justify-center text-slate-500 cursor-pointer hover:bg-indigo-100 hover:text-indigo-600 transition-colors flex-shrink-0">
                    <i class="fa-solid fa-paperclip text-sm"></i>
                    <input type="file" name="attachment" id="replyAttachment" class="hidden" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx">
                </label>
                <div class="flex-1 relative min-w-0">
                    <textarea name="message" id="replyMessage" rows="1" required placeholder="Type your reply... (Enter to send)" class="w-full bg-slate-100 border border-slate-200 rounded-2xl py-2.5 px-4 text-xs text-slate-700 focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 outline-none transition-all resize-none placeholder:text-slate-400 max-h-24"></textarea>
                    <span id="attachedFileName" class="absolute -top-7 left-1 text-[9px] text-indigo-600 font-bold bg-indigo-50 px-2 py-1 rounded-md hidden truncate max-w-[180px] border border-indigo-100 shadow-sm items-center gap-1 z-10">
                        <i class="fa-solid fa-paperclip text-[8px]"></i> <span id="fileNameText"></span>
                        <button type="button" onclick="clearAttachment(event)" class="ml-1 text-red-500 hover:text-red-700"><i class="fa-solid fa-xmark"></i></button>
                    </span>
                </div>
                <button type="submit" id="sendBtn" class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-indigo-600 text-white rounded-full flex items-center justify-center shadow-md shadow-indigo-200 active:scale-90 transition-all flex-shrink-0">
                    <i class="fa-solid fa-paper-plane text-xs"></i>
                </button>
            </form>
        </div>
    </div>
</div>

<script>
// ✅ LIVE CHAT POLLING
let lastReplyId = {{ $replies->isNotEmpty() ? $replies->last()->id : 0 }};

function formatTime(dateStr) {
    const d = new Date(dateStr);
    let h = d.getHours(); let m = d.getMinutes();
    const ampm = h >= 12 ? 'PM' : 'AM';
    h = h % 12; h = h ? h : 12; m = m < 10 ? '0' + m : m;
    return h + ':' + m + ' ' + ampm;
}

function scrollToBottom() {
    const thread = document.getElementById('chatThread');
    if (thread) thread.scrollTop = thread.scrollHeight;
    window.scrollTo({ top: document.body.scrollHeight, behavior: 'auto' });
}

function appendMessage(reply) {
    const thread = document.getElementById('chatThread');
    const emptyMsg = thread.querySelector('p.italic');
    if (emptyMsg) emptyMsg.remove();

    const isStudent = reply.student_id !== null;
    const initial = isStudent ? (reply.student_name ? reply.student_name.substring(0,1) : 'S') : (reply.teacher_name ? reply.teacher_name.substring(0,1) : 'T');
    const attachUrl = reply.attachment ? (reply.attachment.startsWith('http') ? reply.attachment : '/storage/' + reply.attachment) : '';
    
    const msgHtml = `
    <div class="flex ${isStudent ? 'justify-end' : 'justify-start'} animate-fade-in">
        <div class="max-w-[85%] flex ${isStudent ? 'flex-row-reverse' : 'flex-row'} items-end gap-2">
            <div class="w-7 h-7 rounded-full flex items-center justify-center text-[10px] font-black flex-shrink-0 shadow-sm ${isStudent ? 'bg-indigo-100 text-indigo-600' : 'bg-orange-100 text-orange-600'}">
                ${initial}
            </div>
            <div class="p-3 rounded-2xl shadow-sm text-[11px] leading-relaxed ${isStudent ? 'bg-indigo-600 text-white rounded-br-none' : 'bg-white border border-slate-200 text-slate-700 rounded-bl-none'}">
                <p class="whitespace-pre-line">${reply.message}</p>
                ${reply.attachment ? `<a href="${attachUrl}" target="_blank" class="mt-2 inline-flex items-center gap-1 text-[9px] font-bold underline ${isStudent ? 'text-indigo-200' : 'text-orange-600'}"><i class="fa-solid fa-paperclip"></i> View Attachment</a>` : ''}
                <p class="text-[8px] mt-1.5 ${isStudent ? 'text-indigo-300' : 'text-slate-400'} text-right font-semibold">
                    ${formatTime(reply.created_at)}
                </p>
            </div>
        </div>
    </div>`;
    
    thread.insertAdjacentHTML('beforeend', msgHtml);
}

function fetchNewMessages() {
    fetch("{{ route('student.homework.fetchReplies', ['slug' => $slug, 'id' => $homework->id]) }}?after_id=" + lastReplyId)
        .then(response => response.json())
        .then(data => {
            if (data.replies && data.replies.length > 0) {
                data.replies.forEach(reply => {
                    lastReplyId = reply.id;
                    appendMessage(reply);
                });
                scrollToBottom();
            }
        })
        .catch(err => console.log('Polling error:', err));
}

setInterval(fetchNewMessages, 4000);

// ✅ AJAX FORM SUBMIT — NO REFRESH!
document.getElementById('replyForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const form = this;
    const messageInput = document.getElementById('replyMessage');
    const sendBtn = document.getElementById('sendBtn');
    const message = messageInput.value.trim();
    
    if (!message) return;
    
    sendBtn.disabled = true;
    sendBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin text-xs"></i>';
    
    const formData = new FormData(form);
    
    fetch(form.action, {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            messageInput.value = '';
            messageInput.style.height = 'auto';
            
            document.getElementById('replyAttachment').value = '';
            document.getElementById('attachedFileName').classList.add('hidden');
            
            if (data.reply) {
                lastReplyId = data.reply.id;
                appendMessage(data.reply);
                scrollToBottom();
            }
        }
    })
    .catch(err => {
        console.log('Send error:', err);
        form.submit();
    })
    .finally(() => {
        sendBtn.disabled = false;
        sendBtn.innerHTML = '<i class="fa-solid fa-paper-plane text-xs"></i>';
    });
});

// Auto-resize textarea
const ta = document.getElementById('replyMessage');
if(ta) {
    ta.addEventListener('input', function() {
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight) + 'px';
    });
}

// ENTER = SEND
ta.addEventListener('keydown', function (e) {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        if (this.value.trim() !== '') {
            document.getElementById('replyForm').dispatchEvent(new Event('submit'));
        }
    }
});

// File attachment display
document.getElementById('replyAttachment').addEventListener('change', function() {
    const fileName = this.files[0]?.name;
    const badge = document.getElementById('attachedFileName');
    const text = document.getElementById('fileNameText');
    if (fileName) {
        text.textContent = fileName;
        badge.classList.remove('hidden');
        badge.classList.add('flex');
    }
});

function clearAttachment(e) {
    e.preventDefault();
    document.getElementById('replyAttachment').value = '';
    document.getElementById('attachedFileName').classList.add('hidden');
    document.getElementById('attachedFileName').classList.remove('flex');
}

// ✅ SCROLL TO BOTTOM ON PAGE LOAD
window.addEventListener('load', function () {
    setTimeout(scrollToBottom, 100);
});

// Add fade-in animation
const style = document.createElement('style');
style.textContent = `
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    .animate-fade-in { animation: fadeIn 0.3s ease-out; }
`;
document.head.appendChild(style);
</script>
@endsection