<div class="bg-white border border-gray-200 rounded-lg p-3 shadow-sm hover:shadow-md transition-shadow cursor-pointer" 
     data-item-id="<?= $item['id'] ?>" 
     onclick="viewItemDetails(<?= $item['id'] ?>)">
    
    <div class="flex items-start justify-between mb-2">
        <div class="flex gap-1 flex-wrap">
            <?php
            $type_colors = [
                'user_story' => 'bg-blue-100 text-blue-800',
                'task' => 'bg-green-100 text-green-800',
                'bug' => 'bg-red-100 text-red-800',
                'technical' => 'bg-purple-100 text-purple-800'
            ];
            $type_labels = [
                'user_story' => 'US',
                'task' => 'T',
                'bug' => 'B',
                'technical' => 'TEC'
            ];
            ?>
            <span class="px-2 py-1 text-xs font-bold rounded <?= $type_colors[$item['type']] ?? 'bg-gray-100 text-gray-800' ?>">
                <?= $type_labels[$item['type']] ?? substr($item['type'], 0, 2) ?>
            </span>

            <?php
            $priority_colors = [
                'critical' => 'bg-red-100 text-red-800',
                'high' => 'bg-orange-100 text-orange-800',
                'medium' => 'bg-yellow-100 text-yellow-800',
                'low' => 'bg-gray-100 text-gray-800'
            ];
            ?>
            <span class="px-2 py-1 text-xs font-bold rounded <?= $priority_colors[$item['priority']] ?>">
                <?= strtoupper(substr($item['priority'], 0, 1)) ?>
            </span>

            <?php if ($item['story_points']): ?>
                <span class="px-2 py-1 text-xs font-bold rounded bg-indigo-100 text-indigo-800" title="Story Points: estimación de complejidad">
                    <?= $item['story_points'] ?> pts
                </span>
            <?php endif; ?>
            
            <!-- Badge de requerimiento origen -->
            <?php if (!empty($item['requirement_code'])): ?>
            <a href="/requirements/view/<?= $item['requirement_id'] ?>" 
               onclick="event.stopPropagation()"
               class="px-2 py-1 text-xs font-medium bg-blue-50 text-blue-700 rounded hover:bg-blue-100"
               title="Creado desde requerimiento">
                <i class="fas fa-link mr-1"></i><?= htmlspecialchars($item['requirement_code']) ?>
            </a>
            <?php endif; ?>
        </div>

        <button onclick="event.stopPropagation(); removeItemFromSprint(<?= $item['id'] ?>, '<?= htmlspecialchars($item['title'], ENT_QUOTES) ?>')" 
                class="text-gray-400 hover:text-red-600"
                title="Remover del sprint">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
        </button>
    </div>

    <h4 class="text-sm font-semibold text-gray-800 mb-1 line-clamp-2">
        <?= htmlspecialchars($item['title']) ?>
    </h4>

    <?php if ($item['description']): ?>
        <p class="text-xs text-gray-600 mb-2 line-clamp-2">
            <?= htmlspecialchars(substr($item['description'], 0, 80)) ?><?= strlen($item['description']) > 80 ? '...' : '' ?>
        </p>
    <?php endif; ?>

    <div class="flex items-center justify-between text-xs text-gray-500">
        <?php if ($item['assigned_to']): ?>
            <span title="<?= htmlspecialchars($item['assigned_first_name'] . ' ' . $item['assigned_last_name']) ?>">
                <svg class="w-4 h-4 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                </svg>
                <?= substr($item['assigned_first_name'], 0, 1) . substr($item['assigned_last_name'], 0, 1) ?>
            </span>
        <?php endif; ?>

        <?php if ($item['tasks_count'] > 0): ?>
            <span title="<?= $item['tasks_count'] ?> tareas">
                <svg class="w-4 h-4 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
                </svg>
                <?= $item['tasks_count'] ?>
            </span>
        <?php endif; ?>

        <?php if ($item['committed_hours']): ?>
            <span title="<?= $item['committed_hours'] ?>h comprometidas (estimación tiempo)">
                <svg class="w-4 h-4 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                <?= $item['committed_hours'] ?>h
            </span>
        <?php endif; ?>
    </div>

    <!-- Selector de estado -->
    <div class="mt-2 pt-2 border-t border-gray-100">
        <select onchange="event.stopPropagation(); changeItemStatus(<?= $item['id'] ?>, this.value)" 
                class="w-full text-xs border-none bg-transparent text-gray-600 focus:ring-0 p-0 cursor-pointer"
                onclick="event.stopPropagation()">
            <option value="backlog" <?= $item['status'] === 'backlog' ? 'selected' : '' ?>>→ Por Hacer</option>
            <option value="ready" <?= $item['status'] === 'ready' ? 'selected' : '' ?>>→ Preparado</option>
            <option value="in_progress" <?= $item['status'] === 'in_progress' ? 'selected' : '' ?>>→ En Progreso</option>
            <option value="done" <?= $item['status'] === 'done' ? 'selected' : '' ?>>→ Hecho</option>
        </select>
    </div>
</div>
