---
import { GLOBAL } from "../../lib/variables";
import Layout from "../../layouts/Layout.astro";
import Section from "../../components/common/Section.astro";
import SearchBar from "../../components/common/SearchBar.astro";
import StyleControls from "../../components/common/StyleControls.astro";
import CategorySection from "../../components/homelab/CategorySection.astro";
import ServiceCardSkeleton from "../../components/common/ServiceCardSkeleton.astro";
import SkeletonLoader from "../../components/common/SkeletonLoader.astro";
import SEO from "../../components/SEO.astro";
import StructuredData from "../../components/StructuredData.astro";
import { services } from "./services.ts";

// Count total services
const totalServices = Object.values(services).reduce(
  (count, serviceList) => count + serviceList.length, 
  0
);

// Structured data for the homelab page
const webpageData = {
  name: "Homelab Dashboard",
  description: `A collection of ${totalServices} self-hosted services and applications running on my personal homelab.`,
  url: `${GLOBAL.rootUrl}/homelab`,
  isPartOf: {
    "@type": "WebSite",
    "name": `${GLOBAL.username} • ${GLOBAL.shortDescription}`,
    "url": GLOBAL.rootUrl
  }
};
---

<Layout>
  <SEO 
    slot="head" 
    title="Homelab Dashboard"
    description={`A collection of ${totalServices} self-hosted services and applications running on my personal homelab.`}
    canonicalUrl={`${GLOBAL.rootUrl}/homelab`}
  />
  <StructuredData slot="head" type="WebPage" data={webpageData} />

  <!-- Search functionality is provided by SearchScript.astro -->

  <Section class="my-8">
    <div x-data="searchServices" x-init="init()" x-cloak>
      <!-- Search and controls container -->
      <div class="mb-4 pt-0">
        <!-- Search bar in its own row -->
        <div class="w-full mb-3">
          <SearchBar 
            placeholder="Search services..." 
            ariaLabel="Search services"
          />
        </div>
        
        <!-- Style controls in a row below search -->
        <div class="w-full flex justify-end">
          <StyleControls />
        </div>
      </div>
      
      <!-- Page heading - now below search -->
      <div class="flex items-center gap-4 pb-4 mt-2">
        <h1 class="font-display text-3xl sm:text-4xl leading-loose">Homelab</h1>
      </div>
      
      <!-- No results message -->
      <div 
        x-show="searchQuery !== '' && !hasResults" 
        x-transition
        class="text-center py-8 my-4 border-2 border-dashed border-current zag-text rounded-lg"
      >
        <p class="text-xl font-semibold zag-text">No Results</p>
      </div>

      <!-- Loading skeleton -->
      <div 
        x-show="loading" 
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
      >
        {Object.entries(services).map(([category, apps]) => (
          <div class="mb-8">
            <div class="text-xl font-semibold mb-4 w-full text-left flex items-center justify-between">
              <SkeletonLoader type="title" width="40%" height="1.5rem" />
            </div>
            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
              {Array.from({ length: apps.length || 4 }).map((_, i) => (
                <ServiceCardSkeleton />
              ))}
            </div>
          </div>
        ))}
      </div>

      <!-- Service categories (actual content) -->
      <div 
        id="app-list" 
        x-show="!loading"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
      >
        {Object.entries(services).map(([category, apps]) => (
          <CategorySection category={category} apps={apps} />
        ))}
      </div>
    </div>
  </Section>
</Layout>