<div class="mb-6">
    <a href="/tasks" class="text-gray-400 hover:text-white text-sm">&larr; Back to Board</a>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

    <div class="lg:col-span-2 space-y-8">
        
        <div class="glass-panel p-8 rounded-xl relative overflow-hidden">
            <span class="absolute top-0 right-0 px-4 py-2 text-xs font-bold uppercase rounded-bl-xl
                <?= $task['priority'] == 'high' ? 'bg-red-500 text-white' : 'bg-blue-500 text-white' ?>">
                <?= htmlspecialchars($task['priority']) ?> Priority
            </span>

            <h1 class="text-3xl font-bold text-white mb-2"><?= htmlspecialchars($task['title']) ?></h1>
            <p class="text-rose-400 text-sm font-medium mb-6">Project: <?= htmlspecialchars($task['project_name']) ?></p>

            <div class="bg-gray-800/50 p-6 rounded-lg border border-gray-700 mb-8">
                <h3 class="text-gray-400 text-xs font-bold uppercase mb-2">Description</h3>
                <p class="text-gray-200 leading-relaxed whitespace-pre-line"><?= htmlspecialchars($task['description']) ?></p>
            </div>

            <div class="flex items-center gap-6 text-sm text-gray-400">
                <div>
                    <span class="block text-xs text-gray-500">Assigned To</span>
                    <span class="text-white"><?= htmlspecialchars($task['assignee_name'] ?? 'Unassigned') ?></span>
                </div>
                <div>
                    <span class="block text-xs text-gray-500">Due Date</span>
                    <span class="text-white"><?= date('F d, Y', strtotime($task['due_date'])) ?></span>
                </div>
            </div>
        </div>

        <div class="glass-panel p-6 rounded-xl">
            <h3 class="text-lg font-bold text-white mb-6">Discussion 💬</h3>
            
            <div class="space-y-6 mb-8 max-h-96 overflow-y-auto pr-2 custom-scrollbar">
                <?php foreach ($comments as $comment): ?>
                    <?php $isMe = ($comment['user_id'] == $_SESSION['user_id']); ?>
                    
                    <div class="flex gap-4 <?= $isMe ? 'flex-row-reverse' : '' ?>">
                        <div class="w-8 h-8 rounded-full bg-gradient-to-br from-gray-700 to-gray-600 flex-shrink-0 flex items-center justify-center text-xs font-bold text-white border border-gray-500">
                            <?= substr($comment['user_name'], 0, 1) ?>
                        </div>
                        
                        <div class="max-w-[80%]">
                            <div class="p-3 rounded-2xl text-sm 
                                <?= $isMe ? 'bg-rose-500 text-white rounded-tr-none' : 'bg-gray-700 text-gray-200 rounded-tl-none' ?>">
                                <?= htmlspecialchars($comment['comment']) ?>
                            </div>
                            <p class="text-[10px] text-gray-500 mt-1 <?= $isMe ? 'text-right' : '' ?>">
                                <?= $comment['user_name'] ?> • <?= date('M d H:i', strtotime($comment['created_at'])) ?>
                            </p>
                        </div>
                    </div>
                <?php endforeach; ?>

                <?php if (empty($comments)): ?>
                    <p class="text-gray-500 text-sm italic text-center">No comments yet. Start the conversation!</p>
                <?php endif; ?>
            </div>

            <form action="/task_details.php?action=comment" method="POST" class="flex gap-2">
                <input type="hidden" name="task_id" value="<?= $task['id'] ?>">
                <input type="text" name="comment" required placeholder="Type a message..." 
                    class="flex-1 bg-gray-900/50 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-rose-500 transition">
                <button type="submit" class="bg-gray-700 hover:bg-white hover:text-rose-500 text-white p-3 rounded-lg transition">
                    ➤
                </button>
            </form>
        </div>

    </div>

    <div>
        <div class="glass-panel p-6 rounded-xl sticky top-6">
            <h3 class="text-lg font-bold text-white mb-4">Files & Assets 📂</h3>

            <form action="/task_details.php?action=upload" method="POST" enctype="multipart/form-data" class="mb-8">
                <input type="hidden" name="task_id" value="<?= $task['id'] ?>">
                
                <div class="border-2 border-dashed border-gray-600 hover:border-rose-500 rounded-lg p-6 text-center transition group cursor-pointer relative">
                    <input type="file" name="file" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" required onchange="this.form.submit()">
                    <div class="text-gray-400 group-hover:text-white">
                        <p class="text-2xl mb-2">☁️</p>
                        <p class="text-xs font-bold">Click to Upload</p>
                    </div>
                </div>
            </form>

            <div class="space-y-3">
                <?php foreach ($uploads as $file): ?>
                    <div class="bg-gray-800/80 p-3 rounded flex justify-between items-center border border-gray-700 group hover:border-gray-500 transition">
                        <div class="flex items-center gap-3 overflow-hidden">
                            <span class="text-xl">📄</span>
                            <div class="min-w-0">
                                <p class="text-xs text-gray-300 truncate w-24 lg:w-32"><?= htmlspecialchars($file['file_path']) ?></p>
                                <p class="text-[10px] text-gray-500"><?= date('M d', strtotime($file['uploaded_at'])) ?></p>
                            </div>
                        </div>
                        <a href="/storage/uploads/<?= $file['file_path'] ?>" download class="text-rose-400 hover:text-rose-300 text-lg">⬇</a>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</div>