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

{% block title %}{{ 'detection.page_title'|trans({}, 'AiDetection') }} — Shamra Academia{% endblock %}
{% block og_title %}{{ 'detection.page_title'|trans({}, 'AiDetection') }} — Shamra Academia{% endblock %}
{% block og_description %}{{ 'detection.page_description'|trans({}, 'AiDetection') }}{% endblock %}
{% block metaDescription %}{{ 'detection.page_description'|trans({}, 'AiDetection') }}{% endblock %}
{% block metaKeywords %}كشف الذكاء الاصطناعي, فحص نسبة الذكاء الاصطناعي في النص, نسبة الاقتباس من الذكاء الاصطناعي, كشف نص الذكاء الاصطناعي, كشف المحتوى المولد, AI detection, AI text detector, AI content checker, شمرا أكاديميا, shamra academia{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        :root {
            --det-primary: #0ea5e9;
            --det-primary-light: #38bdf8;
            --det-primary-dark: #0284c7;
            --det-success: #10b981;
            --det-error: #ef4444;
            --det-warning: #f59e0b;
            --det-bg: #f0f9ff;
            --det-border: #bae6fd;
            --det-human: #10b981;
            --det-ai: #ef4444;
            --det-mixed: #f59e0b;
        }

        .det-page {
            max-width: 960px;
            margin: 30px auto;
            padding: 0 20px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        /* Hero */
        .det-hero {
            text-align: center;
            margin-bottom: 32px;
        }
        .det-hero h1 {
            font-size: 2.2rem;
            font-weight: 700;
            color: #1a1a2e;
            margin-bottom: 10px;
            line-height: 1.3;
        }
        .det-hero h1 i { font-size: 1.8rem; vertical-align: middle; color: var(--det-primary); }
        .det-hero p {
            color: #555;
            font-size: 1.15rem;
            margin-bottom: 16px;
            line-height: 1.6;
        }
        .det-badges {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
        }
        .det-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 18px;
            border-radius: 20px;
            background: var(--det-bg);
            border: 1px solid var(--det-border);
            font-size: 1.05rem;
            color: var(--det-primary-dark);
            font-weight: 500;
        }
        .det-article-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 14px;
            font-size: 1.1rem;
            color: var(--det-primary);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.2s;
        }
        .det-article-link:hover {
            color: var(--det-primary-dark);
            text-decoration: underline;
        }
        .det-article-link i {
            font-size: 1.2rem;
        }

        /* Credit bar */
        .det-credit-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 18px;
            background: var(--det-bg);
            border: 1px solid var(--det-border);
            border-radius: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 10px;
        }
        .det-credit-info {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.95rem;
            color: #555;
        }
        .det-credit-info strong { color: var(--det-primary-dark); font-size: 1.1rem; }
        .det-credit-tier {
            background: var(--det-primary);
            color: #fff;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
        }

        /* Login prompt */
        .det-login-prompt {
            text-align: center;
            padding: 28px;
            background: #fffbeb;
            border: 1px solid #fde68a;
            border-radius: 10px;
            margin-bottom: 24px;
            font-size: 1.05rem;
        }
        .det-login-prompt a { color: var(--det-primary-dark); font-weight: 600; }

        /* Input area */
        .det-input-section {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            padding: 24px;
            margin-bottom: 24px;
        }
        .det-textarea {
            width: 100%;
            min-height: 220px;
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            padding: 16px;
            font-size: 1.05rem;
            line-height: 1.8;
            resize: vertical;
            font-family: inherit;
            transition: border-color 0.2s;
            direction: auto;
            box-sizing: border-box;
        }
        .det-textarea:focus {
            outline: none;
            border-color: var(--det-primary);
        }
        .det-textarea::placeholder { color: #aaa; }

        .det-input-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 14px;
            flex-wrap: wrap;
            gap: 10px;
        }
        .det-word-count {
            font-size: 0.9rem;
            color: #888;
        }
        .det-word-count.warning { color: var(--det-error); }

        .det-analyze-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 28px;
            background: var(--det-primary);
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 1.05rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .det-analyze-btn:hover { background: var(--det-primary-dark); transform: translateY(-1px); }
        .det-analyze-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
        .det-analyze-btn .spinner { display: none; }
        .det-analyze-btn.loading .spinner { display: inline-block; }
        .det-analyze-btn.loading .btn-text { display: none; }
        .det-cost-hint {
            font-size: 0.8rem;
            color: #999;
            margin-top: 4px;
            text-align: left;
        }
        [dir="ltr"] .det-cost-hint { text-align: left; }

        /* Alert */
        .det-alert {
            display: none;
            padding: 12px 18px;
            border-radius: 8px;
            margin-bottom: 20px;
            font-size: 0.95rem;
            font-weight: 500;
        }
        .det-alert.active { display: block; }
        .det-alert.error { background: #fef2f2; border: 1px solid #fecaca; color: var(--det-error); }
        .det-alert.success { background: #f0fdf4; border: 1px solid #bbf7d0; color: var(--det-success); }

        /* ── Results ─────────────────────────────── */
        .det-results { display: none; margin-bottom: 32px; }
        .det-results.active { display: block; }

        /* Score card */
        .det-score-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            padding: 28px;
            text-align: center;
            margin-bottom: 20px;
        }
        .det-score-ring {
            position: relative;
            width: 180px;
            height: 180px;
            margin: 0 auto 20px;
        }
        .det-score-ring svg { transform: rotate(-90deg); }
        .det-score-ring .bg { fill: none; stroke: #e5e7eb; stroke-width: 12; }
        .det-score-ring .fg { fill: none; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 1s ease, stroke 0.5s ease; }
        .det-score-number {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2.8rem;
            font-weight: 800;
        }
        .det-score-label {
            font-size: 0.85rem;
            color: #888;
            position: absolute;
            bottom: 28px;
            left: 50%;
            transform: translateX(-50%);
        }

        .det-verdict {
            display: inline-block;
            padding: 8px 24px;
            border-radius: 24px;
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 12px;
        }
        .det-verdict.human { background: #ecfdf5; color: var(--det-human); border: 1px solid #a7f3d0; }
        .det-verdict.likely_human { background: #ecfdf5; color: var(--det-human); border: 1px solid #a7f3d0; }
        .det-verdict.mixed { background: #fffbeb; color: var(--det-mixed); border: 1px solid #fde68a; }
        .det-verdict.likely_ai { background: #fef2f2; color: var(--det-ai); border: 1px solid #fecaca; }
        .det-verdict.ai_generated { background: #fef2f2; color: var(--det-ai); border: 1px solid #fecaca; }

        .det-confidence {
            font-size: 0.9rem;
            color: #888;
            margin-bottom: 16px;
        }
        .det-explanation {
            font-size: 1rem;
            color: #444;
            line-height: 1.7;
            padding: 16px;
            background: #f9fafb;
            border-radius: 8px;
            direction: auto;
        }

        /* Key signals */
        .det-signals {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .det-signals h3 {
            font-size: 1.1rem;
            color: #333;
            margin-bottom: 14px;
        }
        .det-signals h3 i { color: var(--det-primary); }
        .det-signal-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .det-signal-list li {
            padding: 10px 14px;
            border-bottom: 1px solid #f3f4f6;
            font-size: 0.95rem;
            color: #444;
            display: flex;
            align-items: flex-start;
            gap: 10px;
            direction: auto;
        }
        .det-signal-list li:last-child { border-bottom: none; }
        .det-signal-list li i { color: var(--det-warning); margin-top: 3px; }

        /* Sentence analysis */
        .det-sentences {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .det-sentences h3 {
            font-size: 1.1rem;
            color: #333;
            margin-bottom: 14px;
        }
        .det-sentences h3 i { color: var(--det-primary); }
        .det-sentence-item {
            padding: 10px 14px;
            border-radius: 8px;
            margin-bottom: 6px;
            font-size: 0.93rem;
            line-height: 1.7;
            direction: auto;
            position: relative;
        }
        .det-sentence-item.human-sent { background: #f0fdf4; border-left: 3px solid var(--det-human); }
        .det-sentence-item.ai-sent { background: #fef2f2; border-left: 3px solid var(--det-ai); }
        [dir="ltr"] .det-sentence-item.human-sent { border-left: 3px solid var(--det-human); border-right: none; }
        [dir="ltr"] .det-sentence-item.ai-sent { border-left: 3px solid var(--det-ai); border-right: none; }
        .det-sentence-item .score-tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 8px;
            font-size: 0.75rem;
            font-weight: 700;
            margin-left: 8px;
            vertical-align: middle;
        }
        .det-sentence-item.human-sent .score-tag { background: #d1fae5; color: #065f46; }
        .det-sentence-item.ai-sent .score-tag { background: #fee2e2; color: #991b1b; }

        /* RTL sentence borders */
        [dir="rtl"] .det-sentence-item.human-sent { border-left: none; border-right: 3px solid var(--det-human); }
        [dir="rtl"] .det-sentence-item.ai-sent { border-left: none; border-right: 3px solid var(--det-ai); }

        /* Stats comparison */
        .det-stats {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .det-stats h3 {
            font-size: 1.1rem;
            color: #333;
            margin-bottom: 14px;
        }
        .det-stats h3 i { color: var(--det-primary); }
        .det-stats-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9rem;
        }
        .det-stats-table th {
            text-align: right;
            padding: 10px 12px;
            background: #f9fafb;
            font-weight: 600;
            color: #555;
            border-bottom: 2px solid #e5e7eb;
        }
        [dir="ltr"] .det-stats-table th { text-align: left; }
        .det-stats-table td {
            padding: 10px 12px;
            border-bottom: 1px solid #f3f4f6;
            color: #444;
        }
        .det-stats-table .closer-human { color: var(--det-human); font-weight: 600; }
        .det-stats-table .closer-ai { color: var(--det-ai); font-weight: 600; }
        .det-stats-table .closer-neutral { color: #888; }

        /* Disclaimer */
        .det-disclaimer {
            text-align: center;
            font-size: 0.85rem;
            color: #999;
            padding: 16px;
            background: #f9fafb;
            border-radius: 10px;
            margin-top: 20px;
            line-height: 1.5;
        }

        /* ── Feedback Widget ── */
        .det-fb-nudge {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%) translateY(120px);
            background: linear-gradient(135deg, #6366f1, #818cf8);
            color: #fff;
            padding: 10px 22px;
            border-radius: 24px;
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 600;
            box-shadow: 0 4px 20px rgba(99,102,241,0.35);
            z-index: 999;
            transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), opacity 0.3s;
            opacity: 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .det-fb-nudge.visible {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
        }
        .det-fb-nudge:hover {
            box-shadow: 0 6px 24px rgba(99,102,241,0.5);
        }
        .det-fb-nudge .close-nudge {
            background: none; border: none; color: rgba(255,255,255,0.7);
            font-size: 16px; cursor: pointer; padding: 0 0 0 8px; line-height: 1;
        }
        .det-fb-nudge .close-nudge:hover { color: #fff; }

        .det-fb-panel {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 380px;
            max-width: calc(100vw - 40px);
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 8px 40px rgba(0,0,0,0.15);
            z-index: 1000;
            transform: translateY(120%) scale(0.95);
            opacity: 0;
            transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), opacity 0.25s;
            overflow: hidden;
        }
        .det-fb-panel.open {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
        .det-fb-header {
            background: linear-gradient(135deg, #6366f1, #818cf8);
            color: #fff;
            padding: 16px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .det-fb-header h4 { margin: 0; font-size: 1rem; font-weight: 600; }
        .det-fb-close {
            background: none; border: none; color: rgba(255,255,255,0.8);
            font-size: 20px; cursor: pointer; padding: 0; line-height: 1;
        }
        .det-fb-close:hover { color: #fff; }
        .det-fb-body {
            padding: 20px;
        }
        .det-fb-label {
            font-size: 0.9rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
        }
        .det-fb-stars {
            display: flex;
            gap: 6px;
            margin-bottom: 18px;
            direction: ltr;
        }
        .det-fb-stars .star {
            font-size: 28px;
            cursor: pointer;
            color: #d1d5db;
            transition: color 0.15s, transform 0.15s;
        }
        .det-fb-stars .star:hover,
        .det-fb-stars .star.active {
            color: #f59e0b;
            transform: scale(1.15);
        }
        .det-fb-nps {
            display: flex;
            gap: 4px;
            margin-bottom: 18px;
            direction: ltr;
        }
        .det-fb-nps-labels {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;
            font-size: 0.75rem;
            color: #888;
        }
        .det-fb-nps .nps-btn {
            flex: 1;
            padding: 6px 0;
            border: 1.5px solid #e5e7eb;
            background: #fff;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 600;
            color: #555;
            transition: all 0.15s;
        }
        .det-fb-nps .nps-btn:hover { border-color: #6366f1; color: #6366f1; }
        .det-fb-nps .nps-btn.active {
            background: #6366f1;
            border-color: #6366f1;
            color: #fff;
        }
        .det-fb-comment {
            width: 100%;
            border: 1.5px solid #e5e7eb;
            border-radius: 10px;
            padding: 10px 14px;
            font-size: 0.9rem;
            resize: vertical;
            min-height: 60px;
            max-height: 120px;
            margin-bottom: 14px;
            font-family: inherit;
            transition: border-color 0.2s;
        }
        .det-fb-comment:focus { border-color: #6366f1; outline: none; }
        .det-fb-submit {
            width: 100%;
            padding: 10px;
            background: linear-gradient(135deg, #6366f1, #818cf8);
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: opacity 0.2s;
        }
        .det-fb-submit:disabled { opacity: 0.5; cursor: not-allowed; }
        .det-fb-submit:not(:disabled):hover { opacity: 0.9; }
        .det-fb-success {
            text-align: center;
            padding: 30px 20px;
        }
        .det-fb-success i { font-size: 48px; color: #10b981; display: block; margin-bottom: 12px; }
        .det-fb-success p { color: #333; font-size: 1rem; margin: 0; }

        /* Responsive */
        @media (max-width: 600px) {
            .det-hero h1 { font-size: 1.6rem; }
            .det-hero p { font-size: 1rem; }
            .det-score-ring { width: 140px; height: 140px; }
            .det-score-number { font-size: 2.2rem; }
            .det-input-footer { flex-direction: column; align-items: stretch; }
            .det-analyze-btn { justify-content: center; }
            .det-fb-panel { right: 10px; bottom: 10px; width: calc(100vw - 20px); }
            .det-fb-nudge { font-size: 0.82rem; padding: 8px 16px; }
        }
    </style>
{% endblock %}

{% block body %}
<div class="det-page">

    {# ── Hero ── #}
    <div class="det-hero">
        <h1><i class="fa fa-shield"></i> {{ 'detection.title'|trans({}, 'AiDetection') }}</h1>
        <p>{{ 'detection.subtitle'|trans({}, 'AiDetection') }}</p>
        <div class="det-badges">
            <span class="det-badge"><i class="fa fa-language"></i> {{ 'detection.badge_arabic'|trans({}, 'AiDetection') }}</span>
            <span class="det-badge"><i class="fa fa-bar-chart"></i> {{ 'detection.badge_stats'|trans({}, 'AiDetection') }}</span>
            <span class="det-badge"><i class="fa fa-database"></i> {{ 'detection.badge_corpus'|trans({}, 'AiDetection') }}</span>
        </div>
        <a href="{{ path('app_blog_show', {slug: 'how-we-built-ai-detection-tool'}) }}" class="det-article-link">
            <i class="fa fa-flask"></i>
            {% if app.request.locale == 'ar' %}
                شرح تقنيّ عن آلية عمل النموذج
            {% else %}
                Learn how our tool works
            {% endif %}
        </a>
    </div>

    {# ── State 1: Visitor (not logged in) — show full UI with login overlay ── #}
    {% if not app.user %}
        <div class="det-login-prompt">
            <i class="fa fa-lock" style="font-size: 1.4rem; margin-bottom: 8px; display: block; color: #d97706;"></i>
            {{ 'detection.login_prompt'|trans({'%login_url%': path('app_login')}, 'AiDetection')|raw }}
        </div>

        {# Show disabled UI preview for visitors #}
        <div class="det-input-section" style="opacity: 0.55; pointer-events: none;">
            <textarea class="det-textarea" disabled placeholder="{{ 'detection.placeholder'|trans({}, 'AiDetection') }}"></textarea>
            <div class="det-input-footer">
                <div>
                    <span class="det-word-count">0 {{ 'detection.words'|trans({}, 'AiDetection') }}</span>
                    <div class="det-cost-hint"><i class="fa fa-info-circle"></i> {{ 'detection.min_words'|trans({}, 'AiDetection') }}</div>
                </div>
                <button class="det-analyze-btn" disabled>
                    <span class="btn-text"><i class="fa fa-search"></i> {{ 'detection.analyze_btn'|trans({}, 'AiDetection') }}</span>
                </button>
            </div>
        </div>

    {% elseif canAnalyze %}
        {# ── State 2 & 3: Logged in + subscribed, OR logged in + free toggle ON ── #}
        {% set credits = subscription ? subscription.availableCredits : 0 %}
        {% set tier = subscription ? subscription.tier : 'none' %}

        {% if isSubscribed %}
            {# Subscribed user: show credits bar #}
            <div class="det-credit-bar">
                <div class="det-credit-info">
                    <i class="fa fa-diamond" style="color: var(--det-primary);"></i>
                    <span>{{ 'detection.credits_available'|trans({}, 'AiDetection') }}: <strong id="det-credits-display">{{ credits }}</strong></span>
                    <span class="det-credit-tier">{{ tier }}</span>
                </div>
                <span style="font-size: 0.9rem; color: #888;">{{ 'detection.cost_per_analysis'|trans({}, 'AiDetection') }}: <strong>3</strong> {{ 'detection.credits_unit'|trans({}, 'AiDetection') }}</span>
            </div>
        {% else %}
            {# Non-subscribed + free toggle ON: show beta access badge #}
            <div class="det-credit-bar" style="background: #ecfdf5; border-color: #a7f3d0;">
                <div class="det-credit-info">
                    <i class="fa fa-gift" style="color: #10b981;"></i>
                    <span style="color: #065f46; font-weight: 600;">{{ 'detection.free_access_badge'|trans({}, 'AiDetection') }}</span>
                </div>
                <span style="font-size: 0.9rem; color: #065f46;">{{ 'detection.cost_per_analysis'|trans({}, 'AiDetection') }}: <strong>3</strong> {{ 'detection.credits_unit'|trans({}, 'AiDetection') }}</span>
            </div>
        {% endif %}

        {# ── Alert box ── #}
        <div id="det-alert" class="det-alert"></div>

        {# ── Text input ── #}
        <div class="det-input-section">
            <textarea id="det-textarea" class="det-textarea" placeholder="{{ 'detection.placeholder'|trans({}, 'AiDetection') }}" maxlength="50000"></textarea>
            <div class="det-input-footer">
                <div>
                    <span class="det-word-count" id="det-word-count">0 {{ 'detection.words'|trans({}, 'AiDetection') }}</span>
                    <div class="det-cost-hint"><i class="fa fa-info-circle"></i> {{ 'detection.min_words'|trans({}, 'AiDetection') }}</div>
                </div>
                <button id="det-analyze-btn" class="det-analyze-btn" disabled>
                    <span class="btn-text"><i class="fa fa-search"></i> {{ 'detection.analyze_btn'|trans({}, 'AiDetection') }}</span>
                    <span class="spinner"><i class="fa fa-spinner fa-spin"></i> {{ 'detection.analyzing'|trans({}, 'AiDetection') }}</span>
                </button>
            </div>
        </div>

    {% else %}
        {# ── State 4: Logged in, NOT subscribed, toggle OFF → subscribe prompt ── #}
        <div class="det-login-prompt" style="background: #f0f9ff; border-color: #bae6fd;">
            <i class="fa fa-diamond" style="font-size: 1.4rem; margin-bottom: 8px; display: block; color: var(--det-primary);"></i>
            {{ 'detection.subscribe_prompt'|trans({'%subscribe_url%': path('shamra_academia_subscription')}, 'AiDetection')|raw }}
        </div>

        {# Show disabled UI preview #}
        <div class="det-input-section" style="opacity: 0.55; pointer-events: none;">
            <textarea class="det-textarea" disabled placeholder="{{ 'detection.placeholder'|trans({}, 'AiDetection') }}"></textarea>
            <div class="det-input-footer">
                <div>
                    <span class="det-word-count">0 {{ 'detection.words'|trans({}, 'AiDetection') }}</span>
                    <div class="det-cost-hint"><i class="fa fa-info-circle"></i> {{ 'detection.min_words'|trans({}, 'AiDetection') }}</div>
                </div>
                <button class="det-analyze-btn" disabled>
                    <span class="btn-text"><i class="fa fa-search"></i> {{ 'detection.analyze_btn'|trans({}, 'AiDetection') }}</span>
                </button>
            </div>
        </div>
    {% endif %}

    {# ── Results section ── #}
    <div id="det-results" class="det-results">
        {# Score card #}
        <div class="det-score-card">
            <div class="det-score-ring">
                <svg width="180" height="180" viewBox="0 0 180 180">
                    <circle class="bg" cx="90" cy="90" r="78"/>
                    <circle class="fg" id="det-ring-fg" cx="90" cy="90" r="78" stroke-dasharray="490" stroke-dashoffset="490"/>
                </svg>
                <div class="det-score-number" id="det-score-number">—</div>
                <div class="det-score-label">/ 100</div>
            </div>
            <div id="det-verdict" class="det-verdict"></div>
            <div class="det-confidence" id="det-confidence"></div>
            <div class="det-explanation" id="det-explanation"></div>
        </div>

        {# Key signals #}
        <div class="det-signals">
            <h3><i class="fa fa-exclamation-triangle"></i> {{ 'detection.signals_title'|trans({}, 'AiDetection') }}</h3>
            <ul class="det-signal-list" id="det-signal-list"></ul>
        </div>

        {# Sentence analysis #}
        <div class="det-sentences">
            <h3><i class="fa fa-align-right"></i> {{ 'detection.sentences_title'|trans({}, 'AiDetection') }}</h3>
            <div id="det-sentence-list"></div>
        </div>

        {# Baseline stats #}
        <div class="det-stats" id="det-stats-section" style="display: none;">
            <h3><i class="fa fa-line-chart"></i> {{ 'detection.stats_title'|trans({}, 'AiDetection') }}</h3>
            <table class="det-stats-table">
                <thead>
                    <tr>
                        <th>{{ 'detection.metric'|trans({}, 'AiDetection') }}</th>
                        <th>{{ 'detection.text_value'|trans({}, 'AiDetection') }}</th>
                        <th>{{ 'detection.human_avg'|trans({}, 'AiDetection') }}</th>
                        <th>{{ 'detection.ai_avg'|trans({}, 'AiDetection') }}</th>
                        <th>{{ 'detection.closer_to'|trans({}, 'AiDetection') }}</th>
                    </tr>
                </thead>
                <tbody id="det-stats-body"></tbody>
            </table>
        </div>

        <div class="det-disclaimer">
            <i class="fa fa-info-circle"></i> {{ 'detection.disclaimer'|trans({}, 'AiDetection') }}
        </div>
    </div>

</div>

{% if app.user %}
{# ── Feedback Nudge (bottom-center pill) ── #}
<div id="det-fb-nudge" class="det-fb-nudge">
    <i class="fa fa-comment-o"></i>
    <span>{{ 'detection.feedback_nudge'|trans({}, 'AiDetection') }}</span>
    <button class="close-nudge" id="det-fb-nudge-close" title="Close">&times;</button>
</div>

{# ── Feedback Panel (slide-up card) ── #}
<div id="det-fb-panel" class="det-fb-panel">
    <div class="det-fb-header">
        <h4><i class="fa fa-star" style="margin-inline-end:6px;"></i>{{ 'detection.feedback_prompt'|trans({}, 'AiDetection') }}</h4>
        <button class="det-fb-close" id="det-fb-panel-close">&times;</button>
    </div>
    <div class="det-fb-body" id="det-fb-form">
        {# Rating (1-5 stars) #}
        <div class="det-fb-label">{{ 'detection.feedback_rating'|trans({}, 'AiDetection') }}</div>
        <div class="det-fb-stars" id="det-fb-stars">
            <span class="star" data-v="1"><i class="fa fa-star"></i></span>
            <span class="star" data-v="2"><i class="fa fa-star"></i></span>
            <span class="star" data-v="3"><i class="fa fa-star"></i></span>
            <span class="star" data-v="4"><i class="fa fa-star"></i></span>
            <span class="star" data-v="5"><i class="fa fa-star"></i></span>
        </div>

        {# NPS (1-10) #}
        <div class="det-fb-label">{{ 'detection.feedback_recommend'|trans({}, 'AiDetection') }}</div>
        <div class="det-fb-nps-labels">
            <span>{{ 'detection.feedback_recommend_unlikely'|trans({}, 'AiDetection') }}</span>
            <span>{{ 'detection.feedback_recommend_likely'|trans({}, 'AiDetection') }}</span>
        </div>
        <div class="det-fb-nps" id="det-fb-nps">
            {% for i in 1..10 %}
                <button class="nps-btn" data-v="{{ i }}">{{ i }}</button>
            {% endfor %}
        </div>

        {# Comment #}
        <div class="det-fb-label">{{ 'detection.feedback_comment'|trans({}, 'AiDetection') }}</div>
        <textarea class="det-fb-comment" id="det-fb-comment" placeholder="{{ 'detection.feedback_comment_placeholder'|trans({}, 'AiDetection') }}" maxlength="2000"></textarea>

        <button class="det-fb-submit" id="det-fb-submit" disabled>
            {{ 'detection.feedback_submit'|trans({}, 'AiDetection') }}
        </button>
    </div>
    <div class="det-fb-success" id="det-fb-success" style="display:none;">
        <i class="fa fa-check-circle"></i>
        <p>{{ 'detection.feedback_thanks'|trans({}, 'AiDetection') }}</p>
    </div>
</div>
{% endif %}

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
    (function() {
        'use strict';

        var textarea = document.getElementById('det-textarea');
        var analyzeBtn = document.getElementById('det-analyze-btn');
        var wordCountEl = document.getElementById('det-word-count');
        var alertBox = document.getElementById('det-alert');
        var resultsDiv = document.getElementById('det-results');

        if (!textarea || !analyzeBtn) return;

        var WORD_LABEL = '{{ "detection.words"|trans({}, "AiDetection") }}';
        var CONFIDENCE_LABEL = '{{ "detection.confidence_label"|trans({}, "AiDetection") }}';
        var VERDICT_LABELS = {
            'human': '{{ "detection.verdict_human"|trans({}, "AiDetection") }}',
            'likely_human': '{{ "detection.verdict_likely_human"|trans({}, "AiDetection") }}',
            'mixed': '{{ "detection.verdict_mixed"|trans({}, "AiDetection") }}',
            'likely_ai': '{{ "detection.verdict_likely_ai"|trans({}, "AiDetection") }}',
            'ai_generated': '{{ "detection.verdict_ai"|trans({}, "AiDetection") }}'
        };
        var CONFIDENCE_LABELS = {
            'low': '{{ "detection.confidence_low"|trans({}, "AiDetection") }}',
            'medium': '{{ "detection.confidence_medium"|trans({}, "AiDetection") }}',
            'high': '{{ "detection.confidence_high"|trans({}, "AiDetection") }}'
        };
        var CLOSER_LABELS = {
            'human': '{{ "detection.closer_human"|trans({}, "AiDetection") }}',
            'ai': '{{ "detection.closer_ai"|trans({}, "AiDetection") }}',
            'neutral': '≈'
        };

        // Word count
        textarea.addEventListener('input', function() {
            var text = textarea.value.trim();
            var count = text ? text.match(/[\u0600-\u06FF\w]+/g) : null;
            var wc = count ? count.length : 0;
            wordCountEl.textContent = wc + ' ' + WORD_LABEL;
            wordCountEl.className = 'det-word-count' + (wc > 0 && wc < 50 ? ' warning' : '');
            analyzeBtn.disabled = (wc < 50 || wc > 10000);
        });

        // Analyze
        analyzeBtn.addEventListener('click', function() {
            var text = textarea.value.trim();
            if (!text) return;

            hideAlert();
            analyzeBtn.disabled = true;
            analyzeBtn.classList.add('loading');

            fetch('/api/playground/detect-ai', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ text: text, language: 'auto' })
            })
            .then(function(resp) { return resp.json(); })
            .then(function(data) {
                analyzeBtn.disabled = false;
                analyzeBtn.classList.remove('loading');

                if (data.error) {
                    showAlert(data.error, 'error');
                    return;
                }

                if (data.success && data.detection) {
                    renderResults(data.detection);
                    // Update credits display
                    var creditsEl = document.getElementById('det-credits-display');
                    if (creditsEl) {
                        var current = parseInt(creditsEl.textContent) || 0;
                        creditsEl.textContent = Math.max(0, current - 3);
                    }
                }
            })
            .catch(function(err) {
                analyzeBtn.disabled = false;
                analyzeBtn.classList.remove('loading');
                showAlert(err.message || 'Network error', 'error');
            });
        });

        function renderResults(det) {
            resultsDiv.classList.add('active');

            // Score ring
            var score = det.score || 0;
            var circumference = 2 * Math.PI * 78;
            var offset = circumference - (score / 100) * circumference;
            var ring = document.getElementById('det-ring-fg');
            ring.style.strokeDasharray = circumference;
            ring.style.strokeDashoffset = offset;

            // Color by score
            var color = '#10b981';
            if (score > 70) color = '#ef4444';
            else if (score > 50) color = '#f59e0b';
            ring.style.stroke = color;

            var scoreNum = document.getElementById('det-score-number');
            scoreNum.textContent = score;
            scoreNum.style.color = color;

            // Verdict
            var verdictEl = document.getElementById('det-verdict');
            var verdict = det.verdict || 'mixed';
            verdictEl.textContent = VERDICT_LABELS[verdict] || verdict;
            verdictEl.className = 'det-verdict ' + verdict;

            // Confidence
            var confEl = document.getElementById('det-confidence');
            confEl.textContent = CONFIDENCE_LABEL + ': ' + (CONFIDENCE_LABELS[det.confidence] || det.confidence);

            // Explanation
            document.getElementById('det-explanation').textContent = det.explanation || '';

            // Key signals
            var signalList = document.getElementById('det-signal-list');
            signalList.innerHTML = '';
            if (det.key_signals && det.key_signals.length) {
                det.key_signals.forEach(function(sig) {
                    var li = document.createElement('li');
                    li.innerHTML = '<i class="fa fa-exclamation-circle"></i> <span>' + escapeHtml(sig) + '</span>';
                    signalList.appendChild(li);
                });
            }

            // Sentences
            var sentContainer = document.getElementById('det-sentence-list');
            sentContainer.innerHTML = '';
            if (det.sentences && det.sentences.length) {
                det.sentences.forEach(function(s) {
                    var div = document.createElement('div');
                    var cls = (s.flag === 'ai') ? 'ai-sent' : 'human-sent';
                    div.className = 'det-sentence-item ' + cls;
                    div.innerHTML = escapeHtml(s.text) +
                        ' <span class="score-tag">' + (s.score || 0) + '%</span>';
                    sentContainer.appendChild(div);
                });
            }

            // Stats comparison (if baselines available)
            var statsSection = document.getElementById('det-stats-section');
            var statsBody = document.getElementById('det-stats-body');
            statsBody.innerHTML = '';

            if (det.stats && det.stats.comparison && det.stats.comparison.metrics) {
                statsSection.style.display = 'block';
                var metrics = det.stats.comparison.metrics;
                for (var key in metrics) {
                    if (!metrics.hasOwnProperty(key)) continue;
                    var m = metrics[key];
                    var tr = document.createElement('tr');
                    var closerClass = 'closer-' + (m.closer_to || 'neutral');
                    var closerText = CLOSER_LABELS[m.closer_to] || '≈';
                    tr.innerHTML = '<td>' + escapeHtml(m.label || key) + '</td>' +
                        '<td><strong>' + m.text + '</strong></td>' +
                        '<td>' + m.human_avg + '</td>' +
                        '<td>' + m.ai_avg + '</td>' +
                        '<td class="' + closerClass + '">' + closerText + '</td>';
                    statsBody.appendChild(tr);
                }
            } else {
                statsSection.style.display = 'none';
            }

            // Scroll to results
            resultsDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }

        function showAlert(msg, type) {
            alertBox.textContent = msg;
            alertBox.className = 'det-alert active ' + type;
        }
        function hideAlert() {
            alertBox.className = 'det-alert';
        }
        function escapeHtml(str) {
            var div = document.createElement('div');
            div.appendChild(document.createTextNode(str));
            return div.innerHTML;
        }
    })();
    </script>

    {% if app.user %}
    <script>
    (function() {
        'use strict';

        var nudge = document.getElementById('det-fb-nudge');
        var nudgeClose = document.getElementById('det-fb-nudge-close');
        var panel = document.getElementById('det-fb-panel');
        var panelClose = document.getElementById('det-fb-panel-close');
        var starsContainer = document.getElementById('det-fb-stars');
        var npsContainer = document.getElementById('det-fb-nps');
        var commentEl = document.getElementById('det-fb-comment');
        var submitBtn = document.getElementById('det-fb-submit');
        var formDiv = document.getElementById('det-fb-form');
        var successDiv = document.getElementById('det-fb-success');

        var selectedRating = 0;
        var selectedNps = 0;
        var hasFeedback = false;
        var analysisCompleted = false;
        var nudgeDismissed = false;
        var ERROR_MSG = '{{ "detection.feedback_error"|trans({}, "AiDetection") }}';

        // Check existing feedback status
        fetch('/api/ai-detection/feedback-status')
            .then(function(r) { return r.json(); })
            .then(function(d) { hasFeedback = d.has_feedback || false; })
            .catch(function() {});

        // Listen for analysis completion — show nudge after results render
        var resultsEl = document.getElementById('det-results');
        if (resultsEl) {
            var observer = new MutationObserver(function() {
                if (resultsEl.classList.contains('active')) {
                    analysisCompleted = true;
                    maybeShowNudge();
                }
            });
            observer.observe(resultsEl, { attributes: true, attributeFilter: ['class'] });
        }

        function maybeShowNudge() {
            if (!analysisCompleted || nudgeDismissed) return;
            if (panel.classList.contains('open')) return;
            // Show nudge after a short delay — always, but more persistent if no prior feedback
            var delay = hasFeedback ? 5000 : 2000;
            setTimeout(function() {
                if (!panel.classList.contains('open') && !nudgeDismissed) {
                    nudge.classList.add('visible');
                    // Auto-hide after 15s if user has given feedback before
                    if (hasFeedback) {
                        setTimeout(function() {
                            if (!panel.classList.contains('open')) {
                                nudge.classList.remove('visible');
                            }
                        }, 15000);
                    }
                }
            }, delay);
        }

        // Open panel
        nudge.addEventListener('click', function(e) {
            if (e.target === nudgeClose || e.target.parentElement === nudgeClose) return;
            nudge.classList.remove('visible');
            panel.classList.add('open');
            resetForm();
        });

        // Close nudge
        nudgeClose.addEventListener('click', function(e) {
            e.stopPropagation();
            nudge.classList.remove('visible');
            nudgeDismissed = true;
        });

        // Close panel
        panelClose.addEventListener('click', function() {
            panel.classList.remove('open');
        });

        // Stars
        var stars = starsContainer.querySelectorAll('.star');
        stars.forEach(function(star) {
            star.addEventListener('click', function() {
                selectedRating = parseInt(star.dataset.v);
                stars.forEach(function(s) {
                    s.classList.toggle('active', parseInt(s.dataset.v) <= selectedRating);
                });
                checkCanSubmit();
            });
            star.addEventListener('mouseenter', function() {
                var v = parseInt(star.dataset.v);
                stars.forEach(function(s) {
                    s.style.color = parseInt(s.dataset.v) <= v ? '#f59e0b' : '';
                });
            });
            star.addEventListener('mouseleave', function() {
                stars.forEach(function(s) {
                    s.style.color = '';
                });
            });
        });

        // NPS buttons
        var npsBtns = npsContainer.querySelectorAll('.nps-btn');
        npsBtns.forEach(function(btn) {
            btn.addEventListener('click', function() {
                selectedNps = parseInt(btn.dataset.v);
                npsBtns.forEach(function(b) { b.classList.remove('active'); });
                btn.classList.add('active');
                checkCanSubmit();
            });
        });

        function checkCanSubmit() {
            submitBtn.disabled = !(selectedRating > 0 && selectedNps > 0);
        }

        function resetForm() {
            selectedRating = 0;
            selectedNps = 0;
            stars.forEach(function(s) { s.classList.remove('active'); });
            npsBtns.forEach(function(b) { b.classList.remove('active'); });
            commentEl.value = '';
            submitBtn.disabled = true;
            formDiv.style.display = '';
            successDiv.style.display = 'none';
        }

        // Submit
        submitBtn.addEventListener('click', function() {
            if (selectedRating < 1 || selectedNps < 1) return;
            submitBtn.disabled = true;
            submitBtn.textContent = '...';

            fetch('/api/ai-detection/feedback', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    rating: selectedRating,
                    recommend: selectedNps,
                    comment: commentEl.value.trim() || null
                })
            })
            .then(function(r) { return r.json(); })
            .then(function(d) {
                if (d.success) {
                    formDiv.style.display = 'none';
                    successDiv.style.display = '';
                    hasFeedback = true;
                    // Auto-close after 3s
                    setTimeout(function() {
                        panel.classList.remove('open');
                    }, 3000);
                } else {
                    alert(ERROR_MSG);
                    submitBtn.disabled = false;
                    submitBtn.textContent = '{{ "detection.feedback_submit"|trans({}, "AiDetection") }}';
                }
            })
            .catch(function() {
                alert(ERROR_MSG);
                submitBtn.disabled = false;
                submitBtn.textContent = '{{ "detection.feedback_submit"|trans({}, "AiDetection") }}';
            });
        });
    })();
    </script>
    {% endif %}
{% endblock %}