@extends('layouts.app')

@section('title', 'WhatsApp Settings')

@push('styles')
<style>
    .page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
        gap: 1rem;
    }
    .page-header h1 {
        font-size: 1.5rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }
    .page-header h1 i { color: #25D366; }
    .page-header p { color: var(--text-muted); font-size: 0.9rem; margin-top: 0.25rem; }

    .btn-primary {
        display: inline-flex; align-items: center; gap: 0.5rem;
        padding: 0.625rem 1rem; background: var(--accent); color: #fff;
        border: 1px solid var(--accent); border-radius: var(--radius-md);
        font-size: 0.875rem; font-weight: 500; font-family: inherit;
        text-decoration: none; cursor: pointer;
        transition: opacity var(--transition);
    }
    .btn-primary:hover { opacity: 0.9; }

    .btn-outline {
        display: inline-flex; align-items: center; gap: 0.5rem;
        padding: 0.55rem 0.875rem; background: transparent; color: var(--text-secondary);
        border: 1px solid var(--border); border-radius: var(--radius-md);
        font-size: 0.85rem; font-weight: 500; font-family: inherit;
        text-decoration: none; cursor: pointer;
        transition: all var(--transition);
    }
    .btn-outline:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--accent); }

    .btn-wa {
        display: inline-flex; align-items: center; gap: 0.5rem;
        padding: 0.55rem 0.875rem; background: #25D366; color: #fff;
        border: 1px solid #25D366; border-radius: var(--radius-md);
        font-size: 0.85rem; font-weight: 600; font-family: inherit;
        text-decoration: none; cursor: pointer;
        transition: opacity var(--transition);
    }
    .btn-wa:hover { opacity: 0.9; }

    .card {
        background: var(--bg-card); border: 1px solid var(--border);
        border-radius: var(--radius-lg); padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .card h3 {
        font-size: 1rem; font-weight: 600; color: var(--text-primary);
        margin-bottom: 1rem; padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--border);
        display: flex; align-items: center; gap: 0.5rem;
    }
    .card p.lead { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; }

    .intro-card {
        background: linear-gradient(135deg, rgba(37, 211, 102, 0.10), rgba(16, 191, 255, 0.06));
        border: 1px solid rgba(37, 211, 102, 0.3);
    }
    .intro-card h3 { border-bottom-color: rgba(37, 211, 102, 0.25); }
    .intro-card h3 i { color: #25D366; }

    .steps-list {
        list-style: none;
        counter-reset: step;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    .steps-list li {
        counter-increment: step;
        padding: 0.8rem 1rem 0.8rem 3rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        font-size: 0.9rem;
        color: var(--text-primary);
        position: relative;
        line-height: 1.5;
    }
    .steps-list li::before {
        content: counter(step);
        position: absolute;
        left: 0.85rem;
        top: 50%;
        transform: translateY(-50%);
        width: 28px;
        height: 28px;
        background: #25D366;
        color: #fff;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.85rem;
    }

    .webhook-url-box {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.6rem 0.75rem;
        background: var(--bg-tertiary);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        margin-top: 0.6rem;
        flex-wrap: wrap;
    }
    .webhook-url-box code {
        flex: 1;
        min-width: 200px;
        color: var(--accent);
        font-family: monospace;
        font-size: 0.82rem;
        word-break: break-all;
    }

    .form-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1rem;
    }
    .form-row {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }
    .form-row.full { grid-column: 1 / -1; }
    .form-label {
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .form-help {
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-top: 0.2rem;
    }
    .form-input, .form-textarea {
        width: 100%;
        padding: 0.65rem 0.85rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        color: var(--text-primary);
        font-family: inherit;
        font-size: 0.9rem;
        outline: none;
    }
    .form-input:focus, .form-textarea:focus { border-color: var(--accent); }
    .form-input::placeholder { color: var(--text-muted); }

    .input-group {
        display: flex;
        align-items: stretch;
        gap: 0.5rem;
    }
    .input-group .form-input { flex: 1; }

    .toggle-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 0.85rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
    }
    .toggle-row .tr-left { display: flex; flex-direction: column; gap: 0.2rem; }
    .toggle-row strong { font-size: 0.9rem; color: var(--text-primary); }
    .toggle-row span { font-size: 0.78rem; color: var(--text-muted); }

    .switch {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 24px;
        flex-shrink: 0;
    }
    .switch input { opacity: 0; width: 0; height: 0; }
    .slider {
        position: absolute; cursor: pointer; inset: 0;
        background: var(--bg-tertiary);
        border: 1px solid var(--border);
        border-radius: 24px;
        transition: var(--transition);
    }
    .slider::before {
        position: absolute;
        content: "";
        height: 16px; width: 16px;
        left: 3px; bottom: 2px;
        background: #fff;
        border-radius: 50%;
        transition: var(--transition);
    }
    .switch input:checked + .slider { background: #25D366; border-color: #25D366; }
    .switch input:checked + .slider::before { transform: translateX(20px); }

    .form-actions {
        margin-top: 1.25rem;
        padding-top: 1.25rem;
        border-top: 1px solid var(--border);
        display: flex;
        justify-content: flex-end;
        gap: 0.6rem;
    }

    .webhook-test {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
        padding: 1rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
    }
    .webhook-test .wt-info { display: flex; flex-direction: column; gap: 0.25rem; }
    .webhook-test .wt-info strong { color: var(--text-primary); font-size: 0.9rem; }
    .webhook-test .wt-info span { color: var(--text-muted); font-size: 0.78rem; word-break: break-all; }

    .flash-message {
        padding: 0.875rem 1rem; border-radius: var(--radius-md);
        margin-bottom: 1rem; font-size: 0.875rem;
        display: flex; align-items: center; gap: 0.5rem;
    }
    .flash-success { background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.3); color: var(--success); }
    .flash-error { background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.3); color: var(--danger); }

    .error-text { color: var(--danger); font-size: 0.78rem; margin-top: 0.2rem; }

    @media (max-width: 700px) {
        .form-grid { grid-template-columns: 1fr; }
    }
