@extends('layouts.finance')

@section('title', $mode === 'create' ? 'Add Bank Account' : 'Edit Bank Account')
@section('subtitle', 'Create and maintain database-backed bank accounts')

@push('styles')
<style>
    .account-form-card {
        width: min(720px, 100%);
        margin: 0 auto;
    }
    .account-form-card .section-head {
        align-items: flex-start;
    }
    .account-form-card .account-link-list {
        max-height: 170px;
        overflow: auto;
        border: 1px solid var(--border);
        border-radius: 9px;
        padding: 6px;
        background: #fafbff;
    }
    .account-form-card .account-link-country {
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--muted-2);
        font-weight: 600;
        padding: 6px 6px 2px;
    }
    .account-form-card .account-link-row {
        display: grid;
        grid-template-columns: 16px 24px minmax(110px, max-content) 1fr auto;
        align-items: center;
        gap: 8px;
        padding: 6px 8px;
        border-radius: 6px;
        cursor: pointer;
    }
    .account-form-card .account-link-row:hover {
        background: #f1f5ff;
    }
    .account-form-card .account-link-row input {
        margin: 0;
    }
    .account-form-card .account-link-meta {
        min-width: 0;
        color: var(--muted);
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .account-form-card .account-link-remove {
        padding: 3px 8px;
        font-size: 11px;
    }
    .account-form-actions {
        justify-content: flex-end;
        padding-top: 8px;
    }
    @media (max-width: 760px) {
        .account-form-card .account-link-row {
            grid-template-columns: 16px 24px 1fr auto;
        }
        .account-form-card .account-link-meta {
            grid-column: 3;
        }
    }
</style>
@endpush

@section('content')
@php
    $isCreate = $mode === 'create';
    $action = $isCreate ? route('finance.accounts.store') : route('finance.accounts.update', $account);
    $countryFor = fn($currency) => $currency === 'PKR' ? 'Pakistan' : ($currency === 'AUD' ? 'Australia' : 'United States');
    $logoColorFor = fn($currency) => $currency === 'PKR' ? '#1e3a8a' : ($currency === 'AUD' ? '#0d9488' : '#dc2626');
    $shortFor = fn($bank) => strtoupper(substr(preg_replace('/[^A-Za-z0-9]/', '', $bank->bank_name ?: $bank->name), 0, 4)) ?: 'BANK';
    $maskedAccount = fn($bank) => $bank->account_number ? '****'.substr($bank->account_number, -4) : 'No #';
    $cardShortFor = fn($card) => strtoupper(substr(preg_replace('/[^A-Za-z0-9]/', '', $card->short_name ?: $card->issuer ?: $card->card_name), 0, 4)) ?: 'CARD';
    $cardMaskedAccount = fn($card) => $card->card_name ? $card->card_name : 'Credit Card';
    $linkGroups = $linkableAccounts->groupBy(fn($bank) => $countryFor($bank->currency));
    $cardLinkGroups = $linkableCreditCards->groupBy(fn($card) => $countryFor($card->currency));
    $creditLinkIdsByAccount = $account->exists ? $account->creditSources->mapWithKeys(fn($bank) => [$bank->id => $bank->pivot->id]) : collect();
    $debitLinkIdsByAccount = $account->exists ? $account->debitDestinations->mapWithKeys(fn($bank) => [$bank->id => $bank->pivot->id]) : collect();
    $creditCardLinkIdsByCard = $account->exists ? $account->creditCardSources->mapWithKeys(fn($card) => [$card->id => $card->pivot->id]) : collect();
    $debitCardLinkIdsByCard = $account->exists ? $account->debitCardDestinations->mapWithKeys(fn($card) => [$card->id => $card->pivot->id]) : collect();
    $transactionCategories = \App\Models\BankAccount::query()
        ->whereNotNull('transaction_category')
        ->distinct()
        ->orderBy('transaction_category')
        ->pluck('transaction_category')
        ->merge(['Pak Banks', 'Wallets', 'US Banks', 'AUS Banks'])
        ->filter()
        ->unique()
        ->values();
    // Currency implied by each category (built-in mapping + currencies of
    // existing accounts), so selecting a category can auto-pick its currency.
    $categoryCurrencies = $transactionCategories
        ->mapWithKeys(fn($category) => [$category => \App\Models\BankAccount::defaultCurrencyForCategory($category)])
        ->filter();
@endphp

<div class="card account-form-card">
    <div class="section-head">
        <div>
            <h3>{{ $isCreate ? 'New Bank Account' : 'Edit Bank Account' }}</h3>
            <div class="text-xs muted mt-3">This account is used across dashboard totals, transaction routing, reports, and cash flow.</div>
        </div>
        <a class="btn" href="{{ route('finance.accounts') }}">Back</a>
    </div>

    <form method="POST" action="{{ $action }}" class="p-4">
        @csrf
        @unless($isCreate)
            @method('PUT')
        @endunless

        <div class="grid grid-cols-2 gap-3 mb-4">
            <div>
                <label class="label" for="bank_name">Bank Name</label>
                <input class="field" id="bank_name" name="bank_name" value="{{ old('bank_name', $account->bank_name) }}" required maxlength="255" placeholder="e.g., Bank of America">
            </div>
            <div>
                <label class="label" for="name">Account Title</label>
                <input class="field" id="name" name="name" value="{{ old('name', $account->name) }}" required maxlength="255" placeholder="e.g., Examism LLC">
            </div>
        </div>

        <div class="grid grid-cols-2 gap-3 mb-4">
            <div>
                <label class="label" for="account_number">Account Number</label>
                <input class="field" id="account_number" name="account_number" value="{{ old('account_number', $account->account_number) }}" maxlength="100" placeholder="Optional">
            </div>
            <div>
                <label class="label" for="account_type">Account Type</label>
                <select class="field" id="account_type" name="account_type" required>
                    @foreach(['receiving' => 'Receiving', 'paying' => 'Paying', 'both' => 'Both'] as $value => $label)
                        <option value="{{ $value }}" @selected(old('account_type', $account->account_type) === $value)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="grid grid-cols-2 gap-3 mb-4">
            <div>
                <label class="label" for="transaction_category">Category</label>
                @php($selectedCategory = old('transaction_category', $account->transactionCategory()))
                <select class="field" id="transaction_category" name="transaction_category" required>
                    @foreach($transactionCategories as $category)
                        <option value="{{ $category }}" data-currency="{{ $categoryCurrencies[$category] ?? '' }}" @selected($selectedCategory === $category)>{{ $category }}</option>
                    @endforeach
                </select>
                <div class="text-xs mt-1" style="color:var(--muted)">Categories automatically appear on the Transactions page.</div>
            </div>
            <div>
                <label class="label" for="opening_balance">Opening Balance</label>
                <input class="field" id="opening_balance" type="number" step="0.01" min="0" name="opening_balance" value="{{ old('opening_balance', $account->opening_balance ?? 0) }}" required>
                @if($account->exists)
                    <div class="text-xs mt-1" style="color:var(--muted)">Current balance is calculated from database transactions: {{ app(\App\Support\FinanceSuiteMetrics::class)->money($account->current_balance, $account->currency) }}</div>
                @endif
            </div>
        </div>

        <div class="grid grid-cols-2 gap-3 mb-4">
            <div>
                <label class="label" for="currency">Currency</label>
                <select class="field" id="currency" name="currency" required>
                    @foreach(['USD' => 'USD - USA', 'PKR' => 'PKR - Pakistan', 'AUD' => 'AUD - Australia'] as $value => $label)
                        <option value="{{ $value }}" @selected(old('currency', $account->currency) === $value)>{{ $label }}</option>
                    @endforeach
                </select>
                <div class="text-xs mt-1" style="color:var(--muted)">Used for balances and exchange calculations.</div>
            </div>
            <div>
                <label class="label" for="conversion_rate">Conversion Rate</label>
                <input class="field" id="conversion_rate" type="number" step="0.00000001" min="0.00000001" name="conversion_rate" value="{{ old('conversion_rate', $account->conversion_rate) }}" placeholder="Optional">
                <div class="text-xs mt-1" style="color:var(--muted)">Optional snapshot rate for this account.</div>
            </div>
        </div>

        <div class="mb-4">
            <label class="label" for="notes">Notes</label>
            <textarea class="field" id="notes" name="notes" rows="3" maxlength="2000">{{ old('notes', $account->notes) }}</textarea>
        </div>

        <label class="flag mb-4" style="width:max-content">
            <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $account->is_active ?? true))>
            Active
        </label>

        <div class="divider mb-4"></div>

        @foreach([
            'credit_source_ids' => [
                'title' => 'Credit Sources',
                'selected' => collect(old('credit_source_ids', $selectedCreditSourceIds->all()))->map(fn($id) => (int) $id),
                'cardField' => 'credit_source_card_ids',
                'selectedCards' => collect(old('credit_source_card_ids', $selectedCreditSourceCardIds->all()))->map(fn($id) => (int) $id),
                'hint' => 'accounts that send money INTO this account',
                'linkIds' => $creditLinkIdsByAccount,
                'cardLinkIds' => $creditCardLinkIdsByCard,
                'deletePrefix' => 'credit',
            ],
            'debit_destination_ids' => [
                'title' => 'Debit Destinations',
                'selected' => collect(old('debit_destination_ids', $selectedDebitDestinationIds->all()))->map(fn($id) => (int) $id),
                'cardField' => 'debit_destination_card_ids',
                'selectedCards' => collect(old('debit_destination_card_ids', $selectedDebitDestinationCardIds->all()))->map(fn($id) => (int) $id),
                'hint' => 'accounts this account sends money TO',
                'linkIds' => $debitLinkIdsByAccount,
                'cardLinkIds' => $debitCardLinkIdsByCard,
                'deletePrefix' => 'debit',
            ],
        ] as $field => $list)
            <div class="mb-4">
                <label class="label">{{ $list['title'] }} <span style="color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0">- {{ $list['hint'] }}</span></label>
                <div class="account-link-list scrollbar">
                    @foreach($linkGroups as $country => $banks)
                        <div class="account-link-country">{{ $country }}</div>
                        @foreach($banks as $bank)
                            <label class="account-link-row row-hover">
                                <input type="checkbox" name="{{ $field }}[]" value="{{ $bank->id }}" @checked($list['selected']->contains($bank->id))>
                                <span class="bank-logo" style="width:24px;height:24px;font-size:9px;background:{{ $logoColorFor($bank->currency) }}15;color:{{ $logoColorFor($bank->currency) }};border:1px solid {{ $logoColorFor($bank->currency) }}44">{{ $shortFor($bank) }}</span>
                                <span style="font-weight:600;font-size:13px">{{ $bank->name }}</span>
                                <span class="account-link-meta">- {{ $bank->bank_name }} - {{ $maskedAccount($bank) }}</span>
                                @if($account->exists && $list['linkIds']->has($bank->id))
                                    <button class="btn btn-danger account-link-remove" type="submit" form="delete-{{ $list['deletePrefix'] }}-link-{{ $bank->id }}" onclick="return confirm('Remove this account link?')">Remove</button>
                                @else
                                    <span></span>
                                @endif
                            </label>
                        @endforeach
                    @endforeach

                    @foreach($cardLinkGroups as $country => $cards)
                        <div class="account-link-country">{{ $country }} Credit Cards</div>
                        @foreach($cards as $card)
                            <label class="account-link-row row-hover">
                                <input type="checkbox" name="{{ $list['cardField'] }}[]" value="{{ $card->id }}" @checked($list['selectedCards']->contains($card->id))>
                                <span class="bank-logo" style="width:24px;height:24px;font-size:9px;background:{{ $logoColorFor($card->currency) }}15;color:{{ $logoColorFor($card->currency) }};border:1px solid {{ $logoColorFor($card->currency) }}44">{{ $cardShortFor($card) }}</span>
                                <span style="font-weight:600;font-size:13px">{{ $card->issuer }}</span>
                                <span class="account-link-meta">- {{ $cardMaskedAccount($card) }} - {{ strtoupper($card->currency) }}</span>
                                <span></span>
                            </label>
                        @endforeach
                    @endforeach

                    @if($linkGroups->isEmpty() && $cardLinkGroups->isEmpty())
                        <div class="text-xs p-2" style="color:var(--muted)">No other accounts or credit cards yet. Add more records to link them.</div>
                    @endif
                </div>
            </div>
        @endforeach

        <div class="flex items-center gap-2 account-form-actions">
            <button class="btn btn-primary" type="submit">{{ $isCreate ? 'Save Account' : 'Save Changes' }}</button>
            <a class="btn" href="{{ route('finance.accounts') }}">Cancel</a>
        </div>
    </form>

    @if($account->exists)
        @foreach($creditLinkIdsByAccount as $bankId => $linkId)
            <form id="delete-credit-link-{{ $bankId }}" method="POST" action="{{ route('finance.accounts.links.destroy', [$account, $linkId]) }}">
                @csrf
                @method('DELETE')
            </form>
        @endforeach
        @foreach($debitLinkIdsByAccount as $bankId => $linkId)
            <form id="delete-debit-link-{{ $bankId }}" method="POST" action="{{ route('finance.accounts.links.destroy', [$account, $linkId]) }}">
                @csrf
                @method('DELETE')
            </form>
        @endforeach
    @endif
</div>
@endsection

@push('scripts')
<script>
    // When the user picks a category, auto-select the currency implied by it
    // (e.g. "Pak Banks" → PKR, "AUS Banks" → AUD). Driven by each option's
    // data-currency attribute so it stays correct as categories evolve.
    // Runs only on user change — never overrides a saved currency on load.
    (function () {
        const categorySelect = document.getElementById('transaction_category');
        const currencySelect = document.getElementById('currency');
        if (!categorySelect || !currencySelect) {
            return;
        }

        categorySelect.addEventListener('change', function () {
            const currency = this.selectedOptions[0]?.dataset.currency;
            if (!currency) {
                return;
            }

            const match = Array.from(currencySelect.options)
                .some((option) => option.value === currency);
            if (match) {
                currencySelect.value = currency;
                currencySelect.dispatchEvent(new Event('change', { bubbles: true }));
            }
        });
    })();
</script>
@endpush