{% extends "base.html" %}
{% block title %}{{ _('nav.dashboard') }}{% endblock %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 py-12">
    <!-- Header -->
    <div class="flex flex-col md:flex-row items-start md:items-center justify-between mb-12 gap-6">
        <div>
            <h1 class="text-4xl font-extrabold luxury-text mb-2 tracking-tight">{{ _('nav.dashboard') }}</h1>
            <p class="text-slate-500 text-sm font-medium uppercase tracking-[0.2em]">{{ _('dash.subtitle') }}</p>
        </div>
        <div class="flex items-center gap-4">
            <a href="{{ url_for('study.compare') }}" class="glass px-6 py-2.5 rounded-xl text-slate-300 font-bold text-xs uppercase tracking-wider hover:border-accent-gold transition-all duration-300">{{ _('dash.compare') }}</a>
            <a href="{{ url_for('study.new') }}" class="btn-luxury px-6 py-2.5 rounded-xl font-bold text-xs transition-all flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                <span>{{ _('nav.new_study') }}</span>
            </a>
        </div>
    </div>

    <!-- Wall Street Metrics Row -->
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6 mb-12">
        <div class="panel p-5 ticker-card">
            <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">{{ _('dash.plan') }}</div>
            <div class="text-2xl font-black text-white tracking-tight">{{ plan.display_name if plan else 'Free' }}</div>
        </div>
        <div class="panel p-5 ticker-card">
            <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">{{ _('dash.usage') }}</div>
            <div class="text-2xl font-black text-white tracking-tight">{{ current_user.reports_this_month }} <span class="text-slate-600 text-lg">/</span> {{ '∞' if plan and plan.reports_per_month == -1 else (plan.reports_per_month if plan else 2) }}</div>
        </div>
        <div class="panel p-5 ticker-card">
            <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">{{ _('dash.total_reports') }}</div>
            <div class="text-2xl font-black text-white tracking-tight">{{ total_reports }}</div>
        </div>
        <div class="panel p-5 ticker-card">
            <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">{{ _('dash.avg_viability') }}</div>
            <div class="text-2xl font-black text-accent-gold tracking-tight">{{ avg_score }}<span class="text-slate-600 text-sm font-bold ml-1">%</span></div>
        </div>
        <div class="panel p-5 ticker-card">
            <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">{{ _('dash.investors') }}</div>
            <div class="text-2xl font-black text-white tracking-tight">{{ investors_count }}</div>
        </div>
        <div class="panel p-5 ticker-card">
            <div class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-2">{{ _('dash.notifications') }}</div>
            <div class="text-2xl font-black text-white tracking-tight">{{ unread_notifs }}</div>
        </div>
    </div>

    <!-- Verdict Distribution & Quick Tools -->
    {% if total_reports > 0 %}
    <div class="grid md:grid-cols-2 gap-8 mb-12">
        <div class="panel p-6">
            <h3 class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-4">{{ _('dash.verdict_dist') }}</h3>
            <div class="flex items-center gap-4 mb-4">
                <div class="flex-1 h-4 bg-white/5 rounded-full overflow-hidden flex border border-white/5">
                    {% if total_reports > 0 %}
                    <div class="bg-emerald-500 shadow-[0_0_15px_rgba(16,185,129,0.4)]" style="width:{{ (go_count/total_reports*100)|round }}%"></div>
                    <div class="bg-amber-500 shadow-[0_0_15px_rgba(245,158,11,0.4)]" style="width:{{ (caution_count/total_reports*100)|round }}%"></div>
                    <div class="bg-red-500 shadow-[0_0_15px_rgba(239,68,68,0.4)]" style="width:{{ (nogo_count/total_reports*100)|round }}%"></div>
                    {% endif %}
                </div>
            </div>
            <div class="grid grid-cols-3 gap-4">
                <div class="flex flex-col">
                    <span class="text-[10px] font-bold text-emerald-500 uppercase">Go</span>
                    <span class="text-xl font-black text-white">{{ go_count }}</span>
                </div>
                <div class="flex flex-col">
                    <span class="text-[10px] font-bold text-amber-500 uppercase">Caution</span>
                    <span class="text-xl font-black text-white">{{ caution_count }}</span>
                </div>
                <div class="flex flex-col">
                    <span class="text-[10px] font-bold text-red-500 uppercase">No-Go</span>
                    <span class="text-xl font-black text-white">{{ nogo_count }}</span>
                </div>
            </div>
        </div>
        <div class="panel p-6">
            <h3 class="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-4">{{ _('dash.quick_tools') }}</h3>
            <div class="grid grid-cols-3 gap-3">
                {% set tools = [
                    (url_for('investor_crm.index'), _('dash.investors_link'), '💼'),
                    (url_for('grants.index'), _('dash.grants_link'), '🏦'),
                    (url_for('cofounders.index'), _('dash.cofounder'), '🤝'),
                    (url_for('campaigns.dashboard'), _('dash.campaigns_link'), '📢'),
                    (url_for('marketplace.index'), _('dash.market_link'), '🛒'),
                    (url_for('templates.index'), _('dash.templates_link'), '📄')
                ] %}
                {% for link, label, icon in tools %}
                <a href="{{ link }}" class="glass flex flex-col items-center justify-center p-3 rounded-xl hover:border-accent-gold transition-all duration-300 group">
                    <span class="text-xl mb-1 group-hover:scale-110 transition-transform">{{ icon }}</span>
                    <span class="text-[10px] font-bold text-slate-400 group-hover:text-white text-center">{{ label }}</span>
                </a>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Search & Filter Bar -->
    <div class="panel p-6 mb-12 glass">
        <form method="GET" class="flex flex-col md:flex-row items-center gap-6">
            <div class="flex-1 w-full relative">
                <input type="text" name="q" value="{{ search }}" placeholder="{{ _('dash.search_reports') }}..."
                       class="w-full pl-12 pr-4 py-3 bg-white/5 border-white/10 rounded-xl focus:border-accent-gold focus:ring-1 focus:ring-accent-gold transition-all text-sm">
                <svg class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
            </div>
            <div class="flex gap-4 w-full md:w-auto">
                <select name="lang" class="bg-slate-800 border border-white/10 text-white rounded-lg px-3 py-2 text-sm focus:border-accent-gold min-w-[140px]">
                    <option value="" {% if not lang_filter %}selected{% endif %}>{{ _('dash.all_langs') }}</option>
                    <option value="ar" {% if lang_filter == 'ar' %}selected{% endif %}>{{ _('common.arabic') }}</option>
                    <option value="en" {% if lang_filter == 'en' %}selected{% endif %}>English</option>
                </select>
                <select name="sort" class="bg-slate-800 border border-white/10 text-white rounded-lg px-3 py-2 text-sm focus:border-accent-gold min-w-[140px]">
                    <option value="newest" {% if sort == 'newest' %}selected{% endif %}>{{ _('dash.newest') }}</option>
                    <option value="oldest" {% if sort == 'oldest' %}selected{% endif %}>{{ _('dash.oldest') }}</option>
                    <option value="name" {% if sort == 'name' %}selected{% endif %}>{{ _('dash.by_name') }}</option>
                </select>
            </div>
            <button type="submit" class="w-full md:w-auto btn-luxury px-8 py-3 rounded-xl font-bold text-xs">{{ _('dash.search_btn') }}</button>
            {% if search or lang_filter %}
            <a href="{{ url_for('dashboard.index') }}" class="text-slate-500 text-[10px] font-bold uppercase tracking-widest hover:text-white transition-colors whitespace-nowrap border-b border-transparent hover:border-white">{{ _('dash.clear_filters') }}</a>
            {% endif %}
        </form>
    </div>

    <!-- Reports List (Wall Street Style) -->
    <div class="panel overflow-hidden glass rounded-3xl">
        <div class="p-8 border-b border-white/5 flex justify-between items-center bg-white/[0.02]">
            <h2 class="text-[10px] font-bold text-slate-500 uppercase tracking-[0.3em]">{{ _('dash.analysis_log') }}</h2>
            <div class="px-3 py-1 rounded-lg bg-white/5 text-[10px] font-mono text-slate-400 border border-white/5">{{ pagination.total }} {{ _('dash.reports') }}</div>
        </div>

        {% if reports %}
        <div class="divide-y divide-white/5">
            {% for report in reports %}
            <a href="{{ url_for('study.view', report_id=report.id) if report.full_report_html else url_for('study.generate', report_id=report.id) }}"
               class="flex items-center justify-between p-6 hover:bg-white/[0.03] transition-all group">
                <div class="flex items-center gap-6">
                    <div class="w-14 h-14 rounded-2xl glass flex items-center justify-center text-2xl group-hover:scale-110 group-hover:border-accent-gold transition-all duration-500 relative overflow-hidden">
                        <div class="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                        {% if report.verdict == 'GO' %}📈{% elif report.verdict == 'NO-GO' %}📉{% else %}⚖️{% endif %}
                    </div>
                    <div>
                        <div class="text-lg font-bold text-white group-hover:text-accent-gold transition-colors">{{ report.project_name }}</div>
                        <div class="flex items-center gap-3 mt-1.5">
                            <span class="text-[10px] font-bold text-slate-500 uppercase tracking-wider">{{ report.created_at.strftime('%b %d, %Y') }}</span>
                            <span class="w-1 h-1 rounded-full bg-slate-700"></span>
                            <span class="text-[10px] font-bold text-slate-500 uppercase tracking-wider">{{ report.language|upper }}</span>
                            {% if report.viability_score %}
                            <span class="w-1 h-1 rounded-full bg-slate-700"></span>
                            <span class="text-[10px] font-bold text-accent-gold uppercase tracking-wider">{{ _('dash.score') }}: {{ report.viability_score }}%</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="flex items-center gap-8">
                    {% if report.verdict %}
                    <span class="hidden md:flex px-4 py-1.5 rounded-xl text-[10px] font-black uppercase tracking-widest border transition-all duration-300
                        {% if report.verdict == 'GO' %}bg-emerald-500/10 text-emerald-400 border-emerald-500/20 shadow-[0_0_15px_rgba(16,185,129,0.1)]
                        {% elif report.verdict == 'NO-GO' %}bg-red-500/10 text-red-400 border-red-500/20 shadow-[0_0_15px_rgba(239,68,68,0.1)]
                        {% else %}bg-amber-500/10 text-amber-400 border-amber-500/20 shadow-[0_0_15px_rgba(245,158,11,0.1)]{% endif %}">
                        {{ report.verdict }}
                    </span>
                    {% else %}
                    <span class="hidden md:flex px-4 py-1.5 rounded-xl text-[10px] font-black uppercase tracking-widest bg-white/5 text-slate-500 border border-white/5 animate-pulse">{{ _('dash.analyzing') }}...</span>
                    {% endif %}
                    <div class="w-10 h-10 rounded-full flex items-center justify-center text-slate-700 group-hover:text-white group-hover:bg-white/5 transition-all duration-300">
                        <svg class="w-5 h-5 {{ 'rotate-180' if is_rtl else '' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                    </div>
                </div>
            </a>
            {% endfor %}
        </div>

        {% if pagination.pages > 1 %}
        <div class="p-8 border-t border-white/5 flex items-center justify-center gap-3 bg-white/[0.02]">
            {% if pagination.has_prev %}
            <a href="{{ url_for('dashboard.index', page=pagination.prev_num, q=search, lang=lang_filter, sort=sort) }}"
               class="w-10 h-10 rounded-xl glass flex items-center justify-center text-slate-400 hover:text-white hover:border-accent-gold transition-all duration-300">
                <svg class="w-5 h-5 {{ 'rotate-180' if not is_rtl else '' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            </a>
            {% endif %}
            
            <div class="flex items-center gap-2">
                {% for p in pagination.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
                    {% if p %}
                    <a href="{{ url_for('dashboard.index', page=p, q=search, lang=lang_filter, sort=sort) }}"
                       class="w-10 h-10 rounded-xl flex items-center justify-center text-xs font-bold transition-all duration-300
                       {% if p == pagination.page %}bg-accent-gold text-black shadow-[0_0_20px_rgba(197,160,89,0.3)]
                       {% else %}glass text-slate-400 hover:text-white hover:border-accent-gold{% endif %}">{{ p }}</a>
                    {% else %}
                    <span class="text-slate-700 px-1">...</span>
                    {% endif %}
                {% endfor %}
            </div>

            {% if pagination.has_next %}
            <a href="{{ url_for('dashboard.index', page=pagination.next_num, q=search, lang=lang_filter, sort=sort) }}"
               class="w-10 h-10 rounded-xl glass flex items-center justify-center text-slate-400 hover:text-white hover:border-accent-gold transition-all duration-300">
                <svg class="w-5 h-5 {{ 'rotate-180' if is_rtl else '' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
            </a>
            {% endif %}
        </div>
        {% endif %}

        {% else %}
        <div class="p-24 text-center">
            <div class="w-24 h-24 bg-white/5 rounded-3xl flex items-center justify-center text-4xl mx-auto mb-8 border border-white/5">📂</div>
            {% if search %}
            <h3 class="text-xl font-bold text-white mb-2">{{ _('dash.no_results') }}</h3>
            <p class="text-slate-500 mb-8 text-sm font-medium uppercase tracking-widest">'{{ search }}'</p>
            <a href="{{ url_for('dashboard.index') }}" class="text-accent-gold hover:text-white text-xs font-bold uppercase tracking-[0.2em] border-b border-accent-gold/30 hover:border-white transition-all">{{ _('dash.clear_search') }}</a>
            {% else %}
            <h3 class="text-xl font-bold text-white mb-2">{{ _('dash.empty_portfolio') }}</h3>
            <p class="text-slate-500 mb-10 text-sm font-medium uppercase tracking-widest">{{ _('dash.start_first_study') }}</p>
            <a href="{{ url_for('study.new') }}" class="btn-luxury px-10 py-4 rounded-2xl font-bold text-xs">
                {{ _('nav.new_study') }} &nbsp; &rarr;
            </a>
            {% endif %}
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}