@extends('layouts.app')
@section('title', __('app.dashboard.title'))

@section('content')
@php
    $tenant = auth()->user()->tenant;
    $stats = $tenant->getStats();
    $recentInvoices = $tenant->invoices()->with('customer')->latest()->take(8)->get();
    $overdueInvoices = $tenant->invoices()->where('status', 'overdue')->with('customer')->take(5)->get();
@endphp

<!-- Greeting -->
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;">
    <div>
        <h2 style="font-family:'Instrument Serif',serif;font-size:28px;color:#E8EAF0;margin-bottom:4px;">
            {{ __('app.dashboard.welcome') }}, {{ explode(' ', auth()->user()->name)[0] }} 👋
        </h2>
        <p style="font-size:14px;color:#5B6478;">{{ now()->locale('sv')->isoFormat('dddd D MMMM YYYY') }}</p>
    </div>
    <a href="{{ route('invoices.create') }}" class="btn btn-primary">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
        {{ __('app.invoices.new') }}
    </a>
</div>

<!-- Stats Grid -->
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;">
    <div class="ff-stat-card">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
            <div style="width:38px;height:38px;background:rgba(59,125,255,0.12);border-radius:10px;display:flex;align-items:center;justify-content:center;">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#3B7DFF" stroke-width="1.8"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
            </div>
            <span style="font-size:11px;color:#10B981;background:rgba(16,185,129,0.1);padding:2px 8px;border-radius:20px;font-weight:600;">+12%</span>
        </div>
        <div class="ff-stat-value">{{ number_format($stats['total_revenue'], 0, ',', ' ') }} kr</div>
        <div class="ff-stat-label">Total intäkt</div>
    </div>
    <div class="ff-stat-card">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
            <div style="width:38px;height:38px;background:rgba(245,158,11,0.12);border-radius:10px;display:flex;align-items:center;justify-content:center;">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            </div>
            <span style="font-size:12px;color:#5B6478;font-variant-numeric:tabular-nums;">{{ $stats['unpaid_invoices'] }} fakturor</span>
        </div>
        <div class="ff-stat-value" style="color:#F59E0B;">{{ number_format($stats['outstanding_amount'], 0, ',', ' ') }} kr</div>
        <div class="ff-stat-label">Utestående</div>
    </div>
    <div class="ff-stat-card">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
            <div style="width:38px;height:38px;background:rgba(239,68,68,0.1);border-radius:10px;display:flex;align-items:center;justify-content:center;">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="1.8"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
            </div>
        </div>
        <div class="ff-stat-value" style="color:#EF4444;">{{ $overdueInvoices->count() }}</div>
        <div class="ff-stat-label">Förfallna fakturor</div>
    </div>
    <div class="ff-stat-card">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
            <div style="width:38px;height:38px;background:rgba(16,185,129,0.1);border-radius:10px;display:flex;align-items:center;justify-content:center;">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="1.8"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
            </div>
        </div>
        <div class="ff-stat-value">{{ $stats['total_customers'] }}</div>
        <div class="ff-stat-label">Kunder totalt</div>
    </div>
</div>

