@extends('layouts.app')

@section('title', 'Email Inbox')

@php
    $inboxUrl = fn($type) => isset($employee)
        ? route('mails.filter', [$type, $employee->id])
        : route('mails.filter', [$type]);

    $unread = $counts['countUnread'] ?? 0;
    $pending = $counts['send-mail'] ?? 0;
    $all = $counts['countAll'] ?? 0;
    $promotion = $counts['promotion'] ?? 0;
@endphp

@section('content')

    <div class="emi-kpi-grid">
        <a class="emi-kpi emi-kpi--violet" href="{{ $inboxUrl('unread') }}">
            <div class="emi-kpi__top">
                <span class="emi-kpi__icon"><i class="bi bi-envelope-open"></i></span>
                <span class="emi-kpi__label">Unread</span>
            </div>
            <span id="kpiUnread" class="emi-kpi__value">{{ number_format($unread) }}</span>
            <span class="emi-kpi__foot">Not opened yet</span>
        </a>

        <a class="emi-kpi emi-kpi--amber" href="{{ $inboxUrl('send-mail') }}">
            <div class="emi-kpi__top">
                <span class="emi-kpi__icon"><i class="bi bi-reply"></i></span>
                <span class="emi-kpi__label">Awaiting reply</span>
            </div>
            <span id="kpiPending" class="emi-kpi__value">{{ number_format($pending) }}</span>
            <span class="emi-kpi__foot">Flagged by AI as needing a response</span>
        </a>

        <a class="emi-kpi emi-kpi--blue" href="{{ $inboxUrl('all') }}">
            <div class="emi-kpi__top">
                <span class="emi-kpi__icon"><i class="bi bi-archive"></i></span>
                <span class="emi-kpi__label">All mail</span>
            </div>
            <span id="kpiAll" class="emi-kpi__value">{{ number_format($all) }}</span>
            <span class="emi-kpi__foot">Every conversation</span>
        </a>

        <a class="emi-kpi" href="{{ $inboxUrl('promotion') }}">
            <div class="emi-kpi__top">
                <span class="emi-kpi__icon"><i class="bi bi-star-fill"></i></span>
                <span class="emi-kpi__label">Promotion</span>
            </div>
            <span id="kpiPromotion" class="emi-kpi__value">{{ number_format($promotion) }}</span>
            <span class="emi-kpi__foot">Filed as marketing</span>
        </a>
    </div>

    <section class="emi-panel">
        <div class="emi-panel__body">
            <div class="emi-empty">
                <i class="bi bi-inbox"></i>
                <h3>Pick a view to get started</h3>
                <p>
                    Use the filters above to open a slice of the mailbox — by reply status, sentiment,
                    department group, or read state. We check for new mail each time you open this page.
                </p>
                <div class="d-flex flex-wrap justify-content-center gap-2 mt-3">
                    <a class="btn btn-primary" href="{{ $inboxUrl('unread') }}">Open unread</a>
                    <a class="btn btn-outline-secondary" href="{{ $inboxUrl('send-mail') }}">Mail awaiting reply</a>
                    <a class="btn btn-outline-secondary" href="{{ $inboxUrl('all') }}">Browse all mail</a>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        // Sync on arrival. storeNewEmail() and the loader overlay both live in
        // layouts.app — this page used to carry its own copy of the function,
        // which shadowed the layout's and popped a debug alert() containing the
        // account's app password.
        $(function() {
            $('#loaderOverlay').show();
            storeNewEmail();
        });
    </script>
@endpush