@extends('layouts.app')
@section('title', __('Accounting Integrations'))
@section('page-title', __('Accounting Integrations'))
@section('page-subtitle', __('Configure platform-wide OAuth credentials for accounting providers.'))

@section('content')
@include('super-admin._nav')

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    {{-- ─── Exact Online OAuth form ─────────────────────────────── --}}
    <form method="POST" action="{{ route('super-admin.accounting.update') }}" class="lg:col-span-2 space-y-6">
        @csrf

        {{-- Per-provider platform kill-switches --}}
        <div class="card card-pad space-y-4">
            <div>
                <h2 class="text-base font-semibold">{{ __('Platform availability') }}</h2>
                <p class="text-xs text-slate-500 mt-1">{{ __('Master switches. Tenants and users can never see a provider that is off here, regardless of plan.') }}</p>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <label class="flex items-center gap-3 p-3 rounded-xl border border-slate-200 dark:border-slate-700 cursor-pointer has-[:checked]:bg-violet-50 has-[:checked]:border-violet-300 dark:has-[:checked]:bg-violet-900/20">
                    <input type="hidden" name="odoo_enabled" value="0">
                    <input type="checkbox" name="odoo_enabled" value="1" class="w-4 h-4 accent-brand-600"
                           @checked(old('odoo_enabled', ($settings['odoo_enabled'] ?? '1') === '1'))>
                    <span class="w-9 h-9 rounded-lg flex items-center justify-center text-white font-bold text-xs shrink-0" style="background-color: #714b67">Od</span>
                    <div>
                        <div class="font-medium">{{ __('Odoo') }}</div>
                        <div class="text-[11px] text-slate-500">{{ __('Per-user API key (no platform creds needed)') }}</div>
                    </div>
                </label>

                <label class="flex items-center gap-3 p-3 rounded-xl border border-slate-200 dark:border-slate-700 cursor-pointer has-[:checked]:bg-amber-50 has-[:checked]:border-amber-300 dark:has-[:checked]:bg-amber-900/20">
                    <input type="hidden" name="billit_enabled" value="0">
                    <input type="checkbox" name="billit_enabled" value="1" class="w-4 h-4 accent-brand-600"
                           @checked(old('billit_enabled', ($settings['billit_enabled'] ?? '1') === '1'))>
                    <span class="w-9 h-9 rounded-lg flex items-center justify-center text-white font-bold text-xs shrink-0" style="background-color: #ff8a3c">Bi</span>
                    <div>
                        <div class="font-medium">{{ __('Billit') }}</div>
                        <div class="text-[11px] text-slate-500">{{ __('Per-user API key + party ID') }}</div>
                    </div>
                </label>
            </div>
        </div>

        {{-- Exact Online OAuth credentials --}}
        <div class="card card-pad space-y-5">

        <div class="flex items-start justify-between gap-4">
            <div class="flex items-center gap-3">
                <span class="w-10 h-10 rounded-xl flex items-center justify-center text-white font-bold text-sm shrink-0" style="background-color: #dc1e35">EO</span>
                <div>
                    <h2 class="text-base font-semibold">{{ __('Exact Online') }}</h2>
                    <p class="text-sm text-slate-500 dark:text-slate-400">
                        {{ __('Register an app at') }}
                        <a href="https://apps.exactonline.com" target="_blank" rel="noopener" class="text-brand-600 hover:underline">apps.exactonline.com</a>
                        {{ __('to obtain your client credentials.') }}
                    </p>
                </div>
            </div>
            <label class="inline-flex items-center gap-2 shrink-0">
                <input type="hidden" name="exact_enabled" value="0">
                <input type="checkbox" name="exact_enabled" value="1" class="w-4 h-4 accent-brand-600"
                       @checked(old('exact_enabled', ($settings['exact_enabled'] ?? '0') === '1'))>
                <span class="text-sm">{{ __('Enabled') }}</span>
            </label>
        </div>

        {{-- Callback URL — must match what the user registers in Exact's app portal --}}
        <div class="rounded-xl bg-amber-50 dark:bg-amber-900/20 text-amber-800 dark:text-amber-200 px-3 py-3 text-sm">
            <div class="flex gap-2 items-start">
                <x-icon name="info" class="w-4 h-4 shrink-0 mt-0.5"/>
                <div class="flex-1 space-y-2">
                    <div class="font-medium">{{ __('Register this redirect URI on apps.exactonline.com') }}</div>
                    <div class="flex items-center gap-2" x-data="{ copied: false }">
                        <code class="flex-1 font-mono text-xs bg-white dark:bg-slate-900 rounded-md px-2 py-1.5 border border-amber-200 dark:border-amber-800/50 break-all">{{ $callback_url }}</code>
                        <button type="button"
                                @click="navigator.clipboard.writeText('{{ $callback_url }}'); copied = true; setTimeout(() => copied = false, 1500)"
                                class="btn-secondary text-xs shrink-0">
                            <span x-show="!copied">{{ __('Copy') }}</span>
                            <span x-show="copied" x-cloak>{{ __('Copied') }}</span>
                        </button>
                    </div>
                    <div class="text-xs">{{ __('It must match byte-for-byte (scheme, host, path, no trailing slash).') }}</div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div class="sm:col-span-2">
                <label class="form-label">{{ __('Client ID') }}</label>
                <input type="text" name="exact_client_id" class="form-input font-mono text-xs" autocomplete="off"
                       value="{{ old('exact_client_id', $settings['exact_client_id'] ?? '') }}"
                       placeholder="00000000-0000-0000-0000-000000000000">
                @error('exact_client_id')<p class="form-error">{{ $message }}</p>@enderror
            </div>

            <div class="sm:col-span-2">
                <label class="form-label">{{ __('Client Secret') }}</label>
                <input type="password" name="exact_client_secret" class="form-input font-mono text-xs" autocomplete="new-password"
                       placeholder="{{ !empty($settings['exact_client_secret']) ? '••••••••  ('.__('saved').')' : '' }}">
                <p class="text-xs text-slate-500 mt-1">{{ __('Stored encrypted. Leave blank to keep the current value.') }}</p>
                @error('exact_client_secret')<p class="form-error">{{ $message }}</p>@enderror
            </div>

            <div>
                <label class="form-label">{{ __('Region (TLD)') }}</label>
                <select name="exact_tld" class="form-select">
                    @foreach($tlds as $code => $label)
                        <option value="{{ $code }}" @selected(old('exact_tld', $settings['exact_tld'] ?? 'be') === $code)>{{ $label }}</option>
                    @endforeach
                </select>
                <p class="text-xs text-slate-500 mt-1">{{ __('Must match the Exact Online region your tenants use.') }}</p>
            </div>
        </div>

            <div class="flex justify-end pt-3 border-t border-slate-100 dark:border-slate-800">
                <button class="btn-primary"><x-icon name="check" class="w-4 h-4"/> {{ __('Save') }}</button>
            </div>
        </div>{{-- /Exact card --}}
    </form>

    {{-- ─── Help / test sidebar ─────────────────────────────────── --}}
    <aside class="space-y-4">
        <div class="card card-pad space-y-3">
            <h3 class="font-semibold flex items-center gap-2">
                <x-icon name="refresh" class="w-4 h-4"/> {{ __('Test connection') }}
            </h3>
            <p class="text-xs text-slate-500">{{ __('Pings the Exact Online OAuth endpoint for the selected region.') }}</p>
            <form method="POST" action="{{ route('super-admin.accounting.test') }}">
                @csrf
                <button class="btn-secondary w-full text-sm"><x-icon name="sparkles" class="w-4 h-4"/> {{ __('Test now') }}</button>
            </form>
        </div>

        <div class="card card-pad space-y-3">
            <h3 class="font-semibold flex items-center gap-2">
                <x-icon name="info" class="w-4 h-4"/> {{ __('Setup checklist') }}
            </h3>
            <ol class="space-y-2.5 text-sm text-slate-600 dark:text-slate-300">
                @foreach([
                    __('Sign in to apps.exactonline.com and create a new app.'),
                    __('Paste the redirect URI shown on the left.'),
                    __('Copy the Client ID and Client Secret here.'),
                    __('Pick the right region (.be for Belgium, .nl for Netherlands, etc.).'),
                    __('Toggle "Enabled" and save.'),
                ] as $idx => $step)
                    <li class="flex gap-2.5">
                        <span class="w-5 h-5 rounded-full bg-brand-100 dark:bg-brand-900/40 text-brand-700 dark:text-brand-300 text-[11px] font-semibold flex items-center justify-center shrink-0 mt-0.5">{{ $idx + 1 }}</span>
                        <span class="leading-relaxed">{{ $step }}</span>
                    </li>
                @endforeach
            </ol>
        </div>

        <div class="card card-pad space-y-2">
            <h3 class="font-semibold flex items-center gap-2 text-sm">
                <x-icon name="link" class="w-4 h-4"/> {{ __('Other providers') }}
            </h3>
            <p class="text-xs text-slate-500 leading-relaxed">
                {{ __('Odoo and Billit use per-user API keys — no platform-level setup needed. Each end-user connects their own account from /space/integrations.') }}
            </p>
        </div>
    </aside>
</div>
@endsection