<!-- Main Content Grid -->
<div style="display:grid;grid-template-columns:1fr 380px;gap:20px;">
    <!-- Left: Recent Invoices -->
    <div class="ff-card" style="padding:0;">
        <div style="padding:18px 24px;border-bottom:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;">
            <h3 style="font-size:15px;font-weight:500;color:#E8EAF0;">{{ __('app.dashboard.recent_invoices') }}</h3>
            <a href="{{ route('invoices.index') }}" style="font-size:13px;color:#3B7DFF;text-decoration:none;">Visa alla →</a>
        </div>
        <table class="ff-table">
            <thead>
                <tr>
                    <th>Faktura</th>
                    <th>Kund</th>
                    <th>Datum</th>
                    <th class="text-right">Belopp</th>
                    <th>Status</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @forelse($recentInvoices as $invoice)
                <tr style="cursor:pointer;" onclick="window.location='{{ route('invoices.show', $invoice) }}'">
                    <td class="td-primary mono">{{ $invoice->invoice_number }}</td>
                    <td>
                        <div style="font-size:13px;font-weight:500;color:#E8EAF0;">{{ $invoice->customer->name }}</div>
                        <div style="font-size:11px;color:#5B6478;">{{ $invoice->customer->org_number }}</div>
                    </td>
                    <td>
                        <div style="font-size:12px;color:#8B9AB8;">{{ $invoice->invoice_date->format('d.m.Y') }}</div>
                        <div style="font-size:11px;color:#5B6478;">Förfall: {{ $invoice->due_date->format('d.m.Y') }}</div>
                    </td>
                    <td class="text-right">
                        <div style="font-size:13px;font-weight:500;color:#E8EAF0;font-variant-numeric:tabular-nums;">{{ number_format($invoice->total, 0, ',', ' ') }} kr</div>
                        @if($invoice->total_remaining > 0 && $invoice->status !== 'draft')
                        <div style="font-size:11px;color:#F59E0B;">Kvar: {{ number_format($invoice->total_remaining, 0, ',', ' ') }} kr</div>
                        @endif
                    </td>
                    <td><span class="badge badge-{{ $invoice->status }}">{{ $invoice->status_label }}</span></td>
                    <td>
                        <a href="{{ route('invoices.show', $invoice) }}" style="color:#5B6478;text-decoration:none;padding:4px;" onclick="event.stopPropagation()">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                        </a>
                    </td>
                </tr>
                @empty
                <tr><td colspan="6" style="text-align:center;padding:40px;color:#5B6478;">
                    Inga fakturor ännu. <a href="{{ route('invoices.create') }}" style="color:#3B7DFF;">Skapa din första faktura →</a>
                </td></tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Right Column -->
    <div style="display:flex;flex-direction:column;gap:16px;">
        
        <!-- AI Insights -->
        <div class="ff-card" style="background:linear-gradient(135deg,rgba(59,125,255,0.08),rgba(123,79,255,0.08));border-color:rgba(59,125,255,0.15);">
            <div style="display:flex;align-items:center;gap:10px;margin-bottom:14px;">
                <div style="width:32px;height:32px;background:linear-gradient(135deg,#3B7DFF,#7B4FFF);border-radius:8px;display:flex;align-items:center;justify-content:center;">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="white" stroke-width="1.8"/></svg>
                </div>
                <div>
                    <div style="font-size:13px;font-weight:600;color:#E8EAF0;">AI-insikter</div>
                    <div style="font-size:11px;color:#5B6478;">Uppdaterades nyss</div>
                </div>
            </div>
            <div id="ai-insights-text" style="font-size:13px;color:#8B9AB8;line-height:1.65;">
                <div style="display:flex;gap:8px;margin-bottom:8px;align-items:flex-start;">
                    <span style="color:#3B7DFF;flex-shrink:0;">●</span>
                    @if($overdueInvoices->count() > 0)
                        Du har {{ $overdueInvoices->count() }} förfallna fakturor. Skicka påminnelser för att förbättra kassaflödet.
                    @else
                        Inga förfallna fakturor — bra jobbat! Håll koll på kommande förfallodatum.
                    @endif
                </div>
                <div style="display:flex;gap:8px;margin-bottom:8px;align-items:flex-start;">
                    <span style="color:#7B4FFF;flex-shrink:0;">●</span>
                    Utestående belopp: {{ number_format($stats['outstanding_amount'], 0, ',', ' ') }} kr. Följ upp om 7 dagar.
                </div>
                @if($stats['open_tickets'] > 0)
                <div style="display:flex;gap:8px;align-items:flex-start;">
                    <span style="color:#F59E0B;flex-shrink:0;">●</span>
                    {{ $stats['open_tickets'] }} öppna supportärenden väntar på svar.
                </div>
                @endif
            </div>
            <button onclick="loadAIInsights()" style="margin-top:14px;width:100%;padding:8px;background:rgba(59,125,255,0.1);border:1px solid rgba(59,125,255,0.2);border-radius:8px;color:#7BA7FF;font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;">
                Uppdatera insikter med AI
            </button>
        </div>

        <!-- Overdue Invoices -->
        @if($overdueInvoices->count() > 0)
        <div class="ff-card" style="padding:0;border-color:rgba(239,68,68,0.2);">
            <div style="padding:14px 18px;border-bottom:1px solid rgba(239,68,68,0.1);display:flex;align-items:center;gap:8px;">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2.5"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/></svg>
                <span style="font-size:13px;font-weight:500;color:#FCA5A5;">Förfallna fakturor</span>
            </div>
            @foreach($overdueInvoices as $invoice)
            <div style="padding:12px 18px;border-bottom:1px solid rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:space-between;">
                <div>
                    <div style="font-size:13px;font-weight:500;color:#E8EAF0;">{{ $invoice->customer->name }}</div>
                    <div style="font-size:11px;color:#5B6478;">{{ $invoice->invoice_number }} · Förföll {{ $invoice->due_date->diffForHumans() }}</div>
                </div>
                <div style="text-align:right;">
                    <div style="font-size:13px;font-weight:600;color:#FCA5A5;font-variant-numeric:tabular-nums;">{{ number_format($invoice->total_remaining, 0, ',', ' ') }} kr</div>
                    <form action="{{ route('invoices.reminder', $invoice) }}" method="POST" style="display:inline;">
                        @csrf
                        <button type="submit" style="font-size:11px;color:#3B7DFF;background:none;border:none;cursor:pointer;padding:0;font-family:'DM Sans',sans-serif;">Skicka påminnelse</button>
                    </form>
                </div>
            </div>
            @endforeach
        </div>
        @endif

        <!-- Quick Actions -->
        <div class="ff-card">
            <div style="font-size:13px;font-weight:500;color:#8B9AB8;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:14px;">Snabbåtgärder</div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">
                <a href="{{ route('invoices.create') }}" style="display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:10px;text-decoration:none;transition:all 0.15s;color:#8B9AB8;text-align:center;font-size:12px;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#3B7DFF" stroke-width="1.8"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="18" x2="12" y2="12"/><line x1="9" y1="15" x2="15" y2="15"/></svg>
                    Ny faktura
                </a>
                <a href="{{ route('customers.create') }}" style="display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:10px;text-decoration:none;transition:all 0.15s;color:#8B9AB8;text-align:center;font-size:12px;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="1.8"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                    Ny kund
                </a>
                <a href="{{ route('emails.sync') }}" style="display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:10px;text-decoration:none;transition:all 0.15s;color:#8B9AB8;text-align:center;font-size:12px;"
                   onclick="event.preventDefault();fetch(this.href,{method:'POST',headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}'}})">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="1.8"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-3.51"/></svg>
                    Synka mail
                </a>
                <a href="{{ route('integrations.index') }}" style="display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:10px;text-decoration:none;transition:all 0.15s;color:#8B9AB8;text-align:center;font-size:12px;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#7B4FFF" stroke-width="1.8"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                    Integrationer
                </a>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function loadAIInsights() {
    const el = document.getElementById('ai-insights-text');
    el.innerHTML = '<div style="display:flex;gap:6px;align-items:center;color:#5B6478;"><div class="ff-spinner" style="width:16px;height:16px;"></div> Analyserar med AI...</div>';
    fetch('{{ route("ai.insights") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        body: JSON.stringify({})
    })
    .then(r => r.json())
    .then(d => { el.innerHTML = `<div style="font-size:13px;color:#8B9AB8;line-height:1.7;white-space:pre-line;">${d.insights}</div>`; })
    .catch(() => { el.innerHTML = '<div style="color:#EF4444;font-size:13px;">Kunde inte ladda insikter.</div>'; });
}
</script>
@endpush
@endsection