@extends('layouts.dashboard')

@section('title', trans('dashboard.title') . ' | ' . config('app.name', 'EMZatca'))
@section('header_title', trans('dashboard.title'))

@section('content')
<!-- Header greeting & Quick tour button -->
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6">
    <div>
        <h2 class="text-xl font-black text-white flex items-center gap-2">
            <span>{{ trans('dashboard.overview') }}</span>
            <span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[11px] font-bold bg-amber-500/10 text-amber-300 border border-amber-500/30">
                <span class="w-2 h-2 rounded-full bg-amber-400"></span>
                {{ $tenant->is_sandbox ? trans('dashboard.env_sandbox_name') : trans('dashboard.env_production_name') }}
            </span>
        </h2>
        <p class="text-xs text-slate-400 mt-1">{{ trans('dashboard.dashboard_day_view') }}</p>
    </div>

    <div class="flex items-center gap-2">
        <a href="{{ route('dashboard.onboarding.wizard') }}" class="px-3.5 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-semibold border border-slate-700 transition flex items-center gap-1.5">
            <i class="fa-solid fa-play text-[10px]"></i>
            <span>{{ trans('dashboard.quick_tour') }}</span>
        </a>
    </div>
</div>

<!-- Onboarding Banner if not ready -->
@if(!$hasReadyDevice)
<div class="mb-6 p-5 rounded-2xl bg-gradient-to-r from-amber-500/10 via-brand-500/10 to-transparent border border-amber-500/30 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
    <div>
        <h3 class="text-sm font-bold text-white flex items-center gap-2">
            <i class="fa-solid fa-triangle-exclamation text-amber-400"></i>
            {{ trans('dashboard.onboarding_alert_title') }}
        </h3>
        <p class="text-xs text-slate-300 mt-1">
            {{ trans('dashboard.onboarding_alert_desc') }}
        </p>
    </div>
    <a href="{{ route('dashboard.onboarding.wizard') }}" class="px-4 py-2 rounded-xl bg-brand-500 hover:bg-brand-600 text-white text-xs font-bold shadow-lg shadow-brand-500/20 whitespace-nowrap transition force-white">
        {{ trans('dashboard.complete_onboarding_btn') }}
    </a>
</div>
@endif

<!-- Top 4 KPI Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <div class="p-5 rounded-2xl bg-navy-900 border border-slate-800/80 flex flex-col justify-between">
        <div class="flex items-center justify-between text-xs text-slate-400 font-semibold">
            <span class="inline-flex items-center gap-2">
                <i class="fa-solid fa-file-invoice text-brand-400"></i>
                {{ trans('dashboard.invoices_this_month') }}
            </span>
            <span class="text-[10px] text-slate-500 font-normal">({{ trans('dashboard.total_invoices') }}: {{ number_format($totalInvoicesCount) }})</span>
        </div>
        <div class="text-3xl font-black text-white my-3 text-center sm:text-start">{{ number_format($monthInvoicesCount) }}</div>
        <div class="text-[11px] text-slate-500">{{ trans('dashboard.first_month_for_you') }}</div>
    </div>

    <div class="p-5 rounded-2xl bg-navy-900 border border-slate-800/80 flex flex-col justify-between">
        <div class="text-xs text-slate-400 font-semibold inline-flex items-center gap-2">
            <i class="fa-solid fa-coins text-brand-400"></i>
            {{ trans('dashboard.total_sales_label') }}
        </div>
        <div class="text-3xl font-black text-white my-3 text-center sm:text-start flex items-baseline justify-center sm:justify-start gap-1.5" dir="ltr">
            <x-riyal-symbol class="w-[0.7em] h-[0.7em] text-emerald-400 self-center" />
            <span>{{ number_format($monthSalesTotal, 2) }}</span>
        </div>
        <div class="text-[11px] text-slate-500">{{ trans('dashboard.cleared_invoices') }}: {{ number_format($clearedCount) }}</div>
    </div>

    <div class="p-5 rounded-2xl bg-navy-900 border border-slate-800/80 flex flex-col justify-between">
        <div class="text-xs text-slate-400 font-semibold inline-flex items-center gap-2">
            <i class="fa-solid fa-circle-check text-emerald-400"></i>
            {{ trans('dashboard.acceptance_rate_label') }}
        </div>
        <div class="text-3xl font-black text-emerald-400 my-3 text-center sm:text-start">
            {{ $acceptanceRate }}<span class="text-base font-bold">%</span>
        </div>
        <div class="text-[11px] text-slate-500">{{ trans('dashboard.accepted_of_total', ['accepted' => $clearedCount + $reportedCount, 'total' => max(0, $totalInvoicesCount)]) }}</div>
    </div>

    <div class="p-5 rounded-2xl bg-navy-900 border border-slate-800/80 flex flex-col justify-between">
        <div class="text-xs text-slate-400 font-semibold inline-flex items-center gap-2">
            <i class="fa-solid fa-clock text-amber-400"></i>
            {{ trans('dashboard.drafts_waiting') }}
        </div>
        <div class="text-3xl font-black text-white my-3 text-center sm:text-start">{{ $draftsCount }}</div>
        <a href="{{ route('dashboard.invoices.index', ['status' => 'draft']) }}" class="text-[11px] text-brand-400 font-semibold hover:underline">{{ trans('dashboard.complete_and_issue') }}</a>
    </div>
