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

@php
    $hero_title = 'Story Analytics';
    $hero_description = 'Performance metrics for "' . $story->title . '".';
@endphp

@section('page-content')
<div class="space-y-6">
    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <div class="rounded-xl border border-gray-700 bg-gray-800/70 p-4 shadow-lg">
            <p class="text-xs uppercase tracking-wide text-gray-400">Views</p>
            <p class="mt-2 text-2xl font-semibold text-white">{{ number_format($metrics['views']) }}</p>
        </div>
        <div class="rounded-xl border border-gray-700 bg-gray-800/70 p-4 shadow-lg">
            <p class="text-xs uppercase tracking-wide text-gray-400">Likes</p>
            <p class="mt-2 text-2xl font-semibold text-white">{{ number_format($metrics['likes']) }}</p>
        </div>
        <div class="rounded-xl border border-gray-700 bg-gray-800/70 p-4 shadow-lg">
            <p class="text-xs uppercase tracking-wide text-gray-400">Comments</p>
            <p class="mt-2 text-2xl font-semibold text-white">{{ number_format($metrics['comments']) }}</p>
        </div>
        <div class="rounded-xl border border-gray-700 bg-gray-800/70 p-4 shadow-lg">
            <p class="text-xs uppercase tracking-wide text-gray-400">Read Time</p>
            <p class="mt-2 text-2xl font-semibold text-white">{{ number_format($metrics['read_time']) }} min</p>
        </div>
    </div>

    <div class="grid gap-4 md:grid-cols-3">
        <div class="rounded-xl border border-gray-700 bg-gray-900/70 p-4 shadow-lg">
            <p class="text-xs uppercase tracking-wide text-gray-400">Views (7 days)</p>
            <p class="mt-2 text-xl font-semibold text-sky-300">{{ number_format($metrics['views_last_7_days']) }}</p>
        </div>
        <div class="rounded-xl border border-gray-700 bg-gray-900/70 p-4 shadow-lg">
            <p class="text-xs uppercase tracking-wide text-gray-400">Views (30 days)</p>
            <p class="mt-2 text-xl font-semibold text-emerald-300">{{ number_format($metrics['views_last_30_days']) }}</p>
        </div>
        <div class="rounded-xl border border-gray-700 bg-gray-900/70 p-4 shadow-lg">
            <p class="text-xs uppercase tracking-wide text-gray-400">Estimated Read Minutes</p>
            <p class="mt-2 text-xl font-semibold text-violet-300">{{ number_format($metrics['estimated_total_read_minutes']) }}</p>
        </div>
    </div>

    <div class="rounded-xl border border-gray-700 bg-gray-800/70 p-4 shadow-lg">
        <div class="flex flex-wrap gap-3 text-sm">
            <a href="{{ route('creator.stories.edit', ['story' => $story->id]) }}" class="rounded-xl border border-sky-500/40 bg-sky-500/10 px-3 py-2 text-sky-200 transition hover:scale-[1.02]">Back to editor</a>
            <a href="{{ route('creator.stories.preview', ['story' => $story->id]) }}" class="rounded-xl border border-gray-500/40 bg-gray-700/30 px-3 py-2 text-gray-100 transition hover:scale-[1.02]">Preview story</a>
            @if($story->status === 'published' || $story->status === 'scheduled')
                <a href="{{ route('stories.show', ['slug' => $story->slug]) }}" class="rounded-xl border border-emerald-500/40 bg-emerald-500/10 px-3 py-2 text-emerald-200 transition hover:scale-[1.02]">Open published page</a>
            @endif
        </div>
    </div>
</div>
@endsection