@extends('layouts.app')

@section('title', 'Feed')

@section('content')
@include('partials.ticker', ['tickerItems' => $tickerItems ?? collect()])

{{-- Story Tray --}}
<div class="flex overflow-x-auto no-scrollbar gap-4 py-2">
    @auth
    <a href="{{ route('statuses.compose') }}" class="flex flex-col items-center gap-xs cursor-pointer flex-shrink-0">
        <div class="w-16 h-16 rounded-full border-2 border-outline-variant/50 flex items-center justify-center bg-surface-container relative">
            <img alt="Your Story" class="w-full h-full rounded-full object-cover opacity-80" src="{{ auth()->user()->avatar ? asset('storage/'.auth()->user()->avatar) : asset('icons/default-avatar.png') }}">
            <div class="absolute inset-0 bg-black/40 rounded-full flex items-center justify-center">
                <span class="material-symbols-outlined text-white">add</span>
            </div>
        </div>
        <span class="font-data-label text-data-label text-on-surface-variant">Add</span>
    </a>
    @endauth

    @foreach($storyUsers as $storyUser)
    <a href="{{ route('statuses.show', $storyUser->latest_status_id) }}" class="flex flex-col items-center gap-xs cursor-pointer flex-shrink-0">
        <div class="w-16 h-16 rounded-full p-[2px] {{ $storyUser->has_boosted_story ? 'gold-shimmer' : 'bg-primary' }}">
            <img alt="{{ $storyUser->username }}" class="w-full h-full rounded-full object-cover border-2 border-background" src="{{ $storyUser->avatar ? asset('storage/'.$storyUser->avatar) : asset('icons/default-avatar.png') }}">
        </div>
        <span class="font-data-label text-data-label {{ $storyUser->has_boosted_story ? 'text-tertiary' : 'text-on-surface' }}">{{ $storyUser->username }}</span>
    </a>
    @endforeach
</div>

{{-- Feed --}}
<div class="flex flex-col gap-lg pb-xl">
    @foreach($statuses as $status)
    <article class="{{ $status->is_boosted ? 'glass-panel' : 'bg-surface-container border border-outline-variant/30' }} rounded-xl overflow-hidden relative">
        @if($status->is_boosted)
            <div class="absolute top-0 left-0 w-full h-[1px] gold-shimmer"></div>
        @endif

        <div class="p-md">
            <div class="flex justify-between items-start mb-sm">
                <div class="flex gap-md items-center">
                    <div class="w-12 h-12 rounded-full p-[2px] {{ $status->is_boosted ? 'gold-shimmer' : 'bg-primary' }}">
                        <img alt="{{ $status->user->username }}" class="w-full h-full rounded-full object-cover border-2 border-background" src="{{ $status->user->avatar ? asset('storage/'.$status->user->avatar) : asset('icons/default-avatar.png') }}">
                    </div>
                    <div>
                        <h3 class="font-bold text-on-surface flex items-center gap-2">
                            {{ $status->user->name }}
                            @if($status->user->is_premium)
                                <span class="material-symbols-outlined text-tertiary text-[16px] animate-pulse">workspace_premium</span>
                            @endif
                        </h3>
                        <div class="flex items-center gap-2 mt-1">
                            @if($status->encryption_badge_enabled)
                            <div class="bg-surface-container px-2 py-0.5 rounded-full flex items-center gap-1">
                                <span class="material-symbols-outlined text-[12px] text-outline">lock</span>
                                <span class="font-data-label text-data-label text-outline">SHA-256</span>
                            </div>
                            @endif
                            <span class="font-data-label text-data-label text-outline-variant">{{ $status->created_at->diffForHumans() }}</span>
                        </div>
                    </div>
                </div>
                <button class="text-outline hover:text-on-surface"><span class="material-symbols-outlined">more_horiz</span></button>
            </div>

            <div class="py-sm">
                @if($status->caption)
                <p class="text-on-surface mb-md">{{ $status->caption }}</p>
                @endif

                @if($status->type === 'image' && $status->media_path)
                <div class="rounded-lg overflow-hidden border border-outline-variant/30">
                    <img alt="Status media" class="w-full h-auto object-cover" src="{{ asset('storage/'.$status->media_path) }}">
                </div>
                @endif
            </div>

            @if($status->cta_channel === 'whatsapp')
            <div class="mt-md">
                <a href="{{ route('statuses.show', $status->id) }}" class="w-full py-3 bg-whatsapp/20 border border-whatsapp/50 text-whatsapp font-bold rounded-lg hover:bg-whatsapp/30 transition-colors shadow-[0_4px_14px_0_rgba(37,211,102,0.15)] active:scale-95 flex items-center justify-center gap-2">
                    <span class="material-symbols-outlined">forum</span>
                    Message on WhatsApp
                </a>
            </div>
            @elseif($status->cta_channel === 'telegram')
            <div class="mt-md">
                <a href="{{ route('statuses.show', $status->id) }}" class="w-full py-3 bg-telegram/20 border border-telegram/50 text-telegram font-bold rounded-lg hover:bg-telegram/30 transition-colors shadow-[0_4px_14px_0_rgba(0,136,204,0.15)] active:scale-95 flex items-center justify-center gap-2">
                    <span class="material-symbols-outlined">send</span>
                    Connect on Telegram
                </a>
            </div>
            @endif
        </div>

        <div class="bg-surface-container-high/40 border-t border-outline-variant/20 px-md py-sm flex justify-between items-center font-data-label text-data-label text-outline">
            <div class="flex gap-lg">
                <span class="flex items-center gap-1 hover:text-primary cursor-pointer"><span class="material-symbols-outlined text-[16px]">favorite</span> {{ $status->reactions_count }}</span>
                <span class="flex items-center gap-1 hover:text-primary cursor-pointer"><span class="material-symbols-outlined text-[16px]">chat_bubble</span> {{ $status->comments_count }}</span>
            </div>
            @if($status->is_boosted)
            <span class="text-secondary flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">monetization_on</span> Boosted</span>
            @endif
        </div>
    </article>
    @endforeach
</div>

{{ $statuses->links() }}
@endsection