@extends('layouts.app')
@section('title', __('Accounting'))
@section('page-title', __('Accounting'))
@section('page-subtitle', __('Connect your accounting software once — we pull the numbers and analyse them for you.'))

@section('content')
@php
    $providerMeta = [
        'exact_online' => [
            'name'     => 'Exact Online',
            'tagline'  => __('One-click sign-in. Works for any Exact division.'),
            'badge'    => __('Recommended'),
            'tone'     => 'emerald',
            'flow'     => 'oauth',
            'logo'     => '#dc1e35',
            'mark'     => 'EO',
            'highlights' => [__('Trial balance'), __('P&L'), __('Balance sheet')],
        ],
        'odoo' => [
            'name'     => 'Odoo',
            'tagline'  => __('JSON-RPC with an API key from your user profile.'),
            'badge'    => __('Self-hosted OK'),
            'tone'     => 'violet',
            'flow'     => 'manual',
            'logo'     => '#714b67',
            'mark'     => 'Od',
            'highlights' => [__('Trial balance'), __('Journals'), __('P&L / BS')],
        ],
        'billit' => [
            'name'     => 'Billit',
            'tagline'  => __('Peppol-native invoicing — cash-basis P&L from sales & purchase orders.'),
            'badge'    => __('E-invoicing'),
            'tone'     => 'amber',
            'flow'     => 'manual',
            'logo'     => '#ff8a3c',
            'mark'     => 'Bi',
            'highlights' => [__('Sales'), __('Purchases'), __('Cash P&L')],
        ],
    ];

    $statusColors = [
        'connected'  => 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',
        'error'      => 'bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300',
        'expired'    => 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
        'revoked'    => 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300',
        'running'    => 'bg-sky-100 text-sky-700 dark:bg-sky-900/40 dark:text-sky-300',
        'ready'      => 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
        'succeeded'  => 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',
        'failed'     => 'bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300',
        'pending'    => 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300',
    ];

    $existingProviders = $integrations->pluck('provider')->all();
    $connectedCount    = $integrations->where('status', 'connected')->count();
    $importsTotal      = $imports->count();
    $lastImport        = $imports->where('status', 'succeeded')->first();
@endphp

