---
import Layout from '../layouts/Layout.astro';
const BASE = "https://games.teletype.hu";
const API = BASE + "/api/software";

const res = await fetch(API);
const json = await res.json();
const softwares = json.softwares;
---

<Layout>
  <header class="hero-section-gradient from-purple-600 to-indigo-600 py-16">
    <div class="hero-container">
      <h1 class="hero-title">Our Games</h1>
      <p class="hero-subtitle text-purple-50">Discover games made for TIC-80 and other platforms, with versions playable directly in your browser!</p>
    </div>
  </header>

  <main class="main-container py-12 px-4 mt-0">
    <div class="flex flex-wrap gap-4 mb-8 justify-center filter-buttons pb-4">
      <button class="filter-btn active" data-filter="all">All</button>
      <button class="filter-btn" data-filter="released">Released</button>
      <button class="filter-btn" data-filter="demo">Demo</button>
      <button class="filter-btn" data-filter="development">Development</button>
      <button class="filter-btn" data-filter="archived">Archived</button>
    </div>

    <div class="grid grid-cols-1 gap-8 software-list">
      {softwares.map(({ software, releases, latestRelease }) => (
        <div class="software-card" data-status={software.status}>
          <div class="software-card-content">
            <div class="flex items-center gap-3 mb-2">
              <h2 class="software-title mb-0">{software.title}</h2>
              <span class={`status-badge status-${software.status}`}>
                {software.status}
              </span>
            </div>
            <p class="software-desc">{software.desc}</p>
            <div class="software-meta">
              <div>Author: {software.author}</div>
              <div>Platform: {software.platform}</div>
            </div>

          {latestRelease && (
            <div class="latest-release-actions">
                {latestRelease.htmlFolderPath ? (
                  <a href={BASE + latestRelease.htmlFolderPath} target="_blank" class="btn-play-sm">▶ Play</a>
                ) : (
                  <span class="btn-disabled-sm">▶ Play</span>
                )}
                {latestRelease.cartridgePath ? (
                  <a href={BASE + latestRelease.cartridgePath} target="_blank" class="btn-download-sm">Download</a>
                ) : (
                  <span class="btn-disabled-sm">Download</span>
                )}
                {latestRelease.sourcePath ? (
                  <a href={BASE + latestRelease.sourcePath} target="_blank" class="btn-source-sm">Source</a>
                ) : (
                  <span class="btn-disabled-sm">Source</span>
                )}
                {latestRelease.docsFolderPath ? (
                  <a href={BASE + latestRelease.docsFolderPath} target="_blank" class="btn-docs-sm">Docs</a>
                ) : (
                  <span class="btn-disabled-sm">Docs</span>
                )}
            </div>
          )}

          <details class="mt-4">
            <summary class="releases-summary">
              Releases ({releases.length})
            </summary>
            
            <div class="mt-4">
              {/* Desktop Table View */}
              <div class="desktop-releases">
                <table class="releases-table">
                  <thead class="releases-thead">
                    <tr>
                      <th scope="col" class="releases-th">Version</th>
                      <th scope="col" class="releases-th">Date</th>
                      <th scope="col" class="releases-th text-right">Actions</th>
                    </tr>
                  </thead>
                  <tbody class="releases-tbody">
                    {releases.map((release) => (
                      <tr>
                        <td class="releases-td font-medium text-gray-900">{release.version}</td>
                        <td class="releases-td text-gray-500">
                          {new Date(release.CreatedAt).toLocaleDateString('en-US')}
                        </td>
                        <td class="releases-td text-right">
                          {release.htmlFolderPath ? (
                            <a href={BASE + release.htmlFolderPath} target="_blank" class="action-link-purple">▶ Play</a>
                          ) : (
                            <span class="action-link-disabled">▶ Play</span>
                          )}
                          {release.cartridgePath ? (
                            <a href={BASE + release.cartridgePath} target="_blank" class="action-link-blue">Download</a>
                          ) : (
                            <span class="action-link-disabled">Download</span>
                          )}
                          {release.sourcePath ? (
                            <a href={BASE + release.sourcePath} target="_blank" class="action-link-green">Source</a>
                          ) : (
                            <span class="action-link-disabled">Source</span>
                          )}
                          {release.docsFolderPath ? (
                            <a href={BASE + release.docsFolderPath} target="_blank" class="action-link-yellow">Docs</a>
                          ) : (
                            <span class="action-link-disabled">Docs</span>
                          )}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              {/* Mobile Stacked View */}
              <div class="mobile-releases">
                {releases.map((release) => (
                  <div class="release-mobile-card">
                    <div class="release-mobile-header">
                      <span class="release-mobile-version">v{release.version}</span>
                      <span class="release-mobile-date">{new Date(release.CreatedAt).toLocaleDateString('en-US')}</span>
                    </div>
                    <div class="release-mobile-grid">
                      {release.htmlFolderPath ? (
                        <a href={BASE + release.htmlFolderPath} target="_blank" class="mobile-btn-play">▶ Play</a>
                      ) : (
                        <span class="mobile-btn-disabled">▶ Play</span>
                      )}
                      {release.cartridgePath ? (
                        <a href={BASE + release.cartridgePath} target="_blank" class="mobile-btn-download">Download</a>
                      ) : (
                        <span class="mobile-btn-disabled">Download</span>
                      )}
                      {release.sourcePath ? (
                        <a href={BASE + release.sourcePath} target="_blank" class="mobile-btn-source">Source</a>
                      ) : (
                        <span class="mobile-btn-disabled">Source</span>
                      )}
                      {release.docsFolderPath ? (
                        <a href={BASE + release.docsFolderPath} target="_blank" class="mobile-btn-docs">Docs</a>
                      ) : (
                        <span class="mobile-btn-disabled">Docs</span>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </details>
        </div>
      </div>
    ))}
    </div>
  </main>
</Layout>

<script>
  const filterButtons = document.querySelectorAll('.filter-btn');
  const softwareCards = document.querySelectorAll('.software-card');

  filterButtons.forEach(button => {
    button.addEventListener('click', () => {
      // Update active button
      filterButtons.forEach(btn => btn.classList.remove('active'));
      button.classList.add('active');

      const filter = button.getAttribute('data-filter');

      softwareCards.forEach(card => {
        const status = (card as HTMLElement).getAttribute('data-status');
        if (filter === 'all' || status === filter) {
          (card as HTMLElement).style.display = 'block';
        } else {
          (card as HTMLElement).style.display = 'none';
        }
      });
    });
  });
</script>

<style>
  .filter-btn {
    @apply px-4 py-2 rounded-full border-2 border-purple-600 text-purple-600 font-bold transition-all hover:bg-purple-600 hover:text-white;
  }
  .filter-btn.active {
    @apply bg-purple-600 text-white;
  }

  .status-badge {
    @apply px-2 py-0.5 rounded text-xs font-bold uppercase;
  }
  .status-released { @apply bg-green-100 text-green-800 border border-green-200; }
  .status-demo { @apply bg-blue-100 text-blue-800 border border-blue-200; }
  .status-development { @apply bg-yellow-100 text-yellow-800 border border-yellow-200; }
  .status-archived { @apply bg-gray-100 text-gray-800 border border-gray-200; }

  .software-card {
    @apply bg-white shadow-lg relative rounded-xl overflow-hidden hover:shadow-2xl transition-shadow duration-300;
  }
  .software-card-content {
    @apply p-6 pr-28 sm:pr-6;
  }
  .software-title {
    @apply text-2xl font-semibold mb-2;
  }
  .software-desc {
    @apply text-gray-600 mb-4;
  }
  .software-meta {
    @apply text-sm text-gray-500 mb-4;
  }
  .latest-release-actions {
    @apply absolute top-4 right-4 flex flex-col sm:flex-row gap-1 z-10;
  }
  
  /* Small Action Buttons */
  .btn-base-sm {
    @apply inline-block font-bold py-1 px-2 rounded-lg text-sm transition-colors;
  }
  .btn-play-sm { @apply btn-base-sm bg-purple-600 hover:bg-purple-700 text-white; }
  .btn-download-sm { @apply btn-base-sm bg-blue-600 hover:bg-blue-700 text-white; }
  .btn-source-sm { @apply btn-base-sm bg-green-600 hover:bg-green-700 text-white; }
  .btn-docs-sm { @apply btn-base-sm bg-yellow-600 hover:bg-yellow-700 text-white; }
  .btn-disabled-sm { @apply btn-base-sm bg-gray-200 text-gray-400 cursor-not-allowed; }

  .releases-summary {
    @apply cursor-pointer font-semibold text-purple-600 hover:text-purple-800;
  }

  /* Desktop Table Styles */
  .desktop-releases {
    @apply hidden sm:block overflow-x-auto;
  }
  .releases-table {
    @apply min-w-full divide-y divide-gray-200;
  }
  .releases-thead {
    @apply bg-gray-50;
  }
  .releases-th {
    @apply px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
  }
  .releases-tbody {
    @apply bg-white divide-y divide-gray-200;
  }
  .releases-td {
    @apply px-3 py-2 whitespace-nowrap text-sm;
  }

  /* Action Links */
  .action-link-base {
    @apply hover:underline mr-2 last:mr-0;
  }
  .action-link-purple { @apply action-link-base text-purple-600 hover:text-purple-900; }
  .action-link-blue { @apply action-link-base text-blue-600 hover:text-blue-900; }
  .action-link-green { @apply action-link-base text-green-600 hover:text-green-900; }
  .action-link-yellow { @apply action-link-base text-yellow-600 hover:text-yellow-900; }
  .action-link-disabled { @apply text-gray-400 cursor-not-allowed mr-2 last:mr-0; }

  /* Mobile Release Styles */
  .mobile-releases {
    @apply sm:hidden space-y-4;
  }
  .release-mobile-card {
    @apply border border-gray-100 rounded-lg p-4 bg-gray-50 shadow-sm;
  }
  .release-mobile-header {
    @apply flex flex-col mb-3 border-b border-gray-200 pb-2;
  }
  .release-mobile-version {
    @apply font-bold text-gray-900 text-lg break-words;
  }
  .release-mobile-date {
    @apply text-xs text-gray-500 mt-1;
  }
  .release-mobile-grid {
    @apply grid grid-cols-2 gap-2;
  }

  /* Mobile Buttons */
  .mobile-btn-base {
    @apply flex items-center justify-center py-2 px-3 rounded text-sm font-bold shadow-sm;
  }
  .mobile-btn-play { @apply mobile-btn-base bg-purple-600 text-white; }
  .mobile-btn-download { @apply mobile-btn-base bg-blue-600 text-white; }
  .mobile-btn-source { @apply mobile-btn-base bg-green-600 text-white; }
  .mobile-btn-docs { @apply mobile-btn-base bg-yellow-600 text-white; }
  .mobile-btn-disabled { @apply mobile-btn-base bg-gray-200 text-gray-400 cursor-not-allowed; }
</style>