</style>
@endpush

@section('content')
    @php
        $webhookToken = $tenant->wa_verify_token ?? 'YOUR_VERIFY_TOKEN';
        $webhookUrl = 'https://tenseal.co/whatsapp/webhook/' . $webhookToken;
    @endphp

    <div class="page-header">
        <div>
            <h1><i class="fab fa-whatsapp"></i> WhatsApp Settings</h1>
            <p>Connect your WhatsApp Business API to accept orders directly in chat.</p>
        </div>
        <a href="{{ route('inventory.whatsapp.conversations') }}" class="btn-outline">
            <i class="fas fa-arrow-left"></i> Back to Conversations
        </a>
    </div>

    @if(session('success'))
        <div class="flash-message flash-success">
            <i class="fas fa-check-circle"></i>
            <span>{{ session('success') }}</span>
        </div>
    @endif
    @if(session('error'))
        <div class="flash-message flash-error">
            <i class="fas fa-circle-exclamation"></i>
            <span>{{ session('error') }}</span>
        </div>
    @endif
    @if($errors->any())
        <div class="flash-message flash-error">
            <i class="fas fa-circle-exclamation"></i>
            <span>{{ $errors->first() }}</span>
        </div>
    @endif

    <div class="card intro-card">
        <h3><i class="fab fa-whatsapp"></i> Connect WhatsApp Business</h3>
        <p class="lead">
            Connect WhatsApp Business API (Meta Cloud API) to let customers order directly through WhatsApp.
            Tenseal will automatically reply with your product menu, capture order details, and notify you when a sale is confirmed.
        </p>
    </div>

    <div class="card">
        <h3><i class="fas fa-list-ol"></i> Setup Instructions</h3>
        <ol class="steps-list">
            <li>Create a Meta Business app at <a href="https://developers.facebook.com" target="_blank" rel="noopener" style="color:var(--accent);text-decoration:none;">developers.facebook.com</a>.</li>
            <li>Add the <strong>WhatsApp</strong> product to your app in the Meta developer dashboard.</li>
            <li>Generate a <strong>permanent access token</strong> (System User Token) with <code>whatsapp_business_messaging</code> and <code>whatsapp_business_management</code> permissions.</li>
            <li>Copy your <strong>Phone Number ID</strong> from the WhatsApp &rarr; API Setup page.</li>
            <li>
                Set your webhook URL in Meta to the address below. Meta will verify it using your Verify Token.
                <div class="webhook-url-box">
                    <i class="fas fa-link" style="color:#25D366;"></i>
                    <code id="webhookUrl">{{ $webhookUrl }}</code>
                    <button type="button" class="btn-outline" onclick="copyWebhook()">
                        <i class="fas fa-copy"></i> <span id="copyLabel">Copy URL</span>
                    </button>
                </div>
            </li>
        </ol>
    </div>

    <form method="POST" action="{{ route('inventory.whatsapp.settings.update') }}">
        @csrf
        @method('PUT')

        <div class="card">
            <h3><i class="fas fa-sliders"></i> Integration Settings</h3>

            <div class="form-grid">
                <div class="form-row full">
                    <div class="toggle-row">
                        <div class="tr-left">
                            <strong>Enable WhatsApp Integration</strong>
                            <span>Turn this on once your Meta credentials are set up to start receiving orders.</span>
                        </div>
                        <label class="switch">
                            <input type="hidden" name="wa_enabled" value="0">
                            <input type="checkbox" name="wa_enabled" value="1" {{ old('wa_enabled', $tenant->wa_enabled) ? 'checked' : '' }}>
                            <span class="slider"></span>
                        </label>
                    </div>
                </div>

                <div class="form-row">
                    <label class="form-label" for="wa_display_phone">Display Phone</label>
                    <input type="text" id="wa_display_phone" name="wa_display_phone" class="form-input"
                           placeholder="+234 800 000 0000"
                           value="{{ old('wa_display_phone', $tenant->wa_display_phone) }}">
                    <span class="form-help">The public number customers see and message.</span>
                    @error('wa_display_phone') <span class="error-text">{{ $message }}</span> @enderror
                </div>

                <div class="form-row">
                    <label class="form-label" for="wa_phone_number_id">Phone Number ID</label>
                    <input type="text" id="wa_phone_number_id" name="wa_phone_number_id" class="form-input"
                           placeholder="e.g. 106540352242922"
                           value="{{ old('wa_phone_number_id', $tenant->wa_phone_number_id) }}">
                    <span class="form-help">Found in Meta &rarr; WhatsApp &rarr; API Setup.</span>
                    @error('wa_phone_number_id') <span class="error-text">{{ $message }}</span> @enderror
                </div>

                <div class="form-row full">
                    <label class="form-label" for="wa_access_token">Access Token</label>
                    <div class="input-group">
                        <input type="password" id="wa_access_token" name="wa_access_token" class="form-input"
                               placeholder="Paste your permanent access token"
                               value="{{ old('wa_access_token', $tenant->wa_access_token) }}"
                               autocomplete="off">
                        <button type="button" class="btn-outline" onclick="toggleTokenVisibility()">
                            <i class="fas fa-eye" id="tokenEyeIcon"></i>
                            <span id="tokenEyeLabel">Show</span>
                        </button>
                    </div>
                    <span class="form-help">Stored securely. Leave blank to keep the existing token.</span>
                    @error('wa_access_token') <span class="error-text">{{ $message }}</span> @enderror
                </div>

                <div class="form-row full">
                    <label class="form-label" for="wa_verify_token">Verify Token</label>
                    <div class="input-group">
                        <input type="text" id="wa_verify_token" name="wa_verify_token" class="form-input"
                               placeholder="A random secret you also give to Meta"
                               value="{{ old('wa_verify_token', $tenant->wa_verify_token) }}">
                        <button type="button" class="btn-outline" onclick="generateVerifyToken()">
                            <i class="fas fa-dice"></i> Generate
                        </button>
                    </div>
                    <span class="form-help">Must match the Verify Token you enter in Meta's webhook configuration.</span>
                    @error('wa_verify_token') <span class="error-text">{{ $message }}</span> @enderror
                </div>
            </div>

            <div class="form-actions">
                <a href="{{ route('inventory.whatsapp.conversations') }}" class="btn-outline">
                    <i class="fas fa-xmark"></i> Cancel
                </a>
                <button type="submit" class="btn-primary">
                    <i class="fas fa-floppy-disk"></i> Save Settings
                </button>
            </div>
        </div>
    </form>

    <div class="card">
        <h3><i class="fas fa-satellite-dish"></i> Webhook Test</h3>
        <div class="webhook-test">
            <div class="wt-info">
                <strong>Verify URL</strong>
                <span>{{ $webhookUrl }}</span>
                @if($tenant->wa_enabled && !empty($tenant->wa_verify_token))
                    <span style="color:var(--success);"><i class="fas fa-check-circle"></i> Ready — Meta can verify this URL.</span>
                @else
                    <span style="color:var(--warning);"><i class="fas fa-triangle-exclamation"></i> Enable WhatsApp and set a verify token before Meta will accept this URL.</span>
                @endif
            </div>
            <a href="{{ $webhookUrl }}" target="_blank" rel="noopener" class="btn-wa">
                <i class="fas fa-up-right-from-square"></i> Open Verify URL
            </a>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    function copyWebhook() {
        var el = document.getElementById('webhookUrl');
        if (!el) return;
        var text = el.textContent.trim();
        var done = function () {
            var label = document.getElementById('copyLabel');
            if (!label) return;
            var prev = label.textContent;
            label.textContent = 'Copied!';
            setTimeout(function () { label.textContent = prev; }, 1500);
        };
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text).then(done).catch(function () {
                fallbackCopy(text); done();
            });
        } else {
            fallbackCopy(text); done();
        }
    }

    function fallbackCopy(text) {
        var ta = document.createElement('textarea');
        ta.value = text;
        ta.style.position = 'fixed';
        ta.style.opacity = '0';
        document.body.appendChild(ta);
        ta.select();
        try { document.execCommand('copy'); } catch (e) {}
        document.body.removeChild(ta);
    }

    function toggleTokenVisibility() {
        var input = document.getElementById('wa_access_token');
        var icon = document.getElementById('tokenEyeIcon');
        var label = document.getElementById('tokenEyeLabel');
        if (!input) return;
        if (input.type === 'password') {
            input.type = 'text';
            if (icon) { icon.classList.remove('fa-eye'); icon.classList.add('fa-eye-slash'); }
            if (label) label.textContent = 'Hide';
        } else {
            input.type = 'password';
            if (icon) { icon.classList.remove('fa-eye-slash'); icon.classList.add('fa-eye'); }
            if (label) label.textContent = 'Show';
        }
    }

    function generateVerifyToken() {
        var bytes = new Uint8Array(16);
        if (window.crypto && window.crypto.getRandomValues) {
            window.crypto.getRandomValues(bytes);
        } else {
            for (var i = 0; i < 16; i++) bytes[i] = Math.floor(Math.random() * 256);
        }
        var hex = '';
        for (var j = 0; j < bytes.length; j++) {
            var h = bytes[j].toString(16);
            hex += h.length === 1 ? '0' + h : h;
        }
        var input = document.getElementById('wa_verify_token');
        if (input) input.value = hex;
    }
</script>
@endpush