<div class="space-y-8">

    {{-- ─── Hero ─────────────────────────────────────────────── --}}
    <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-brand-600 via-brand-500 to-indigo-600 text-white px-6 py-7 sm:px-8 sm:py-9">
        <div class="absolute inset-0 opacity-10 pointer-events-none"
             style="background-image: radial-gradient(circle at 20% 20%, white 1px, transparent 1px), radial-gradient(circle at 80% 60%, white 1px, transparent 1px); background-size: 24px 24px;"></div>
        <div class="relative grid md:grid-cols-3 gap-6 items-center">
            <div class="md:col-span-2 space-y-2">
                <div class="inline-flex items-center gap-2 text-[11px] uppercase tracking-wider bg-white/15 px-2.5 py-1 rounded-full">
                    <x-icon name="sparkles" class="w-3.5 h-3.5"/> {{ __('Read-only · zero file upload') }}
                </div>
                <h2 class="text-xl sm:text-2xl font-semibold leading-tight">
                    {{ __('Skip the file uploads — pull straight from your books.') }}
                </h2>
                <p class="text-sm text-white/80 max-w-2xl">
                    {{ __('We only read the numbers we need to analyse: trial balance, P&L, balance sheet. Nothing is written back to your accounting system.') }}
                </p>
            </div>
            <div class="grid grid-cols-3 gap-2 md:gap-3 text-center">
                <div class="rounded-2xl bg-white/10 backdrop-blur-sm px-3 py-3">
                    <div class="text-2xl font-semibold">{{ $connectedCount }}</div>
                    <div class="text-[11px] uppercase tracking-wider text-white/70">{{ __('Connected') }}</div>
                </div>
                <div class="rounded-2xl bg-white/10 backdrop-blur-sm px-3 py-3">
                    <div class="text-2xl font-semibold">{{ $importsTotal }}</div>
                    <div class="text-[11px] uppercase tracking-wider text-white/70">{{ __('Imports') }}</div>
                </div>
                <div class="rounded-2xl bg-white/10 backdrop-blur-sm px-3 py-3">
                    <div class="text-2xl font-semibold leading-tight">
                        {{ $lastImport ? $lastImport->created_at->diffForHumans(short: true) : '—' }}
                    </div>
                    <div class="text-[11px] uppercase tracking-wider text-white/70">{{ __('Last sync') }}</div>
                </div>
            </div>
        </div>
    </div>

    {{-- ─── Connected accounts ─────────────────────────────────── --}}
    <section>
        <div class="flex items-end justify-between mb-3">
            <div>
                <h2 class="text-lg font-semibold">{{ __('My accounts') }}</h2>
                <p class="text-xs text-slate-500">{{ __('Pick a period and import — it becomes a submission your firm can analyse.') }}</p>
            </div>
        </div>

        @if($integrations->isEmpty())
            <div class="rounded-2xl border-2 border-dashed border-slate-200 dark:border-slate-800 px-6 py-12 text-center">
                <div class="w-12 h-12 mx-auto rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center mb-3">
                    <x-icon name="link" class="w-6 h-6 text-slate-400"/>
                </div>
                <div class="font-medium">{{ __('No accounting connected yet') }}</div>
                <p class="text-sm text-slate-500 mt-1 max-w-md mx-auto">
                    {{ __('Pick a provider below — your firm will receive ready-to-analyse data without you having to upload anything.') }}
                </p>
            </div>
        @else
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                @foreach($integrations as $i)
                    @php $meta = $providerMeta[$i->provider] ?? ['name' => $i->providerLabel(), 'logo' => '#64748b', 'mark' => strtoupper(substr($i->providerLabel(), 0, 2))]; @endphp
                    <div class="card-pad relative overflow-hidden">
                        <div class="absolute -top-10 -end-10 w-40 h-40 rounded-full opacity-10 blur-2xl"
                             style="background-color: {{ $meta['logo'] }}"></div>

                        <div class="relative flex items-start justify-between gap-3">
                            <div class="flex items-center gap-3">
                                <span class="w-12 h-12 rounded-2xl flex items-center justify-center text-white font-bold text-sm shrink-0 shadow-md"
                                      style="background-color: {{ $meta['logo'] }}">
                                    {{ $meta['mark'] }}
                                </span>
                                <div>
                                    <div class="font-semibold leading-tight">{{ $i->label ?: $meta['name'] }}</div>
                                    <div class="text-xs text-slate-500 mt-0.5">
                                        {{ $meta['name'] }}
                                        @if($i->getConfig('company_name'))
                                            · {{ $i->getConfig('company_name') }}
                                        @endif
                                        @if($i->getConfig('division'))
                                            · {{ __('Div.') }} {{ $i->getConfig('division') }}
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <span class="text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full {{ $statusColors[$i->status] ?? 'bg-slate-100 text-slate-700' }}">
                                {{ __($i->status) }}
                            </span>
                        </div>

                        <div class="relative grid grid-cols-2 gap-3 mt-4 text-xs">
                            <div class="rounded-xl bg-slate-50 dark:bg-slate-800/40 px-3 py-2">
                                <div class="text-slate-400 text-[10px] uppercase tracking-wider">{{ __('Connected') }}</div>
                                <div class="font-medium">{{ $i->connected_at?->diffForHumans() ?? '—' }}</div>
                            </div>
                            <div class="rounded-xl bg-slate-50 dark:bg-slate-800/40 px-3 py-2">
                                <div class="text-slate-400 text-[10px] uppercase tracking-wider">{{ __('Last used') }}</div>
                                <div class="font-medium">{{ $i->last_used_at?->diffForHumans() ?? __('never') }}</div>
                            </div>
                        </div>

                        @if($i->last_error && $i->status !== 'connected')
                            <div class="relative mt-3 p-2.5 rounded-lg bg-rose-50 dark:bg-rose-900/20 text-rose-700 dark:text-rose-300 text-[11px] break-words flex gap-2">
                                <x-icon name="alert-triangle" class="w-3.5 h-3.5 shrink-0 mt-0.5"/>
                                <span>{{ $i->last_error }}</span>
                            </div>
                        @endif

                        {{-- Import form --}}
                        <form method="POST" action="{{ route('client.integrations.import', $i) }}"
                              x-data="{ from: '{{ now()->subYear()->startOfYear()->toDateString() }}', to: '{{ now()->subYear()->endOfYear()->toDateString() }}' }"
                              class="relative mt-4 pt-4 border-t border-slate-100 dark:border-slate-800 space-y-3">
                            @csrf
                            <div class="text-xs font-medium text-slate-600 dark:text-slate-300 flex items-center gap-1.5">
                                <x-icon name="download" class="w-3.5 h-3.5"/>
                                {{ __('Pull data for period') }}
                            </div>
                            <div class="grid grid-cols-2 gap-2">
                                <input type="date" name="period_from" x-model="from" required class="form-input text-sm">
                                <input type="date" name="period_to"   x-model="to"   required class="form-input text-sm">
                            </div>
                            <div class="flex flex-wrap gap-1">
                                @foreach([
                                    ['label' => __('YTD'),      'from' => now()->startOfYear()->toDateString(),         'to' => now()->toDateString()],
                                    ['label' => __('Last yr'),  'from' => now()->subYear()->startOfYear()->toDateString(), 'to' => now()->subYear()->endOfYear()->toDateString()],
                                    ['label' => __('Q1'),       'from' => now()->startOfYear()->toDateString(),         'to' => now()->startOfYear()->addMonths(3)->subDay()->toDateString()],
                                    ['label' => __('Last 12m'), 'from' => now()->subMonths(12)->toDateString(),         'to' => now()->toDateString()],
                                ] as $p)
                                    <button type="button"
                                            @click="from = '{{ $p['from'] }}'; to = '{{ $p['to'] }}'"
                                            class="text-[11px] px-2 py-0.5 rounded-md border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800/60">{{ $p['label'] }}</button>
                                @endforeach
                            </div>
                            <div class="flex justify-between items-center pt-1">
                                <div class="flex gap-1">
                                    <button type="button"
                                            onclick="event.preventDefault(); document.getElementById('ping-{{ $i->id }}').submit();"
                                            class="btn-ghost text-xs">
                                        <x-icon name="refresh" class="w-3.5 h-3.5"/> {{ __('Test') }}
                                    </button>
                                    <button type="button"
                                            onclick="if(confirm('{{ __('Disconnect this account?') }}')) document.getElementById('disconnect-{{ $i->id }}').submit();"
                                            class="btn-ghost text-xs text-rose-600">
                                        <x-icon name="trash" class="w-3.5 h-3.5"/> {{ __('Remove') }}
                                    </button>
                                </div>
                                <button class="btn-primary text-xs">
                                    <x-icon name="download" class="w-3.5 h-3.5"/> {{ __('Import') }}
                                </button>
                            </div>
                        </form>
                        <form id="ping-{{ $i->id }}"       method="POST" action="{{ route('client.integrations.ping', $i) }}" class="hidden">@csrf</form>
                        <form id="disconnect-{{ $i->id }}" method="POST" action="{{ route('client.integrations.destroy', $i) }}" class="hidden">@csrf @method('DELETE')</form>
                    </div>
                @endforeach
            </div>
        @endif
    </section>

    {{-- ─── Add a connection ─────────────────────────────────────── --}}
    <section>
        <div class="flex items-end justify-between mb-3">
            <div>
                <h2 class="text-lg font-semibold">{{ __('Connect another account') }}</h2>
                <p class="text-xs text-slate-500">{{ __('Read-only access — we never write to your accounting software.') }}</p>
            </div>
            <div class="hidden sm:flex items-center gap-1.5 text-[11px] text-slate-500">
                <x-icon name="shield-check" class="w-4 h-4 text-emerald-600"/>
                {{ __('Encrypted storage') }}
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            @foreach($available as $p)
                @php
                    $meta = $providerMeta[$p['key']] ?? ['name' => $p['name'], 'tagline' => '', 'badge' => '', 'tone' => 'slate', 'flow' => 'manual', 'logo' => '#64748b', 'mark' => strtoupper(substr($p['name'], 0, 2)), 'highlights' => []];
                    $alreadyConnected = in_array($p['key'], $existingProviders, true);
                @endphp
                <div class="relative card-pad flex flex-col gap-4 hover:shadow-md transition-shadow">
                    <div class="flex items-start gap-3">
                        <span class="w-12 h-12 rounded-2xl flex items-center justify-center text-white font-bold shrink-0 shadow-md"
                              style="background-color: {{ $meta['logo'] }}">
                            {{ $meta['mark'] }}
                        </span>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2 flex-wrap">
                                <span class="font-semibold">{{ $meta['name'] }}</span>
                                @if(!empty($meta['badge']))
                                    <span class="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded-full bg-{{ $meta['tone'] }}-100 text-{{ $meta['tone'] }}-700 dark:bg-{{ $meta['tone'] }}-900/40 dark:text-{{ $meta['tone'] }}-300">{{ $meta['badge'] }}</span>
                                @endif
                                @if($alreadyConnected)
                                    <span class="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300 inline-flex items-center gap-1">
                                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span> {{ __('Linked') }}
                                    </span>
                                @endif
                            </div>
                            <p class="text-xs text-slate-500 mt-1 leading-relaxed">{{ $meta['tagline'] }}</p>
                        </div>
                    </div>

                    @if(!empty($meta['highlights']))
                        <div class="flex flex-wrap gap-1">
                            @foreach($meta['highlights'] as $h)
                                <span class="text-[10px] px-2 py-0.5 rounded-full bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400">{{ $h }}</span>
                            @endforeach
                        </div>
                    @endif

                    <div class="mt-auto flex items-center justify-between pt-3 border-t border-slate-100 dark:border-slate-800">
                        <span class="text-[11px] text-slate-500 inline-flex items-center gap-1">
                            @if($meta['flow'] === 'oauth')
                                <x-icon name="shield-check" class="w-3.5 h-3.5"/> {{ __('OAuth sign-in') }}
                            @else
                                <x-icon name="info" class="w-3.5 h-3.5"/> {{ __('API key') }}
                            @endif
                        </span>
                        <a href="{{ route('client.integrations.connect', $p['key']) }}"
                           class="{{ $alreadyConnected ? 'btn-secondary' : 'btn-primary' }} text-sm">
                            <x-icon name="link" class="w-4 h-4"/>
                            {{ $alreadyConnected ? __('Add another') : __('Connect') }}
                        </a>
                    </div>
                </div>
            @endforeach
        </div>

        @if(!empty($locked))
            <div class="mt-6 space-y-3">
                <div class="flex items-center gap-2">
                    <x-icon name="info" class="w-4 h-4 text-slate-400"/>
                    <h3 class="text-sm font-semibold text-slate-600 dark:text-slate-400">{{ __('Not available to you') }}</h3>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    @foreach($locked as $p)
                        @php
                            $meta = $providerMeta[$p['key']] ?? ['name' => $p['name'], 'tagline' => '', 'logo' => '#64748b', 'mark' => strtoupper(substr($p['name'], 0, 2)), 'highlights' => []];
                            $reason = $p['reason'] ?? null;
                            $reasonCopy = match ($reason) {
                                'platform' => ['title' => __('Unavailable on this platform'),     'body' => __('This integration has been turned off platform-wide.'),                  'tone' => 'slate',   'cta' => null],
                                'plan'     => ['title' => __('Not in your current plan'),         'body' => __('Upgrade your subscription to unlock this integration.'),                'tone' => 'amber',   'cta' => __('Upgrade plan')],
                                'tenant'   => ['title' => __('Disabled by your firm'),            'body' => __('Your workspace admin has hidden this integration. Contact them to enable it.'), 'tone' => 'rose', 'cta' => null],
                                default    => ['title' => __('Unavailable'),                     'body' => '',                                                                          'tone' => 'slate',   'cta' => null],
                            };
                        @endphp
                        <div class="relative card-pad flex flex-col gap-3 opacity-70 grayscale hover:grayscale-0 hover:opacity-100 transition">
                            <div class="flex items-start gap-3">
                                <span class="w-12 h-12 rounded-2xl flex items-center justify-center text-white font-bold shrink-0 shadow-sm"
                                      style="background-color: {{ $meta['logo'] }}">
                                    {{ $meta['mark'] }}
                                </span>
                                <div class="flex-1 min-w-0">
                                    <div class="font-semibold">{{ $meta['name'] }}</div>
                                    <p class="text-xs text-slate-500 mt-1 leading-relaxed">{{ $meta['tagline'] ?? '' }}</p>
                                </div>
                                <x-icon name="lock" class="w-4 h-4 text-slate-400 shrink-0"/>
                            </div>
                            <div class="rounded-lg border border-{{ $reasonCopy['tone'] }}-200 dark:border-{{ $reasonCopy['tone'] }}-900/40 bg-{{ $reasonCopy['tone'] }}-50/60 dark:bg-{{ $reasonCopy['tone'] }}-900/20 px-3 py-2.5">
                                <div class="text-xs font-semibold text-{{ $reasonCopy['tone'] }}-700 dark:text-{{ $reasonCopy['tone'] }}-300">{{ $reasonCopy['title'] }}</div>
                                @if($reasonCopy['body'])
                                    <div class="text-[11px] text-{{ $reasonCopy['tone'] }}-700/80 dark:text-{{ $reasonCopy['tone'] }}-300/80 mt-0.5 leading-relaxed">{{ $reasonCopy['body'] }}</div>
                                @endif
                            </div>
                            @if($reason === 'plan' && Route::has('billing.index'))
                                <a href="{{ route('billing.index') }}" class="btn-secondary text-xs self-start">
                                    <x-icon name="sparkles" class="w-3.5 h-3.5"/> {{ $reasonCopy['cta'] }}
                                </a>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    </section>

    {{-- ─── Recent imports timeline ─────────────────────────────── --}}
    @if($imports->isNotEmpty())
        <section>
            <h2 class="text-lg font-semibold mb-3">{{ __('Recent imports') }}</h2>
            <div class="card overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="text-xs uppercase tracking-wider text-slate-500 border-b border-slate-200/70 dark:border-slate-800">
                        <tr>
                            <th class="text-start px-4 py-3">{{ __('Provider') }}</th>
                            <th class="text-start px-4 py-3">{{ __('Period') }}</th>
                            <th class="text-start px-4 py-3">{{ __('Status') }}</th>
                            <th class="text-start px-4 py-3">{{ __('Records') }}</th>
                            <th class="text-end   px-4 py-3">{{ __('Action') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                        @foreach($imports as $im)
                            <tr>
                                <td class="px-4 py-2.5">{{ $im->integration?->providerLabel() ?? '—' }}</td>
                                <td class="px-4 py-2.5 font-mono text-xs">{{ $im->period_from?->toDateString() }} → {{ $im->period_to?->toDateString() }}</td>
                                <td class="px-4 py-2.5">
                                    @php $st = $statusColors[$im->status] ?? 'bg-slate-100 text-slate-700'; @endphp
                                    <span class="text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full {{ $st }}">{{ __($im->status) }}</span>
                                    <div class="text-[10px] text-slate-400 mt-0.5">{{ $im->created_at->diffForHumans() }}</div>
                                </td>
                                <td class="px-4 py-2.5 text-xs text-slate-500">
                                    @if($im->counts)
                                        {{ array_sum($im->counts) }} {{ __('total') }}
                                    @elseif($im->error_message)
                                        <span class="text-rose-600">{{ Str::limit($im->error_message, 60) }}</span>
                                    @else
                                        —
                                    @endif
                                </td>
                                <td class="px-4 py-2.5 text-end">
                                    <div class="inline-flex items-center gap-2">
                                        @if($im->status === 'ready')
                                            <form method="POST" action="{{ route('client.integrations.imports.send', $im) }}" class="inline">
                                                @csrf
                                                <button class="btn-primary text-xs">
                                                    <x-icon name="send" class="w-3.5 h-3.5"/> {{ __('Send to firm') }}
                                                </button>
                                            </form>
                                            <form method="POST" action="{{ route('client.integrations.imports.discard', $im) }}" class="inline"
                                                  onsubmit="return confirm('{{ __('Discard this imported dataset?') }}')">
                                                @csrf @method('DELETE')
                                                <button class="btn-ghost text-xs text-rose-600">
                                                    <x-icon name="trash" class="w-3.5 h-3.5"/> {{ __('Discard') }}
                                                </button>
                                            </form>
                                        @elseif($im->submission)
                                            <a href="{{ route('client.submissions.show', $im->submission) }}" class="btn-secondary text-xs">
                                                <x-icon name="external-link" class="w-3.5 h-3.5"/> {{ __('Open') }}
                                            </a>
                                        @else
                                            <span class="text-xs text-slate-400">—</span>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </section>
    @endif
</div>
@endsection