<x-app-layout>
    <div class="portal-container dashboard-page">
        @if (session('status'))
            <div class="alert alert-success">{{ session('status') }}</div>
        @endif
        @if (session('error'))
            <div class="alert alert-error">{{ session('error') }}</div>
        @endif

        @php
            $invoiceStatusLabel = function ($status) {
                $key = strtolower(str_replace(' ', '_', trim((string) $status)));
                return [
                    'payment_pending_whmcs' => 'Payment Processing',
                    'payment_received' => 'Payment Received',
                    'whmcs_sync_failed' => 'Processing',
                    'sync_failed' => 'Processing',
                    'manual_review' => 'Under Review',
                ][$key] ?? ucwords(str_replace('_', ' ', $key ?: 'pending'));
            };
            $invoiceMoney = fn ($invoice) => strtoupper((string) $invoice->currency) === 'USD'
                ? '$'.number_format((float) $invoice->total, 2).' USD'
                : strtoupper((string) $invoice->currency).' '.number_format((float) $invoice->total, 2);
        @endphp

        <header class="dashboard-welcome dashboard-welcome-refined">
            <div>
                <span class="service-eyebrow">Account Overview</span>
                <h1>Welcome back, {{ Auth::user()->first_name ?: Auth::user()->displayName() }}</h1>
                <p>Manage your hosting services, domains, invoices, and support requests.</p>
            </div>
            <a class="dashboard-primary-action" href="{{ route('store.index') }}">Order New Service</a>
        </header>

        <section class="dashboard-metrics" aria-label="Account statistics">
            <a href="{{ route('client.services') }}" class="dashboard-metric-card">
                <span class="dashboard-metric-icon">S</span>
                <div><strong>{{ $servicesCount }}</strong><span>Active Services</span></div>
            </a>
            <a href="{{ route('client.domains') }}" class="dashboard-metric-card">
                <span class="dashboard-metric-icon">D</span>
                <div><strong>{{ $domainsCount }}</strong><span>Domains</span></div>
            </a>
            <a href="{{ route('client.support') }}" class="dashboard-metric-card">
                <span class="dashboard-metric-icon">T</span>
                <div><strong>0</strong><span>Support Tickets</span></div>
            </a>
            <a href="{{ route('client.invoices') }}" class="dashboard-metric-card warning">
                <span class="dashboard-metric-icon">I</span>
                <div><strong>{{ $unpaidInvoicesCount }}</strong><span>Unpaid Invoices</span></div>
            </a>
        </section>

        <section class="dashboard-content-grid">
            <div class="dashboard-content-main">
                <article class="dashboard-feature-card">
                    <div class="dashboard-card-copy">
                        <span class="service-eyebrow">Products & Services</span>
                        <h2>Your Active Products/Services</h2>
                        <p>{{ $servicesCount > 0 ? 'You currently have '.$servicesCount.' active service(s).' : 'You do not have any active services yet.' }}</p>
                    </div>
                    <a class="dashboard-card-link" href="{{ route('client.services') }}">View Services</a>
                </article>

                <div class="dashboard-card-grid">
                    <article class="dashboard-action-card">
                        <div>
                            <span class="service-eyebrow">Billing</span>
                            <h2>Unpaid Invoices</h2>
                            <p>You have {{ $unpaidInvoicesCount }} invoice(s) awaiting payment.</p>
                        </div>
                        <a class="dashboard-card-link" href="{{ route('client.invoices') }}">View Invoices</a>
                    </article>

                    <article class="dashboard-action-card">
                        <div>
                            <span class="service-eyebrow">Support</span>
                            <h2>Recent Support Tickets</h2>
                            <p>No recent tickets found. Open a ticket whenever you need assistance.</p>
                        </div>
                        <a class="dashboard-card-link" href="{{ route('client.support') }}">Open New Ticket</a>
                    </article>
                </div>

                <article class="dashboard-domain-card">
                    <div>
                        <span class="service-eyebrow">Domains</span>
                        <h2>Register a New Domain</h2>
                        <p>Search and register a domain directly from your account.</p>
                    </div>
                    <form method="POST" action="{{ route('domains.search') }}" class="dashboard-domain-form">
                        @csrf
                        <input type="hidden" name="operation" value="register">
                        <input class="input" name="domain_name" placeholder="example.com" aria-label="Domain name">
                        <button class="primary-btn" type="submit">Search Domain</button>
                    </form>
                </article>
            </div>

            <aside class="dashboard-invoice-panel">
                <div class="dashboard-section-head">
                    <div>
                        <span class="service-eyebrow">Billing Activity</span>
                        <h2>Recent Invoices</h2>
                    </div>
                    <a href="{{ route('client.invoices') }}">View All</a>
                </div>

                <div class="dashboard-invoice-list">
                    @forelse ($recentInvoices as $invoice)
                        @php $displayNumber = $invoice->whmcs_invoice_id ?: preg_replace('/\D+/', '', $invoice->invoice_number); @endphp
                        <a href="{{ route('client.invoices.show', $invoice) }}" class="dashboard-invoice-row">
                            <div>
                                <strong>#{{ $displayNumber }}</strong>
                                <span>{{ $invoiceMoney($invoice) }}</span>
                            </div>
                            <span class="status-pill {{ strtolower(str_replace(' ', '_', (string) $invoice->status)) }}">{{ $invoiceStatusLabel($invoice->status) }}</span>
                        </a>
                    @empty
                        <div class="dashboard-empty-state">No invoices are available yet.</div>
                    @endforelse
                </div>
            </aside>
        </section>
    </div>
</x-app-layout>
