{% extends "dashboard/layout.html" %}
{% block title %}{{ _('My Dashboard – OnlineConvert') }}{% endblock %}
{% set active_page = 'overview' %}

{% block dashboard_content %}

<!-- Plan Card -->
<div class="mb-6 rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div class="flex items-center gap-4">
            <div class="w-12 h-12 rounded-xl {% if plan and plan.price_monthly == 0 %}bg-gray-100 dark:bg-gray-800{% elif plan and plan.price_monthly < 15 %}bg-indigo-100 dark:bg-indigo-900/30{% else %}bg-yellow-100 dark:bg-yellow-900/30{% endif %} flex items-center justify-center">
                <i class="fa fa-{% if not plan or plan.price_monthly == 0 %}user{% elif plan.price_monthly < 15 %}star{% else %}crown{% endif %} text-{% if not plan or plan.price_monthly == 0 %}gray-400{% elif plan.price_monthly < 15 %}indigo-500{% else %}yellow-500{% endif %} text-xl"></i>
            </div>
            <div>
                <div class="text-xs text-gray-400 uppercase tracking-wider font-semibold">{{ _('Current Plan') }}</div>
                <div class="text-lg font-bold text-gray-900 dark:text-white" data-testid="text-current-plan">{{ plan.name if plan else _('Free') }}</div>
                <div class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
                    {% if user.subscription_status == 'active' %}
                    <span class="text-green-600 dark:text-green-400 font-medium"><i class="fa fa-check-circle mr-1"></i>{{ _('Active') }}{% if user.subscription_expires_at %} · {{ _('Renews') }} {{ user.subscription_expires_at[:10] }}{% endif %}</span>
                    {% else %}{{ _('Free tier') }}{% endif %}
                </div>
            </div>
        </div>
        <div class="flex flex-wrap gap-3 items-center">
            <div class="grid grid-cols-3 gap-2 text-xs text-center">
                <div class="px-3 py-2 rounded-lg bg-gray-50 dark:bg-gray-800">
                    <div class="text-gray-400">{{ _('Files/Day') }}</div>
                    <div class="font-bold text-gray-800 dark:text-gray-200">{{ _('Unlimited') if plan and plan.max_files_per_day == -1 else (plan.max_files_per_day if plan else 5) }}</div>
                </div>
                <div class="px-3 py-2 rounded-lg bg-gray-50 dark:bg-gray-800">
                    <div class="text-gray-400">{{ _('Max Size') }}</div>
                    <div class="font-bold text-gray-800 dark:text-gray-200">{{ plan.max_file_size_mb|string + ' MB' if plan else '50 MB' }}</div>
                </div>
                <div class="px-3 py-2 rounded-lg bg-gray-50 dark:bg-gray-800">
                    <div class="text-gray-400">{{ _('Auto-Delete') }}</div>
                    <div class="font-bold text-gray-800 dark:text-gray-200">{{ _('Never') if plan and plan.auto_delete_hours == 0 else ((plan.auto_delete_hours|string + 'h') if plan else '24h') }}</div>
                </div>
            </div>
            {% if plan and plan.price_monthly == 0 %}
            <a href="{{ full_url('/pricing') }}" class="px-4 py-2 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 text-white text-sm font-semibold hover:from-indigo-700 hover:to-purple-700 transition-all shadow-md" data-testid="btn-upgrade">
                <i class="fa fa-arrow-up mr-1"></i> {{ _('Upgrade') }}
            </a>
            {% endif %}
        </div>
    </div>
</div>

<!-- Quick Stats -->
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6">
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 text-center">
        <div class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">{{ total }}</div>
        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ _('Total Conversions') }}</div>
    </div>
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 text-center">
        <div class="text-2xl font-bold text-green-600 dark:text-green-400">{{ conversions|selectattr('status','equalto','finished')|list|length }}</div>
        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ _('Completed') }}</div>
    </div>
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 text-center">
        <div class="text-2xl font-bold text-blue-600 dark:text-blue-400">{{ referral_count if referral_count is defined else 0 }}</div>
        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ _('Referrals') }}</div>
    </div>
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 text-center">
        <div class="text-2xl font-bold text-purple-600 dark:text-purple-400">{{ blog_count if blog_count is defined else 0 }}</div>
        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ _('Blog Posts') }}</div>
    </div>
</div>

