@extends('layouts.app')
@section('title', $invoice->number)

@section('content')
@if(session('status'))
    <div class="mb-4 px-4 py-2 rounded-lg bg-emerald-50 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-200 text-sm">{{ session('status') }}</div>
@endif

@php
    $bank = \App\Models\TenantSetting::group(auth()->user()->tenant_id, 'bank-transfer');
    $hasBank = ! empty($bank['iban']);
    $editable = ! in_array($invoice->status, [
        \App\Models\TenantUserInvoice::STATUS_PAID,
        \App\Models\TenantUserInvoice::STATUS_VOID,
    ], true);
    $emailable = $invoice->status !== \App\Models\TenantUserInvoice::STATUS_VOID;

    // Group lines by analysis_type for the bulk "apply to all of type" helper.
    $byType = $invoice->lines->groupBy('analysis_type');

    // Pre-built array passed to the Alpine editor — kept out of the x-data
    // attribute to avoid Blade's directive parser tripping on nested brackets.
    $editorLines = $invoice->lines->map(fn ($l) => [
        'id'   => $l->id,
        'qty'  => (int) $l->quantity,
        'unit' => (float) $l->unit_amount,
        'type' => $l->analysis_type,
    ])->values();

    // Email send history pulled from snapshot.emails (set by controller after each send).
    $emailHistory = collect($invoice->snapshot['emails'] ?? [])
        ->map(fn ($e) => [
            'at' => isset($e['at']) ? \Carbon\Carbon::parse($e['at']) : null,
            'to' => $e['to'] ?? null,
        ])
        ->filter(fn ($e) => $e['at'] && $e['to'])
        ->sortByDesc(fn ($e) => $e['at']->getTimestamp())
        ->values();
    $lastEmail = $emailHistory->first();
@endphp

<div x-data="{ emailOpen: false }" class="mb-4 space-y-2">
    <div class="flex flex-wrap items-center gap-2">
        <a href="{{ route('tenant.user-invoices.index') }}" class="inline-flex items-center px-3 py-1.5 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-950 hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-200 text-xs font-medium">← {{ __('All invoices') }}</a>

        @if($emailable)
            <button type="button" @click="emailOpen = !emailOpen"
                    class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 text-xs font-semibold hover:bg-slate-800 dark:hover:bg-white">
                <x-icon name="mail" class="w-4 h-4"/>
                {{ $lastEmail ? __('Resend by email') : __('Send by email') }}
            </button>
        @endif

        @if($invoice->status === 'issued')
            <form method="POST" action="{{ route('tenant.user-invoices.mark-paid', $invoice) }}" class="inline">@csrf
                <button class="inline-flex items-center px-3 py-1.5 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-950 text-xs font-medium">{{ __('Mark as paid') }}</button>
            </form>
        @endif
        @if($invoice->status !== 'void')
            <form method="POST" action="{{ route('tenant.user-invoices.void', $invoice) }}" class="inline" onsubmit="return confirm('{{ __('Void this invoice?') }}')">@csrf
                <button class="inline-flex items-center px-3 py-1.5 rounded-lg border border-rose-300 dark:border-rose-700 text-rose-700 dark:text-rose-300 bg-white dark:bg-slate-950 text-xs font-medium">{{ __('Void') }}</button>
            </form>
        @endif

        @if($lastEmail)
            <span class="text-[11px] text-slate-500 dark:text-slate-400 ms-auto">
                <x-icon name="check" class="inline w-3 h-3 -mt-0.5"/>
                {{ __('Last sent') }}:
                <span class="font-medium text-slate-700 dark:text-slate-200">{{ $lastEmail['at']->translatedFormat('d M Y · H:i') }}</span>
                {{ __('to') }} <span class="font-mono">{{ $lastEmail['to'] }}</span>
            </span>
        @endif
    </div>

    @if($emailable)
        <div x-show="emailOpen" x-transition x-cloak
             class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm p-4 space-y-3">
            <form method="POST" action="{{ route('tenant.user-invoices.email', $invoice) }}" class="space-y-3">
                @csrf
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div>
                        <label class="block text-[11px] font-semibold text-slate-700 dark:text-slate-200 mb-1">{{ __('Recipient') }}</label>
                        <input type="email" name="to" value="{{ $invoice->user?->email }}"
                               class="form-input w-full text-sm" required>
                        <p class="mt-1 text-[11px] text-slate-500 dark:text-slate-400">{{ __('Defaults to the client email — override if needed.') }}</p>
                    </div>
                    <div>
                        <label class="block text-[11px] font-semibold text-slate-700 dark:text-slate-200 mb-1">{{ __('Recap') }}</label>
                        <div class="text-xs text-slate-600 dark:text-slate-300 px-3 py-2 rounded-lg border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/40">
                            <span class="font-mono">{{ $invoice->number }}</span> ·
                            {{ $invoice->period_start->format('Y-m-d') }} → {{ $invoice->period_end->format('Y-m-d') }} ·
                            <span class="font-semibold">{{ number_format((float) $invoice->total, 2, ',', ' ') }} {{ $invoice->currency }}</span>
                        </div>
                    </div>
                </div>
                <div>
                    <label class="block text-[11px] font-semibold text-slate-700 dark:text-slate-200 mb-1">
                        {{ __('Personal message') }}
                        <span class="text-slate-400 font-normal">({{ __('optional') }})</span>
                    </label>
                    <textarea name="message" rows="3" maxlength="2000"
                              placeholder="{{ __('A short note — appears above the totals in the email.') }}"
                              class="form-input w-full text-sm leading-relaxed"></textarea>
                </div>
                <div class="flex items-center justify-end gap-2">
                    <button type="button" @click="emailOpen = false"
                            class="inline-flex items-center px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-950 text-slate-700 dark:text-slate-200 text-xs font-medium">
                        {{ __('Cancel') }}
                    </button>
                    <button type="submit"
                            class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 text-xs font-semibold hover:bg-slate-800 dark:hover:bg-white">
                        <x-icon name="send" class="w-4 h-4"/>
                        {{ __('Send invoice') }}
                    </button>
                </div>
            </form>

            @if($emailHistory->count() > 1)
                <details class="text-[11px] text-slate-500 dark:text-slate-400">
                    <summary class="cursor-pointer hover:text-slate-700 dark:hover:text-slate-200">
                        {{ __('Send history') }} ({{ $emailHistory->count() }})
                    </summary>
                    <ul class="mt-2 space-y-1 ms-4 list-disc">
                        @foreach($emailHistory as $e)
                            <li>
                                {{ $e['at']->translatedFormat('d M Y · H:i') }} →
                                <span class="font-mono">{{ $e['to'] }}</span>
                            </li>
                        @endforeach
                    </ul>
                </details>
            @endif
        </div>
    @endif
