{% extends 'admin/base.html.twig' %}

{% block title %}Dashboard{% endblock %}
{% block page_title %}Dashboard{% endblock %}

{% block body %}
    {# Plan & Usage Info Bar #}
    {% set plan = current_plan() %}
    {% set planLimitsData = plan_limits() %}
    {% set licenseInfo = license_info() %}
    {% set usage = usage_summary() %}

    <div class="mb-6 bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="flex flex-wrap items-center gap-4 px-6 py-4">
            {# Plan Badge #}
            <div class="flex items-center gap-3">
                {% if plan == 'starter' %}
                    <div class="w-10 h-10 rounded-xl bg-green-100 flex items-center justify-center">
                        <i class="fas fa-rocket text-green-500"></i>
                    </div>
                    <div>
                        <p class="text-sm font-bold text-green-700">Starter Plan</p>
                        <p class="text-xs text-gray-400">Temel paket</p>
                    </div>
                {% elseif plan == 'professional' %}
                    <div class="w-10 h-10 rounded-xl bg-blue-100 flex items-center justify-center">
                        <i class="fas fa-briefcase text-blue-500"></i>
                    </div>
                    <div>
                        <p class="text-sm font-bold text-blue-700">Professional Plan</p>
                        <p class="text-xs text-gray-400">Profesyonel paket</p>
                    </div>
                {% elseif plan == 'enterprise' %}
                    <div class="w-10 h-10 rounded-xl bg-purple-100 flex items-center justify-center">
                        <i class="fas fa-gem text-purple-500"></i>
                    </div>
                    <div>
                        <p class="text-sm font-bold text-purple-700">Enterprise Plan</p>
                        <p class="text-xs text-gray-400">Kurumsal paket</p>
                    </div>
                {% endif %}
            </div>

            <div class="hidden sm:block h-8 w-px bg-gray-200"></div>

            {# Limits Summary #}
            <div class="flex flex-wrap items-center gap-4 text-xs">
                <div class="flex items-center gap-1.5 px-3 py-1.5 bg-blue-50 rounded-lg">
                    <i class="fas fa-users text-blue-500"></i>
                    <span class="text-blue-700 font-medium">{{ planLimitsData.maxUsers == 0 ? 'Sinirsiz' : planLimitsData.maxUsers }} kullanici</span>
                </div>
                <div class="flex items-center gap-1.5 px-3 py-1.5 bg-emerald-50 rounded-lg">
                    <i class="fas fa-newspaper text-emerald-500"></i>
                    <span class="text-emerald-700 font-medium">{{ planLimitsData.maxNews == 0 ? 'Sinirsiz' : planLimitsData.maxNews }} haber</span>
                </div>
                <div class="flex items-center gap-1.5 px-3 py-1.5 bg-purple-50 rounded-lg">
                    <i class="fas fa-database text-purple-500"></i>
                    <span class="text-purple-700 font-medium">{{ (planLimitsData.maxStorageMb / 1024)|round(0) }} GB depolama</span>
                </div>
            </div>

            {% if licenseInfo.daysLeft is not null and licenseInfo.daysLeft >= 0 %}
                <div class="hidden sm:block h-8 w-px bg-gray-200"></div>
                <div class="flex items-center gap-1.5 px-3 py-1.5 {{ licenseInfo.daysLeft <= 7 ? 'bg-red-50' : 'bg-gray-50' }} rounded-lg text-xs">
                    <i class="fas fa-clock {{ licenseInfo.daysLeft <= 7 ? 'text-red-500' : 'text-gray-400' }}"></i>
                    <span class="{{ licenseInfo.daysLeft <= 7 ? 'text-red-700 font-semibold' : 'text-gray-600' }}">
                        {{ licenseInfo.daysLeft }} gun kaldi
                    </span>
                </div>
            {% endif %}
        </div>
    </div>

    {# ============================================================ #}
    {# USAGE PROGRESS BARS                                          #}
    {# ============================================================ #}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-8">
        {# Users Usage #}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center gap-2">
                    <div class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center">
                        <i class="fas fa-users text-blue-500 text-sm"></i>
                    </div>
                    <span class="text-sm font-semibold text-gray-700">Kullanicilar</span>
                </div>
                <span class="text-xs font-medium {{ usage.users.atLimit is defined and usage.users.atLimit ? 'text-red-600' : (usage.users.nearLimit is defined and usage.users.nearLimit ? 'text-amber-600' : 'text-gray-500') }}">
                    {{ usage.users.current }}/{{ usage.users.max == 0 ? '∞' : usage.users.max }}
                </span>
            </div>
            <div class="w-full bg-gray-100 rounded-full h-2.5 overflow-hidden">
                {% set userPercent = usage.users.max > 0 ? usage.users.percentUsed : 0 %}
                <div class="h-2.5 rounded-full transition-all duration-500 {{ userPercent >= 100 ? 'bg-red-500' : (userPercent >= 80 ? 'bg-amber-500' : 'bg-blue-500') }}"
                     style="width: {{ userPercent > 100 ? 100 : userPercent }}%"></div>
            </div>
            <p class="mt-2 text-xs text-gray-400">
                {% if usage.users.max == 0 %}
                    Sinirsiz kullanici hakki
                {% elseif usage.users.atLimit is defined and usage.users.atLimit %}
                    <span class="text-red-500 font-medium"><i class="fas fa-exclamation-circle mr-1"></i>Limit doldu! Yeni kullanici ekleyemezsiniz.</span>
                {% elseif usage.users.nearLimit is defined and usage.users.nearLimit %}
                    <span class="text-amber-500 font-medium"><i class="fas fa-exclamation-triangle mr-1"></i>Limite yaklasiyorsunuz</span>
                {% else %}
                    {{ usage.users.max - usage.users.current }} kullanici daha eklenebilir
                {% endif %}
            </p>
        </div>

        {# News Usage #}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center gap-2">
                    <div class="w-8 h-8 rounded-lg bg-emerald-100 flex items-center justify-center">
                        <i class="fas fa-newspaper text-emerald-500 text-sm"></i>
                    </div>
                    <span class="text-sm font-semibold text-gray-700">Haberler</span>
                </div>
                <span class="text-xs font-medium {{ usage.news.atLimit is defined and usage.news.atLimit ? 'text-red-600' : (usage.news.nearLimit is defined and usage.news.nearLimit ? 'text-amber-600' : 'text-gray-500') }}">
                    {{ usage.news.current }}/{{ usage.news.max == 0 ? '∞' : usage.news.max }}
                </span>
            </div>
            <div class="w-full bg-gray-100 rounded-full h-2.5 overflow-hidden">
                {% set newsPercent = usage.news.max > 0 ? usage.news.percentUsed : 0 %}
                <div class="h-2.5 rounded-full transition-all duration-500 {{ newsPercent >= 100 ? 'bg-red-500' : (newsPercent >= 80 ? 'bg-amber-500' : 'bg-emerald-500') }}"
                     style="width: {{ newsPercent > 100 ? 100 : newsPercent }}%"></div>
            </div>
            <p class="mt-2 text-xs text-gray-400">
                {% if usage.news.max == 0 %}
                    Sinirsiz haber hakki
                {% elseif usage.news.atLimit is defined and usage.news.atLimit %}
                    <span class="text-red-500 font-medium"><i class="fas fa-exclamation-circle mr-1"></i>Limit doldu! Yeni haber ekleyemezsiniz.</span>
                {% elseif usage.news.nearLimit is defined and usage.news.nearLimit %}
                    <span class="text-amber-500 font-medium"><i class="fas fa-exclamation-triangle mr-1"></i>Limite yaklasiyorsunuz</span>
                {% else %}
                    {{ usage.news.max - usage.news.current }} haber daha eklenebilir
                {% endif %}
            </p>
        </div>

        {# Storage Usage #}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center gap-2">
                    <div class="w-8 h-8 rounded-lg bg-purple-100 flex items-center justify-center">
                        <i class="fas fa-database text-purple-500 text-sm"></i>
                    </div>
                    <span class="text-sm font-semibold text-gray-700">Depolama</span>
                </div>
                <span class="text-xs font-medium {{ usage.storage.atLimit is defined and usage.storage.atLimit ? 'text-red-600' : (usage.storage.nearLimit is defined and usage.storage.nearLimit ? 'text-amber-600' : 'text-gray-500') }}">
                    {% if usage.storage.current >= 1024 %}
                        {{ (usage.storage.current / 1024)|round(1) }} GB
                    {% else %}
                        {{ usage.storage.current }} MB
                    {% endif %}
                    /
                    {% if usage.storage.max == 0 %}
                        ∞
                    {% elseif usage.storage.max >= 1024 %}
                        {{ (usage.storage.max / 1024)|round(0) }} GB
                    {% else %}
                        {{ usage.storage.max }} MB
                    {% endif %}
                </span>
            </div>
            <div class="w-full bg-gray-100 rounded-full h-2.5 overflow-hidden">
                {% set storagePercent = usage.storage.max > 0 ? usage.storage.percentUsed : 0 %}
                <div class="h-2.5 rounded-full transition-all duration-500 {{ storagePercent >= 100 ? 'bg-red-500' : (storagePercent >= 80 ? 'bg-amber-500' : 'bg-purple-500') }}"
                     style="width: {{ storagePercent > 100 ? 100 : storagePercent }}%"></div>
            </div>
            <p class="mt-2 text-xs text-gray-400">
                {% if usage.storage.max == 0 %}
                    Sinirsiz depolama
                {% elseif usage.storage.atLimit is defined and usage.storage.atLimit %}
                    <span class="text-red-500 font-medium"><i class="fas fa-exclamation-circle mr-1"></i>Depolama doldu!</span>
                {% elseif usage.storage.nearLimit is defined and usage.storage.nearLimit %}
                    <span class="text-amber-500 font-medium"><i class="fas fa-exclamation-triangle mr-1"></i>Depolama dolmak uzere</span>
                {% else %}
                    {% set remaining = usage.storage.max - usage.storage.current %}
                    {% if remaining >= 1024 %}
                        {{ (remaining / 1024)|round(1) }} GB bos alan
                    {% else %}
                        {{ remaining }} MB bos alan
                    {% endif %}
                {% endif %}
            </p>
        </div>
    </div>

    {# Stats cards #}
    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-8">
        <div class="card">
            <div class="card-body">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="rounded-md bg-primary-500 p-3">
                            <i class="fas fa-newspaper text-white text-xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="truncate text-sm font-medium text-gray-500">Toplam Haber</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.totalNews }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="rounded-md bg-green-500 p-3">
                            <i class="fas fa-check-circle text-white text-xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="truncate text-sm font-medium text-gray-500">Yayinda</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.publishedNews }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="rounded-md bg-yellow-500 p-3">
                            <i class="fas fa-edit text-white text-xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="truncate text-sm font-medium text-gray-500">Taslak</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.draftNews }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="rounded-md bg-orange-500 p-3">
                            <i class="fas fa-comments text-white text-xl"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="truncate text-sm font-medium text-gray-500">Bekleyen Yorum</dt>
                            <dd class="text-2xl font-semibold text-gray-900">{{ stats.pendingComments }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# ============================================================ #}
    {# PLAN FEATURES & MODULES OVERVIEW                             #}
    {# ============================================================ #}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        {# Available Features #}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h3 class="text-sm font-semibold text-gray-700 mb-4">
                <i class="fas fa-star text-amber-400 mr-2"></i>Plan Ozellikleri
            </h3>
            <div class="grid grid-cols-2 gap-2">
                {% set features = plan_features() %}
                {% set featureLabels = feature_labels() %}
                {% for key, label in featureLabels %}
                    <div class="flex items-center gap-2 px-3 py-2 rounded-lg {{ features[key] is defined and features[key] ? 'bg-green-50' : 'bg-gray-50' }}">
                        {% if features[key] is defined and features[key] %}
                            <i class="fas fa-check-circle text-green-500 text-xs"></i>
                            <span class="text-xs text-green-700 font-medium">{{ label }}</span>
                        {% else %}
                            <i class="fas fa-lock text-gray-300 text-xs"></i>
                            <span class="text-xs text-gray-400">{{ label }}</span>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
        </div>

        {# Module Access #}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h3 class="text-sm font-semibold text-gray-700 mb-4">
                <i class="fas fa-puzzle-piece text-indigo-400 mr-2"></i>Modul Erisimi
            </h3>
            <div class="grid grid-cols-2 gap-2">
                {% set moduleList = ['menu', 'comment', 'seo', 'widget', 'advertisement', 'poll', 'theme', 'amp', 'agency', 'horoscope'] %}
                {% set moduleLabels = {
                    'menu': 'Menu',
                    'comment': 'Yorum',
                    'seo': 'SEO',
                    'widget': 'Widget',
                    'advertisement': 'Reklam',
                    'poll': 'Anket',
                    'theme': 'Tema',
                    'amp': 'AMP',
                    'agency': 'Ajans',
                    'horoscope': 'Burclar'
                } %}
                {% for moduleSlug in moduleList %}
                    {% set allowed = is_module_allowed(moduleSlug) %}
                    <div class="flex items-center gap-2 px-3 py-2 rounded-lg {{ allowed ? 'bg-green-50' : 'bg-gray-50' }}">
                        {% if allowed %}
                            <i class="fas fa-check-circle text-green-500 text-xs"></i>
                            <span class="text-xs text-green-700 font-medium">{{ moduleLabels[moduleSlug]|default(moduleSlug|capitalize) }}</span>
                        {% else %}
                            <i class="fas fa-lock text-gray-300 text-xs"></i>
                            <span class="text-xs text-gray-400">{{ moduleLabels[moduleSlug]|default(moduleSlug|capitalize) }}</span>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

    {# Recent news #}
    <div class="card">
        <div class="card-header flex items-center justify-between">
            <h2 class="text-lg font-medium text-gray-900">Son Haberler</h2>
            <a href="{{ path('admin_news_index') }}" class="text-sm text-primary-600 hover:text-primary-500">
                Tumunu Gor <i class="fas fa-arrow-right ml-1"></i>
            </a>
        </div>
        <div class="overflow-x-auto">
            <table class="table">
                <thead>
                    <tr>
                        <th>Baslik</th>
                        <th>Kategori</th>
                        <th>Durum</th>
                        <th>Tarih</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 bg-white">
                    {% for news in recentNews %}
                        <tr>
                            <td>
                                <div class="max-w-xs truncate font-medium">{{ news.title }}</div>
                            </td>
                            <td>
                                {% if news.category %}
                                    <span class="badge-info">{{ news.category.title }}</span>
                                {% else %}
                                    <span class="text-gray-400">-</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if news.status == 'published' %}
                                    <span class="badge-success">Yayinda</span>
                                {% elseif news.status == 'draft' %}
                                    <span class="badge-gray">Taslak</span>
                                {% elseif news.status == 'pending' %}
                                    <span class="badge-warning">Beklemede</span>
                                {% else %}
                                    <span class="badge-gray">{{ news.status }}</span>
                                {% endif %}
                            </td>
                            <td class="text-gray-500">
                                {{ news.createdAt|date('d.m.Y H:i') }}
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="4" class="text-center text-gray-500 py-8">
                                Henuz haber eklenmemis.
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}
