@extends('layouts.nova.content-layout')

@push('head')
    {{-- Global RSS alternate links discoverable by feed readers --}}
    <link rel="alternate" type="application/rss+xml" title="Skinbase Latest Artworks" href="{{ url('/rss') }}">
    <link rel="alternate" type="application/rss+xml" title="Skinbase Trending Artworks" href="{{ url('/rss/discover/trending') }}">
    <link rel="alternate" type="application/rss+xml" title="Skinbase Blog" href="{{ url('/rss/blog') }}">
    @foreach ($feeds as $key => $feed)
    <link rel="alternate" type="application/rss+xml" title="{{ $feed['title'] }} — Skinbase" href="{{ url($feed['url']) }}">
    @endforeach
@endpush

@section('page-content')

<div x-data="{ copied: null }" class="max-w-3xl space-y-10">

    {{-- Introduction --}}
    <p class="text-neutral-400 text-sm leading-relaxed">
        Subscribe to Skinbase RSS feeds in your feed reader, Discord bot, or automation tool.
        Every feed returns valid RSS&nbsp;2.0 XML with preview images and artwork links.
    </p>

    {{-- Grouped feed list --}}
    @if (!empty($feed_groups))
        @foreach ($feed_groups as $groupKey => $group)
        <div>
            <h2 class="text-base font-semibold text-neutral-300 uppercase tracking-wider mb-3">
                {{ $group['label'] }}
            </h2>
            <ul class="divide-y divide-neutral-800 rounded-lg border border-neutral-800 overflow-hidden">
                @foreach ($group['feeds'] as $feed)
                <li class="flex items-start gap-4 px-5 py-4 bg-nova-900/50 hover:bg-nova-800/60 transition-colors">
                    <svg class="mt-0.5 h-5 w-5 flex-shrink-0 text-orange-400" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                        <path d="M6.18 15.64a2.18 2.18 0 012.18 2.18C8.36 19.01 7.38 20 6.18 20C4.98 20 4 19.01 4 17.82a2.18 2.18 0 012.18-2.18M4 4.44A15.56 15.56 0 0119.56 20h-2.83A12.73 12.73 0 004 7.27V4.44m0 5.66a9.9 9.9 0 019.9 9.9h-2.83A7.07 7.07 0 004 12.93V10.1z"/>
                    </svg>
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-medium text-white">{{ $feed['title'] }}</p>
                        @if (!empty($feed['description']))
                        <p class="text-xs text-neutral-500 mt-0.5">{{ $feed['description'] }}</p>
                        @endif
                        <p class="text-xs text-neutral-600 truncate mt-1 font-mono">{{ url($feed['url']) }}</p>
                    </div>
                    <div class="flex-shrink-0 flex items-center gap-2">
                        <button
                            type="button"
                            @click="navigator.clipboard.writeText('{{ url($feed['url']) }}').then(() => { copied = '{{ $feed['url'] }}'; setTimeout(() => copied = null, 2000) })"
                            class="rounded-md border border-neutral-700 px-3 py-1.5 text-xs text-neutral-400 hover:border-neutral-500 hover:text-white transition-colors"
                            :class="copied === '{{ $feed['url'] }}' ? 'border-green-600 !text-green-400' : ''"
                        >
                            <span x-show="copied !== '{{ $feed['url'] }}'">Copy URL</span>
                            <span x-show="copied === '{{ $feed['url'] }}'" x-cloak>✓ Copied</span>
                        </button>
                        <a href="{{ $feed['url'] }}"
                           target="_blank"
                           rel="noopener noreferrer"
                           class="rounded-md border border-neutral-700 px-3 py-1.5 text-xs text-neutral-400 hover:border-orange-500 hover:text-orange-400 transition-colors">
                            Open
                        </a>
                    </div>
                </li>
                @endforeach
            </ul>
        </div>
        @endforeach
    @else
        {{-- Fallback: flat feeds list --}}
        <ul class="divide-y divide-neutral-800 rounded-lg border border-neutral-800 overflow-hidden">
            @foreach ($feeds as $key => $feed)
            <li class="flex items-center gap-4 px-5 py-4 bg-nova-900/50 hover:bg-nova-800/60 transition-colors">
                <svg class="h-6 w-6 flex-shrink-0 text-orange-400" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M6.18 15.64a2.18 2.18 0 012.18 2.18C8.36 19.01 7.38 20 6.18 20C4.98 20 4 19.01 4 17.82a2.18 2.18 0 012.18-2.18M4 4.44A15.56 15.56 0 0119.56 20h-2.83A12.73 12.73 0 004 7.27V4.44m0 5.66a9.9 9.9 0 019.9 9.9h-2.83A7.07 7.07 0 004 12.93V10.1z"/>
                </svg>
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-white">{{ $feed['title'] }}</p>
                    <p class="text-xs text-neutral-500 truncate">{{ url($feed['url']) }}</p>
                </div>
                <a href="{{ $feed['url'] }}"
                   class="flex-shrink-0 rounded-md border border-neutral-700 px-3 py-1.5 text-xs text-neutral-400 hover:border-orange-500 hover:text-orange-400 transition-colors">
                    Subscribe
                </a>
            </li>
            @endforeach
        </ul>
    @endif

    {{-- Tag & Creator feed instructions --}}
    <div class="rounded-lg border border-neutral-800 bg-nova-900/30 px-5 py-4 space-y-2">
        <h2 class="text-sm font-semibold text-white">Tag &amp; Creator Feeds</h2>
        <p class="text-xs text-neutral-400 leading-relaxed">
            Subscribe to any tag or creator using the dynamic URL patterns below:
        </p>
        <ul class="space-y-1 text-xs font-mono text-neutral-300">
            <li><span class="text-neutral-500 mr-2">Tag:</span>{{ url('/rss/tag/') }}<em class="text-orange-400 not-italic">{tag-slug}</em></li>
            <li><span class="text-neutral-500 mr-2">Creator:</span>{{ url('/rss/creator/') }}<em class="text-orange-400 not-italic">{username}</em></li>
        </ul>
        <p class="text-xs text-neutral-500 mt-2">
            Examples:
            <a href="/rss/tag/digital-art" class="text-neutral-300 hover:text-orange-400 underline" target="_blank">/rss/tag/digital-art</a>
            &bull;
            <a href="/rss/creator/gregor" class="text-neutral-300 hover:text-orange-400 underline" target="_blank">/rss/creator/gregor</a>
        </p>
    </div>

    {{-- About RSS --}}
    <div class="prose prose-invert prose-sm max-w-none">
        <h2>About RSS</h2>
        <p>
            RSS is a widely supported web feed format. By subscribing to a Skinbase
            RSS feed you can follow updates in any feed reader, wire up Discord bots,
            or power autoposting workflows — without visiting the site.
        </p>
        <h3>How to subscribe</h3>
        <p>
            Copy a feed URL above and paste it into your feed reader (e.g. Feedly, Inoreader,
            NetNewsWire) or any tool that supports RSS&nbsp;2.0.
        </p>
        <h3>Feed format</h3>
        <p>
            All feeds return RSS&nbsp;2.0 XML with <code>application/rss+xml</code> content-type,
            UTF-8 encoding, preview thumbnails via <code>&lt;enclosure&gt;</code> and
            <code>&lt;media:content&gt;</code>, and a hard limit of 20 items per feed.
        </p>
    </div>

</div>

@endsection