@extends('admin.layouts.app')

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

@push('styles')
<style>
    /* Page shell — single centred column, matches the Actions / Automations
       option-edit screens used elsewhere in /admin. */
    .ai-conn { max-width: 880px; margin: 16px auto 0; display: grid; gap: 18px; }

    .ai-card {
        background: #fff;
        border: 1px solid #eef2f7;
        border-radius: 16px;
        box-shadow: 0 1px 2px rgba(15,23,42,.03), 0 4px 12px -8px rgba(15,23,42,.06);
        overflow: hidden;
    }
    .ai-card__head {
        padding: 16px 22px;
        border-bottom: 1px solid #f1f5f9;
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px;
    }
    .ai-card__head h3 {
        margin: 0; font-size: 15px; font-weight: 700; color: #0f172a;
        letter-spacing: -.005em;
    }
    .ai-card__body { padding: 22px; display: flex; flex-direction: column; gap: 18px; }

    .ai-help { font-size: 12.5px; color: #475569; line-height: 1.6; }

    /* Form row reuse — same look as automation form rows. */
    .ai-field { display: grid; gap: 7px; }
    .ai-field > label {
        font-size: 12.5px; font-weight: 700; color: #334155;
    }
    .ai-field input[type="text"] {
        width: 100%;
        padding: 10px 14px;
        background: #fff;
        border: 1px solid #e2e8f0; border-radius: 10px;
        font-size: 14px; color: #0f172a;
        transition: border-color .15s, box-shadow .15s;
    }
    .ai-field input[type="text"]:focus {
        outline: none; border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99,102,241,.16);
    }

    /* Connector radio group */
    .ai-conn-options {
        display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    }
    .ai-conn-option {
        display: flex; flex-direction: column; gap: 4px;
        padding: 14px 16px;
        background: #f8fafc;
        border: 2px solid #e2e8f0; border-radius: 12px;
        cursor: pointer;
        transition: border-color .12s, background-color .12s;
    }
    .ai-conn-option input { display: none; }
    .ai-conn-option__title { font-size: 13.5px; font-weight: 800; color: #0f172a; }
    .ai-conn-option__hint  { font-size: 12px; color: #64748b; line-height: 1.5; }
    .ai-conn-option:has(input:checked) {
        border-color: #6366f1; background: #eef2ff;
    }
    .ai-conn-option:has(input:checked) .ai-conn-option__title { color: #4338ca; }

    .ai-actions { display: flex; gap: 10px; justify-content: flex-end; }
    .ai-btn-primary {
        padding: 10px 18px;
        background: #4f46e5; color: #fff;
        border: 0; border-radius: 10px;
        font-size: 13.5px; font-weight: 700; cursor: pointer;
        transition: background-color .12s;
    }
    .ai-btn-primary:hover { background: #4338ca; }
    .ai-btn-ghost {
        padding: 8px 14px;
        background: transparent; color: #64748b;
        border: 1px solid #e2e8f0; border-radius: 10px;
        font-size: 12.5px; font-weight: 700; cursor: pointer;
    }
    .ai-btn-danger {
        padding: 6px 12px;
        background: transparent; color: #b91c1c;
        border: 1px solid #fecaca; border-radius: 8px;
        font-size: 12px; font-weight: 700; cursor: pointer;
    }
    .ai-btn-danger:hover { background: #fef2f2; }

    /* Fresh-token disclosure card — bright yellow border so it can't be
       missed. The plain token is shown once; refreshing the page hides
       it forever (it's flashed in session, not persisted). */
    .ai-token-fresh {
        background: #fffbeb;
        border: 2px solid #fbbf24;
        border-radius: 14px;
        padding: 18px 20px;
        display: flex; flex-direction: column; gap: 12px;
    }
    .ai-token-fresh__head {
        display: flex; align-items: center; gap: 10px;
        font-size: 13.5px; font-weight: 800; color: #92400e;
    }
    .ai-token-fresh__value {
        display: flex; align-items: stretch; gap: 8px;
    }
    .ai-token-fresh__value code {
        flex: 1;
        padding: 10px 14px;
        background: #fff;
        border: 1px solid #fcd34d; border-radius: 10px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px; color: #0f172a;
        word-break: break-all;
    }
    .ai-token-fresh__copy {
        padding: 0 16px;
        background: #f59e0b; color: #fff;
        border: 0; border-radius: 10px;
        font-size: 12.5px; font-weight: 700; cursor: pointer;
        white-space: nowrap;
    }
    .ai-token-fresh__copy:hover { background: #d97706; }
    .ai-token-fresh__warn { font-size: 12px; color: #92400e; line-height: 1.5; }

    /* Token list table */
    .ai-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
    .ai-tbl th, .ai-tbl td {
        padding: 12px 14px; text-align: start;
        border-bottom: 1px solid #f1f5f9;
    }
    .ai-tbl th {
        font-size: 11.5px; font-weight: 700; color: #64748b;
        text-transform: uppercase; letter-spacing: .03em;
    }
    .ai-tbl tr:last-child td { border-bottom: 0; }
    .ai-pill {
        display: inline-block;
        padding: 3px 10px;
        font-size: 11.5px; font-weight: 700;
        border-radius: 999px;
    }
    .ai-pill--read { background: #dbeafe; color: #1e40af; }
    .ai-pill--full { background: #ede9fe; color: #5b21b6; }
    .ai-empty { color: #94a3b8; font-style: italic; }

    .ai-flash {
        padding: 12px 16px;
        background: #ecfdf5;
        border: 1px solid #a7f3d0;
        color: #065f46;
        border-radius: 10px;
        font-size: 13px; font-weight: 600;
    }
</style>
@endpush

@section('content')
<div class="ai-conn">

    @if (session('status'))
        <div class="ai-flash">{{ session('status') }}</div>
    @endif

    {{-- Fresh-token disclosure (one-shot, flashed in session) --}}
    @if ($freshToken)
        <div class="ai-token-fresh" x-data="{ copied: false }">
            <div class="ai-token-fresh__head">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                {{ __('admin.ai.connectors.fresh.title', ['name' => $freshToken['name']]) }}
            </div>
            <div class="ai-token-fresh__value">
                <code id="ai-fresh-token">{{ $freshToken['plain'] }}</code>
                <button type="button" class="ai-token-fresh__copy"
                        @click="navigator.clipboard.writeText(document.getElementById('ai-fresh-token').innerText).then(() => copied = true)"
                        x-text="copied ? @js(__('admin.ai.connectors.fresh.copied')) : @js(__('admin.ai.connectors.fresh.copy'))"></button>
            </div>
            <div class="ai-token-fresh__warn">
                {{ __('admin.ai.connectors.fresh.warning') }}
            </div>
        </div>
    @endif

    {{-- Issue new token --}}
    <div class="ai-card">
        <div class="ai-card__head">
            <h3>{{ __('admin.ai.connectors.new_title') }}</h3>
        </div>
        <div class="ai-card__body">
            <p class="ai-help">{{ __('admin.ai.connectors.intro') }}</p>

            <form method="POST" action="{{ route('admin.ai.connectors.store') }}" style="display: contents;">
                @csrf

                <div class="ai-field">
                    <label for="ai-conn-name">{{ __('admin.ai.connectors.fields.name') }}</label>
                    <input id="ai-conn-name" type="text" name="name"
                           required maxlength="80"
                           placeholder="{{ __('admin.ai.connectors.fields.name_placeholder') }}"
                           value="{{ old('name') }}">
                    @error('name') <span style="color:#b91c1c;font-size:12px;">{{ $message }}</span> @enderror
                </div>

                <div class="ai-field">
                    <label>{{ __('admin.ai.connectors.fields.connector') }}</label>
                    <div class="ai-conn-options">
                        <label class="ai-conn-option">
                            <input type="radio" name="connector" value="read"
                                   {{ old('connector') === 'read' ? 'checked' : '' }}>
                            <span class="ai-conn-option__title">{{ __('admin.ai.connectors.types.read.title') }}</span>
                            <span class="ai-conn-option__hint">{{ __('admin.ai.connectors.types.read.hint') }}</span>
                        </label>
                        <label class="ai-conn-option">
                            <input type="radio" name="connector" value="full"
                                   {{ old('connector', 'full') === 'full' ? 'checked' : '' }}>
                            <span class="ai-conn-option__title">{{ __('admin.ai.connectors.types.full.title') }}</span>
                            <span class="ai-conn-option__hint">{{ __('admin.ai.connectors.types.full.hint') }}</span>
                        </label>
                    </div>
                    @error('connector') <span style="color:#b91c1c;font-size:12px;">{{ $message }}</span> @enderror
                </div>

                <div class="ai-actions">
                    <button type="submit" class="ai-btn-primary">
                        {{ __('admin.ai.connectors.actions.generate') }}
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- Existing tokens --}}
    <div class="ai-card">
        <div class="ai-card__head">
            <h3>{{ __('admin.ai.connectors.list_title') }} <span style="color:#94a3b8;font-weight:600;">({{ count($tokens) }})</span></h3>
        </div>
        <div class="ai-card__body" style="padding: 0;">
            @if (count($tokens) === 0)
                <div class="ai-empty" style="padding: 22px;">
                    {{ __('admin.ai.connectors.empty') }}
                </div>
            @else
                <table class="ai-tbl">
                    <thead>
                        <tr>
                            <th>{{ __('admin.ai.connectors.cols.name') }}</th>
                            <th>{{ __('admin.ai.connectors.cols.connector') }}</th>
                            <th>{{ __('admin.ai.connectors.cols.last_used') }}</th>
                            <th>{{ __('admin.ai.connectors.cols.created') }}</th>
                            <th style="text-align: end;">{{ __('admin.ai.connectors.cols.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($tokens as $tok)
                            <tr>
                                <td><strong>{{ $tok['name'] }}</strong></td>
                                <td>
                                    <span class="ai-pill ai-pill--{{ $tok['connector'] }}">
                                        {{ __('admin.ai.connectors.types.' . $tok['connector'] . '.title') }}
                                    </span>
                                </td>
                                <td>
                                    @if ($tok['last_used'])
                                        <span title="{{ $tok['last_used'] }}">{{ $tok['last_used']->diffForHumans() }}</span>
                                    @else
                                        <span class="ai-empty">{{ __('admin.ai.connectors.never_used') }}</span>
                                    @endif
                                </td>
                                <td><span title="{{ $tok['created_at'] }}">{{ $tok['created_at']->diffForHumans() }}</span></td>
                                <td style="text-align: end;">
                                    <form method="POST" action="{{ route('admin.ai.connectors.destroy', $tok['id']) }}"
                                          onsubmit="return confirm('{{ __('admin.ai.connectors.confirm_revoke', ['name' => $tok['name']]) }}');"
                                          style="display: inline;">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="ai-btn-danger">
                                            {{ __('admin.ai.connectors.actions.revoke') }}
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @endif
        </div>
    </div>

</div>
@endsection