@extends('layouts.app')

@section('title', 'التكاملات')

@php
    /** @var \Illuminate\Support\Collection<string, \App\Models\Tenant\Integration> $integrations */
    /** @var array $schema */
    /** @var array $available */
    /** @var string|null $emptyReason */
    $secretMask = '••••••••';
    $clinicCountry = optional(app(\App\Services\TenantManager::class)->current())->country;
    $countryLabel = [
        'SA' => '🇸🇦 السعودية', 'EG' => '🇪🇬 مصر',
        'AE' => '🇦🇪 الإمارات', 'US' => '🇺🇸 الولايات المتحدة',
    ][strtoupper((string) $clinicCountry)] ?? $clinicCountry;
@endphp

@section('content')
<x-clinic-hero
    title="التكاملات"
    subtitle="التكاملات المتاحة تختلف حسب دولة العيادة. زاتكا ونفيس متاحة في السعودية فقط."
    icon="ti-plug"
    tone="settings"
    :stats="[
        ['icon' => 'ti-flag', 'value' => $countryLabel ?: '—', 'label' => 'دولة العيادة'],
        ['icon' => 'ti-list', 'value' => count($available), 'label' => 'تكامل متاح'],
        ['icon' => 'ti-check', 'value' => $integrations->where('is_enabled', true)->count(), 'label' => 'مفعّل'],
    ]"
/>

@if(empty($available))
    <div class="card">
        <div class="card-body text-center py-5">
            <div class="mb-3">
                <span class="avatar avatar-xl bg-light text-muted rounded-circle">
                    <i class="ti ti-plug-off" style="font-size: 2rem;"></i>
                </span>
            </div>
            <h3 class="mb-2">لا يوجد تكامل متاح</h3>
            <p class="text-muted mb-0">{{ $emptyReason ?? 'لا يوجد تكامل متاح في باقتك الحالية.' }}</p>
        </div>
    </div>
@endif

<div class="row g-3">
    @foreach($available as $provider)
        @php
            $meta = $schema[$provider];
            $integration = $integrations->get($provider);
            // The DB row is seeded by IntegrationSeeder; if missing (older tenant
            // that never got the seed) we treat it as a fresh row in-memory so
            // the form still renders — the controller will create on save.
            if (! $integration) {
                $integration = new \App\Models\Tenant\Integration([
                    'provider' => $provider,
                    'name' => $meta['label'],
                    'environment' => \App\Models\Tenant\Integration::ENV_SANDBOX,
                    'is_enabled' => false,
                ]);
            }
            $creds = $integration->credentials ?? [];
        @endphp

        <div class="col-12">
            <form class="card integration-card" data-provider="{{ $provider }}"
                  data-update-url="{{ route('integrations.update', $integration->id ?? 0) }}"
                  data-test-url="{{ route('integrations.test', $integration->id ?? 0) }}">
                @csrf

                <div class="card-header d-flex flex-wrap align-items-center gap-2">
                    <span class="avatar avatar-rounded bg-primary-lt text-primary">
                        <i class="ti {{ $meta['icon'] }}"></i>
                    </span>
                    <div class="flex-grow-1 min-w-0">
                        <h3 class="card-title mb-0">{{ $meta['label'] }}</h3>
                        <div class="text-muted small">{{ $meta['description'] }}</div>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        @if($integration->last_status)
                            <span class="badge {{ $integration->last_status === 'success' ? 'bg-success' : 'bg-danger' }}-lt">
                                <i class="ti {{ $integration->last_status === 'success' ? 'ti-check' : 'ti-alert-triangle' }} me-1"></i>
                                {{ $integration->last_status === 'success' ? 'آخر فحص ناجح' : 'فشل آخر فحص' }}
                                @if($integration->last_sync_at)
                                    — {{ $integration->last_sync_at->diffForHumans() }}
                                @endif
                            </span>
                        @endif
                        <label class="form-check form-switch form-switch-lg m-0 d-inline-flex align-items-center gap-2">
                            <input type="hidden" name="is_enabled" value="0">
                            <input class="form-check-input integration-toggle" type="checkbox"
                                   name="is_enabled" value="1" {{ $integration->is_enabled ? 'checked' : '' }}>
                            <span class="form-check-label switch-state fw-semibold {{ $integration->is_enabled ? 'text-success' : 'text-muted' }}">
                                {{ $integration->is_enabled ? 'مفعّل' : 'معطّل' }}
                            </span>
                        </label>
                    </div>
                </div>

                <div class="card-body">
                    @if($integration->last_error && $integration->last_status === 'failed')
                        <div class="alert alert-danger">
                            <i class="ti ti-alert-circle me-1"></i>
                            <strong>آخر خطأ:</strong> {{ $integration->last_error }}
                        </div>
                    @endif

                    <div class="row g-3 mb-3">
                        <div class="col-md-4">
                            <label class="form-label">البيئة</label>
                            <select name="environment" class="form-select">
                                <option value="sandbox" {{ $integration->environment === 'sandbox' ? 'selected' : '' }}>تجريبية (Sandbox)</option>
                                <option value="production" {{ $integration->environment === 'production' ? 'selected' : '' }}>إنتاجية (Production)</option>
                            </select>
                            <small class="text-muted">ابدأ بالـ Sandbox دائمًا حتى تتأكد من البيانات.</small>
                        </div>

                        @if($meta['docs_url'])
                            <div class="col-md-8 d-flex align-items-end">
                                <a href="{{ $meta['docs_url'] }}" target="_blank" rel="noopener"
                                   class="btn btn-outline-primary btn-sm">
                                    <i class="ti ti-external-link me-1"></i> دليل التسجيل والحصول على البيانات
                                </a>
                            </div>
                        @endif
                    </div>

                    <h4 class="mb-2">بيانات الاعتماد</h4>
                    <div class="row g-3">
                        @foreach($meta['fields'] as $key => $field)
                            @php
                                $hasValue = isset($creds[$key]) && $creds[$key] !== '';
                                $isSecret = ! empty($field['secret']);
                                $shownValue = $isSecret && $hasValue ? '' : ($creds[$key] ?? '');
                                $colClass = ($field['type'] ?? 'text') === 'textarea' ? 'col-12' : 'col-md-6';
                            @endphp
                            <div class="{{ $colClass }}">
                                <label class="form-label">
                                    {{ $field['label'] }}
                                    @if(! empty($field['required']))<span class="text-danger">*</span>@endif
                                </label>

                                @if(($field['type'] ?? 'text') === 'textarea')
                                    <textarea name="credentials[{{ $key }}]" rows="4"
                                              class="form-control font-monospace"
                                              placeholder="{{ $field['placeholder'] ?? ($isSecret && $hasValue ? $secretMask : '') }}">{{ $shownValue }}</textarea>
                                @else
                                    <input type="{{ $isSecret ? 'password' : ($field['type'] ?? 'text') }}"
                                           name="credentials[{{ $key }}]"
                                           class="form-control"
                                           value="{{ $shownValue }}"
                                           placeholder="{{ $field['placeholder'] ?? ($isSecret && $hasValue ? $secretMask : '') }}"
                                           autocomplete="off">
                                @endif

                                @if(! empty($field['help']))
                                    <small class="text-muted d-block mt-1">{{ $field['help'] }}</small>
                                @endif
                                @if($isSecret && $hasValue)
                                    <small class="text-success d-block mt-1">
                                        <i class="ti ti-lock me-1"></i> محفوظ — اتركه فارغًا للإبقاء عليه.
                                    </small>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="card-footer d-flex flex-wrap gap-2 justify-content-end">
                    @if($integration->exists)
                        <button type="button" class="btn btn-outline-secondary integration-test">
                            <span class="btn-label"><i class="ti ti-plug-connected me-1"></i> فحص الاتصال</span>
                            <span class="spinner-border spinner-border-sm d-none ms-1"></span>
                        </button>
                    @endif
                    <button type="submit" class="btn btn-primary integration-save">
                        <span class="btn-label"><i class="ti ti-device-floppy me-1"></i> حفظ</span>
                        <span class="spinner-border spinner-border-sm d-none ms-1"></span>
                    </button>
                </div>
            </form>
        </div>
    @endforeach
