<script lang="ts">
  import type { VideoThumbnail } from '$lib/api/youtube';
  import { subscriptions } from '$lib/stores/subscriptions';

  interface Props {
    channelId: string;
    channelName: string;
    thumbnails: VideoThumbnail[];
    subCount?: number;
    videoCount?: number;
    showSubscribeButton?: boolean;
  }

  let {
    channelId,
    channelName,
    thumbnails,
    subCount,
    videoCount,
    showSubscribeButton = true
  }: Props = $props();

  const thumbnail = $derived(thumbnails[0]?.url || '');

  const isSubscribed = $derived(subscriptions.isSubscribed($subscriptions, channelId));

  function formatSubCount(count: number | undefined): string {
    if (!count) return '';
    if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M subscribers`;
    if (count >= 1000) return `${(count / 1000).toFixed(1)}K subscribers`;
    return `${count} subscribers`;
  }

  function handleSubscribe(e: Event) {
    e.preventDefault();
    e.stopPropagation();
    if (isSubscribed) {
      subscriptions.remove(channelId);
    } else {
      subscriptions.add(channelId, channelName, thumbnails);
    }
  }
</script>

<a href="/channel/{channelId}" class="channel-card">
  <div class="thumbnail">
    {#if thumbnail}
      <img src={thumbnail} alt={channelName} loading="lazy" />
    {:else}
      <div class="placeholder">{channelName[0]}</div>
    {/if}
  </div>
  <div class="info">
    <h3 class="name">{channelName}</h3>
    <div class="meta">
      {#if subCount}
        <span>{formatSubCount(subCount)}</span>
      {/if}
      {#if videoCount}
        <span class="separator">•</span>
        <span>{videoCount} videos</span>
      {/if}
    </div>
  </div>
  {#if showSubscribeButton}
    <button
      class="subscribe-btn"
      class:subscribed={isSubscribed}
      onclick={handleSubscribe}
    >
      {isSubscribed ? 'Subscribed' : 'Subscribe'}
    </button>
  {/if}
</a>

<style>
  .channel-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    transition: background 0.15s ease;
  }

  .channel-card:hover {
    background: var(--bg-hover);
  }

  .thumbnail {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-secondary);
    flex-shrink: 0;
  }

  .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
  }

  .info {
    flex: 1;
    min-width: 0;
  }

  .name {
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 0.25rem;
    color: var(--text-primary);
  }

  .meta {
    font-size: 0.85rem;
    color: var(--text-muted);
  }

  .separator {
    margin: 0 0.25rem;
  }

  .subscribe-btn {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    border: none;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    background: var(--accent-color);
    color: #fff;
    transition: opacity 0.15s ease;
  }

  .subscribe-btn:hover {
    opacity: 0.9;
  }

  .subscribe-btn.subscribed {
    background: var(--bg-secondary);
    color: var(--text-secondary);
  }
</style>
