<script lang="ts">
  import { createEventDispatcher, onMount } from 'svelte';

  interface ImageData {
    url: string;
    prompt?: string;
    aspectRatio?: number;
  }

  export let images: ImageData[] = [];
  export let isGenerating = false;
  export let progress = 0;

  const dispatch = createEventDispatcher();
  
  // Track loaded aspect ratios
  let imageAspects: Map<string, number> = new Map();

  function selectImage(img: ImageData) {
    dispatch('select', img);
  }

  function handleImageLoad(event: Event, img: ImageData) {
    const imgEl = event.target as HTMLImageElement;
    if (imgEl.naturalWidth && imgEl.naturalHeight) {
      const aspect = imgEl.naturalWidth / imgEl.naturalHeight;
      imageAspects.set(img.url, aspect);
      imageAspects = imageAspects; // trigger reactivity
    }
  }

  function getAspectRatio(img: ImageData): number {
    return imageAspects.get(img.url) || 1;
  }

  // Calculate flex-grow based on aspect ratio (wider = more grow)
  function getFlexGrow(img: ImageData): number {
    const aspect = getAspectRatio(img);
    // Clamp between 0.5 and 2 to prevent extreme sizes
    return Math.max(0.5, Math.min(2, aspect));
  }
</script>

<div class="gallery">
  <div class="gallery-header">
    <div class="brand">
      <span class="brand-icon">🔥</span>
      <span class="brand-name">Z-Explorer</span>
    </div>
    <div class="header-right">
      {#if isGenerating}
        <div class="generating-badge">
          <span class="pulse"></span>
          Generating...
        </div>
      {/if}
      <h2>
        Gallery
        <span class="count">({images.length})</span>
      </h2>
    </div>
  </div>

  <div class="gallery-grid">
    {#if isGenerating}
      <div class="generating-card">
        <div class="spinner"></div>
        <span>Creating magic...</span>
        {#if progress > 0}
          <div class="progress-bar">
            <div class="progress-fill" style="width: {progress}%"></div>
          </div>
        {/if}
      </div>
    {/if}

    {#each images as img, i}
      <button 
        class="image-card" 
        on:click={() => selectImage(img)}
        style="animation-delay: {i * 50}ms; flex-grow: {getFlexGrow(img)};"
      >
        <img 
          src={img.url} 
          alt="Generated image {i + 1}" 
          loading="lazy"
          on:load={(e) => handleImageLoad(e, img)}
        />
        <div class="image-overlay">
          <span class="zoom-icon">🔍</span>
        </div>
      </button>
    {/each}

    {#if images.length === 0 && !isGenerating}
      <div class="empty-state">
        <span class="empty-icon">✨</span>
        <h3>No images yet</h3>
        <p>Start generating with the CLI below</p>
      </div>
    {/if}
  </div>
</div>

<style>
  .gallery {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 16px;
  }

  .gallery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .brand-icon {
    font-size: 24px;
  }

  .brand-name {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .gallery-header h2 {
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
  }

  .count {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 400;
  }

  .generating-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--accent-glow);
    border: 1px solid var(--accent-primary);
    border-radius: 20px;
    font-size: 13px;
    color: var(--accent-secondary);
  }

  .pulse {
    width: 8px;
    height: 8px;
    background: var(--accent-primary);
    border-radius: 50%;
    animation: pulse 1.5s infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
  }

  .gallery-grid {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow-y: auto;
    padding-right: 8px;
    align-content: flex-start;
  }

  .image-card {
    height: 200px;
    min-width: 120px;
    max-width: 400px;
    flex-grow: 1;
    border-radius: var(--border-radius);
    overflow: hidden;
    cursor: pointer;
    border: none;
    padding: 0;
    background: var(--bg-tertiary);
    position: relative;
    animation: fadeIn 0.3s ease-out forwards;
    opacity: 0;
    transform: translateY(10px);
  }

  @keyframes fadeIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .image-card img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .image-card:hover img {
    transform: scale(1.05);
  }

  .image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
  }

  .image-card:hover .image-overlay {
    opacity: 1;
  }

  .zoom-icon {
    font-size: 32px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  }

  .generating-card {
    height: 200px;
    min-width: 200px;
    flex-grow: 1;
    max-width: 300px;
    border-radius: var(--border-radius);
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
    border: 2px dashed var(--accent-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-secondary);
  }

  .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--bg-tertiary);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  .progress-bar {
    width: 80%;
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
  }

  .progress-fill {
    height: 100%;
    background: var(--accent-primary);
    transition: width 0.3s ease;
  }

  .empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-muted);
    text-align: center;
  }

  .empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
  }

  .empty-state h3 {
    font-size: 18px;
    margin-bottom: 8px;
    color: var(--text-secondary);
  }

  .empty-state p {
    font-size: 14px;
  }
</style>



