---
// src/components/homelab/ServicesSection.astro
// Making sure servicesData is properly handled

const { servicesData } = Astro.props;

// Helper functions
function getCategoryIcon(category) {
  if (category === 'development') return 'fa-code';
  if (category === 'media') return 'fa-photo-video';
  if (category === 'utilities') return 'fa-tools';
  return 'fa-cogs'; // Default for infrastructure
}

function formatServiceName(name) {
  return name.toLowerCase().replace(/\s+/g, '-');
}

// Create a safe version of the data in case it's undefined
const safeServicesData = servicesData || {};

// Prepare data for rendering to minimize template expressions
const categoryEntries = Object.entries(safeServicesData).map(([key, services]) => {
  return {
    key,
    title: key.charAt(0).toUpperCase() + key.slice(1),
    services: Array.isArray(services) ? services : []
  };
});

// Debug logging
console.log("ServicesSection received servicesData:", !!servicesData);
console.log("ServicesSection categories count:", categoryEntries.length);
---

<section id="services" class="services section-padding">
  <div class="container">
    <div class="section-header">
      <h2 class="section-title">Available Services</h2>
      <p class="section-description">
        Explore the various services and applications hosted in the ArgoBox environment.
      </p>
    </div>
    
    <div class="services-info-banner">
      <i class="fas fa-info-circle info-icon"></i>
      <p>Some services require authentication and are restricted. Available public services are highlighted and clickable.</p>
    </div>
    
    <div class="services-grid">
      {categoryEntries.length > 0 ? (
        categoryEntries.map(category => (
          <div class="services-category" data-category={category.key}>
            <h3 class="category-title">
              <i class={`fas ${getCategoryIcon(category.key)} category-icon`}></i>
              {category.title} Tools
            </h3>
            <div class="service-items">
              {category.services.map(service => (
                <a
                  href={service.available ? service.url : '#'}
                  class={`service-item ${service.available ? 'available' : ''} service-${formatServiceName(service.name)}`}
                  target={service.available ? "_blank" : null}
                  rel={service.available ? "noopener noreferrer" : null}
                  aria-disabled={!service.available}
                >
                  <div class="service-icon"><i class={service.icon}></i></div>
                  <div class="service-info">
                    <div class="service-name">{service.name}</div>
                    <p class="service-description">{service.description}</p>
                  </div>
                  <span class={`service-status ${service.status}`}>
                    <span class="status-dot"></span>
                    {service.status.charAt(0).toUpperCase() + service.status.slice(1)}
                  </span>
                </a>
              ))}
            </div>
          </div>
        ))
      ) : (
        <div class="no-services">
          <p>No services available at this time.</p>
        </div>
      )}
    </div>
  </div>
</section>

<style>
  .services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2rem;
  }
  
  .services-info-banner {
    display: flex;
    align-items: center;
    padding: 1rem;
    background-color: rgba(59, 130, 246, 0.1);
    border-radius: 0.5rem;
    margin-top: 1rem;
  }
  
  .info-icon {
    margin-right: 1rem;
    color: var(--primary, #3b82f6);
  }
  
  .services-category {
    margin-bottom: 2rem;
  }
  
  .category-title {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 1.5rem;
  }
  
  .category-icon {
    margin-right: 0.75rem;
    opacity: 0.8;
  }
  
  .service-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
  }
  
  .service-item {
    display: flex;
    padding: 1.25rem;
    border-radius: 0.5rem;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
    text-decoration: none;
    color: var(--text-primary);
    position: relative;
  }
  
  .service-item.available:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }
  
  .service-icon {
    margin-right: 1rem;
    font-size: 1.25rem;
    color: var(--primary);
  }
  
  .service-info {
    flex: 1;
  }
  
  .service-name {
    font-weight: 500;
    margin-bottom: 0.5rem;
  }
  
  .service-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
  }
  
  .service-status {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    background-color: rgba(0, 0, 0, 0.1);
    margin-left: 1rem;
  }
  
  .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.25rem;
    background-color: var(--success);
  }
  
  .service-status.offline .status-dot {
    background-color: var(--error);
  }
  
  .no-services {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    background-color: var(--bg-card);
    border-radius: 0.5rem;
    border: 1px solid var(--border);
  }
</style>