</div>
@endsection

@push('scripts')
<script>
(function () {
    function setLoading($btn, isLoading) {
        $btn.prop('disabled', isLoading);
        $btn.find('.btn-label').toggleClass('d-none', isLoading);
        $btn.find('.spinner-border').toggleClass('d-none', ! isLoading);
    }

    /* Switch label sync */
    $(document).on('change', '.integration-toggle', function () {
        const $label = $(this).closest('.form-switch').find('.switch-state');
        const on = $(this).is(':checked');
        $label.text(on ? 'مفعّل' : 'معطّل')
              .toggleClass('text-success', on)
              .toggleClass('text-muted', ! on);
    });

    /* Save */
    $('.integration-card').on('submit', function (e) {
        e.preventDefault();
        const $form = $(this);
        const $btn = $form.find('.integration-save');
        setLoading($btn, true);

        $.ajax({
            url: $form.data('update-url'),
            method: 'PUT',
            data: $form.serialize(),
            globalErrorHandled: true,
        }).done(res => {
            Notify.success(res.message || 'تم الحفظ.');
            // Clear secret inputs (they re-mask on next load anyway).
            $form.find('input[type="password"], textarea').each(function () {
                if ($(this).val()) {
                    $(this).val('').attr('placeholder', '••••••••');
                }
            });
        }).fail(xhr => {
            const msg = xhr.responseJSON?.message
                || Object.values(xhr.responseJSON?.errors || {}).flat().join(' • ')
                || 'تعذّر الحفظ.';
            Notify.error(msg);
        }).always(() => setLoading($btn, false));
    });

    /* Test connection */
    $('.integration-test').on('click', function () {
        const $btn = $(this);
        const $form = $btn.closest('.integration-card');
        setLoading($btn, true);

        $.ajax({
            url: $form.data('test-url'),
            method: 'POST',
            data: { _token: $form.find('input[name="_token"]').val() },
            globalErrorHandled: true,
        }).done(res => {
            Notify.success(res.message || 'تم الاتصال بنجاح.');
        }).fail(xhr => {
            Notify.error(xhr.responseJSON?.message || 'فشل الاتصال.');
        }).always(() => setLoading($btn, false));
    });
})();
</script>
@endpush