@extends('layouts.app')

@section('title', $campaign->name . ' — Posts')
@section('page-title', $campaign->name)
@section('page-subtitle', 'YouTube video tracking')

@section('topbar-actions')
<form method="POST" action="{{ route('campaigns.posts.syncAll', $campaign) }}">
    @csrf
    <button type="submit" class="btn btn-ghost btn-sm">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13">
            <polyline points="23 4 23 10 17 10"/>
            <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
        </svg>
        Sync All
    </button>
</form>
<a href="{{ route('campaigns.index') }}" class="btn btn-ghost btn-sm">← All Campaigns</a>
@endsection

@push('styles')
<style>
    /* ── Add URL Card ── */
    .add-url-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 22px 24px;
        margin-bottom: 24px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    }
    .add-url-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 3px;
        background: linear-gradient(90deg, #34BDEB, #0070f3);
    }
    .add-url-title {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 15px; font-weight: 600; color: #111827;
        margin-bottom: 4px;
        display: flex; align-items: center; gap: 8px;
    }
    .add-url-title svg { width: 16px; height: 16px; color: #34BDEB; }
    .add-url-sub { font-size: 12.5px; color: #6b7280; margin-bottom: 18px; }

    .url-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
    .url-input-wrap { flex: 1; min-width: 260px; }
    .url-input-label {
        font-size: 11px; font-weight: 600; text-transform: uppercase;
        letter-spacing: 0.06em; color: #6b7280; margin-bottom: 6px;
    }
    .url-input-wrapper { position: relative; }
    .url-input {
        width: 100%; background: #f9fafb;
        border: 1px solid #d1d5db; border-radius: 6px;
        color: #111827; padding: 10px 14px 10px 40px;
        font-size: 13.5px; outline: none;
        transition: border-color 0.15s, box-shadow 0.15s;
    }
    .url-input:focus {
        border-color: #34BDEB;
        box-shadow: 0 0 0 3px rgba(52,189,235,0.12);
    }
    .url-input::placeholder { color: #9ca3af; }
    .url-input-icon {
        position: absolute; left: 12px; bottom: 10px; color: #9ca3af;
    }
    .url-input-icon svg { width: 16px; height: 16px; display: block; }
    .influencer-wrap { width: 220px; flex-shrink: 0; }

    /* ── Stats Bar ── */
    .stats-bar {
        display: grid; grid-template-columns: repeat(5,1fr);
        gap: 14px; margin-bottom: 24px;
    }
    @media (max-width: 1100px) { .stats-bar { grid-template-columns: repeat(3,1fr); } }
    @media (max-width: 700px)  { .stats-bar { grid-template-columns: repeat(2,1fr); } }

    .sbar-card {
        background: #ffffff;
        border: 1px solid #e5e7eb; border-radius: 10px;
        padding: 16px 18px;
        display: flex; align-items: center; gap: 14px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .sbar-icon {
        width: 38px; height: 38px; border-radius: 8px;
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .sbar-icon svg { width: 18px; height: 18px; }
    .sbar-val {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 20px; font-weight: 700; color: #111827; line-height: 1;
    }
    .sbar-lbl { font-size: 11.5px; color: #6b7280; margin-top: 3px; }

    /* ── Table ── */
    .posts-table-wrap {
        background: #ffffff;
        border: 1px solid #e5e7eb; border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .table-header {
        padding: 14px 20px;
        border-bottom: 1px solid #e5e7eb;
        display: flex; align-items: center; justify-content: space-between;
    }
    .table-header h3 {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 14px; font-weight: 600; color: #111827;
        display: flex; align-items: center; gap: 8px;
    }
    .count-tag {
        background: #f3f4f6; color: #6b7280;
        font-size: 11px; font-weight: 600;
        padding: 2px 8px; border-radius: 20px;
    }

    table { width: 100%; border-collapse: collapse; }
    thead tr { background: #f9fafb; }
    thead th {
        padding: 10px 16px;
        font-size: 11px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.06em;
        color: #6b7280; text-align: left; white-space: nowrap;
        border-bottom: 1px solid #e5e7eb;
    }
    tbody tr { border-top: 1px solid #f3f4f6; transition: background 0.1s; }
    tbody tr:hover { background: #f9fafb; }
    tbody td { padding: 14px 16px; vertical-align: middle; }

    .td-thumb { display: flex; align-items: center; gap: 12px; }
    .thumb-img {
        width: 96px; height: 56px;
        border-radius: 6px; object-fit: cover; flex-shrink: 0;
        background: #f3f4f6;
    }
    .thumb-placeholder {
        width: 96px; height: 56px; border-radius: 6px;
        background: #f3f4f6; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
    }
    .thumb-placeholder svg { width: 22px; height: 22px; color: #9ca3af; }

    .video-title {
        font-size: 13px; font-weight: 500; color: #111827;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden; max-width: 260px; line-height: 1.45;
    }
    .video-link {
        display: inline-flex; align-items: center; gap: 4px;
        font-size: 11px; color: #34BDEB; margin-top: 4px;
        opacity: 0.8; transition: opacity 0.15s;
    }
    .video-link:hover { opacity: 1; }
    .video-link svg { width: 10px; height: 10px; }

    .metric-val {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 15px; font-weight: 700; white-space: nowrap;
    }
    .metric-sub { font-size: 11px; color: #9ca3af; margin-top: 2px; }

    .sync-info { font-size: 12px; color: #9ca3af; }
    .td-actions { display: flex; gap: 6px; align-items: center; }

    /* Empty row */
    .empty-row td { text-align: center; padding: 60px 20px; color: #6b7280; font-size: 13px; }
    .empty-row-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; }
    .empty-row-inner svg { width: 36px; height: 36px; color: #9ca3af; }
    .empty-row-inner strong { color: #111827; }
</style>
@endpush

@section('content')

{{-- ── Add URL Card ── --}}
<div class="add-url-card">
    <div class="add-url-title">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46a2.78 2.78 0 0 0-1.95 1.96A29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58A2.78 2.78 0 0 0 3.41 19.54C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.96A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z"/>
            <polygon points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02"/>
        </svg>
        Add YouTube Video
    </div>
    <div class="add-url-sub">Paste any YouTube URL — views, likes and subscribers are fetched instantly from the YouTube API.</div>

    <form method="POST" action="{{ route('campaigns.posts.store', $campaign) }}" class="url-form">
        @csrf
        <div class="url-input-wrap">
            <div class="url-input-label">YouTube URL</div>
            <div class="url-input-wrapper">
                <div class="url-input-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
                        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
                    </svg>
                </div>
                <input type="url" name="post_url" class="url-input"
                    placeholder="https://www.youtube.com/watch?v=..."
                    value="{{ old('post_url') }}" required>
            </div>
            @error('post_url')
                <div style="font-size:12px;color:#dc2626;margin-top:5px">{{ $message }}</div>
            @enderror
        </div>

        @if(auth()->user()->role !== 'influencer')
        <div class="influencer-wrap">
            <div class="url-input-label">
                Influencer
                <span style="font-size:10px;color:#9ca3af;font-weight:400;text-transform:none;letter-spacing:0">(optional)</span>
            </div>
            <select name="influencer_id" class="url-input" style="padding-left:14px">
                <option value="">— None —</option>
                @foreach($influencers as $inf)
                    <option value="{{ $inf->id }}" {{ old('influencer_id') == $inf->id ? 'selected' : '' }}>
                        {{ $inf->influencer_name }}
                    </option>
                @endforeach
            </select>
        </div>
        @endif

        <button type="submit" class="btn btn-primary" style="height:40px;white-space:nowrap">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" width="14" height="14">
                <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
            </svg>
            Fetch &amp; Add
        </button>
    </form>
</div>

{{-- ── Stats Bar ── --}}
<div class="stats-bar">
    <div class="sbar-card">
        <div class="sbar-icon" style="background:rgba(52,189,235,0.1)">
            <svg viewBox="0 0 24 24" fill="none" stroke="#34BDEB" stroke-width="2">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                <circle cx="12" cy="12" r="3"/>
            </svg>
        </div>
        <div>
            <div class="sbar-val" style="color:#0090c0">{{ number_format($totals['views']) }}</div>
            <div class="sbar-lbl">Total Views</div>
        </div>
    </div>

    <div class="sbar-card">
        <div class="sbar-icon" style="background:rgba(239,68,68,0.08)">
            <svg viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2">
                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
            </svg>
        </div>
        <div>
            <div class="sbar-val" style="color:#dc2626">{{ number_format($totals['likes']) }}</div>
            <div class="sbar-lbl">Total Likes</div>
        </div>
    </div>

    {{-- ── NEW: Total Subscribers stat card ── --}}
    <div class="sbar-card">
        <div class="sbar-icon" style="background:rgba(234,179,8,0.08)">
            <svg viewBox="0 0 24 24" fill="none" stroke="#ca8a04" stroke-width="2">
                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                <circle cx="9" cy="7" r="4"/>
                <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
            </svg>
        </div>
        <div>
            <div class="sbar-val" style="color:#ca8a04">{{ number_format($totals['subscribers'] ?? 0) }}</div>
            <div class="sbar-lbl">Total Subscribers</div>
        </div>
    </div>

    <div class="sbar-card">
        <div class="sbar-icon" style="background:rgba(124,58,237,0.08)">
            <svg viewBox="0 0 24 24" fill="none" stroke="#7c3aed" stroke-width="2">
                <polygon points="23 7 16 12 23 17 23 7"/>
                <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
            </svg>
        </div>
        <div>
            <div class="sbar-val" style="color:#7c3aed">{{ number_format($totals['posts']) }}</div>
            <div class="sbar-lbl">Videos</div>
        </div>
    </div>

    <div class="sbar-card">
        <div class="sbar-icon" style="background:rgba(22,163,74,0.08)">
            <svg viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2">
                <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
            </svg>
        </div>
        <div>
            <div class="sbar-val" style="color:#16a34a">
                {{ $totals['views'] > 0 ? number_format(($totals['likes'] / $totals['views']) * 100, 2) : '0.00' }}%
            </div>
            <div class="sbar-lbl">Engagement Rate</div>
        </div>
    </div>
</div>

{{-- ── Posts Table ── --}}
<div class="posts-table-wrap">
    <div class="table-header">
        <h3>
            Tracked Videos
            <span class="count-tag">{{ $posts->count() }}</span>
        </h3>
    </div>

    <table>
        <thead>
            <tr>
                <th>Video</th>
                <th>
                    <span style="display:inline-flex;align-items:center;gap:4px;color:#0090c0">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12">
                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                            <circle cx="12" cy="12" r="3"/>
                        </svg>
                        Views
                    </span>
                </th>
                <th>
                    <span style="display:inline-flex;align-items:center;gap:4px;color:#dc2626">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12">
                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                        </svg>
                        Likes
                    </span>
                </th>
                {{-- ── NEW: Subscribers column header ── --}}
                <th>
                    <span style="display:inline-flex;align-items:center;gap:4px;color:#ca8a04">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12">
                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                            <circle cx="9" cy="7" r="4"/>
                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                            <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                        </svg>
                        Subscribers
                    </span>
                </th>
                <th>Last Synced</th>
                <th>Actions</th>
            </tr>
        </thead>

        <tbody>
            @forelse($posts as $post)
            <tr>
                <td>
                    <div class="td-thumb">
                        @if($post->thumbnail)
                            <img src="{{ $post->thumbnail }}" alt="" class="thumb-img">
                        @else
                            <div class="thumb-placeholder">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                    <polygon points="23 7 16 12 23 17 23 7"/>
                                    <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
                                </svg>
                            </div>
                        @endif
                        <div>
                            <div class="video-title">{{ $post->title ?? 'Untitled Video' }}</div>
                            <a href="{{ $post->post_url }}" target="_blank" class="video-link">
                                Open on YouTube
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
                                    <polyline points="15 3 21 3 21 9"/>
                                    <line x1="10" y1="14" x2="21" y2="3"/>
                                </svg>
                            </a>
                        </div>
                    </div>
                </td>

                <td>
                    <div class="metric-val" style="color:#0090c0">{{ number_format($post->views) }}</div>
                    <div class="metric-sub">views</div>
                </td>

                <td>
                    <div class="metric-val" style="color:#dc2626">{{ number_format($post->likes) }}</div>
                    <div class="metric-sub">likes</div>
                </td>

                {{-- ── NEW: Subscribers column cell ── --}}
                <td>
                    <div class="metric-val" style="color:#ca8a04">{{ number_format($post->subscribers ?? 0) }}</div>
                    <div class="metric-sub">subscribers</div>
                </td>

                <td>
                    <div class="sync-info">
                        {{ $post->last_synced_at ? $post->last_synced_at->diffForHumans() : 'Never' }}
                    </div>
                </td>

                <td>
                    <div class="td-actions">
                        <form method="POST" action="{{ route('campaigns.posts.sync', [$campaign, $post]) }}">
                            @csrf
                            <button type="submit" class="btn btn-ghost btn-sm">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13">
                                    <polyline points="23 4 23 10 17 10"/>
                                    <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
                                </svg>
                                Sync
                            </button>
                        </form>
                        <form method="POST" action="{{ route('campaigns.posts.destroy', [$campaign, $post]) }}"
                              onsubmit="return confirm('Remove this video?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn btn-danger btn-sm">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12">
                                    <polyline points="3 6 5 6 21 6"/>
                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                                </svg>
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            @empty
            <tr class="empty-row">
                <td colspan="7">
                    <div class="empty-row-inner">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                            <polygon points="23 7 16 12 23 17 23 7"/>
                            <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
                        </svg>
                        <strong>No videos added yet</strong>
                        <span>Paste a YouTube URL above to start tracking views and likes.</span>
                    </div>
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>

@endsection