@props(['task', 'showUser' => true])

@php
    $isOverdue = $task->due_at?->isPast() && !$task->completed_at;
    $isSoon = $task->due_at?->isBetween(now(), now()->addHours(48)) && !$task->completed_at;

    $rowClass = '';
    if ($isOverdue) $rowClass = 'border-start border-danger border-4 bg-danger-subtle';
    elseif ($isSoon) $rowClass = 'border-start border-warning border-4 bg-warning-subtle';
@endphp

<div class="list-group-item d-flex justify-content-between align-items-start py-3 {{ $rowClass }}">
    <div class="d-flex align-items-start">
        <div class="me-3 pt-1">
            @if($task->completed_at)
                <i class="bi bi-check-circle-fill text-success fs-5"></i>
            @elseif($isOverdue)
                <i class="bi bi-exclamation-octagon-fill text-danger fs-5"></i>
            @elseif($isSoon)
                <i class="bi bi-hourglass-split text-warning fs-5"></i>
            @else
                <i class="bi bi-circle text-muted fs-5"></i>
            @endif
        </div>

        <div>
            <div class="d-flex align-items-center gap-2 flex-wrap">
                @if($task->owner)
                    <a wire:navigate href="{{ route('clients.show', $task->owner) }}"
                       class="badge bg-primary text-decoration-none px-2 py-1"
                       title="Open client">
                        <i class="bi bi-person-badge me-1"></i>
                        {{ $task->owner->name_first }} {{ $task->owner->name_last }}
                    </a>
                @else
                    <span class="badge bg-secondary-subtle text-secondary border px-2 py-1" title="Not linked to a client">
                        <i class="bi bi-person-dash me-1"></i> No client
                    </span>
                @endif

                <h6 class="mb-0 fw-bold {{ $task->completed_at ? 'text-decoration-line-through text-muted' : '' }}">
                    {{ $task->title }}
                </h6>
                @if($isSoon)
                    <span class="badge rounded-pill bg-warning text-dark small" style="font-size: 0.7rem;">DUE SOON</span>
                @endif
            </div>

            @if($task->description)
                <p class="mb-1 small text-muted text-wrap" style="max-width: 500px;">
                    {{ $task->description }}
                </p>
            @endif

            <div class="d-flex gap-2 align-items-center mt-1">
                @if($showUser)
                    <span class="badge bg-white text-dark border px-2">
                        <i class="bi bi-person me-1"></i>
                        {{ $task->user->name_first }} {{ $task->user->name_last }}
                    </span>
                @endif

                <small class="text-muted {{ $showUser ? 'border-start ps-2' : '' }}">
                    {{ $task->due_at ? $task->due_at->format('M d, g:i a') : 'No Date' }}
                </small>
            </div>
        </div>
    </div>

    <div class="btn-group">
        @if(!$task->completed_at)
            @can('tasks.edit')
                <button wire:click="editTask({{ $task->id }})" class="btn btn-sm">
                    <i class="mdi mdi-pencil text-primary"></i>
                </button>
            @endcan

            @can('tasks.complete')
                <button wire:click="completeTask({{ $task->id }})" class="btn btn-sm">
                    <i class="mdi mdi-check-circle text-success"></i>
                </button>
            @endcan
        @endif
        @can('tasks.delete')
            <button wire:click="deleteTask({{ $task->id }})" wire:confirm="Remove this task?" class="btn btn-sm">
                <i class="mdi mdi-trash-can text-danger"></i>
            </button>
        @endcan
    </div>
</div>