<script lang="ts">
  import type { NostrEvent } from '../../types/nostr.js';
  import EventMenu from '../EventMenu.svelte';

  interface Props {
    event: NostrEvent;
    showMenu?: boolean;
  }

  let { event, showMenu = true }: Props = $props();

  // Extract metadata tags (using $derived for reactivity)
  const image = $derived(event.tags.find(t => t[0] === 'image' && t[1])?.[1]);
  const description = $derived(event.tags.find(t => t[0] === 'description' && t[1])?.[1]);
  const summary = $derived(event.tags.find(t => t[0] === 'summary' && t[1])?.[1]);
  const author = $derived(event.tags.find(t => t[0] === 'author' && t[1])?.[1]);
  const title = $derived(
    event.tags.find(t => t[0] === 'title' && t[1])?.[1] || 
    (() => {
      // Fallback to d-tag in Title Case
      const dTag = event.tags.find(t => t[0] === 'd' && t[1])?.[1];
      if (dTag) {
        return dTag.split('-').map(word => 
          word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
        ).join(' ');
      }
      return null;
    })()
  );

  const hasMetadata = $derived(image || description || summary || author || title);
</script>

{#if hasMetadata}
  <div class="metadata-card">
    <div class="metadata-header">
      {#if title}
        <h2 class="metadata-title">{title}</h2>
      {/if}
      {#if showMenu}
        <EventMenu event={event} showContentActions={false} />
      {/if}
    </div>
    
    {#if image}
      <div class="metadata-image">
        <img 
          src={image} 
          alt={title || description || summary || 'Metadata image'} 
          loading="lazy" 
        />
      </div>
    {/if}
    
    <div class="metadata-content">
      {#if description}
        <p class="metadata-description">{description}</p>
      {/if}
      
      {#if summary}
        <p class="metadata-summary">{summary}</p>
      {/if}
      
      {#if author}
        <p class="metadata-author">Author: {author}</p>
      {/if}
    </div>
  </div>
{/if}

<style>
  .metadata-card {
    border: 1px solid var(--fog-border, #e5e7eb);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background: var(--fog-post, #ffffff);
  }

  :global(.dark) .metadata-card {
    border-color: var(--fog-dark-border, #374151);
    background: var(--fog-dark-post, #1f2937);
  }

  .metadata-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
  }

  .metadata-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--fog-text, #1f2937);
    flex: 1;
  }

  :global(.dark) .metadata-title {
    color: var(--fog-dark-text, #f9fafb);
  }

  .metadata-image {
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    overflow: hidden;
  }

  .metadata-image img {
    width: 100%;
    height: auto;
    display: block;
  }

  .metadata-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .metadata-description,
  .metadata-summary {
    margin: 0;
    color: var(--fog-text, #1f2937);
    line-height: 1.6;
  }

  :global(.dark) .metadata-description,
  :global(.dark) .metadata-summary {
    color: var(--fog-dark-text, #f9fafb);
  }

  .metadata-author {
    margin: 0;
    font-size: 0.875rem;
    color: var(--fog-text-light, #6b7280);
  }

  :global(.dark) .metadata-author {
    color: var(--fog-dark-text-light, #9ca3af);
  }
</style>
