@extends('layouts.app')

@section('title', 'WhatsApp – Social Networks')

@section('content')
<div class="social-networks-page whatsapp-settings-page">
    <p class="setting-back">
        <a href="{{ route('social-networks.index') }}">← Social Networks</a>
    </p>
    <header class="setting-header">
        <h1>WhatsApp Cloud API</h1>
        <p class="setting-subtitle">Connect your WhatsApp Business number using Meta’s Cloud API. Set the webhook URL in your Meta app to receive and send messages.</p>
    </header>

    @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</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.whatsapp.settings') }}" method="POST" class="marketing-settings-form">
            @csrf
            <div class="marketing-settings-grid">
                <div class="marketing-settings-row">
                    <label class="marketing-settings-label" for="phone_display">Your phone number (display)</label>
                    <input type="text" name="phone_display" id="phone_display" class="marketing-settings-input" placeholder="7868993777" value="{{ old('phone_display', $setting->getPhoneDisplay() ?: '7868993777') }}">
                    <span class="marketing-settings-hint">For reference only (e.g. 7868993777). Not used by the API.</span>
                </div>
                <div class="marketing-settings-row">
                    <label class="marketing-settings-label" for="phone_number_id">Phone Number ID</label>
                    <input type="text" name="phone_number_id" id="phone_number_id" class="marketing-settings-input" placeholder="123456789012345" value="{{ old('phone_number_id', $setting->getPhoneNumberId()) }}">
                    <span class="marketing-settings-hint">From Meta Business Suite → WhatsApp → API Setup. Required to send messages.</span>
                </div>
                <div class="marketing-settings-row">
                    <label class="marketing-settings-label" for="whatsapp_business_account_id">WhatsApp Business Account ID (optional)</label>
                    <input type="text" name="whatsapp_business_account_id" id="whatsapp_business_account_id" class="marketing-settings-input" placeholder="123456789012345" value="{{ old('whatsapp_business_account_id', $setting->whatsapp_business_account_id ?? '') }}">
                    <span class="marketing-settings-hint">WABA ID from Meta. Optional for basic 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">Permanent token with <code>whatsapp_business_messaging</code> and <code>whatsapp_business_management</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 → Webhook → Verify token.</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 → WhatsApp → 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_deliveries</strong>, <strong>message_reads</strong>).</p>
        @if($setting->isConnected())
            <p style="margin-top: 1rem; color: #059669; font-weight: 600;">✓ WhatsApp is connected (Phone Number ID and token set).</p>
        @else
            <p style="margin-top: 1rem; color: #92400e;">Fill Phone Number ID and Access 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">WhatsApp Bot</h2>
        <p class="setting-subtitle">AI-powered replies using Shopify catalog. Configure settings, conversations, and business knowledge.</p>
        <p style="margin: 0.75rem 0 0 0;">
            <a href="{{ route('whatsapp.bot.settings') }}" class="btn btn-primary">Bot Settings</a>
            <a href="{{ route('whatsapp.conversations.index') }}" class="btn btn-secondary" style="margin-left: 0.5rem;">Conversations</a>
            <a href="{{ route('whatsapp.bot.business-knowledge') }}" class="btn btn-secondary" style="margin-left: 0.5rem;">Business Knowledge</a>
            <a href="{{ route('whatsapp.bot.tester') }}" class="btn btn-secondary" style="margin-left: 0.5rem;">Bot Tester</a>
        </p>
    </section>
</div>
@push('styles')
<style>
.whatsapp-settings-page .setting-back { margin-bottom: 1rem; }
.whatsapp-settings-page .setting-back a { color: #4b5563; text-decoration: none; }
.whatsapp-settings-page .setting-back a:hover { color: #111; text-decoration: underline; }
.whatsapp-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%; }
.marketing-settings-hint { font-size: 0.8rem; color: #6b7280; }
.marketing-settings-actions { margin-top: 1.25rem; }
</style>
@endpush
@endsection