@extends('admin.layouts.app')

@section('title', __('admin.teams_webinars.title') . ' — ' . __('admin.brand.name'))
@section('page_title', __('admin.teams_webinars.title'))

@push('styles')
<style>
    .mtw-shell { display: grid; gap: 18px; max-width: 940px; }
    .mtw-card {
        background: #fff; border: 1px solid var(--na-border, #e5e7eb); border-radius: 14px;
        padding: 22px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    }
    .mtw-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
    .mtw-card-icon {
        width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center;
        color: #fff; background: linear-gradient(135deg, #4f46e5, #6366f1);
    }
    .mtw-card-icon svg { width: 20px; height: 20px; }
    .mtw-card-title { font-size: 15px; font-weight: 700; color: var(--na-text, #0f172a); }
    .mtw-card-subtitle { font-size: 12.5px; color: #64748b; margin-top: 1px; }
    .mtw-status-row { display: flex; align-items: center; gap: 10px; margin: 6px 0 16px; }
    .mtw-meta { display: grid; grid-template-columns: 1fr; gap: 1px; border: 1px solid var(--na-border, #e5e7eb); border-radius: 12px; overflow: hidden; }
    .mtw-meta__row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 14px; background: #fff; }
    .mtw-meta__row + .mtw-meta__row { border-top: 1px solid #f1f5f9; }
    .mtw-meta__k { color: #64748b; font-weight: 600; font-size: 13px; }
    .mtw-meta__v { color: var(--na-text, #0f172a); font-weight: 700; font-size: 13px; text-align: end; word-break: break-word; }
    .mtw-meta__v--error { color: #b91c1c; font-weight: 600; }
    .mtw-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; }
    .mtw-actions form { margin: 0; }
    .mtw-probe { display: inline-flex; gap: 6px; align-items: center; }
    .mtw-probe input {
        border: 1px solid var(--na-border, #e5e7eb); border-radius: 10px; padding: 8px 10px; font-size: 13px; width: 190px;
    }
    .btn-primary {
        background: #4f46e5; color: #fff; border: 1px solid #4f46e5; padding: 9px 16px;
        border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none;
        display: inline-flex; align-items: center; gap: 7px;
    }
    .btn-primary:hover { background: #4338ca; }
    .mtw-note { font-size: 12.5px; color: #64748b; line-height: 1.6; }
    .mtw-scopes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
    .mtw-scope { font-size: 11px; font-weight: 600; color: #3730a3; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 999px; padding: 2px 8px; }
</style>
@endpush

@section('content')
    <x-admin.page-header
        :title="__('admin.teams_webinars.title')"
        :subtitle="__('admin.teams_webinars.subtitle')" />

    @include('admin.partials.flash')

    @php
        $s = $snapshot['status'];
        [$badgeColor, $badgeLabel] = match ($s) {
            \App\Models\GraphOAuthToken::STATUS_CONNECTED          => ['#16a34a', __('admin.teams_webinars.status.connected')],
            \App\Models\GraphOAuthToken::STATUS_RECONNECT_REQUIRED => ['#dc2626', __('admin.teams_webinars.status.reconnect_required')],
            \App\Models\GraphOAuthToken::STATUS_EXPIRED            => ['#d97706', __('admin.teams_webinars.status.expired')],
            default                                                => ['#64748b', __('admin.teams_webinars.status.disconnected')],
        };
        $connected = $snapshot['connected'];
        $rel = fn ($iso) => $iso ? \Illuminate\Support\Carbon::parse($iso)->diffForHumans() : '—';
        $abs = fn ($iso) => $iso ? \Illuminate\Support\Carbon::parse($iso)->format('Y-m-d H:i') : null;
    @endphp

    <div class="mtw-shell">
        <section class="mtw-card">
            <div class="mtw-card-head">
                <span class="mtw-card-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
                </span>
                <div>
                    <div class="mtw-card-title">{{ __('admin.teams_webinars.connection.title') }}</div>
                    <div class="mtw-card-subtitle">{{ __('admin.teams_webinars.connection.subtitle') }}</div>
                </div>
            </div>

            <div class="mtw-status-row">
                <x-admin.badge :label="$badgeLabel" :color="$badgeColor" />
                @unless ($enabled)
                    <span class="mtw-note">· {{ __('admin.teams_webinars.feature_disabled') }}</span>
                @endunless
            </div>

            <div class="mtw-meta">
                <div class="mtw-meta__row">
                    <span class="mtw-meta__k">{{ __('admin.teams_webinars.fields.organizer') }}</span>
                    <span class="mtw-meta__v">{{ $snapshot['organizer_name'] ?: $organizerUpn }}</span>
                </div>
                <div class="mtw-meta__row">
                    <span class="mtw-meta__k">{{ __('admin.teams_webinars.fields.organizer_email') }}</span>
                    <span class="mtw-meta__v">{{ $snapshot['organizer_email'] ?: $organizerUpn }}</span>
                </div>
                <div class="mtw-meta__row">
                    <span class="mtw-meta__k">{{ __('admin.teams_webinars.fields.connected_since') }}</span>
                    <span class="mtw-meta__v" @if($abs($snapshot['connected_at'])) title="{{ $abs($snapshot['connected_at']) }}" @endif>{{ $rel($snapshot['connected_at']) }}</span>
                </div>
                <div class="mtw-meta__row">
                    <span class="mtw-meta__k">{{ __('admin.teams_webinars.fields.last_refresh') }}</span>
                    <span class="mtw-meta__v" @if($abs($snapshot['last_refresh_at'])) title="{{ $abs($snapshot['last_refresh_at']) }}" @endif>{{ $rel($snapshot['last_refresh_at']) }}</span>
                </div>
                <div class="mtw-meta__row">
                    <span class="mtw-meta__k">{{ __('admin.teams_webinars.fields.last_graph_call') }}</span>
                    <span class="mtw-meta__v" @if($abs($snapshot['last_graph_call_at'])) title="{{ $abs($snapshot['last_graph_call_at']) }}" @endif>{{ $rel($snapshot['last_graph_call_at']) }}</span>
                </div>
                <div class="mtw-meta__row">
                    <span class="mtw-meta__k">{{ __('admin.teams_webinars.fields.token_expires') }}</span>
                    <span class="mtw-meta__v" @if($abs($snapshot['access_token_expires_at'])) title="{{ $abs($snapshot['access_token_expires_at']) }}" @endif>{{ $rel($snapshot['access_token_expires_at']) }}</span>
                </div>
                @if (!empty($snapshot['scopes']))
                    <div class="mtw-meta__row">
                        <span class="mtw-meta__k">{{ __('admin.teams_webinars.fields.scopes') }}</span>
                        <span class="mtw-scopes">@foreach ($snapshot['scopes'] as $scope)<span class="mtw-scope">{{ $scope }}</span>@endforeach</span>
                    </div>
                @endif
                @if (!empty($snapshot['last_error']))
                    <div class="mtw-meta__row">
                        <span class="mtw-meta__k">{{ __('admin.teams_webinars.fields.last_error') }}</span>
                        <span class="mtw-meta__v mtw-meta__v--error" @if($abs($snapshot['last_error_at'])) title="{{ $abs($snapshot['last_error_at']) }}" @endif>{{ \Illuminate\Support\Str::limit($snapshot['last_error'], 220) }}</span>
                    </div>
                @endif
            </div>

            <div class="mtw-actions">
                @if ($connected)
                    <a href="{{ route('admin.teams-webinars.connect') }}" class="btn-secondary">{{ __('admin.teams_webinars.buttons.reconnect') }}</a>
                    <form method="POST" action="{{ route('admin.teams-webinars.test') }}">@csrf
                        <button type="submit" class="btn-secondary">{{ __('admin.teams_webinars.buttons.test') }}</button>
                    </form>
                    <form method="POST" action="{{ route('admin.teams-webinars.probe') }}" class="mtw-probe">@csrf
                        <input type="email" name="email" placeholder="{{ __('admin.teams_webinars.probe_email_placeholder') }}" autocomplete="off">
                        <button type="submit" class="btn-secondary">{{ __('admin.teams_webinars.buttons.probe') }}</button>
                    </form>
                    <form method="POST" action="{{ route('admin.teams-webinars.disconnect') }}"
                          onsubmit="return confirm('{{ __('admin.teams_webinars.confirm_disconnect') }}');">@csrf
                        <button type="submit" class="btn-danger">{{ __('admin.teams_webinars.buttons.disconnect') }}</button>
                    </form>
                @else
                    <a href="{{ route('admin.teams-webinars.connect') }}" class="btn-primary">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
                        {{ __('admin.teams_webinars.buttons.connect') }}
                    </a>
                @endif
            </div>
        </section>

        <section class="mtw-card">
            <div class="mtw-card-title" style="margin-bottom:8px;">{{ __('admin.teams_webinars.how.title') }}</div>
            <p class="mtw-note">{{ __('admin.teams_webinars.how.body') }}</p>
        </section>
    </div>
@endsection