</div>

<!-- Main Section: Chart + Connection Status & Quick Actions -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
    <!-- Left/Right: Connection Status & Quick Actions -->
    <div class="lg:col-span-1 space-y-6 order-2 lg:order-1">
        <!-- Connection Status Card -->
        <div class="p-5 rounded-2xl bg-navy-900 border border-slate-800">
            <h3 class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-4">{{ trans('dashboard.connection_status_title') }}</h3>

            <div class="space-y-3.5 text-xs">
                <div class="flex items-center justify-between pb-2 border-b border-slate-800/60">
                    <span class="text-slate-400">{{ trans('dashboard.fatoora_platform') }}</span>
                    @if($hasReadyDevice)
                        <span class="inline-flex items-center gap-1.5 font-bold text-emerald-400 text-[11px]">
                            <i class="fa-solid fa-circle-check"></i>
                            <span>{{ trans('dashboard.status_connected') }}</span>
                        </span>
                    @else
                        <span class="inline-flex items-center gap-1.5 font-bold text-amber-400 text-[11px]">
                            <i class="fa-solid fa-plug-circle-xmark"></i>
                            <span>{{ trans('dashboard.status_not_connected') }}</span>
                        </span>
                    @endif
                </div>

                <div class="flex items-center justify-between pb-2 border-b border-slate-800/60">
                    <span class="text-slate-400">{{ trans('dashboard.csid_certificate') }}</span>
                    <span class="font-mono text-[11px] text-slate-300">
                        {{ $readyDevice?->certificate_expires_at ? $readyDevice->certificate_expires_at->format('Y/m/d') : '2029/01/09' }}
                    </span>
                </div>

                <div class="flex items-center justify-between">
                    <span class="text-slate-400">{{ trans('dashboard.zatca_env') }}</span>
                    <span class="text-[11px] text-slate-300">
                        {{ $tenant->is_sandbox ? trans('dashboard.env_sandbox_name') : trans('dashboard.env_production_name') }}
                    </span>
                </div>

                @if($tenant->is_sandbox)
                    <div class="pt-2 border-t border-slate-800/60">
                        <a href="{{ route('dashboard.onboarding.activate_production') }}" class="w-full flex items-center justify-center gap-1.5 py-2 rounded-xl bg-emerald-500/10 hover:bg-emerald-500/20 border border-emerald-500/30 text-emerald-400 font-bold text-[11px] transition">
                            <i class="fa-solid fa-rocket text-[10px]"></i>
                            <span>{{ trans('dashboard.switch_to_production') }}</span>
                        </a>
                    </div>
                @endif
            </div>
        </div>

        <!-- Quick Actions Card -->
        <div class="p-5 rounded-2xl bg-navy-900 border border-slate-800">
            <h3 class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-3">{{ trans('dashboard.quick_actions_title') }}</h3>

            <div class="space-y-2 text-xs">
                <a href="{{ route('dashboard.invoices.create', ['type' => 'simplified']) }}" class="w-full flex items-center justify-between px-3.5 py-3 rounded-xl bg-navy-950 hover:bg-slate-800 border border-slate-800 text-slate-200 transition group">
                    <span class="font-semibold">{{ trans('dashboard.action_simplified_b2c') }}</span>
                    <i class="fa-solid fa-chevron-right rtl:rotate-180 text-slate-500 group-hover:text-brand-400 transition"></i>
                </a>

                <a href="{{ route('dashboard.invoices.create', ['type' => 'standard']) }}" class="w-full flex items-center justify-between px-3.5 py-3 rounded-xl bg-navy-950 hover:bg-slate-800 border border-slate-800 text-slate-200 transition group">
                    <span class="font-semibold">{{ trans('dashboard.action_standard_b2b') }}</span>
                    <i class="fa-solid fa-chevron-right rtl:rotate-180 text-slate-500 group-hover:text-brand-400 transition"></i>
                </a>

                <a href="{{ route('dashboard.invoices.create', ['type' => 'credit_note']) }}" class="w-full flex items-center justify-between px-3.5 py-3 rounded-xl bg-navy-950 hover:bg-slate-800 border border-slate-800 text-slate-200 transition group">
                    <span class="font-semibold">{{ trans('dashboard.action_credit_note') }}</span>
                    <i class="fa-solid fa-chevron-right rtl:rotate-180 text-slate-500 group-hover:text-brand-400 transition"></i>
                </a>

                <a href="{{ route('dashboard.invoices.create', ['type' => 'debit_note']) }}" class="w-full flex items-center justify-between px-3.5 py-3 rounded-xl bg-navy-950 hover:bg-slate-800 border border-slate-800 text-slate-200 transition group">
                    <span class="font-semibold">{{ trans('dashboard.action_debit_note') }}</span>
                    <i class="fa-solid fa-chevron-right rtl:rotate-180 text-slate-500 group-hover:text-brand-400 transition"></i>
                </a>
            </div>
        </div>
    </div>

    <!-- 12-Week Chart -->
    <div class="lg:col-span-2 p-5 rounded-2xl bg-navy-900 border border-slate-800 flex flex-col justify-between order-1 lg:order-2">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-sm font-bold text-white">{{ trans('dashboard.issued_invoices_12_weeks') }}</h3>
            <div class="flex items-center gap-4 text-[11px]">
                <div class="flex items-center gap-1.5">
                    <span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span>
                    <span class="text-slate-400">{{ trans('dashboard.legend_accepted') }}</span>
                </div>
                <div class="flex items-center gap-1.5">
                    <span class="w-2.5 h-2.5 rounded-full bg-emerald-300"></span>
                    <span class="text-slate-400">{{ trans('dashboard.legend_current_week') }}</span>
                </div>
            </div>
        </div>

        <!-- Chart Container -->
        <div class="relative h-64 w-full">
            <canvas id="weeklyInvoicesChart"></canvas>
        </div>
    </div>
