{{--
 /devices when active engine = twilio.
 Renders the operator's connected Twilio account or the connect form.
 Mirrors the WABA section's empty-state + card layout so multi-engine
 workspaces feel consistent when they switch between modes.

 Vars expected (passed from DevicesController):
 $twilioAccount — WaProviderConfig row for provider=twilio, or null
 $twilioAdminDefaults — ['account_sid' => str, 'whatsapp_number' => str]
 — soft-hint admin-shared creds the user can
 inherit by leaving fields blank
--}}
@php
    $tw = $twilioAccount ?? null;
    $creds = $tw ? $tw->creds() : [];
    $sandbox = !empty($tw?->meta_json['sandbox']);
    $isConnected = $tw && $tw->isConnected();
    $defaults = is_array($twilioAdminDefaults ?? null)
        ? $twilioAdminDefaults
        : ['account_sid' => '', 'whatsapp_number' => ''];
    $hasAdminDefaults = $defaults['account_sid'] !== '' && $defaults['whatsapp_number'] !== '';
@endphp

<section class="space-y-5">

    @if (!$isConnected)
        {{-- Empty / not-yet-connected state ──────────────────────────── --}}
        <div class="bg-paper-0 border border-paper-200 rounded-[14px] shadow-card overflow-hidden">
            <div class="px-5 py-4 border-b border-paper-200 flex items-center gap-3 flex-wrap">
                <div
                    class="inline-flex items-center justify-center w-10 h-10 rounded-2xl bg-[#F22F46]/10 text-[#A12534] shrink-0">
                    <svg viewBox="0 0 24 24" class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.6">
                        <path d="M3 7l9-4 9 4-9 4-9-4zm0 5l9 4 9-4M3 17l9 4 9-4" />
                    </svg>
                </div>
                <div class="min-w-0">
                    <div class="font-mono text-[10px] uppercase tracking-[0.16em] text-ink-500">
                        {{ __('Twilio · WhatsApp') }}</div>
                    <h2 class="font-serif text-[22px] leading-tight">{{ __('Connect your Twilio account') }}</h2>
                </div>
            </div>

            <div class="p-5 md:p-7">
                <p class="text-[12.5px] text-ink-600 mb-5 max-w-2xl">
                    {{ __('Paste your Twilio Account SID, Auth Token, and the WhatsApp From number Twilio assigned. Use the Sandbox while testing, then switch to a paid Twilio number when you go live.') }}
                </p>

                @if ($hasAdminDefaults)
                    <div
                        class="mb-5 px-4 py-3 rounded-xl bg-wa-mint/40 border border-wa-deep/15 text-[12px] text-ink-700">
                        {{ __('Your platform admin has shared default Twilio credentials. Leave the fields below blank to use them, or paste workspace-specific creds to override.') }}
                    </div>
                @endif

                <form method="POST" action="{{ url('/connect/wa-store/twilio') }}" class="space-y-4">
                    @csrf

                    <div class="grid md:grid-cols-2 gap-4">
                        <label class="block">
                            <span class="text-[11.5px] font-semibold text-ink-700 mb-1.5 block">{{ __('Account SID') }}
                                <span class="text-accent-coral">*</span></span>
                            <input name="account_sid" maxlength="64" placeholder="ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
                                value="{{ old('account_sid') }}"
                                class="w-full px-3 py-2 rounded-xl border border-paper-200 bg-white text-[13px] font-mono focus:outline-none focus:border-wa-deep focus:ring-4 focus:ring-wa-deep/10" />
                            <span
                                class="text-[10.5px] text-ink-500 mt-1 block">{{ __('Found at twilio.com/console') }}</span>
                        </label>
                        <label class="block">
                            <span class="text-[11.5px] font-semibold text-ink-700 mb-1.5 block">{{ __('Auth Token') }}
                                <span class="text-accent-coral">*</span></span>
                            <input name="auth_token" type="password" maxlength="128"
                                placeholder="{{ __('paste from twilio.com/console') }}"
                                class="w-full px-3 py-2 rounded-xl border border-paper-200 bg-white text-[13px] font-mono focus:outline-none focus:border-wa-deep focus:ring-4 focus:ring-wa-deep/10" />
                            <span
                                class="text-[10.5px] text-ink-500 mt-1 block">{{ __('Encrypted at rest — only used to call api.twilio.com on your behalf.') }}</span>
                        </label>
                    </div>

                    <label class="block">
                        <span
                            class="text-[11.5px] font-semibold text-ink-700 mb-1.5 block">{{ __('WhatsApp From number') }}
                            <span class="text-accent-coral">*</span></span>
                        <input name="from_number" maxlength="32"
                            placeholder="+14155238886 (sandbox) or your paid Twilio number"
                            value="{{ old('from_number') }}"
                            class="w-full px-3 py-2 rounded-xl border border-paper-200 bg-white text-[13px] font-mono focus:outline-none focus:border-wa-deep focus:ring-4 focus:ring-wa-deep/10" />
                        <span
                            class="text-[10.5px] text-ink-500 mt-1 block">{{ __('Format: +E.164. Sandbox default is +14155238886.') }}</span>
                    </label>

                    <label class="inline-flex items-center gap-2.5 px-4 py-3 rounded-xl border border-paper-200">
                        <input name="sandbox" type="checkbox" value="1" {{ old('sandbox', '1') ? 'checked' : '' }}
                            class="w-4 h-4 accent-wa-deep" />
                        <span class="text-[12.5px]">
                            {{ __('Use Twilio Sandbox') }}
                            <span
                                class="block text-[10.5px] text-ink-500 mt-0.5">{{ __('Required while your number is in WhatsApp Sandbox mode. Uncheck once Twilio has approved a paid sender.') }}</span>
                        </span>
                    </label>

                    @error('account_sid')
                        <div
                            class="px-3 py-2 rounded-lg bg-accent-coral/10 border border-accent-coral/25 text-[12px] text-accent-coral">
                            {{ $message }}</div>
                    @enderror
                    @error('from_number')
                        <div
                            class="px-3 py-2 rounded-lg bg-accent-coral/10 border border-accent-coral/25 text-[12px] text-accent-coral">
                            {{ $message }}</div>
                    @enderror

                    <div class="flex items-center justify-end gap-2 pt-2 border-t border-paper-100">
                        <button type="submit"
                            class="px-5 py-2 rounded-full bg-wa-deep text-paper-0 text-[12px] font-semibold hover:bg-wa-teal">
                            {{ __('Verify + connect Twilio') }}
                        </button>
                    </div>
                </form>
            </div>{{-- /.p-5 body wrapper --}}
        </div>{{-- /card --}}
    @else
        {{-- Connected — show the account card with disconnect + rotate options. --}}
        <div class="bg-paper-0 border border-paper-200 rounded-[14px] shadow-card overflow-hidden">
            <div class="px-4 py-3 border-b border-paper-200 flex items-center justify-between gap-4 flex-wrap">
                <div class="flex items-center gap-2 text-[12px]">
                    <span
                        class="font-mono text-[10px] uppercase tracking-[0.14em] text-ink-500">{{ __('Workspace · Twilio account') }}</span>
                    <span
                        class="inline-flex items-center px-2 py-0.5 rounded-full bg-[#F22F46]/10 text-[#A12534] border border-[#F22F46]/25 text-[10px] font-mono font-semibold uppercase tracking-wider">
                        {{ $sandbox ? __('Sandbox') : __('Production') }}
                    </span>
                    <span
                        class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-wa-mint/40 text-wa-deep text-[10px] font-mono font-semibold uppercase tracking-wider">
                        <span class="w-1.5 h-1.5 rounded-full bg-wa-green"></span>{{ __('connected') }}
                    </span>
                </div>
                <form method="POST" action="{{ url('/connect/wa-store/twilio') }}"
                    onsubmit="return confirm('Replace these credentials with new ones?');">
                    @csrf
                    <button type="submit"
                        class="px-3 py-1.5 rounded-full border border-paper-200 hover:bg-paper-50 text-[11.5px] font-semibold">
                        {{ __('Reconnect / rotate') }}
                    </button>
                </form>
            </div>

            <div class="p-5">
                <dl class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-[12px]">
                    <div class="min-w-0">
                        <dt class="font-mono text-[10px] uppercase tracking-[0.14em] text-ink-500 mb-1">
                            {{ __('From number') }}</dt>
                        <dd class="font-mono text-ink-900">{{ $tw->phone_number ?: '—' }}</dd>
                    </div>
                    <div class="min-w-0">
                        <dt class="font-mono text-[10px] uppercase tracking-[0.14em] text-ink-500 mb-1">
                            {{ __('Account SID') }}</dt>
                        <dd class="font-mono text-ink-700 truncate" title="{{ $creds['account_sid'] ?? '' }}">
                            {{ $creds['account_sid'] ? substr($creds['account_sid'], 0, 8) . '…' . substr($creds['account_sid'], -4) : '—' }}
                        </dd>
                    </div>
                    <div>
                        <dt class="font-mono text-[10px] uppercase tracking-[0.14em] text-ink-500 mb-1">
                            {{ __('Connected at') }}</dt>
                        <dd class="font-mono text-ink-700">{{ optional($tw->connected_at)->diffForHumans() ?: '—' }}
                        </dd>
                    </div>
                </dl>

                <p class="text-[11.5px] text-ink-500 mt-4 leading-relaxed max-w-2xl">
                    {{ __('All broadcasts, campaigns, scheduled sends, auto-replies, and team-inbox replies on this workspace use this Twilio account. Inbound messages from your customers will be received via the Twilio webhook configured in your Twilio console.') }}
                </p>
            </div>
        </div>

    @endif

</section>