@extends('layouts.app')

@section('title', 'Instagram Bot – Social Networks')

@section('content')
<div class="social-networks-page instagram-bot-settings-page">
    <p class="setting-back">
        <a href="{{ route('social-networks.index') }}">← Social Networks</a>
    </p>
    <header class="setting-header">
        <h1>Instagram Bot</h1>
        <p class="setting-subtitle">Connect the Instagram Messaging API for DMs. Set the webhook URL and verify token in your Meta app to receive and send messages.</p>
    </header>

    @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if (session('verify_token_result') || session('verify_webhook_result'))
        <div class="alert instagram-verify-result">
            @if (session('verify_token_result'))
                <p style="margin: 0 0 0.5rem 0;"><strong>Token:</strong> @if(session('verify_token_ok'))<span style="color: #059669;">✓</span>@else<span style="color: #b91c1c;">✗</span>@endif {{ session('verify_token_result') }}</p>
            @endif
            @if (session('verify_webhook_result'))
                <p style="margin: 0;"><strong>Webhook:</strong> @if(session('verify_webhook_ok'))<span style="color: #059669;">✓</span>@else<span style="color: #92400e;">○</span>@endif {{ session('verify_webhook_result') }}</p>
            @endif
        </div>
    @endif
    @if ($errors->any())
        <div class="alert alert-error">
            <ul style="margin: 0; padding-left: 1.25rem;">
                @foreach ($errors->all() as $e)
                    <li>{{ $e }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <section class="setting-section setting-card" style="max-width: 640px;">
        <form action="{{ route('social-networks.instagram-bot.settings') }}" method="POST" class="marketing-settings-form">
            @csrf
            <div class="marketing-settings-grid">
                <div class="marketing-settings-row">
                    <label class="marketing-settings-label" style="display: flex; align-items: flex-start; gap: 0.5rem; font-weight: 600;">
                        <input type="checkbox" name="enable" value="1" @checked(old('enable', $setting->isBotReplyEnabled())) style="margin-top: 0.2rem;">
                        <span>Enable bot (Instagram DMs)</span>
                    </label>
                    <span class="marketing-settings-hint">When unchecked, incoming Instagram DMs are logged but no automatic AI reply is sent. Requires <strong>Enable AI bot globally</strong> in Setting → Social Media. WhatsApp has its own “Enable bot” under WhatsApp Bot Settings.</span>
                </div>
                <div class="marketing-settings-row">
                    <label class="marketing-settings-label" for="instagram_account_id">Instagram Account ID (optional)</label>
                    <input type="text" name="instagram_account_id" id="instagram_account_id" class="marketing-settings-input" placeholder="123456789012345" value="{{ old('instagram_account_id', $setting->getInstagramAccountId()) }}">
                    <span class="marketing-settings-hint">Your Instagram professional account ID. With Instagram Login the API uses <code>/me</code>; optional for send/receive.</span>
                </div>
                <div class="marketing-settings-row">
                    <label class="marketing-settings-label" for="access_token">Access Token</label>
                    <input type="password" name="access_token" id="access_token" class="marketing-settings-input" placeholder="EAAxxxx..." value="" autocomplete="off">
                    <span class="marketing-settings-hint">Use a token that works for <strong>sending</strong> DMs: usually a <strong>Facebook Page access token</strong> (Graph <code>graph.facebook.com</code>) for the Page linked to this Instagram professional account. Instagram Login user tokens validate on <code>graph.instagram.com</code> but often fail on <code>graph.facebook.com/me/messages</code> with error 190 unless Meta accepts them on both hosts. Scopes: <code>instagram_business_manage_messages</code> and <code>instagram_business_basic</code>. Leave blank to keep current token.</span>
                </div>
                <div class="marketing-settings-row">
                    <label class="marketing-settings-label" for="verify_token">Verify Token</label>
                    <input type="text" name="verify_token" id="verify_token" class="marketing-settings-input" placeholder="my-secret-verify-token" value="{{ old('verify_token', $setting->getVerifyToken()) }}">
                    <span class="marketing-settings-hint">A secret string you choose. Enter the same value in Meta app → Webhooks → Verify token.</span>
                </div>
                <div class="marketing-settings-row">
                    <label class="marketing-settings-label" for="allowed_sender_ids">Allowed sender IDs (optional)</label>
                    <textarea name="allowed_sender_ids" id="allowed_sender_ids" class="marketing-settings-input" rows="3" placeholder="One Instagram-scoped user ID per line or comma-separated">{{ old('allowed_sender_ids', $setting->allowed_sender_ids ?? '') }}</textarea>
                    <span class="marketing-settings-hint">Leave empty so the bot replies to <strong>everyone</strong>. To test while the Meta app is <strong>Live</strong> without auto-replying to the public, list only the numeric sender IDs that may receive bot replies (same IDs Meta sends as <code>sender.id</code> in the webhook). After someone writes and is blocked, check <code>storage/logs/instagram-webhook.log</code> for <code>skip: sender not in allowlist</code> and copy <code>sender_id</code> here.</span>
                </div>
            </div>
            <div class="marketing-settings-actions">
                <button type="submit" class="btn btn-primary">Save settings</button>
            </div>
        </form>
    </section>

    <section class="setting-section setting-card" style="max-width: 640px; margin-top: 1.5rem;">
        <h2 class="setting-subsection-title">Webhook URL</h2>
        <p class="setting-subtitle">In <a href="https://developers.facebook.com/apps" target="_blank" rel="noopener">Meta for Developers</a> → Your App → <strong>Instagram</strong> → Webhooks (or Configuration), set:</p>
        <ul style="margin: 0.5rem 0 1rem 1.25rem; color: #4b5563;">
            <li><strong>Callback URL:</strong> <code id="webhook-url" style="background: #f3f4f6; padding: 0.25rem 0.5rem; border-radius: 4px; word-break: break-all;">{{ $webhookUrl }}</code></li>
            <li><strong>Verify token:</strong> the same value you saved above.</li>
        </ul>
        <p class="setting-subtitle" style="margin: 0;">Subscribe to <strong>messages</strong> (and optionally <strong>message_reactions</strong>, <strong>messaging_postbacks</strong>).</p>
        <p class="setting-subtitle" style="margin: 0.5rem 0 0 0;"><strong>Modo Live vs pruebas:</strong> si la app no está en <strong>Live</strong>, Meta suele <strong>no enviar webhooks</strong> de DMs salvo para cuentas con rol en la app o probadoras. Tokens del bot se guardan arriba (base de datos), igual que WhatsApp en su pantalla — no hace falta duplicarlos en <code>.env</code>. Con la app en Live, usa <strong>Allowed sender IDs</strong> arriba para limitar quién recibe respuestas automáticas; vacío = todos.</p>
        @if($setting->isConnected())
            <p style="margin-top: 1rem; color: #059669; font-weight: 600;">✓ Instagram Bot is connected (token set).</p>
        @else
            <p style="margin-top: 1rem; color: #92400e;">Fill Access Token and Verify Token and save to connect.</p>
        @endif
    </section>

    <section class="setting-section setting-card" style="max-width: 640px; margin-top: 1.5rem;">
        <h2 class="setting-subsection-title">Instagram Bot</h2>
        <p class="setting-subtitle">AI-powered replies using Shopify catalog. View DM conversations from Instagram.</p>
        <p style="margin: 0.75rem 0 0 0;">
            <a href="{{ route('instagram.conversations.index') }}" class="btn btn-secondary">Conversations</a>
        </p>
    </section>

    <section class="setting-section setting-card" style="max-width: 640px; margin-top: 1.5rem;">
        <h2 class="setting-subsection-title">Connection status</h2>
        <p class="setting-subtitle">Token is checked against Meta when you open this page. Click the button below to re-check token and whether the webhook has received events.</p>
        @if($setting->isConnected())
            @if($tokenValid)
                <p style="margin: 0.5rem 0 0 0; color: #059669; font-weight: 600;">✓ {{ $tokenMessage }}</p>
            @else
                <p style="margin: 0.5rem 0 0 0; color: #b91c1c;">✗ {{ $tokenMessage }}</p>
            @endif
        @else
            <p style="margin: 0.5rem 0 0 0; color: #6b7280;">Save an Access Token above to verify connection.</p>
        @endif
        @if(isset($lastWebhookReceived) && $lastWebhookReceived)
            <p style="margin: 0.5rem 0 0 0; color: #059669;">✓ Webhook last received: {{ \Carbon\Carbon::parse($lastWebhookReceived)->diffForHumans() }}.</p>
        @endif
        <form action="{{ route('social-networks.instagram-bot.verify') }}" method="POST" style="margin-top: 1rem;">
            @csrf
            <button type="submit" class="btn btn-primary">Verify connection</button>
        </form>
        <p style="margin-top: 1rem; font-size: 0.85rem; color: #6b7280;">To confirm the webhook is working, use the <strong>Test</strong> button in Meta App Dashboard → Webhooks to send a sample, or send a DM to your Instagram account.</p>
    </section>
</div>
@push('styles')
<style>
.instagram-bot-settings-page .setting-back { margin-bottom: 1rem; }
.instagram-bot-settings-page .setting-back a { color: #4b5563; text-decoration: none; }
.instagram-bot-settings-page .setting-back a:hover { color: #111; text-decoration: underline; }
.instagram-bot-settings-page .setting-subsection-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.5rem 0; color: #111; }
.setting-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem; }
.marketing-settings-grid { display: flex; flex-direction: column; gap: 1rem; }
.marketing-settings-row { display: flex; flex-direction: column; gap: 0.25rem; }
.marketing-settings-label { font-weight: 600; font-size: 0.9rem; color: #374151; }
.marketing-settings-input { padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1rem; max-width: 100%; }
textarea.marketing-settings-input { min-height: 4.5rem; resize: vertical; font-family: inherit; }
.marketing-settings-hint { font-size: 0.8rem; color: #6b7280; }
.marketing-settings-actions { margin-top: 1.25rem; }
.instagram-verify-result { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; padding: 0.75rem 1rem; border-radius: 6px; }
</style>
@endpush
@endsection