</div>

<!-- Recent Invoices Table -->
<div class="bg-navy-900 border border-slate-800 rounded-2xl p-6">
    <div class="flex items-center justify-between mb-4">
        <h3 class="text-sm font-bold text-white">{{ trans('dashboard.recent_invoices') }}</h3>
        <a href="{{ route('dashboard.invoices.index') }}" class="text-xs font-bold text-brand-400 hover:underline">{{ trans('dashboard.view_all_invoices') }}</a>
    </div>

    <div class="overflow-x-auto">
        <table class="w-full text-start text-xs">
            <thead class="text-slate-400 border-b border-slate-800">
                <tr>
                    <th class="pb-3 text-start">{{ trans('dashboard.invoice_number') }}</th>
                    <th class="pb-3 text-start">{{ trans('dashboard.client') }}</th>
                    <th class="pb-3 text-start">{{ trans('dashboard.total_amount') }}</th>
                    <th class="pb-3 text-start">{{ trans('dashboard.status_in_zatca') }}</th>
                    <th class="pb-3 text-start">{{ trans('dashboard.action') }}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-800/60 text-slate-300">
                @forelse($recentInvoices as $inv)
                    <tr>
                        <td class="py-3 font-bold text-white code-font">{{ $inv->invoice_number }}</td>
                        <td class="py-3">{{ $inv->buyer_name }}</td>
                        <td class="py-3 font-bold text-emerald-400 whitespace-nowrap">
                            <span class="inline-flex items-center gap-1.5" dir="ltr">
                                <x-riyal-symbol class="w-[1.05em] h-[1.05em]" />
                                <span>{{ number_format($inv->total, 2) }}</span>
                            </span>
                        </td>
                        <td class="py-3">
                            @if($inv->status->value === 'cleared')
                                <span class="px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 text-[10px] font-bold">{{ trans('dashboard.cleared_badge') }}</span>
                            @elseif($inv->status->value === 'reported')
                                <span class="px-2 py-0.5 rounded-full bg-sky-500/10 text-sky-400 text-[10px] font-bold">{{ trans('dashboard.reported_badge') }}</span>
                            @else
                                <span class="px-2 py-0.5 rounded-full bg-amber-500/10 text-amber-400 text-[10px] font-bold">{{ $inv->status->label() }}</span>
                            @endif
                        </td>
                        <td class="py-3">
                            <a href="{{ route('dashboard.invoices.show', $inv->uuid) }}" class="text-brand-400 hover:underline text-[11px] font-semibold">{{ trans('dashboard.details_link') }}</a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="text-center py-8 text-slate-500">
                            {{ trans('dashboard.no_invoices_yet') }}
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Chart.js Integration -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const ctx = document.getElementById('weeklyInvoicesChart');
    if (!ctx) return;

    const labels = @json($weeklyLabels);
    const acceptedData = @json($weeklyAcceptedData);
    const currentData = @json($weeklyCurrentData);

    const chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [
                {
                    label: '{{ trans("dashboard.legend_accepted") }}',
                    data: acceptedData,
                    backgroundColor: '#16a34a',
                    borderRadius: 6,
                    barPercentage: 0.55,
                },
                {
                    label: '{{ trans("dashboard.legend_current_week") }}',
                    data: currentData,
                    backgroundColor: '#86efac',
                    borderRadius: 6,
                    barPercentage: 0.55,
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    backgroundColor: document.documentElement.classList.contains('light') ? '#ffffff' : '#0f172a',
                    borderColor: document.documentElement.classList.contains('light') ? '#e2e8f0' : '#334155',
                    borderWidth: 1,
                    titleColor: document.documentElement.classList.contains('light') ? '#0f172a' : '#fff',
                    bodyColor: document.documentElement.classList.contains('light') ? '#475569' : '#cbd5e1',
                    padding: 10,
                }
            },
            scales: {
                x: {
                    stacked: true,
                    grid: {
                        display: false,
                        drawBorder: false
                    },
                    ticks: {
                        color: '#64748b',
                        font: {
                            size: 10
                        }
                    }
                },
                y: {
                    stacked: true,
                    beginAtZero: true,
                    grid: {
                        color: document.documentElement.classList.contains('light') ? '#e2e8f0' : 'rgba(51, 65, 85, 0.4)',
                        drawBorder: false
                    },
                    ticks: {
                        color: '#64748b',
                        font: {
                            size: 10
                        },
                        stepSize: 1,
                        precision: 0
                    }
                }
            }
        }
    });

    window.addEventListener('themeChanged', function (e) {
        if (!chart) return;
        const isLight = e.detail.theme === 'light';
        chart.options.scales.y.grid.color = isLight ? '#e2e8f0' : 'rgba(51, 65, 85, 0.4)';
        chart.options.plugins.tooltip.backgroundColor = isLight ? '#ffffff' : '#0f172a';
        chart.options.plugins.tooltip.borderColor = isLight ? '#e2e8f0' : '#334155';
        chart.options.plugins.tooltip.titleColor = isLight ? '#0f172a' : '#ffffff';
        chart.options.plugins.tooltip.bodyColor = isLight ? '#475569' : '#cbd5e1';
        chart.update();
    });
});
</script>
@endsection