{ticket.subject || ticket.title}

{getStatusBadge(ticket.status).label} {getPriorityBadge(ticket.priority).label} Creado {formatDate(ticket.created_at)}

{ticket.description}

Archivos Adjuntos ({attachments.length})

{#each attachments as attachment}

ADJ

{attachment.original_filename}

{Math.round(attachment.size_bytes / 1024)} KB {#if attachment.uploaded_by_name} • Subido por {attachment.uploaded_by_name} {/if} {#if attachment.uploaded_at} • {formatDate(attachment.uploaded_at)} {/if}

{/each}

Conversación

{#if comments.length === 0}

No hay comentarios aún. ¡Sé el primero en comentar!

{:else}

{#each comments as comment}

{comment.author_name ? comment.author_name .split(' ') .map(n => n[0]) .join('') : 'U'}

{comment.author_name || 'Usuario Desconocido'} {formatDate(comment.created_at)} {#if comment.is_internal} Interno {/if}

{comment.content}

{/each}

{/if}

<div class="flex justify-end">
                  <button
                    type="submit"
                    class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
                    disabled={isSubmittingComment || !newComment.trim()}
                  >
                    {#if isSubmittingComment}
                      <div class="flex items-center space-x-2">
                        <div
                          class="inline-block animate-spin rounded-full h-4 w-4 border-b-2 border-white"
                        />
                        <span>Enviando...</span>
                      </div>
                    {:else}
                      Enviar Comentario
                    {/if}
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>

<div class="space-y-6">
        
        <div class="bg-white shadow rounded-lg">
          <div class="px-6 py-5 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-900">Información</h3>
          </div>
          <div class="px-6 py-5 space-y-4">
            <div>
              <dt class="text-sm font-medium text-gray-500">ID del Ticket</dt>
              <dd class="text-sm text-gray-900 font-mono">
                #{ticket.ticket_number || ticket.id.substring(0, 8)}
              </dd>
            </div>

<div>
              <dt class="text-sm font-medium text-gray-500">Creado por</dt>
              <dd class="text-sm text-gray-900">{getUserName(ticket.created_by)}</dd>
            </div>

{#if ticket.assigned_to}
              <div>
                <dt class="text-sm font-medium text-gray-500">Asignado a</dt>
                <dd class="text-sm text-gray-900">{getUserName(ticket.assigned_to)}</dd>
              </div>
            {/if}

<div>
              <dt class="text-sm font-medium text-gray-500">Creado</dt>
              <dd class="text-sm text-gray-900">{formatDate(ticket.created_at)}</dd>
            </div>

<div>
              <dt class="text-sm font-medium text-gray-500">Última actualización</dt>
              <dd class="text-sm text-gray-900">{formatDate(ticket.updated_at)}</dd>
            </div>

<div class="bg-white shadow rounded-lg">
              <div class="px-6 py-5 border-b border-gray-200 flex justify-between items-center">
                <h3 class="text-lg font-semibold text-gray-900">
                  Asuntos {#if issues.length > 0}<span class="text-gray-400 font-normal"
                      >({issues.length})</span
                    >{/if}
                </h3>
                <button
                  type="button"
                  on:click={() => (showIssueModal = true)}
                  class="text-sm text-blue-600 hover:text-blue-700 font-medium"
                >
                  Crear asunto
                </button>
              </div>
              {#if issues.length > 0}
                <div class="divide-y divide-gray-100">
                  {#each issues as issue}
                    <div class="px-6 py-4">
                      <div class="flex items-start justify-between gap-2">
                        <p class="text-sm text-gray-700 flex-1">{issue.content}</p>
                        <span
                          class="text-xs font-medium px-2 py-0.5 rounded-full bg-gray-100 text-gray-600 shrink-0"
                        >
                          {issue.priority}
                        </span>
                      </div>
                      {#if issue.tagged_users?.length > 0}
                        <div class="mt-2 flex flex-wrap gap-1">
                          {#each issue.tagged_users as u}
                            <span class="text-xs bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full">
                              {u.full_name}
                            </span>
                          {/each}
                        </div>
                      {/if}
                      <p class="text-xs text-gray-400 mt-1">{issue.created_by_name}</p>
                    </div>
                  {/each}
                </div>
              {:else}
                <p class="px-6 py-4 text-sm text-gray-500">No hay asuntos creados.</p>
              {/if}
            </div>

{#if ticket.sla_response_due || ticket.sla_resolution_due}
              <div class="pt-4 border-t border-gray-200">
                <h4 class="text-sm font-semibold text-gray-900 mb-3">
                  SLA (Acuerdos de Nivel de Servicio)
                </h4>

{#if ticket.sla_response_due}
                  <div class="mb-3">
                    <dt class="text-xs font-medium text-gray-500">Tiempo de Respuesta</dt>
                    <dd class="text-sm text-gray-900 mt-1">
                      {formatDate(ticket.sla_response_due)}
                      {#if new Date(ticket.sla_response_due) < new Date() && !ticket.sla_response_met}
                        <span
                          class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-50 text-red-700 border border-red-200"
                        >
                          Vencido
                        </span>
                      {:else if ticket.sla_response_met}
                        <span
                          class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-50 text-green-700 border border-green-200"
                        >
                          Cumplido
                        </span>
                      {:else}
                        <span
                          class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-50 text-blue-700 border border-blue-200"
                        >
                          En plazo
                        </span>
                      {/if}
                    </dd>
                  </div>
                {/if}

{#if ticket.sla_resolution_due}
                  <div>
                    <dt class="text-xs font-medium text-gray-500">Tiempo de Resolución</dt>
                    <dd class="text-sm text-gray-900 mt-1">
                      {formatDate(ticket.sla_resolution_due)}
                      {#if new Date(ticket.sla_resolution_due) < new Date() && !ticket.sla_resolution_met}
                        <span
                          class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-50 text-red-700 border border-red-200"
                        >
                          Vencido
                        </span>
                      {:else if ticket.sla_resolution_met}
                        <span
                          class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-50 text-green-700 border border-green-200"
                        >
                          Cumplido
                        </span>
                      {:else}
                        <span
                          class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-50 text-blue-700 border border-blue-200"
                        >
                          En plazo
                        </span>
                      {/if}
                    </dd>
                  </div>
                {/if}
              </div>
            {/if}
          </div>
        </div>
      </div>
    </div>
  {/if}
  {#if showParticipants && ticket}
    <ParticipantsModal
      ticketId={ticket.id}
      createdBy={ticket.created_by}
      on:close={() => (showParticipants = false)}
    />
  {/if}
  {#if showIssueModal && ticket}
    <IssueModal
      ticketId={ticket.id}
      {users}
      on:close={() => (showIssueModal = false)}
      on:created={() => {
        showIssueModal = false;
        loadData();
      }}
    />
  {/if}
</div>