{% extends "base.html" %}
{% block title %}{{ report.project_name }}{% endblock %}
{% block content %}
<div class="max-w-6xl mx-auto px-4 py-12">
    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center justify-between mb-12 pb-8 border-b border-white/5">
        <div>
            <div class="flex items-center gap-3 mb-4">
                <a href="{{ url_for('dashboard.index') }}" 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">&larr;</a>
                <div class="px-3 py-1 rounded-full bg-blue-500/10 border border-blue-500/20 text-[10px] text-blue-400 font-bold uppercase tracking-wider">Investment Memo</div>
            </div>
            <h1 class="text-4xl font-extrabold luxury-text leading-tight">{{ report.project_name }}</h1>
            <div class="flex items-center gap-4 mt-3">
                <p class="text-slate-500 text-xs font-medium uppercase tracking-widest">{{ report.created_at.strftime('%B %d, %Y') }}</p>
                <span class="w-1 h-1 rounded-full bg-slate-700"></span>
                <p class="text-slate-500 text-xs font-mono">ID: #{{ report.id }}</p>
            </div>
        </div>
        <div class="flex flex-wrap items-center gap-3 mt-6 md:mt-0">
            <button onclick="toggleShare({{ report.id }})" id="shareBtn"
                class="glass px-5 py-2.5 rounded-xl text-slate-300 font-bold text-xs uppercase tracking-wider hover:border-accent-gold transition-all duration-300 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="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/></svg>
                <span>{{ 'Shared' if report.is_public else 'Share' }}</span>
            </button>
            <button type="button" onclick="event.stopPropagation(); window.print();"
               class="glass px-5 py-2.5 rounded-xl text-slate-300 font-bold text-xs uppercase tracking-wider hover:border-accent-gold transition-all duration-300 flex items-center gap-2 no-print">
                <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="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg>
                <span>طباعة ملخص</span>
            </button>
            <a href="{{ url_for('study.print_view', report_id=report.id) }}" target="_blank"
               class="glass px-5 py-2.5 rounded-xl text-slate-300 font-bold text-xs uppercase tracking-wider hover:border-accent-gold transition-all duration-300 flex items-center gap-2 no-print">
                <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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                <span>طباعة تفصيلي</span>
            </a>
            
            <div class="relative" x-data="{ open: false }">
                <button @click="open = !open" class="btn-luxury px-6 py-2.5 rounded-xl font-bold text-xs transition-all flex items-center gap-2">
                    <span>{{ _('report.actions') if _ else 'أدوات التحليل' }}</span>
                    <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="M19 9l-7 7-7-7"/></svg>
                </button>
                <div x-show="open" @click.away="open = false" x-transition class="absolute {{ 'left-0' if is_rtl else 'right-0' }} mt-3 w-72 panel shadow-2xl z-50 py-3 rounded-2xl">
                    <div class="px-4 py-2 text-[10px] font-bold text-slate-500 uppercase tracking-widest border-b border-white/5 mb-2">Strategy & Implementation</div>
                    <a href="{{ url_for('roadmap.index', report_id=report.id) }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-300 hover:bg-white/5 hover:text-white transition-colors">
                        <span class="w-6 text-center">📌</span> خطة التنفيذ
                    </a>
                    <a href="{{ url_for('kpis.index', report_id=report.id) }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-300 hover:bg-white/5 hover:text-white transition-colors">
                        <span class="w-6 text-center">📈</span> متابعة الأداء
                    </a>
                    <a href="{{ url_for('advisor.index', report_id=report.id) }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-300 hover:bg-white/5 hover:text-white transition-colors">
                        <span class="w-6 text-center">🤖</span> المستشار الذكي
                    </a>
                    
                    <div class="px-4 py-2 text-[10px] font-bold text-slate-500 uppercase tracking-widest border-b border-white/5 my-2">Knowledge & Content</div>
                    <a href="{{ url_for('study.notebook_view', report_id=report.id) }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-300 hover:bg-white/5 hover:text-white transition-colors">
                        <span class="w-6 text-center">📓</span> دفتر المعرفة
                    </a>

                    <div class="px-4 py-2 text-[10px] font-bold text-slate-500 uppercase tracking-widest border-b border-white/5 my-2">Marketing & Growth</div>
                    <a href="{{ url_for('campaigns.create', report_id=report.id) }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-300 hover:bg-white/5 hover:text-white transition-colors">
                        <span class="w-6 text-center">📢</span> حملة تسويقية
                    </a>
                    <a href="{{ url_for('websites.create', report_id=report.id) }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-300 hover:bg-white/5 hover:text-white transition-colors">
                        <span class="w-6 text-center">🌐</span> إنشاء موقع
                    </a>
                    
                    <div class="px-4 py-2 text-[10px] font-bold text-slate-500 uppercase tracking-widest border-b border-white/5 my-2">Business Operations</div>
                    <a href="{{ url_for('company.register', report_id=report.id) }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-300 hover:bg-white/5 hover:text-white transition-colors">
                        <span class="w-6 text-center">🏢</span> تأسيس شركة
                    </a>
                    <a href="{{ url_for('incubator.apply', report_id=report.id) }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-300 hover:bg-white/5 hover:text-white transition-colors">
                        <span class="w-6 text-center">🚀</span> حاضنة أعمال
                    </a>

                    <div class="px-4 py-2 text-[10px] font-bold text-slate-500 uppercase tracking-widest border-b border-white/5 my-2">Prototyping & IP</div>
                    <a href="{{ url_for('prototyping.create_request', report_id=report.id) }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-300 hover:bg-white/5 hover:text-white transition-colors">
                        <span class="w-6 text-center">🏭</span> طلب نموذج أولي
                    </a>
                    <a href="{{ url_for('ip.new_patent', report_id=report.id) }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-300 hover:bg-white/5 hover:text-white transition-colors">
                        <span class="w-6 text-center">🔬</span> براءة اختراع
                    </a>
                    <a href="{{ url_for('ip.new_trademark', report_id=report.id) }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-300 hover:bg-white/5 hover:text-white transition-colors">
                        <span class="w-6 text-center">™️</span> علامة تجارية
                    </a>

                    {% if is_owner is not defined or is_owner %}
                    <div class="px-4 py-2 text-[10px] font-bold text-slate-500 uppercase tracking-widest border-b border-white/5 my-2">Marketplace</div>
                    <a href="{{ url_for('marketplace.create', report_id=report.id) }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-slate-300 hover:bg-white/5 hover:text-white transition-colors">
                        <span class="w-6 text-center">🛒</span> عرض في السوق
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Description Card -->
    <div class="panel p-8 mb-12 ticker-card">
        <h3 class="text-[10px] font-bold text-accent-gold uppercase tracking-[0.2em] mb-4">EXECUTIVE SUMMARY SYNOPSIS</h3>
        <p class="text-slate-300 leading-relaxed text-lg font-light">{{ report.project_description }}</p>
    </div>

    <!-- Toolbar: Currency + Edit Mode -->
    <div class="currency-toolbar flex flex-wrap items-center gap-3 mb-10">
        <span class="text-[11px] uppercase tracking-[0.3em] text-slate-500">{{ 'Currency View' if not is_rtl else 'عرض العملة' }}</span>
        <div class="currency-toggle">
            <button type="button" class="currency-option active" data-currency-option="usd">USD / دولار</button>
            <button type="button" class="currency-option" data-currency-option="sar">SAR / ريال</button>
        </div>
        <span class="text-xs text-slate-500">1 USD ≈ 3.75 SAR</span>

        <div class="flex-1"></div>

        <button type="button" id="editModeBtn" onclick="toggleEditMode()"
            class="currency-option flex items-center gap-2" style="border:1px solid var(--border-color); padding:0.4rem 1rem;">
            <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
            <span>{{ 'Edit Mode' if not is_rtl else 'وضع التعديل' }}</span>
        </button>
    </div>

    <div class="report-content space-y-12">
        {{ report.full_report_html | safe }}
    </div>

    <style>
    /* ============================================================
       REFINED REPORT CONTENT STYLES (Investor Dashboard Style)
       Targets AI-generated classes to force clarity in Dark Mode
       ============================================================ */

    .report-content {
        color: var(--text-main);
    }

    /* 1. PERCENTAGES & INDICATORS (Fix for Image 1) */
    .report-content .text-gray-600,
    .report-content span.text-gray-600,
    .report-content div.text-gray-600,
    .report-content .font-bold.text-gray-600 {
        color: var(--accent-gold) !important;
        font-weight: 800 !important;
        opacity: 1 !important;
    }

    .report-content .text-gray-500,
    .report-content span.text-gray-500 {
        color: #94a3b8 !important; /* slate-400 */
        font-weight: 600 !important;
    }

    .report-content .bg-gray-200 {
        background: rgba(255, 255, 255, 0.1) !important;
    }

    /* 2. SECTION HEADERS & CONTENT BOXES (Fix for Image 3 - White Boxes) */
    .report-section {
        background: transparent !important;
        border: none !important;
        margin-bottom: 2.5rem !important;
    }

    /* Target the button which has bg-white inline from generator */
    .report-section button.bg-white,
    .report-section button[class*="bg-white"],
    .report-section button {
        background: rgba(20, 25, 35, 0.8) !important;
        border: 1px solid var(--border-color) !important;
        padding: 1.25rem 1.5rem !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
        transition: all 0.3s ease !important;
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .report-section button:hover {
        border-color: var(--accent-gold) !important;
        background: rgba(30, 35, 45, 0.9) !important;
    }

    /* Target the h3 which has text-gray-800 inline */
    .report-section button h3.text-gray-800,
    .report-section button h3[class*="text-gray-800"],
    .report-section button h3 {
        color: var(--accent-gold) !important;
        font-size: 1.25rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.02em !important;
        text-shadow: 0 0 15px rgba(197, 160, 89, 0.3) !important;
        margin: 0 !important;
    }

    /* The Inner Content Box - Force removal of bg-white */
    .report-section div.bg-white,
    .report-section div[class*="bg-white"],
    .report-section > div[x-show="open"] {
        background: rgba(13, 17, 23, 0.6) !important;
        border: 1px solid var(--border-color) !important;
        border-top: none !important;
        margin-top: -8px !important;
        padding: 2rem 1.5rem !important;
        border-radius: 0 0 16px 16px !important;
        color: var(--text-main) !important;
        backdrop-filter: blur(10px) !important;
    }

    /* 3. CARDS & TABLES INSIDE CONTENT */
    .report-content .bg-white.p-4.rounded-lg.shadow-sm.border,
    .report-content div.bg-white,
    .report-content div[class*="bg-"][class*="-50"] {
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 12px !important;
        color: white !important;
    }

    .report-content .text-gray-800,
    .report-content .text-gray-700 {
        color: #e2e8f0 !important;
    }

    /* Tables */
    .report-content table {
        background: rgba(12, 16, 24, 0.85) !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        width: 100% !important;
        border: 1px solid var(--border-color) !important;
    }

    .report-content th,
    .report-content td {
        border-color: rgba(255, 255, 255, 0.05) !important;
        padding: 1rem !important;
        color: var(--text-main) !important;
    }

    .report-content th {
        background: rgba(255, 255, 255, 0.02) !important;
        color: var(--accent-gold) !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        font-size: 0.75rem !important;
        letter-spacing: 0.08em;
    }

    /* Force dark backgrounds on AI tables (PESTEL / Porter) */
    .report-content td.bg-gray-50,
    .report-content th.bg-gray-50,
    .report-content td.bg-white,
    .report-content th.bg-white,
    .report-content tr.bg-white,
    .report-content tr.bg-gray-50 {
        background: rgba(18, 24, 34, 0.9) !important;
        color: var(--text-main) !important;
    }

    .report-content td.bg-gray-50.w-1\/4,
    .report-content td.bg-gray-50.w-1\/3 {
        border-inline-end: 1px solid rgba(255, 255, 255, 0.05) !important;
        color: var(--accent-gold) !important;
        font-weight: 700 !important;
    }

    .report-content table tr:nth-child(even) td:not(.bg-gray-50),
    .report-content table tr:nth-child(even) th:not(.bg-gray-50) {
        background: rgba(255, 255, 255, 0.01) !important;
    }

    .report-content table tr.total-row td,
    .report-content table tr.total-row th {
        background: linear-gradient(90deg, rgba(17, 24, 39, 0.95), rgba(24, 33, 52, 0.95)) !important;
        color: var(--accent-gold) !important;
        font-weight: 800 !important;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .report-content table tr.total-row td:last-child {
        color: white !important;
        text-align: end;
        font-size: 1.05rem;
    }

    /* Verdict Alert Boxes */
    .report-content .rounded-xl.border-2.text-green-600.bg-green-50 {
        background: rgba(16, 185, 129, 0.1) !important;
        border-color: rgba(16, 185, 129, 0.3) !important;
        color: #34d399 !important;
    }
    .report-content .rounded-xl.border-2.text-red-600.bg-red-50 {
        background: rgba(239, 68, 68, 0.1) !important;
        border-color: rgba(239, 68, 68, 0.3) !important;
        color: #f87171 !important;
    }
    .report-content .rounded-xl.border-2.text-yellow-600.bg-yellow-50 {
        background: rgba(245, 158, 11, 0.1) !important;
        border-color: rgba(245, 158, 11, 0.3) !important;
        color: #fbbf24 !important;
    }

    /* Severity badges (Image 2) */
    .report-content span[class*="bg-red-100"] {
        background: rgba(220, 38, 38, 0.8) !important;
        border: 1px solid rgba(248, 113, 113, 0.7) !important;
        color: #fff !important;
    }
    .report-content span[class*="bg-yellow-100"] {
        background: rgba(217, 119, 6, 0.85) !important;
        border: 1px solid rgba(251, 191, 36, 0.7) !important;
        color: #0f172a !important;
    }
    .report-content span[class*="bg-green-100"] {
        background: rgba(5, 150, 105, 0.85) !important;
        border: 1px solid rgba(52, 211, 153, 0.6) !important;
        color: #e6fffa !important;
    }
    .severity-pill,
    .report-content span[class*="bg-red-100"],
    .report-content span[class*="bg-yellow-100"],
    .report-content span[class*="bg-green-100"] {
        font-weight: 800 !important;
        letter-spacing: 0.04em;
        padding: 0.45rem 1.1rem !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        text-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
        text-transform: uppercase;
        font-size: 0.95rem !important;
        min-width: 120px;
        text-align: center;
        border-radius: 999px !important;
        border: 1px solid transparent;
    }

    .severity-pill,
    .report-content span[class*="text-red-700"],
    .report-content span[class*="text-green-700"] {
        color: #f8fafc !important;
    }

    .severity-pill,
    .report-content span[class*="text-yellow-700"] {
        color: #0f172a !important;
    }

    .severity-pill.severity-high {
        background: linear-gradient(135deg, #b91c1c, #ef4444) !important;
        border-color: rgba(239, 68, 68, 0.5) !important;
        color: #fff !important;
    }

    .severity-pill.severity-medium {
        background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
        border-color: rgba(251, 191, 36, 0.5) !important;
        color: #111827 !important;
    }

    .severity-pill.severity-low {
        background: linear-gradient(135deg, #059669, #34d399) !important;
        border-color: rgba(52, 211, 153, 0.5) !important;
        color: #e6fffa !important;
    }

    /* Business Canvas Items */
    .canvas-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }
    .canvas-card {
        background: rgba(255,255,255,0.02) !important;
        padding: 1.5rem;
        border-radius: 16px;
        border: 1px solid var(--border-color) !important;
        border-right: 4px solid var(--accent-gold) !important;
        transition: all 0.3s ease;
    }
    .canvas-card h3 {
        font-size: 0.95rem !important;
        font-weight: 800 !important;
        color: var(--accent-gold) !important;
        margin-bottom: 1rem !important;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }
    .canvas-card li {
        font-size: 0.9rem !important;
        color: #cbd5e1 !important;
        margin-bottom: 0.5rem !important;
    }

    /* Currency Toggle */
    .currency-toolbar {
        background: rgba(15, 23, 42, 0.6);
        border: 1px solid var(--border-color);
        border-radius: 18px;
        padding: 1rem 1.5rem;
    }

    .currency-toggle {
        display: inline-flex;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--border-color);
        border-radius: 999px;
        padding: 0.25rem;
    }

    .currency-option {
        border: none;
        background: transparent;
        color: #94a3b8;
        font-size: 0.7rem;
        letter-spacing: 0.08em;
        padding: 0.35rem 0.9rem;
        border-radius: 999px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .currency-option.active {
        background: var(--accent-gold);
        color: #0b0f19;
        font-weight: 800;
        box-shadow: 0 6px 20px rgba(199, 161, 90, 0.35);
    }

    /* Edit Mode */
    body.edit-mode .report-content td:not(.total-row td),
    body.edit-mode .report-content p.leading-relaxed {
        cursor: text;
        position: relative;
    }
    body.edit-mode .report-content td:not(.total-row td):hover,
    body.edit-mode .report-content p.leading-relaxed:hover {
        outline: 2px dashed var(--accent-gold);
        outline-offset: 2px;
        border-radius: 6px;
    }
    body.edit-mode .report-content td:not(.total-row td)::after {
        content: '';
        position: absolute;
        top: 4px;
        right: 4px;
        width: 12px;
        height: 12px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23c5a059'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z'/%3E%3C/svg%3E") no-repeat center;
        opacity: 0;
        transition: opacity 0.2s;
    }
    body.edit-mode .report-content td:not(.total-row td):hover::after {
        opacity: 0.7;
    }
    .edit-active #editModeBtn {
        background: var(--accent-gold) !important;
        color: #0b0f19 !important;
        font-weight: 800 !important;
    }
    .edit-inline-input {
        background: rgba(0,0,0,0.4) !important;
        border: 1px solid var(--accent-gold) !important;
        color: white !important;
        padding: 0.3rem 0.5rem;
        border-radius: 6px;
        font-size: inherit;
        font-family: inherit;
        width: 100%;
        outline: none;
    }
    .edit-row-actions {
        display: none;
    }
    body.edit-mode .edit-row-actions {
        display: inline-flex;
        gap: 4px;
    }
    .edit-add-btn {
        display: none;
    }
    body.edit-mode .edit-add-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 8px;
        padding: 6px 14px;
        border: 1px dashed var(--accent-gold);
        border-radius: 10px;
        color: var(--accent-gold);
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.2s;
        background: transparent;
    }
    body.edit-mode .edit-add-btn:hover {
        background: rgba(197, 160, 89, 0.1);
    }
    .edit-toast {
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(16, 185, 129, 0.9);
        color: white;
        padding: 10px 24px;
        border-radius: 12px;
        font-size: 0.85rem;
        font-weight: 700;
        z-index: 9999;
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;
    }
    .edit-toast.show { opacity: 1; }

    /* ═══════════════════════════════════════════════
       PRINT STYLES — Clean white professional layout
       ═══════════════════════════════════════════════ */
    @media print {
        /* Reset page */
        @page {
            size: A4;
            margin: 15mm 12mm;
        }

        /* Hide non-printable elements */
        .no-print,
        nav, footer, .currency-toolbar, #shareBtn, #shareNotice,
        #advisorPanel, .edit-toast, .edit-row-actions, .edit-add-btn,
        [x-data] > button, /* dropdown triggers */
        .relative[x-data], /* dropdown menus */
        button[onclick*="toggleShare"],
        button[onclick*="printReport"],
        button[onclick*="toggleEditMode"],
        .fixed, .sticky {
            display: none !important;
        }

        /* White background, black text */
        *, *::before, *::after {
            color-adjust: exact !important;
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }

        body, html {
            background: white !important;
            color: #1a1a1a !important;
            font-size: 11pt !important;
            line-height: 1.6 !important;
        }

        .max-w-6xl { max-width: 100% !important; padding: 0 !important; }

        /* Header */
        h1, .luxury-text {
            color: #111 !important;
            background: none !important;
            -webkit-background-clip: unset !important;
            -webkit-text-fill-color: #111 !important;
            font-size: 22pt !important;
            text-shadow: none !important;
        }

        /* Print header info */
        .border-b { border-color: #ddd !important; }
        .text-slate-500, .text-slate-400, .font-mono {
            color: #666 !important;
        }
        .bg-blue-500\/10 {
            background: #e8f0fe !important;
            border-color: #c4d7f5 !important;
            color: #1a56db !important;
        }

        /* Description card */
        .panel, .glass, .ticker-card {
            background: #f8f9fa !important;
            border: 1px solid #e0e0e0 !important;
            box-shadow: none !important;
            backdrop-filter: none !important;
        }
        .panel p, .ticker-card p {
            color: #333 !important;
        }

        /* Report content */
        .report-content {
            color: #1a1a1a !important;
        }

        /* Force all sections open */
        .report-section > div[x-show],
        .report-section > div[style*="display: none"],
        [x-show] {
            display: block !important;
        }

        /* Section headers */
        .report-section button,
        .report-section button.bg-white,
        .report-section button[class*="bg-white"] {
            background: #f0f0f0 !important;
            border: 1px solid #ccc !important;
            color: #111 !important;
            box-shadow: none !important;
            page-break-inside: avoid !important;
            break-inside: avoid !important;
        }

        .report-section button h3,
        .report-section button h3.text-gray-800 {
            color: #111 !important;
            text-shadow: none !important;
            font-size: 13pt !important;
        }

        /* Section content */
        .report-section div.bg-white,
        .report-section div[class*="bg-white"],
        .report-section > div[x-show="open"] {
            background: white !important;
            border: 1px solid #e0e0e0 !important;
            color: #1a1a1a !important;
            backdrop-filter: none !important;
        }

        /* Cards */
        .report-content .bg-white.p-4,
        .report-content div.bg-white,
        .report-content div[class*="bg-"][class*="-50"] {
            background: #fafafa !important;
            border: 1px solid #e0e0e0 !important;
            color: #1a1a1a !important;
        }

        .report-content .text-gray-800,
        .report-content .text-gray-700,
        .report-content .text-gray-600,
        .report-content .text-gray-500 {
            color: #333 !important;
        }

        /* Tables */
        .report-content table {
            background: white !important;
            border: 1px solid #ccc !important;
            border-radius: 0 !important;
            page-break-inside: avoid !important;
            break-inside: avoid !important;
        }

        .report-content th {
            background: #f0f0f0 !important;
            color: #111 !important;
            font-weight: 700 !important;
            border-bottom: 2px solid #999 !important;
        }

        .report-content td {
            color: #333 !important;
            border-color: #ddd !important;
        }

        .report-content td.bg-gray-50,
        .report-content th.bg-gray-50,
        .report-content tr.bg-gray-50,
        .report-content tr.bg-white {
            background: #fafafa !important;
            color: #333 !important;
        }

        .report-content table tr.total-row td {
            background: #f0f0f0 !important;
            color: #111 !important;
            font-weight: 800 !important;
            border-top: 2px solid #999 !important;
        }

        /* Severity badges */
        .report-content span[class*="bg-red-100"] {
            background: #fee2e2 !important;
            color: #b91c1c !important;
            border: 1px solid #fca5a5 !important;
        }
        .report-content span[class*="bg-yellow-100"] {
            background: #fef3c7 !important;
            color: #92400e !important;
            border: 1px solid #fcd34d !important;
        }
        .report-content span[class*="bg-green-100"] {
            background: #d1fae5 !important;
            color: #065f46 !important;
            border: 1px solid #6ee7b7 !important;
        }

        /* Verdict boxes */
        .report-content .rounded-xl.border-2.text-green-600.bg-green-50 {
            background: #d1fae5 !important;
            border-color: #34d399 !important;
            color: #065f46 !important;
        }
        .report-content .rounded-xl.border-2.text-red-600.bg-red-50 {
            background: #fee2e2 !important;
            border-color: #f87171 !important;
            color: #991b1b !important;
        }
        .report-content .rounded-xl.border-2.text-yellow-600.bg-yellow-50 {
            background: #fef3c7 !important;
            border-color: #fbbf24 !important;
            color: #92400e !important;
        }

        /* Canvas cards */
        .canvas-card {
            background: #fafafa !important;
            border: 1px solid #ddd !important;
            border-right: 4px solid #333 !important;
            page-break-inside: avoid !important;
        }
        .canvas-card h3 { color: #111 !important; }
        .canvas-card li { color: #333 !important; }

        /* Page breaks */
        .report-section {
            page-break-inside: avoid !important;
            break-inside: avoid !important;
        }

        /* Print footer with branding */
        .print-footer {
            display: block !important;
            text-align: center;
            padding-top: 20px;
            margin-top: 30px;
            border-top: 1px solid #ddd;
            font-size: 9pt;
            color: #999;
        }
    }

    /* Hide print-only elements on screen */
    .print-footer { display: none; }
</style>

<!-- Print footer -->
<div class="print-footer">
    <p>تم إنشاء هذا التقرير بواسطة <strong>Jadwa AI</strong> — منصة دراسات الجدوى بالذكاء الاصطناعي</p>
    <p>{{ report.created_at.strftime('%Y-%m-%d') }} | {{ report.project_name }} | jadwaai.com</p>
</div>

<div id="shareNotice" class="hidden fixed bottom-6 right-6 bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold shadow-lg z-50"></div>

<!-- AI Advisor Chat Panel -->
<div id="advisorPanel" class="hidden fixed bottom-0 right-6 w-96 panel rounded-t-2xl shadow-2xl z-50 flex flex-col" style="height:500px">
    <div class="flex items-center justify-between p-4 border-b border-slate-700">
        <div class="flex items-center gap-3">
            <span class="w-2.5 h-2.5 rounded-full bg-blue-500 animate-pulse"></span>
            <span class="text-sm font-bold text-slate-200">Jadwa AI Advisor</span>
        </div>
        <button onclick="document.getElementById('advisorPanel').classList.add('hidden')" class="text-slate-500 hover:text-white transition-colors">&times;</button>
    </div>
    <div id="chatMessages" class="flex-1 overflow-y-auto p-4 space-y-4">
        <div class="bg-blue-600/10 border border-blue-500/20 rounded-xl p-3 max-w-xs">
            <p class="text-blue-300 text-sm">مرحباً! أنا مستشار Jadwa AI. اسألني أي سؤال عن دراسة الجدوى.</p>
        </div>
    </div>
    <div class="p-3 border-t border-slate-700">
        <div class="flex gap-2">
            <input type="text" id="advisorInput" placeholder="اكتب سؤالك..." onkeydown="if(event.key==='Enter')sendAdvisor()"
                class="flex-1 px-3 py-2 text-sm">
            <button onclick="sendAdvisor()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-semibold transition-colors">ارسل</button>
        </div>
    </div>
</div>

<div class="edit-toast" id="editToast"></div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const REPORT_LANG = "{{ 'ar' if is_rtl else 'en' }}";
const CURRENCY_RATE = 3.75; // USD -> SAR
const REPORT_ID = {{ report.id }};
const CSRF_TOKEN = '{{ csrf_token() }}';
let editModeActive = false;

/* ── Print Report — expand all sections then print ── */
function printReport() {
    // 1. Close any open dropdown menus first
    document.querySelectorAll('.relative[x-data]').forEach(el => {
        if (el._x_dataStack) {
            el._x_dataStack.forEach(d => { if ('open' in d) d.open = false; });
        }
        if (el.__x && el.__x.$data) el.__x.$data.open = false;
    });

    // 2. Expand all report-section collapsed sections
    document.querySelectorAll('.report-section[x-data]').forEach(section => {
        // Alpine v3
        if (section._x_dataStack) {
            section._x_dataStack.forEach(d => { if ('open' in d) d.open = true; });
        }
        // Alpine v2
        if (section.__x && section.__x.$data) {
            section.__x.$data.open = true;
        }
        // Fallback: force display on hidden content
        const content = section.querySelector('[x-show]');
        if (content) {
            content.style.display = 'block';
            content.style.opacity = '1';
        }
    });

    // 3. Small delay to let Alpine re-render, then print
    setTimeout(() => { window.print(); }, 350);
}

/* ── Edit Mode Toggle ── */
function toggleEditMode() {
    editModeActive = !editModeActive;
    document.body.classList.toggle('edit-mode', editModeActive);
    document.body.classList.toggle('edit-active', editModeActive);
    const btn = document.getElementById('editModeBtn');
    btn.querySelector('span').textContent = editModeActive
        ? (REPORT_LANG === 'ar' ? 'إنهاء التعديل' : 'Exit Edit')
        : (REPORT_LANG === 'ar' ? 'وضع التعديل' : 'Edit Mode');
    if (editModeActive) {
        initEditableElements();
    } else {
        cleanupEditableElements();
    }
}

function showEditToast(msg) {
    const t = document.getElementById('editToast');
    t.textContent = msg;
    t.classList.add('show');
    setTimeout(() => t.classList.remove('show'), 2000);
}

async function sendEdit(payload) {
    try {
        const res = await fetch(`/study/api/edit/${REPORT_ID}`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json', 'X-CSRFToken': CSRF_TOKEN},
            body: JSON.stringify(payload)
        });
        const data = await res.json();
        if (data.status === 'ok') {
            showEditToast(REPORT_LANG === 'ar' ? 'تم الحفظ ✓' : 'Saved ✓');
            // Refresh report content
            const container = document.querySelector('.report-content');
            container.innerHTML = data.html;
            highlightTotalRows();
            if (editModeActive) initEditableElements();
            return true;
        } else {
            showEditToast(data.error || 'Error');
            return false;
        }
    } catch(e) {
        showEditToast('Error: ' + e.message);
        return false;
    }
}

/* ── Section-to-path mapping ── */
const SECTION_MAP = {
    'تفصيل تكاليف التأسيس': {path: ['startup_cost_breakdown', 'items'], totalPath: ['startup_cost_breakdown', 'total'], fields: ['item', 'cost']},
    'Startup Cost Breakdown': {path: ['startup_cost_breakdown', 'items'], totalPath: ['startup_cost_breakdown', 'total'], fields: ['item', 'cost']},
    'التكاليف التشغيلية الشهرية': {path: ['monthly_operating_costs', 'items'], totalPath: ['monthly_operating_costs', 'total'], fields: ['item', 'cost']},
    'Monthly Operating Costs': {path: ['monthly_operating_costs', 'items'], totalPath: ['monthly_operating_costs', 'total'], fields: ['item', 'cost']},
    'خطة التوظيف': {path: ['staffing_plan'], fields: ['role', 'count', 'monthly_salary']},
    'Staffing Plan': {path: ['staffing_plan'], fields: ['role', 'count', 'monthly_salary']},
    'المخاطر والتخفيف': {path: ['risks_and_mitigations'], fields: ['risk', 'severity', 'mitigation']},
    'Risks & Mitigations': {path: ['risks_and_mitigations'], fields: ['risk', 'severity', 'mitigation']},
};

function getSectionInfo(table) {
    // Walk up to find the section title
    let section = table.closest('.report-section');
    if (!section) return null;
    let h3 = section.querySelector('h3');
    if (!h3) return null;
    let title = h3.textContent.trim();
    return SECTION_MAP[title] || null;
}

function initEditableElements() {
    // Make table cells editable on click
    document.querySelectorAll('.report-content table').forEach(table => {
        const info = getSectionInfo(table);
        if (!info) return;

        // Add delete buttons to rows (non-header, non-total)
        table.querySelectorAll('tbody tr').forEach((row, idx) => {
            if (row.classList.contains('total-row')) return;
            if (row.querySelector('.edit-row-actions')) return;
            const lastTd = row.querySelector('td:last-child');
            if (!lastTd) return;
            const actionsSpan = document.createElement('span');
            actionsSpan.className = 'edit-row-actions';
            actionsSpan.innerHTML = `<button onclick="deleteRow(this, ${idx})" title="حذف" style="background:rgba(239,68,68,0.2);border:none;color:#f87171;padding:2px 6px;border-radius:6px;cursor:pointer;font-size:0.75rem;">✕</button>`;
            lastTd.appendChild(actionsSpan);
        });

        // Add "Add Row" button after table
        if (!table.nextElementSibling?.classList?.contains('edit-add-btn')) {
            const addBtn = document.createElement('button');
            addBtn.type = 'button';
            addBtn.className = 'edit-add-btn';
            addBtn.innerHTML = `<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg> ${REPORT_LANG === 'ar' ? 'إضافة بند' : 'Add Item'}`;
            addBtn.onclick = function() { addRow(table); };
            table.parentNode.insertBefore(addBtn, table.nextSibling);
        }

        // Make cells editable on double-click
        table.querySelectorAll('tbody tr:not(.total-row) td').forEach(td => {
            if (td._editBound) return;
            td._editBound = true;
            td.addEventListener('dblclick', function() {
                if (!editModeActive) return;
                startInlineEdit(td, table);
            });
        });
    });
}

function cleanupEditableElements() {
    document.querySelectorAll('.edit-row-actions').forEach(el => el.remove());
    document.querySelectorAll('.edit-add-btn').forEach(el => el.remove());
}

function startInlineEdit(td, table) {
    if (td.querySelector('.edit-inline-input')) return;
    const original = td.textContent.trim();
    const input = document.createElement('input');
    input.type = 'text';
    input.className = 'edit-inline-input';
    input.value = original;
    td.textContent = '';
    td.appendChild(input);
    input.focus();
    input.select();

    const commit = async () => {
        const newVal = input.value.trim();
        td.textContent = newVal;
        if (newVal !== original) {
            const info = getSectionInfo(table);
            if (!info) return;
            const row = td.closest('tr');
            const rowIdx = Array.from(row.parentNode.querySelectorAll('tr:not(.total-row)')).indexOf(row);
            const colIdx = Array.from(row.children).indexOf(td);
            const fieldName = info.fields[colIdx];
            if (fieldName && rowIdx >= 0) {
                const path = [...info.path, rowIdx, fieldName];
                await sendEdit({action: 'update_field', path, value: newVal});
            }
        }
    };

    input.addEventListener('blur', commit);
    input.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') { input.blur(); }
        if (e.key === 'Escape') { td.textContent = original; }
    });
}

async function deleteRow(btn, idx) {
    const table = btn.closest('table');
    const info = getSectionInfo(table);
    if (!info) return;
    if (!confirm(REPORT_LANG === 'ar' ? 'هل تريد حذف هذا البند؟' : 'Delete this item?')) return;
    await sendEdit({action: 'remove_item', path: info.path, index: idx});
}

async function addRow(table) {
    const info = getSectionInfo(table);
    if (!info) return;
    const newItem = {};
    info.fields.forEach(f => { newItem[f] = ''; });
    // Prompt user for values
    for (const f of info.fields) {
        const labels = {
            'item': REPORT_LANG === 'ar' ? 'اسم البند' : 'Item name',
            'cost': REPORT_LANG === 'ar' ? 'التكلفة' : 'Cost',
            'role': REPORT_LANG === 'ar' ? 'الدور الوظيفي' : 'Role',
            'count': REPORT_LANG === 'ar' ? 'العدد' : 'Count',
            'monthly_salary': REPORT_LANG === 'ar' ? 'الراتب الشهري' : 'Monthly Salary',
            'risk': REPORT_LANG === 'ar' ? 'المخاطرة' : 'Risk',
            'severity': REPORT_LANG === 'ar' ? 'الحدة (high/medium/low)' : 'Severity (high/medium/low)',
            'mitigation': REPORT_LANG === 'ar' ? 'التخفيف' : 'Mitigation',
        };
        const val = prompt(labels[f] || f);
        if (val === null) return; // cancelled
        newItem[f] = f === 'count' ? parseInt(val) || 1 : val;
    }
    await sendEdit({action: 'add_item', path: info.path, value: newItem});
}

async function toggleShare(reportId) {
    const res = await fetch('/study/share/' + reportId, {method: 'POST', headers: {'X-CSRFToken': '{{ csrf_token() }}'}});
    const data = await res.json();
    const btn = document.getElementById('shareBtn');
    const notice = document.getElementById('shareNotice');
    if (data.is_public && data.share_url) {
        btn.querySelector('span').textContent = 'SHARED';
        navigator.clipboard.writeText(data.share_url);
        notice.textContent = 'Link copied!';
        notice.classList.remove('hidden');
        setTimeout(() => notice.classList.add('hidden'), 3000);
    } else {
        btn.querySelector('span').textContent = 'SHARE';
        notice.textContent = 'Sharing disabled';
        notice.classList.remove('hidden');
        setTimeout(() => notice.classList.add('hidden'), 3000);
    }
}

async function sendAdvisor() {
    const input = document.getElementById('advisorInput');
    const msg = input.value.trim();
    if (!msg) return;
    input.value = '';
    const container = document.getElementById('chatMessages');
    // User message
    container.innerHTML += `<div class="flex justify-end"><div class="bg-blue-600/20 rounded-xl p-3 max-w-xs"><p class="text-slate-200 text-sm whitespace-pre-wrap">${msg}</p></div></div>`;
    // Loading indicator
    container.innerHTML += `<div id="advisorLoading" class="flex justify-start"><div class="bg-slate-700/50 rounded-xl p-3"><span class="text-slate-400 text-sm animate-pulse">...</span></div></div>`;
    container.scrollTop = container.scrollHeight;
    try {
        const res = await fetch('/study/api/advisor/{{ report.id }}', {
            method: 'POST',
            headers: {'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token() }}'},
            body: JSON.stringify({message: msg})
        });
        const data = await res.json();
        document.getElementById('advisorLoading')?.remove();
        const reply = data.response || data.error || 'An unexpected error occurred.';
        // AI Reply
        container.innerHTML += `<div class="flex justify-start"><div class="bg-slate-700/50 rounded-xl p-3 max-w-xs"><p class="text-slate-300 text-sm whitespace-pre-wrap">${reply}</p></div></div>`;
    } catch(e) {
        document.getElementById('advisorLoading')?.remove();
        // Error message
        container.innerHTML += `<div class="flex justify-start"><div class="bg-red-500/10 rounded-xl p-3"><p class="text-red-400 text-sm">Error: ${e.message}</p></div></div>`;
    }
    container.scrollTop = container.scrollHeight;
}

function highlightTotalRows() {
    const keywords = ['الإجمالي', 'الاجمالي', 'المجموع', 'Total', 'Subtotal'];
    document.querySelectorAll('.report-content table').forEach(table => {
        table.querySelectorAll('tr').forEach(row => {
            const firstCell = row.querySelector('td, th');
            if (!firstCell) return;
            const text = firstCell.textContent.trim();
            if (keywords.some(word => text.includes(word))) {
                row.classList.add('total-row');
            }
        });
    });
}

function initCurrencyModule() {
    const buttons = document.querySelectorAll('[data-currency-option]');
    if (!buttons.length) return;
    const moneyRegex = /([0-9]+(?:[.,][0-9]+)*)\s*(دولار|ريال|USD|SAR)/gi;
    const currencyNodes = [];

    document.querySelectorAll('.report-content td, .report-content .font-semibold, .report-content .text-lg, .report-content .text-sm').forEach(el => {
        const original = el.textContent;
        if (!original) return;
        moneyRegex.lastIndex = 0;
        let match;
        let lastIndex = 0;
        let hasMatch = false;
        const fragment = document.createDocumentFragment();
        while ((match = moneyRegex.exec(original)) !== null) {
            hasMatch = true;
            const [fullMatch, amountStr, unit] = match;
            const prefix = original.slice(lastIndex, match.index);
            if (prefix) fragment.appendChild(document.createTextNode(prefix));
            const normalized = parseFloat(amountStr.replace(/[٬,]/g, ''));
            if (isNaN(normalized)) {
                fragment.appendChild(document.createTextNode(fullMatch));
            } else {
                const baseUsd = /ريال|sar/i.test(unit) ? normalized / CURRENCY_RATE : normalized;
                const span = document.createElement('span');
                span.className = 'currency-value';
                span.dataset.baseUsd = baseUsd;
                currencyNodes.push(span);
                fragment.appendChild(span);
            }
            lastIndex = match.index + fullMatch.length;
        }
        if (hasMatch) {
            const suffix = original.slice(lastIndex);
            if (suffix) fragment.appendChild(document.createTextNode(suffix));
            el.textContent = '';
            el.appendChild(fragment);
        }
    });

    const formatter = (value, targetCurrency) => {
        const intl = new Intl.NumberFormat(REPORT_LANG === 'ar' ? 'ar-SA' : 'en-US', {
            style: 'currency',
            currency: targetCurrency === 'sar' ? 'SAR' : 'USD',
            maximumFractionDigits: 0
        });
        return intl.format(value * (targetCurrency === 'sar' ? CURRENCY_RATE : 1));
    };

    const updateCurrency = (targetCurrency) => {
        currencyNodes.forEach(node => {
            const usd = parseFloat(node.dataset.baseUsd || '0');
            node.textContent = formatter(usd, targetCurrency);
        });
        buttons.forEach(btn => btn.classList.toggle('active', btn.dataset.currencyOption === targetCurrency));
    };

    buttons.forEach(btn => btn.addEventListener('click', () => updateCurrency(btn.dataset.currencyOption)));
    updateCurrency('usd');
}

document.addEventListener('DOMContentLoaded', () => {
    highlightTotalRows();
    initCurrencyModule();
});

// Close campaign dropdown on click outside
document.addEventListener('click', function(e) {
    const dd = document.getElementById('campaignDropdown');
    const menu = document.getElementById('campaignMenu');
    if (dd && menu && !dd.contains(e.target)) {
        menu.classList.add('hidden');
    }
});
</script>
{% endblock %}