<!-- Today's Usage -->
{% if today_usage is defined or plan_limits is defined %}
<div class="mb-6 rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
    <h2 class="text-base font-bold text-gray-900 dark:text-white mb-4"><i class="fa fa-chart-bar mr-2 text-indigo-500"></i>{{ _("Today's Usage") }}</h2>
    {% set _usage = today_usage if today_usage is defined else {} %}
    {% set _limits = plan_limits if plan_limits is defined else {} %}
    {% set tool_info = [
        ('converter', 'max_files_per_day',      _('Converter'), 'blue',   'fa-exchange-alt'),
        ('pdf',       'max_pdf_per_day',         _('PDF'),       'orange', 'fa-file-pdf'),
        ('hash',      'max_hash_per_day',        _('Hash'),      'purple', 'fa-hashtag'),
        ('screenshot','max_screenshot_per_day',  _('Screenshot'),'teal',  'fa-camera'),
        ('bg_remove', 'max_bg_remove_per_day',   _('BG Remove'), 'pink',  'fa-image'),
    ] %}
    <div class="grid grid-cols-2 sm:grid-cols-5 gap-3">
    {% for ttype, col, label, color, icon in tool_info %}
        {% set used  = _usage.get(ttype, 0) %}
        {% set limit = _limits.get(col, 5) %}
        {% set pct   = 0 if limit <= 0 else [100, (used / limit * 100)|int]|min %}
        <div class="rounded-xl border border-gray-100 dark:border-gray-800 p-3">
            <div class="flex items-center gap-2 mb-2">
                <i class="fa {{ icon }} text-{{ color }}-500 text-xs"></i>
                <span class="text-xs font-semibold text-gray-700 dark:text-gray-300">{{ label }}</span>
            </div>
            {% if limit == -1 %}
                <div class="text-sm font-bold text-gray-900 dark:text-white">{{ used }} / ∞</div>
                <div class="mt-1 h-1.5 rounded-full bg-gray-100 dark:bg-gray-700"><div class="h-1.5 rounded-full bg-{{ color }}-400" style="width:10%"></div></div>
            {% else %}
                <div class="text-sm font-bold {% if pct >= 100 %}text-red-600 dark:text-red-400{% else %}text-gray-900 dark:text-white{% endif %}">{{ used }} / {{ limit }}</div>
                <div class="mt-1 h-1.5 rounded-full bg-gray-100 dark:bg-gray-700">
                    <div class="h-1.5 rounded-full {% if pct >= 100 %}bg-red-500{% elif pct >= 75 %}bg-yellow-500{% else %}bg-{{ color }}-400{% endif %}" style="width:{{ pct }}%"></div>
                </div>
            {% endif %}
        </div>
    {% endfor %}
    </div>
</div>
{% endif %}

<!-- Conversion History -->
<div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
    <div class="px-5 py-4 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between">
        <h2 class="text-base font-bold text-gray-900 dark:text-white"><i class="fa fa-clock-rotate-left mr-2 text-indigo-500"></i>{{ _('Recent Conversions') }}</h2>
        <a href="{{ full_url('/dashboard/files') }}" class="text-xs text-indigo-500 hover:underline" data-testid="link-view-all-files">{{ _('View all') }} →</a>
    </div>

    {% if conversions %}
    <div class="divide-y divide-gray-100 dark:divide-gray-800">
        {% for c in conversions[:10] %}
        <div class="px-5 py-3.5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors" data-testid="row-conv-{{ c.id }}">
            <div class="flex items-center gap-3">
                <div class="w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0">
                    <i class="fa fa-file-alt text-blue-500 text-xs"></i>
                </div>
                <div>
                    <div class="text-sm font-medium text-gray-800 dark:text-gray-200 max-w-[200px] truncate" title="{{ c.file_name }}" data-testid="text-conv-file-{{ c.id }}">{{ c.file_name or _('Unnamed') }}</div>
                    <div class="flex items-center gap-2 mt-0.5">
                        <span class="text-xs text-gray-400">{{ c.input_format or '?' }} → {{ c.output_format or '?' }}</span>
                        {% set _tc = {'converter':'blue','pdf':'orange','hash':'purple','screenshot':'teal','bg_remove':'pink'} %}
                        {% set _tcolor = _tc.get(c.tool_type or 'converter', 'gray') %}
                        <span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-medium bg-{{ _tcolor }}-100 dark:bg-{{ _tcolor }}-900/30 text-{{ _tcolor }}-700 dark:text-{{ _tcolor }}-400 capitalize">{{ (c.tool_type or 'converter')|replace('_',' ') }}</span>
                        <span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold
                            {% if c.status == 'finished' %}bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400
                            {% elif c.status in ['pending','queued'] %}bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400
                            {% elif c.status == 'expired' %}bg-gray-100 dark:bg-gray-700 text-gray-500
                            {% elif c.status == 'cancelled' %}bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400
                            {% elif c.status == 'deleted' %}bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400
                            {% else %}bg-red-100 dark:bg-red-900/30 text-red-600{% endif %}">
                            {{ c.status }}</span>
                    </div>
                </div>
            </div>
            <div class="flex items-center gap-2">
                <span class="text-xs text-gray-400">{{ c.created_at[:10] if c.created_at else '' }}</span>
                {% if c.output_path and c.status == 'finished' %}
                <a href="{{ full_url('/dashboard/download/' ~ c.id) }}" class="px-2.5 py-1 rounded-lg bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 text-xs font-medium hover:bg-green-100 transition-all" data-testid="btn-download-{{ c.id }}">
                    <i class="fa fa-download mr-1"></i>{{ _('Download') }}
                </a>
                {% endif %}
                <form method="POST" action="{{ full_url('/dashboard/files/delete/' ~ c.id) }}" class="inline" data-confirm="{{ _('Delete this file permanently?') }}&#10;&#10;{{ _('The converted output and original upload will be removed from storage.') }}&#10;{{ _('Any shared link for this file will stop working immediately.') }}"  >
                    <button type="submit" class="px-2 py-1 rounded-lg bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-xs hover:bg-red-100 dark:hover:bg-red-900/30 transition-all" data-testid="btn-delete-{{ c.id }}">
                        <i class="fa fa-trash"></i>
                    </button>
                </form>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="px-5 py-14 text-center" data-testid="text-no-conversions">
        <i class="fa fa-history text-3xl text-gray-300 dark:text-gray-600 mb-3"></i>
        <p class="text-gray-500 dark:text-gray-400 text-sm">{{ _('No conversions yet.') }}</p>
        <a href="{{ full_url('/') }}" class="mt-3 inline-block text-sm text-indigo-500 hover:underline">{{ _('Start converting a file') }} →</a>
    </div>
    {% endif %}
</div>
{% endblock %}