</div>

@if($errors->any())
    <div class="mb-4 px-4 py-2 rounded-lg bg-rose-50 text-rose-800 dark:bg-rose-900/30 dark:text-rose-200 text-sm">
        <ul class="list-disc ms-5">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
    </div>
@endif

<div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm p-5 sm:p-6 space-y-5">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
        <div><div class="text-[11px] uppercase text-slate-400">{{ __('Number') }}</div><div class="font-mono">{{ $invoice->number }}</div></div>
        <div><div class="text-[11px] uppercase text-slate-400">{{ __('Client') }}</div>{{ $invoice->user?->name }}<br><span class="text-[11px] text-slate-500">{{ $invoice->user?->email }}</span></div>
        <div><div class="text-[11px] uppercase text-slate-400">{{ __('Period') }}</div>{{ $invoice->period_start->format('Y-m-d') }} → {{ $invoice->period_end->format('Y-m-d') }}</div>
        <div><div class="text-[11px] uppercase text-slate-400">{{ __('Status') }}</div>{{ ucfirst($invoice->status) }}</div>
    </div>

    @if($editable)
        <form method="POST" action="{{ route('tenant.user-invoices.update', $invoice) }}"
              x-data='invoiceEditor(@json($editorLines), {{ (float) $invoice->vat_rate }})'
              class="space-y-4">
            @csrf
            @method('PATCH')

            {{-- Per-type bulk price helper — only shown when more than one line of that type exists. --}}
            @php $typesWithMultiple = $byType->filter(fn($g) => $g->count() > 1); @endphp
            @if($typesWithMultiple->isNotEmpty())
                <div class="rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/40 p-4">
                    <div class="text-xs font-semibold text-slate-700 dark:text-slate-200 mb-2">{{ __('Price per analysis type') }}</div>
                    <p class="text-[11px] text-slate-500 dark:text-slate-400 mb-3">{{ __('Set one price and apply it to every line of that type.') }}</p>
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
                        @foreach($typesWithMultiple as $type => $linesOfType)
                            @php
                                $label = $type === '_floor'
                                    ? __('Monthly minimum')
                                    : __(config('finance_analyses.types.'.$type.'.label', $type));
                            @endphp
                            <div class="flex items-center gap-2">
                                <span class="flex-1 text-xs text-slate-600 dark:text-slate-300 truncate">
                                    {{ $label }}
                                    <span class="text-slate-400 dark:text-slate-500">({{ $linesOfType->count() }})</span>
                                </span>
                                <input type="number" step="0.01" min="0" max="99999.99"
                                       x-ref="bulk_{{ $loop->index }}"
                                       placeholder="0,00"
                                       class="w-28 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-950 px-2 py-1 text-xs text-end font-mono">
                                <button type="button"
                                        @click="applyToType('{{ $type }}', $refs.bulk_{{ $loop->index }}.value)"
                                        class="px-2 py-1 rounded-lg bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 text-[11px] font-semibold hover:bg-slate-800 dark:hover:bg-white">
                                    {{ __('Apply') }}
                                </button>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            <div class="overflow-x-auto rounded-xl ring-1 ring-slate-200 dark:ring-slate-700">
                <table class="w-full text-sm">
                    <thead class="text-[11px] uppercase tracking-wider text-slate-400 bg-slate-50 dark:bg-slate-800/60">
                        <tr>
                            <th class="text-start px-3 py-2 font-medium">{{ __('Description') }}</th>
                            <th class="text-end px-3 py-2 font-medium w-20">{{ __('Qty') }}</th>
                            <th class="text-end px-3 py-2 font-medium w-32">{{ __('Unit') }}</th>
                            <th class="text-end px-3 py-2 font-medium w-32">{{ __('Amount') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                        @foreach($invoice->lines as $i => $line)
                            <tr>
                                <td class="px-3 py-2">
                                    {{ $line->description }}
                                    <input type="hidden" name="lines[{{ $i }}][id]" value="{{ $line->id }}">
                                </td>
                                <td class="px-3 py-2 text-end">{{ $line->quantity }}</td>
                                <td class="px-3 py-2 text-end">
                                    <input type="number" step="0.01" min="0" max="99999.99"
                                           name="lines[{{ $i }}][unit_amount]"
                                           x-model.number="lines[{{ $i }}].unit"
                                           @input="recompute()"
                                           class="w-24 rounded-md border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-950 px-2 py-1 text-xs text-end font-mono">
                                </td>
                                <td class="px-3 py-2 text-end font-mono tabular-nums" x-text="fmt(lines[{{ $i }}].qty * lines[{{ $i }}].unit)"></td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot class="text-sm">
                        <tr><td colspan="3" class="px-3 py-2 text-end">{{ __('Subtotal') }}</td><td class="px-3 py-2 text-end font-mono tabular-nums" x-text="fmt(subtotal) + ' {{ $invoice->currency }}'"></td></tr>
                        <tr><td colspan="3" class="px-3 py-2 text-end">{{ __('VAT') }} ({{ rtrim(rtrim(number_format((float)$invoice->vat_rate,2),'0'),'.') }}%)</td><td class="px-3 py-2 text-end font-mono tabular-nums" x-text="fmt(vat)"></td></tr>
                        <tr class="font-semibold"><td colspan="3" class="px-3 py-2 text-end">{{ __('Total') }}</td><td class="px-3 py-2 text-end font-mono tabular-nums" x-text="fmt(total) + ' {{ $invoice->currency }}'"></td></tr>
                    </tfoot>
                </table>
            </div>

            <div class="flex flex-wrap items-center justify-end gap-2 pt-1">
                <a href="{{ route('tenant.user-invoices.show', $invoice) }}"
                   class="inline-flex items-center px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-950 text-slate-700 dark:text-slate-200 text-xs font-medium hover:bg-slate-50 dark:hover:bg-slate-800">
                    {{ __('Reset') }}
                </a>
                <button type="submit"
                        :disabled="!dirty"
                        :class="dirty ? '' : 'opacity-50 cursor-not-allowed'"
                        class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 text-xs font-semibold hover:bg-slate-800 dark:hover:bg-white">
                    <x-icon name="check" class="w-4 h-4"/>
                    {{ __('Save changes') }}
                </button>
            </div>
        </form>
    @else
        <div class="overflow-x-auto rounded-xl ring-1 ring-slate-200 dark:ring-slate-700">
            <table class="w-full text-sm">
                <thead class="text-[11px] uppercase tracking-wider text-slate-400 bg-slate-50 dark:bg-slate-800/60">
                    <tr>
                        <th class="text-start px-3 py-2 font-medium">{{ __('Description') }}</th>
                        <th class="text-end px-3 py-2 font-medium w-24">{{ __('Qty') }}</th>
                        <th class="text-end px-3 py-2 font-medium w-32">{{ __('Unit') }}</th>
                        <th class="text-end px-3 py-2 font-medium w-32">{{ __('Amount') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                    @foreach($invoice->lines as $line)
                        <tr>
                            <td class="px-3 py-2">{{ $line->description }}</td>
                            <td class="px-3 py-2 text-end">{{ $line->quantity }}</td>
                            <td class="px-3 py-2 text-end font-mono tabular-nums">{{ number_format((float)$line->unit_amount, 2) }}</td>
                            <td class="px-3 py-2 text-end font-mono tabular-nums">{{ number_format((float)$line->amount, 2) }}</td>
                        </tr>
                    @endforeach
                </tbody>
                <tfoot class="text-sm">
                    <tr><td colspan="3" class="px-3 py-2 text-end">{{ __('Subtotal') }}</td><td class="px-3 py-2 text-end">{{ number_format((float)$invoice->subtotal, 2) }} {{ $invoice->currency }}</td></tr>
                    <tr><td colspan="3" class="px-3 py-2 text-end">{{ __('VAT') }} ({{ rtrim(rtrim(number_format((float)$invoice->vat_rate,2),'0'),'.') }}%)</td><td class="px-3 py-2 text-end">{{ number_format((float)$invoice->vat_amount, 2) }}</td></tr>
                    <tr class="font-semibold"><td colspan="3" class="px-3 py-2 text-end">{{ __('Total') }}</td><td class="px-3 py-2 text-end">{{ number_format((float)$invoice->total, 2) }} {{ $invoice->currency }}</td></tr>
                </tfoot>
            </table>
        </div>
    @endif

    @if($hasBank)
        <div class="rounded-lg border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/40 p-4 text-xs">
            <div class="font-semibold text-slate-700 dark:text-slate-200 mb-2">{{ __('Bank-transfer details') }}</div>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-1 text-slate-600 dark:text-slate-300 font-mono">
                @if(! empty($bank['account_holder'])) <div><span class="text-slate-400">{{ __('Holder') }}:</span> {{ $bank['account_holder'] }}</div> @endif
                <div><span class="text-slate-400">{{ __('IBAN') }}:</span> {{ $bank['iban'] }}</div>
                @if(! empty($bank['bic'])) <div><span class="text-slate-400">BIC:</span> {{ $bank['bic'] }}</div> @endif
                @if(! empty($bank['bank_name'])) <div><span class="text-slate-400">{{ __('Bank') }}:</span> {{ $bank['bank_name'] }}</div> @endif
                <div><span class="text-slate-400">{{ __('Reference') }}:</span> {{ str_replace(':invoice_number', $invoice->number, $bank['reference_template'] ?? ':invoice_number') }}</div>
            </div>
            @if(! empty($bank['notes']))
                <p class="mt-2 text-slate-500 dark:text-slate-400">{{ $bank['notes'] }}</p>
            @endif
        </div>
    @endif
</div>

@if($editable)
    @push('scripts')
    <script>
        // Tiny Alpine component: live-recompute totals as the operator edits unit prices,
        // and provide a "apply price to all lines of type X" helper.
        function invoiceEditor(initial, vatRate) {
            return {
                lines: initial,
                originals: initial.map(l => l.unit),
                vatRate: vatRate,
                get subtotal() { return this.lines.reduce((s, l) => s + l.qty * (Number(l.unit) || 0), 0); },
                get vat()      { return this.subtotal * this.vatRate / 100; },
                get total()    { return this.subtotal + this.vat; },
                get dirty()    { return this.lines.some((l, i) => Number(l.unit) !== this.originals[i]); },
                applyToType(type, value) {
                    const v = Number(value);
                    if (!isFinite(v) || v < 0) return;
                    this.lines.forEach(l => { if (l.type === type) l.unit = v; });
                },
                recompute() { /* getters handle it */ },
                fmt(n) {
                    return Number(n).toLocaleString(document.documentElement.lang || 'en', {
                        minimumFractionDigits: 2, maximumFractionDigits: 2,
                    });
                },
            };
        }
    </script>
    @endpush
@endif
@endsection