@extends('layouts.admin')

@section('title', __('automation.integrations.title'))

@section('content')
    <x-admin.page-header
        :title="__('automation.integrations.title')"
        :description="__('automation.integrations.description')"
        :eyebrow="__('automation.integrations.eyebrow')"
    />

    <section class="panel form-stack">
        <div>
            <p class="eyebrow">{{ __('automation.integrations.eyebrow') }}</p>
            <h2>{{ __('automation.integrations.create_connection') }}</h2>
        </div>

        <form class="form-grid" method="POST" action="{{ route('admin.integrations.connections.store') }}">
            @csrf

            <div class="field">
                <label for="connection_name">{{ __('automation.integrations.connection_name') }}</label>
                <input id="connection_name" name="name" placeholder="{{ __('automation.integrations.connection_name') }}" required>
            </div>

            <div class="field">
                <label for="connection_provider">{{ __('automation.integrations.provider') }}</label>
                <select id="connection_provider" name="provider">
                    <option value="null">{{ __('automation.integrations.null_adapter') }}</option>
                </select>
            </div>

            <div class="field full">
                <label>{{ __('automation.integrations.allowed_events') }}</label>
                <div class="choice-grid">
                    @foreach($eventNames as $eventName)
                        <label class="choice">
                            <input type="checkbox" name="allowed_events[]" value="{{ $eventName }}">
                            <span><strong>{{ $eventName }}</strong></span>
                        </label>
                    @endforeach
                </div>
            </div>

            <div class="field">
                <label for="credential">
                    {{ __('automation.integrations.credential') }}
                    <span class="muted">({{ __('automation.integrations.credential_hint') }})</span>
                </label>
                <input id="credential" name="credential" type="password" autocomplete="new-password" placeholder="••••••••••••">
            </div>

            <div class="field">
                <label>{{ __('automation.integrations.title') }}</label>
                <div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
                    <label class="choice" style="flex: 1; min-width: 180px;">
                        <input type="checkbox" name="consent_required" value="1" checked>
                        <span><strong>{{ __('automation.integrations.require_consent') }}</strong></span>
                    </label>
                    <label class="choice" style="flex: 1; min-width: 140px;">
                        <input type="checkbox" name="is_active" value="1" checked>
                        <span><strong>{{ __('automation.integrations.active') }}</strong></span>
                    </label>
                </div>
            </div>

            <div class="form-actions full">
                <button class="button" type="submit">{{ __('automation.integrations.submit_create') }}</button>
            </div>
        </form>
    </section>

    <section class="panel form-stack">
        <h2>{{ __('automation.integrations.configured_connections') }}</h2>

        @if($connections->isEmpty())
            <div class="empty-state">{{ __('automation.integrations.no_connections') }}</div>
        @else
            <div class="duo-grid">
                @foreach($connections as $connection)
                    <article class="panel form-stack" style="background: var(--surface-soft); border: 1px solid var(--border);">
                        <div>
                            <p class="eyebrow">{{ $connection->provider }} · <span class="{{ $connection->is_active ? 'badge-success' : 'badge-neutral' }}">{{ $connection->is_active ? __('automation.integrations.active') : 'Inactive' }}</span></p>
                            <h3>{{ $connection->name }}</h3>
                            <p class="muted" style="font-size: 0.825rem; margin-top: 0.25rem;">
                                {{ $connection->consent_required ? __('automation.integrations.require_consent') : 'No consent required' }}
                            </p>
                        </div>

                        <div style="display: flex; flex-wrap: wrap; gap: 0.35rem;">
                            @foreach($connection->allowed_events as $event)
                                <code style="font-size: 0.75rem; padding: 0.2rem 0.45rem; background: var(--surface); border-radius: 4px;">{{ $event }}</code>
                            @endforeach
                        </div>

                        <details class="record-details">
                            <summary>{{ __('automation.integrations.edit_connection') }}</summary>
                            <form class="form-stack" method="POST" action="{{ route('admin.integrations.connections.update', $connection) }}" style="margin-top: 1rem;">
                                @csrf
                                @method('PUT')
                                <input type="hidden" name="lock_version" value="{{ $connection->lock_version }}">

                                <div class="field">
                                    <label>{{ __('automation.integrations.connection_name') }}</label>
                                    <input name="name" value="{{ $connection->name }}" required>
                                </div>

                                <div class="field">
                                    <label>{{ __('automation.integrations.provider') }}</label>
                                    <select name="provider">
                                        <option value="null">{{ __('automation.integrations.null_adapter') }}</option>
                                    </select>
                                </div>

                                <div class="field">
                                    <label>{{ __('automation.integrations.allowed_events') }}</label>
                                    <div class="choice-grid" style="grid-template-columns: 1fr;">
                                        @foreach($eventNames as $eventName)
                                            <label class="choice">
                                                <input type="checkbox" name="allowed_events[]" value="{{ $eventName }}" @checked(in_array($eventName, $connection->allowed_events, true))>
                                                <span><strong>{{ $eventName }}</strong></span>
                                            </label>
                                        @endforeach
                                    </div>
                                </div>

                                <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
                                    <label class="choice" style="flex: 1;">
                                        <input type="checkbox" name="consent_required" value="1" @checked($connection->consent_required)>
                                        <span><strong>{{ __('automation.integrations.require_consent') }}</strong></span>
                                    </label>
                                    <label class="choice" style="flex: 1;">
                                        <input type="checkbox" name="is_active" value="1" @checked($connection->is_active)>
                                        <span><strong>{{ __('automation.integrations.active') }}</strong></span>
                                    </label>
                                </div>

                                <div class="field">
                                    <label>{{ __('automation.integrations.rotate_credential') }}</label>
                                    <input name="credential" type="password" placeholder="••••••••••••">
                                </div>

                                <button class="button button-secondary" type="submit">{{ __('automation.integrations.submit_save') }}</button>
                            </form>
                        </details>
                    </article>
                @endforeach
            </div>
        @endif
    </section>

    <section class="panel form-stack">
        <h2>{{ __('automation.integrations.outbox_heading') }}</h2>

        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>{{ __('automation.integrations.table.event') }}</th>
                        <th>{{ __('automation.integrations.table.type') }}</th>
                        <th>{{ __('automation.integrations.table.consent') }}</th>
                        <th>{{ __('automation.integrations.table.outbox') }}</th>
                        <th>{{ __('automation.integrations.table.delivery') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($outbox as $message)
                        <tr>
                            <td><code>{{ $message->event_id }}</code></td>
                            <td>{{ $message->payload['event_name'] ?? $message->type }}</td>
                            <td><span class="badge badge-neutral">{{ $message->consent->value }}</span></td>
                            <td><span class="badge badge-info">{{ $message->status->value }}</span><br><span class="muted" style="font-size: 0.75rem;">{{ $message->attempt_count }} attempts</span></td>
                            <td><span class="badge {{ $deliveries->get($message->id)?->status?->value === 'delivered' ? 'badge-success' : 'badge-neutral' }}">{{ $deliveries->get($message->id)?->status?->value ?? 'not targeted' }}</span></td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5"><div class="empty-state">{{ __('automation.integrations.no_outbox') }}</div></td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{ $outbox->links() }}
    </section>
@endsection