@extends('layouts.app')
@section('content')
<div class="mx-auto max-w-2xl" x-data="botCreator({{ \Illuminate\Support\Js::from($templates->keyBy('id')) }}, {{ \Illuminate\Support\Js::from(request('template')) }})">
    <div class="mb-5"><a href="{{ route('dashboard') }}" class="inline-flex items-center gap-1 text-sm font-black text-teal-700"><x-icon name="arrow-left" size="16" /> Back</a><p class="eyebrow mt-6">New connection</p><h1 class="mt-2 text-3xl font-black tracking-tight">Connect a bot</h1><p class="mt-1 text-sm text-slate-500">Set up a trusted module in three short steps.</p></div>
    <div class="mb-5 flex items-center gap-2 text-[10px] font-black uppercase tracking-wider text-slate-400"><template x-for="n in [1,2,3]" :key="n"><span class="flex items-center gap-2"><span :class="step >= n ? 'bg-teal-600 text-white' : 'bg-slate-100 text-slate-400'" class="flex h-7 w-7 items-center justify-center rounded-full" x-text="step > n ? '✓' : n"></span><span x-text="n === 1 ? 'Template' : (n === 2 ? 'Setup' : 'Connect')"></span><span x-show="n < 3" class="mx-1 h-px w-4 bg-slate-200"></span></span></template></div>
    <x-flash />
    <form method="POST" action="{{ route('bots.store') }}" class="space-y-5" @submit="connecting = true">@csrf<input type="hidden" name="template_id" :value="templateId"><input type="hidden" name="internal_name" :value="internalName"><template x-for="(value, key) in configuration" :key="key"><input type="hidden" :name="`configuration[${key}]`" :value="value">
        <section x-show="step === 1" x-cloak class="app-card p-5 sm:p-7"><p class="eyebrow">Step 01 · Choose</p><h2 class="mt-2 text-2xl font-black">Pick your bot template.</h2><p class="mt-1 text-sm leading-6 text-slate-500">Only modules published by your administrator appear here.</p><div class="mt-6 grid gap-3">@foreach($templates as $template)<button type="button" @click="selectTemplate({{ $template->id }})" :class="templateId === {{ $template->id }} ? 'border-teal-400 bg-teal-50 ring-2 ring-teal-100' : 'border-slate-200 bg-white hover:border-teal-300'" class="flex w-full items-start gap-3 rounded-3xl border p-4 text-left transition"><span class="premium-icon-tile {{ $template->icon === 'message' ? 'violet' : ($template->icon === 'link' ? 'orange' : '') }} h-11 w-11 shrink-0"><x-icon :name="$template->icon === 'message' ? 'message' : ($template->icon === 'link' ? 'link' : 'sparkles')" size="20" /></span><span class="min-w-0 flex-1"><span class="flex items-center justify-between gap-3"><span class="text-sm font-black">{{ $template->name }}</span><span x-show="templateId === {{ $template->id }}" class="text-teal-600"><x-icon name="check" size="18" /></span></span><span class="mt-1 block text-xs leading-5 text-slate-500">{{ $template->description }}</span><span class="mt-3 inline-flex rounded-full bg-slate-50 px-2 py-1 text-[10px] font-black text-slate-400">v{{ $template->version }}</span></span></button>@endforeach</div><button type="button" @click="step = 2" :disabled="!templateId" class="btn-primary mt-6 w-full">Continue <x-icon name="arrow-right" size="17" /></button></section>
        <section x-show="step === 2" x-cloak class="app-card p-5 sm:p-7"><button type="button" @click="step = 1" class="inline-flex items-center gap-1 text-sm font-black text-teal-700"><x-icon name="arrow-left" size="15" /> Change template</button><p class="eyebrow mt-6">Step 02 · Setup</p><h2 class="mt-2 text-2xl font-black">Give it a purpose.</h2><p class="mt-1 text-sm leading-6 text-slate-500">Only fields exposed by the selected module are shown.</p><div class="mt-6 space-y-5"><div><label class="mb-2 block text-sm font-black">Internal bot name <span class="font-normal text-slate-400">(optional)</span></label><input class="app-input" x-model="internalName" placeholder="e.g. Community helper"><p class="mt-2 text-xs text-slate-400">Your private BOTz Cloner label. It cannot change the Telegram BotFather name.</p></div><template x-for="(field, key) in selected.configuration_schema" :key="key"><div><label class="mb-2 block text-sm font-black" x-text="field.label"></label><template x-if="field.type === 'boolean'"><label class="flex items-center gap-3 rounded-2xl border border-slate-200 bg-slate-50 p-4"><input type="checkbox" class="h-4 w-4 rounded border-slate-300 text-teal-600 focus:ring-teal-500" x-model="configuration[key]"><span class="text-xs text-slate-500" x-text="field.description || 'Enabled'"></span></label></template><template x-if="field.type !== 'boolean'"><input class="app-input" :maxlength="field.max || 255" x-model="configuration[key]" :placeholder="field.default || ''"><p x-show="field.description" class="mt-2 text-xs text-slate-400" x-text="field.description"></p></template></div></template></div><button type="button" @click="step = 3" class="btn-primary mt-6 w-full">Review connection <x-icon name="arrow-right" size="17" /></button></section>
        <section x-show="step === 3" x-cloak class="app-card p-5 sm:p-7"><button type="button" @click="step = 2" class="inline-flex items-center gap-1 text-sm font-black text-teal-700"><x-icon name="arrow-left" size="15" /> Back to setup</button><p class="eyebrow mt-6">Step 03 · Connect</p><h2 class="mt-2 text-2xl font-black">Bring it online.</h2><p class="mt-1 text-sm leading-6 text-slate-500">Paste your BotFather token. It is encrypted and never shown again.</p><div class="mt-6"><label class="mb-2 block text-sm font-black">Telegram Bot Token</label><input required name="telegram_token" type="password" autocomplete="new-password" class="app-input font-mono" placeholder="123456789:••••••••••••"><p class="mt-2 text-xs text-slate-400">We will call getMe, configure the webhook, and verify the connection with Telegram.</p></div><div class="mt-5 flex items-start gap-3 rounded-2xl border border-teal-100 bg-teal-50 p-4 text-xs leading-5 text-teal-800"><x-icon name="shield" size="17" /><span><strong>Secure handoff.</strong> Your token stays server-side. The public webhook never contains it.</span></div><div class="mt-6 flex gap-2"><button type="button" @click="step = 2" class="btn-secondary flex-1">Back</button><button :disabled="connecting" class="btn-primary flex-1"><span x-show="!connecting">Connect bot <x-icon name="arrow-right" size="17" /></span><span x-show="connecting" x-cloak>Connecting…</span></button></div></section>
    </form>
</div>
<script>function botCreator(templates, initial){return {templates,step:1,templateId:initial?Number(initial):null,internalName:'',configuration:{},connecting:false,get selected(){return this.templates[this.templateId]||{configuration_schema:{},default_settings:{}}},selectTemplate(id){this.templateId=id;this.configuration=JSON.parse(JSON.stringify(this.selected.default_settings||{}));this.internalName=this.selected.name||'';}};</script>
@endsection