@extends('layouts.madar')

@section('title', 'تحليل النص')
@section('page_title', 'تحليل النص وتحسين الصياغة البشرية')

@section('content')
<div class="ta-studio" id="ta-studio">
    <div class="mb-4 rounded-xl border border-cyan-500/20 bg-cyan-500/10 px-4 py-3 text-sm text-cyan-100">
        {{ $limits['disclaimer'] ?? 'هذه الأداة تقدم مؤشرات أسلوبية واحتمالية فقط، ولا تُعد حكماً قاطعاً على مصدر النص.' }}
    </div>

    <div class="mb-4 flex flex-wrap gap-2 text-xs">
        <span class="ta-chip">{{ $limits['plan_limit_label'] ?? 'Free: حتى 500 كلمة' }}</span>
        <span class="ta-chip">{{ $limits['languages_label'] ?? 'العربية والإنجليزية' }}</span>
        <span class="ta-chip">متبقي اليوم: {{ $limits['daily']['daily_remaining'] ?? '—' }}</span>
    </div>

    <div class="glass-card ta-input-card p-6">
        <label class="mb-2 block text-sm font-bold text-white">النص الأصلي</label>
        <textarea id="ta-input" rows="10" class="madar-input ta-textarea" placeholder="الصق أو اكتب نصاً بالعربية أو الإنجليزية..."></textarea>
        <p id="ta-word-counter" class="ta-counter mt-2 text-xs"><span id="ta-word-count">0</span></p>

        <div class="ta-quick-actions mt-4 flex flex-wrap gap-2">
            <button type="button" id="ta-paste" class="ta-quick-btn">لصق</button>
            <button type="button" id="ta-clear" class="ta-quick-btn">مسح</button>
            <button type="button" id="ta-copy-original" class="ta-quick-btn">نسخ الأصلي</button>
            <button type="button" id="ta-submit" class="ta-quick-btn ta-quick-btn--primary">تحليل</button>
            <button type="button" id="ta-humanize-only" class="ta-quick-btn">تحسين الصياغة</button>
        </div>

        <a id="ta-upgrade-cta" href="{{ route('web.pricing') }}" class="neon-btn mt-3 hidden w-full text-center">الترقية إلى Pro</a>
    </div>

    <div id="ta-error" class="ta-error-banner mt-4 hidden" role="alert"></div>

    <div id="ta-loading" class="ta-skeleton mt-6 hidden" aria-hidden="true">
        <div class="ta-skeleton-bar"></div>
        <div class="ta-skeleton-bar"></div>
        <div class="ta-skeleton-bar"></div>
    </div>

    <div id="ta-empty" class="glass-card ta-empty mt-6 p-8 text-center">
        <p class="text-lg font-bold text-white">أدخل نصك واضغط تحليل</p>
        <p class="mt-2 text-sm text-zinc-400">ستظهر المؤشرات الأسلوبية والنسخة المحسّنة هنا</p>
    </div>

    <div id="ta-results" class="mt-6 hidden space-y-5">
        <p id="ta-scores-note" class="text-center text-xs text-zinc-500">مؤشرات أسلوبية تقديرية وليست حكماً قطعياً</p>

        <div class="glass-card p-6">
            <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
                <div class="ta-score-ring-wrap">
                    <svg class="ta-ring" viewBox="0 0 120 120" aria-hidden="true">
                        <circle class="ta-ring-bg" cx="60" cy="60" r="52"></circle>
                        <circle id="ta-ring-human" class="ta-ring-fill ta-ring-fill--human" cx="60" cy="60" r="52"></circle>
                    </svg>
                    <span id="ta-human-score" class="ta-ring-value">—</span>
                    <p class="ta-ring-label">Human Score</p>
                </div>
                <div class="ta-score-ring-wrap">
                    <svg class="ta-ring" viewBox="0 0 120 120" aria-hidden="true">
                        <circle class="ta-ring-bg" cx="60" cy="60" r="52"></circle>
                        <circle id="ta-ring-ai" class="ta-ring-fill ta-ring-fill--ai" cx="60" cy="60" r="52"></circle>
                    </svg>
                    <span id="ta-ai-score" class="ta-ring-value">—</span>
                    <p class="ta-ring-label">AI-like Score</p>
                </div>
                <div class="ta-bar-block">
                    <p class="ta-bar-label">قابلية القراءة</p>
                    <div class="ta-bar-track"><div id="ta-read-bar" class="ta-bar-fill"></div></div>
                    <p id="ta-read-score" class="ta-bar-value">—</p>
                </div>
                <div class="ta-tone-badge">
                    <p class="text-xs text-zinc-500">نبرة النص</p>
                    <p id="ta-tone" class="mt-1 text-lg font-bold text-white">—</p>
                </div>
            </div>
        </div>

        <div class="glass-card p-6">
            <h3 class="font-bold text-white">تحليل الأسلوب</h3>
            <p id="ta-analysis" class="mt-3 whitespace-pre-wrap text-sm leading-relaxed text-zinc-300"></p>
        </div>

        <div class="glass-card p-6">
            <h3 class="font-bold text-white">نقاط الضعف</h3>
            <ul id="ta-weak" class="ta-weak-list mt-3 space-y-2 text-sm text-zinc-300"></ul>
        </div>

        <div class="glass-card p-6">
            <div class="ta-tabs mb-4 flex gap-2 lg:hidden">
                <button type="button" class="ta-tab ta-tab--active" data-tab="original">الأصلي</button>
                <button type="button" class="ta-tab" data-tab="humanized">المحسّن</button>
                <button type="button" class="ta-tab" data-tab="compare">مقارنة</button>
            </div>

            <div class="ta-compare-grid hidden lg:grid lg:grid-cols-2 lg:gap-4">
                <div>
                    <h4 class="mb-2 text-sm font-bold text-cyan-300">النص الأصلي</h4>
                    <div id="ta-pane-original-desktop" class="ta-text-pane"></div>
                </div>
                <div>
                    <h4 class="mb-2 text-sm font-bold text-violet-300">النص المحسّن</h4>
                    <div id="ta-pane-humanized-desktop" class="ta-text-pane"></div>
                </div>
            </div>

            <div id="ta-mobile-panes" class="lg:hidden">
                <div id="ta-pane-original" class="ta-text-pane"></div>
                <div id="ta-pane-humanized" class="ta-text-pane hidden"></div>
                <div id="ta-pane-compare" class="hidden space-y-3">
                    <div>
                        <p class="mb-1 text-xs font-bold text-cyan-300">قبل</p>
                        <div id="ta-compare-before" class="ta-text-pane"></div>
                    </div>
                    <div>
                        <p class="mb-1 text-xs font-bold text-violet-300">بعد</p>
                        <div id="ta-compare-after" class="ta-text-pane"></div>
                    </div>
                </div>
            </div>

            <div id="ta-humanized-upgrade" class="mt-3 hidden rounded-lg border border-amber-500/30 bg-amber-500/10 p-3 text-xs text-amber-200"></div>

            <div class="mt-4 flex flex-wrap gap-2">
                <button type="button" id="ta-copy" class="neon-btn-outline text-xs">نسخ المحسّن</button>
                <button type="button" id="ta-save" class="neon-btn-outline text-xs" disabled>تم الحفظ</button>
                <button type="button" id="ta-retry" class="neon-btn-outline text-xs">إعادة تحسين</button>
                <button type="button" id="ta-replace" class="neon-btn-outline text-xs">استبدال الأصلي</button>
                <a id="ta-copy-upgrade" href="{{ route('web.pricing') }}" class="neon-btn hidden text-xs">ترقية للنسخ الكامل</a>
            </div>
        </div>

        <div class="glass-card p-6">
            <h3 class="font-bold text-white">توصيات</h3>
            <ul id="ta-recs" class="mt-3 list-inside list-disc text-sm text-zinc-400"></ul>
        </div>
    </div>
</div>

<div id="ta-toast" class="ta-toast hidden" role="status">تم نسخ النص بنجاح</div>
@endsection

@push('head')
    @vite('resources/js/madar-text-analysis.js')
    <script>
        window.MADAR_TEXT_LIMITS = @json($limits);
        window.MADAR_PRICING_URL = @json(route('web.pricing'));
    </script>
@endpush