@extends('layouts.app')

@section('title', 'Manager Dashboard')
@section('page-title', 'Manager Dashboard')
@section('page-subtitle', 'Campaign performance overview')

@section('topbar-actions')
<a href="{{ route('campaigns.index') }}" class="btn btn-ghost btn-sm">All Campaigns</a>
<a href="{{ route('campaigns.create') }}" class="btn btn-primary">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" width="13" height="13">
        <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
    </svg>
    New Campaign
</a>
@endsection

@push('styles')
<style>
body, input, select, button, textarea {
    font-family: 'Proxima Nova','Proxima Nova Rg',ui-sans-serif,system-ui,
                 -apple-system,'Helvetica Neue',Arial,sans-serif !important;
}

.section-label {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .09em;
    color: #93A0B0;
    margin-bottom: 14px;
    padding-left: 2px;
}

.section-hd {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.section-hd h2 { font-size: 15px; font-weight: 700; color: #0F1D2E; letter-spacing: -.2px; }
.section-hd a  { font-size: 12px; font-weight: 600; color: #34BDEB; }
.section-hd a:hover { opacity: .7; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
.stats-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
@media (max-width: 900px) {
    .stats-grid   { grid-template-columns: repeat(2, 1fr); }
    .stats-grid-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
    .stats-grid   { grid-template-columns: 1fr; }
    .stats-grid-2 { grid-template-columns: 1fr; }
}

.stat-card {
    background: #fff;
    border: none;
    border-radius: 14px;
    padding: 22px 22px 18px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(11,22,40,.06), 0 6px 18px rgba(11,22,40,.04);
    transition: box-shadow .18s, transform .18s;
    cursor: default;
}
.stat-card:hover {
    box-shadow: 0 4px 16px rgba(11,22,40,.1), 0 10px 28px rgba(11,22,40,.06);
    transform: translateY(-2px);
}
.stat-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--accent, #34BDEB);
    border-radius: 14px 14px 0 0;
}
.stat-card::after {
    content: '';
    position: absolute; bottom: -20px; right: -20px;
    width: 90px; height: 90px; border-radius: 50%;
    background: var(--ring-bg, rgba(52,189,235,.06));
    pointer-events: none;
}
.stat-icon {
    width: 42px; height: 42px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    background: var(--icon-bg, rgba(52,189,235,.12));
    border: 1px solid var(--icon-bdr, rgba(52,189,235,.2));
}
.stat-icon svg { width: 19px; height: 19px; }
.stat-value {
    font-size: 34px; font-weight: 800; color: #0F1D2E;
    line-height: 1; margin-bottom: 6px; letter-spacing: -.6px;
}
.stat-label { font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 3px; }
.stat-sub   { font-size: 11.5px; color: #93A0B0; }

/* ── Lists layout ── */
.main-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px; margin-bottom: 24px;
}
@media (max-width: 1024px) { .main-grid { grid-template-columns: 1fr; } }

/* ── Campaign cards ── */
.campaign-grid { display: flex; flex-direction: column; gap: 12px; }
.campaign-card {
    background: #fff; border: none; border-radius: 14px;
    padding: 18px 20px; display: flex; flex-direction: column; gap: 12px;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(11,22,40,.06), 0 6px 18px rgba(11,22,40,.04);
    transition: box-shadow .18s, transform .18s;
}
.campaign-card:hover {
    box-shadow: 0 4px 16px rgba(11,22,40,.1), 0 10px 28px rgba(11,22,40,.06);
    transform: translateY(-2px);
}
.campaign-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.campaign-card-name { font-size: 14.5px; font-weight: 700; color: #0F1D2E; letter-spacing: -.2px; }
.campaign-card-desc {
    font-size: 12px; color: #93A0B0; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px;
}
.campaign-metrics-row { display: flex; gap: 22px; }
.cm-item { display: flex; flex-direction: column; gap: 2px; }
.cm-val  { font-size: 18px; font-weight: 800; color: #0F1D2E; letter-spacing: -.3px; }
.cm-lbl  { font-size: 11px; color: #93A0B0; }
.progress-wrap { height: 6px; background: #EEF2F7; border-radius: 4px; overflow: hidden; }
.progress-bar  { height: 100%; border-radius: 4px; background: linear-gradient(90deg,#34BDEB,#0070f3); }
.campaign-footer { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #93A0B0; }

/* ── Influencer list ── */
.influencer-list { display: flex; flex-direction: column; gap: 10px; }
.influencer-card {
    background: #fff; border: none; border-radius: 14px;
    padding: 14px 16px; display: flex; align-items: center; gap: 12px;
    box-shadow: 0 1px 4px rgba(11,22,40,.06), 0 6px 18px rgba(11,22,40,.04);
}
.inf-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg,#7c3aed,#a78bfa);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.inf-info { flex: 1; min-width: 0; }
.inf-name  { font-size: 13px; font-weight: 700; color: #0F1D2E; }
.inf-handle{ font-size: 11.5px; color: #93A0B0; }
.inf-metrics { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.inf-views { font-size: 14px; font-weight: 800; color: #0F1D2E; letter-spacing: -.3px; }
.inf-label { font-size: 11px; color: #93A0B0; }

/* ── Video list ── */
.post-list { display: flex; flex-direction: column; gap: 10px; }
.post-card {
    background: #fff; border: none; border-radius: 14px;
    display: flex; gap: 14px; padding: 14px;
    box-shadow: 0 1px 4px rgba(11,22,40,.06), 0 6px 18px rgba(11,22,40,.04);
    transition: box-shadow .18s, transform .18s;
}
.post-card:hover {
    box-shadow: 0 4px 16px rgba(11,22,40,.1), 0 10px 28px rgba(11,22,40,.06);
    transform: translateY(-2px);
}
.post-thumb {
    width: 108px; height: 64px; border-radius: 8px;
    object-fit: cover; flex-shrink: 0; background: #EEF2F7;
}
.post-thumb-placeholder {
    width: 108px; height: 64px; border-radius: 8px;
    background: #EEF2F7; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.post-thumb-placeholder svg { width: 24px; height: 24px; color: #93A0B0; }
.post-info { flex: 1; min-width: 0; }
.post-title {
    font-size: 13px; font-weight: 700; color: #0F1D2E;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; margin-bottom: 6px; line-height: 1.4;
}
.post-metrics { display: flex; gap: 10px; }
.metric-pill {
    display: flex; align-items: center; gap: 5px;
    border-radius: 20px; padding: 3px 10px;
    font-size: 12px; font-weight: 700; border: 1px solid;
}
.metric-pill svg { width: 12px; height: 12px; }
.metric-pill.views { color: #0090c0; border-color: rgba(52,189,235,.3); background: rgba(52,189,235,.06); }
.metric-pill.likes { color: #dc2626; border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.05); }

/* ── Badges ── */
.badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 20px; }
.badge-green  { color: #16A34A; background: rgba(22,163,74,.1);   border: 1px solid rgba(22,163,74,.2); }
.badge-yellow { color: #D97706; background: rgba(245,158,11,.1);  border: 1px solid rgba(245,158,11,.2); }
.badge-blue   { color: #0090c0; background: rgba(52,189,235,.1);  border: 1px solid rgba(52,189,235,.2); }
.badge-gray   { color: #6b7280; background: rgba(107,114,128,.1); border: 1px solid rgba(107,114,128,.2);}

/* ── Empty state ── */
.empty-state {
    text-align: center; padding: 40px 20px;
    border: 1.5px dashed #DDE4ED; border-radius: 14px; background: #fff;
}
.empty-state svg { width: 36px; height: 36px; color: #93A0B0; margin-bottom: 10px; }
.empty-state h3  { font-size: 14px; font-weight: 700; color: #0F1D2E; margin-bottom: 6px; }
.empty-state p   { font-size: 13px; color: #6b7280; margin-bottom: 14px; }

/* ── Add channel modal ── */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(11,22,40,.45); z-index: 1000;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    opacity: 0; pointer-events: none; transition: opacity .2s;
}
.modal-backdrop.open { opacity: 1; pointer-events: all; }
.modal-box {
    background: #fff; border-radius: 14px; width: 100%; max-width: 440px;
    box-shadow: 0 24px 64px rgba(11,22,40,.18);
    transform: translateY(12px) scale(.98); transition: transform .2s;
}
.modal-backdrop.open .modal-box { transform: translateY(0) scale(1); }
.modal-header { padding: 18px 22px 0; display: flex; align-items: flex-start; justify-content: space-between; }
.modal-title  { font-size: 15px; font-weight: 800; color: #0F1D2E; letter-spacing: -.2px; }
.modal-close  {
    width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid #DDE4ED; background: #f9fafb;
    cursor: pointer; color: #6b7280; transition: all .15s;
}
.modal-close:hover { background: #f3f4f6; color: #0F1D2E; }
.modal-close svg { width: 14px; height: 14px; }
.modal-body   { padding: 20px 22px; }
.modal-footer { padding: 0 22px 20px; display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.form-label   { display: block; font-size: 11px; font-weight: 700; color: #93A0B0; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.form-control {
    width: 100%; background: #fff; border: 1.5px solid #DDE4ED; border-radius: 8px;
    color: #0F1D2E; padding: 9px 13px; font-size: 13.5px; font-family: inherit;
    outline: none; transition: border-color .15s, box-shadow .15s;
}
.form-control:focus { border-color: #34BDEB; box-shadow: 0 0 0 3px rgba(52,189,235,.12); }
.form-control::placeholder { color: #93A0B0; }
</style>
@endpush

@section('content')

<div class="section-label">Campaign Performance</div>
<div class="stats-grid">

    {{-- Campaigns --}}
    <div class="stat-card" style="--accent:#34BDEB;--icon-bg:rgba(52,189,235,.12);--icon-bdr:rgba(52,189,235,.2);--ring-bg:rgba(52,189,235,.06)">
        <div class="stat-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="#34BDEB" 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 class="stat-value">{{ number_format($stats['total_campaigns']) }}</div>
        <div class="stat-label">Your Campaigns</div>
        <div class="stat-sub">{{ $stats['active_campaigns'] }} active</div>
    </div>

    {{-- Total Views --}}
    <div class="stat-card" style="--accent:#16A34A;--icon-bg:rgba(22,163,74,.1);--icon-bdr:rgba(22,163,74,.2);--ring-bg:rgba(22,163,74,.05)">
        <div class="stat-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="#16A34A" 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 class="stat-value">{{ number_format($stats['total_views']) }}</div>
        <div class="stat-label">Total Views</div>
        <div class="stat-sub">Across all campaigns</div>
    </div>

    {{-- Avg Engagement --}}
    <div class="stat-card" style="--accent:#F59E0B;--icon-bg:rgba(245,158,11,.1);--icon-bdr:rgba(245,158,11,.2);--ring-bg:rgba(245,158,11,.05)">
        <div class="stat-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2">
                <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
            </svg>
        </div>
        <div class="stat-value">{{ $stats['avg_engagement'] }}%</div>
        <div class="stat-label">Avg Engagement</div>
        <div class="stat-sub">Likes / views ratio</div>
    </div>

</div>

{{-- ─── Content & Creators (2-up, mirrors Admin "Imported Influencers") ─── --}}
<div class="section-label">Content &amp; Creators</div>
<div class="stats-grid-2">

    {{-- Influencers --}}
    <div class="stat-card" style="--accent:#7C3AED;--icon-bg:rgba(124,58,237,.1);--icon-bdr:rgba(124,58,237,.2);--ring-bg:rgba(124,58,237,.05)">
        <div class="stat-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="#7C3AED" 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 class="stat-value">{{ number_format($stats['total_influencers']) }}</div>
        <div class="stat-label">Influencers</div>
        <div class="stat-sub">Tracked across campaigns</div>
    </div>

    {{-- Videos Tracked --}}
    <div class="stat-card" style="--accent:#0B1628;--icon-bg:rgba(11,22,40,.08);--icon-bdr:rgba(11,22,40,.15);--ring-bg:rgba(11,22,40,.03)">
        <div class="stat-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="#0B1628" stroke-width="2">
                <circle cx="12" cy="12" r="10"/>
                <polygon points="10 8 16 12 10 16 10 8"/>
            </svg>
        </div>
        <div class="stat-value">{{ number_format($stats['total_posts']) }}</div>
        <div class="stat-label">Videos Tracked</div>
        <div class="stat-sub">Total videos synced</div>
    </div>

</div>


{{-- ── Add Channel Modal ── --}}
<div class="modal-backdrop" id="addChannelModal">
    <div class="modal-box">
        <div class="modal-header">
            <div>
                <div class="modal-title">Add Channel</div>
                <div style="font-size:12px;color:#93A0B0;margin-top:2px" id="addChannelCampaignName"></div>
            </div>
            <button class="modal-close" onclick="closeAddChannelModal()">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                    <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
            </button>
        </div>
        <form method="POST" id="addChannelForm" action="">
            @csrf
            <div class="modal-body">
                <label class="form-label">YouTube Channel URL or Handle</label>
                <input type="text" name="channel_url" id="channelUrlInput"
                       class="form-control"
                       placeholder="https://youtube.com/@channelname  or  @handle" required>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-ghost" onclick="closeAddChannelModal()">Cancel</button>
                <button type="submit" class="btn btn-primary">Add Channel</button>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<script>
function openAddChannelModal(campaignId, campaignName) {
    document.getElementById('addChannelForm').action = '/campaigns/' + campaignId + '/channels';
    document.getElementById('addChannelCampaignName').textContent = campaignName;
    document.getElementById('channelUrlInput').value = '';
    const modal = document.getElementById('addChannelModal');
    modal.classList.add('open');
    document.body.style.overflow = 'hidden';
    setTimeout(() => document.getElementById('channelUrlInput').focus(), 200);
}
function closeAddChannelModal() {
    document.getElementById('addChannelModal').classList.remove('open');
    document.body.style.overflow = '';
}
document.getElementById('addChannelModal').addEventListener('click', function(e) {
    if (e.target === this) closeAddChannelModal();
});
document.addEventListener('keydown', e => { if (e.key === 'Escape') closeAddChannelModal(); });
</script>
@endpush