@extends('layouts.app')

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

@section('content')
<header>
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <h1 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">WooCommerce Integration</h1>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Configure WooCommerce API connection and coupon sync settings.</p>
    </div>
</header>

<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
    <form action="{{ route('settings.woocommerce.update') }}" method="POST">
        @csrf
        @method('PUT')

        <div class="space-y-6">
            <!-- API Connection Settings -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">API Connection</h2>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Connect to your WooCommerce store using REST API credentials.</p>
                </div>
                <div class="p-6 space-y-6">
                    <div>
                        <label for="store_url" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Store URL</label>
                        <input type="url" name="store_url" id="store_url" value="{{ old('store_url', $settings['store_url']) }}"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500"
                               placeholder="https://yourstore.com">
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Your WooCommerce store URL (without trailing slash)</p>
                        @error('store_url')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                        <div>
                            <label for="consumer_key" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Consumer Key</label>
                            <input type="text" name="consumer_key" id="consumer_key" value="{{ old('consumer_key', $settings['consumer_key']) }}"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 font-mono text-xs"
                                   placeholder="ck_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
                            @error('consumer_key')
                                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                        <div>
                            <label for="consumer_secret" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Consumer Secret</label>
                            <input type="password" name="consumer_secret" id="consumer_secret" value="{{ old('consumer_secret', $settings['consumer_secret']) }}"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 font-mono text-xs"
                                   placeholder="cs_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
                            @error('consumer_secret')
                                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="p-4 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 rounded-md">
                        <div class="flex">
                            <svg class="h-5 w-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                            </svg>
                            <div class="ml-3 text-sm text-blue-700 dark:text-blue-300">
                                <p><strong>How to get API credentials:</strong></p>
                                <ol class="mt-1 list-decimal list-inside space-y-1">
                                    <li>Go to WooCommerce &rarr; Settings &rarr; Advanced &rarr; REST API</li>
                                    <li>Click "Add Key"</li>
                                    <li>Set Description: "Agent Coupon Sync" (or any name you prefer)</li>
                                    <li>Set Permissions: "Read/Write"</li>
                                    <li>Click "Generate API Key"</li>
                                    <li>Copy Consumer Key and Consumer Secret</li>
                                </ol>
                            </div>
                        </div>
                    </div>

                    <!-- Test Connection Button -->
                    <div class="flex items-center gap-4">
                        <button type="button" id="test-connection-btn"
                                class="inline-flex items-center gap-2 px-4 py-2 bg-gray-600 text-white text-sm font-medium rounded-lg hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-offset-gray-900 shadow-sm transition-colors">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                            </svg>
                            Test Connection
                        </button>
                        <span id="connection-status" class="text-sm"></span>
                    </div>
                </div>
            </div>

            <!-- Webhook Settings -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Webhook Settings</h2>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Configure webhook secret for receiving orders from WooCommerce.</p>
                </div>
                <div class="p-6 space-y-6">
                    <div>
                        <label for="webhook_secret" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Webhook Secret</label>
                        <input type="text" name="webhook_secret" id="webhook_secret" value="{{ old('webhook_secret', $settings['webhook_secret']) }}"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 font-mono text-xs"
                               placeholder="your-webhook-secret">
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Must match the secret configured in WooCommerce webhooks</p>
                        @error('webhook_secret')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="p-4 bg-gray-50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 rounded-md">
                        <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Webhook URLs for WooCommerce:</p>
                        <div class="space-y-2 text-xs font-mono">
                            <div class="flex items-center gap-2">
                                <span class="px-2 py-1 bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-300 rounded">Order Created</span>
                                <code class="text-gray-600 dark:text-gray-400">{{ url('/api/webhooks/woocommerce/order') }}</code>
                            </div>
                            <div class="flex items-center gap-2">
                                <span class="px-2 py-1 bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-300 rounded">Order Updated</span>
                                <code class="text-gray-600 dark:text-gray-400">{{ url('/api/webhooks/woocommerce/order-updated') }}</code>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Default Coupon Settings -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Default Coupon Settings</h2>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Default settings applied when syncing agent coupons to WooCommerce.</p>
                </div>
                <div class="p-6 space-y-6">
                    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                        <div>
                            <label for="coupon_discount_type" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Discount Type</label>
                            <select name="coupon_discount_type" id="coupon_discount_type"
                                    class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                                <option value="percent" {{ ($settings['coupon_discount_type'] ?? 'percent') === 'percent' ? 'selected' : '' }}>Percentage Discount</option>
                                <option value="fixed_cart" {{ ($settings['coupon_discount_type'] ?? '') === 'fixed_cart' ? 'selected' : '' }}>Fixed Cart Discount</option>
                                <option value="fixed_product" {{ ($settings['coupon_discount_type'] ?? '') === 'fixed_product' ? 'selected' : '' }}>Fixed Product Discount</option>
                            </select>
                        </div>
                        <div>
                            <label for="coupon_discount_amount" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Discount Amount</label>
                            <input type="number" name="coupon_discount_amount" id="coupon_discount_amount" step="0.01" min="0"
                                   value="{{ old('coupon_discount_amount', $settings['coupon_discount_amount'] ?? '5') }}"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">For percentage, enter value (e.g., 5 for 5%)</p>
                            @error('coupon_discount_amount')
                                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                        <div>
                            <label for="coupon_minimum_amount" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Minimum Order Amount</label>
                            <input type="number" name="coupon_minimum_amount" id="coupon_minimum_amount" step="0.01" min="0"
                                   value="{{ old('coupon_minimum_amount', $settings['coupon_minimum_amount'] ?? '') }}"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                                   placeholder="Leave empty for no minimum">
                        </div>
                        <div>
                            <label for="coupon_maximum_amount" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Maximum Order Amount</label>
                            <input type="number" name="coupon_maximum_amount" id="coupon_maximum_amount" step="0.01" min="0"
                                   value="{{ old('coupon_maximum_amount', $settings['coupon_maximum_amount'] ?? '') }}"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                                   placeholder="Leave empty for no maximum">
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                        <div>
                            <label for="coupon_usage_limit" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Usage Limit (Total)</label>
                            <input type="number" name="coupon_usage_limit" id="coupon_usage_limit" min="0"
                                   value="{{ old('coupon_usage_limit', $settings['coupon_usage_limit'] ?? '') }}"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                                   placeholder="Leave empty for unlimited">
                        </div>
                        <div>
                            <label for="coupon_usage_limit_per_user" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Usage Limit Per User</label>
                            <input type="number" name="coupon_usage_limit_per_user" id="coupon_usage_limit_per_user" min="0"
                                   value="{{ old('coupon_usage_limit_per_user', $settings['coupon_usage_limit_per_user'] ?? '') }}"
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                                   placeholder="Leave empty for unlimited">
                        </div>
                    </div>

                    <div class="flex flex-wrap gap-6">
                        <div class="flex items-start">
                            <div class="flex items-center h-5">
                                <input type="checkbox" name="coupon_individual_use" id="coupon_individual_use" value="1"
                                       {{ ($settings['coupon_individual_use'] ?? 'false') === 'true' ? 'checked' : '' }}
                                       class="w-4 h-4 text-indigo-600 border-gray-300 dark:border-gray-600 rounded focus:ring-indigo-500 dark:bg-gray-700">
                            </div>
                            <div class="ml-3">
                                <label for="coupon_individual_use" class="text-sm font-medium text-gray-700 dark:text-gray-300">Individual Use Only</label>
                                <p class="text-xs text-gray-500 dark:text-gray-400">Cannot be combined with other coupons</p>
                            </div>
                        </div>

                        <div class="flex items-start">
                            <div class="flex items-center h-5">
                                <input type="checkbox" name="coupon_exclude_sale" id="coupon_exclude_sale" value="1"
                                       {{ ($settings['coupon_exclude_sale'] ?? 'false') === 'true' ? 'checked' : '' }}
                                       class="w-4 h-4 text-indigo-600 border-gray-300 dark:border-gray-600 rounded focus:ring-indigo-500 dark:bg-gray-700">
                            </div>
                            <div class="ml-3">
                                <label for="coupon_exclude_sale" class="text-sm font-medium text-gray-700 dark:text-gray-300">Exclude Sale Items</label>
                                <p class="text-xs text-gray-500 dark:text-gray-400">Coupon won't apply to items on sale</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Auto-Sync Settings -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Automatic Coupon Sync</h2>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Automatically sync agent coupons to WooCommerce when agents are created or updated.</p>
                </div>
                <div class="p-6 space-y-6">
                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input type="checkbox" name="auto_sync_enabled" id="auto_sync_enabled" value="1"
                                   {{ ($settings['auto_sync_enabled'] ?? false) ? 'checked' : '' }}
                                   class="w-4 h-4 text-indigo-600 border-gray-300 dark:border-gray-600 rounded focus:ring-indigo-500 dark:bg-gray-700">
                        </div>
                        <div class="ml-3">
                            <label for="auto_sync_enabled" class="text-sm font-medium text-gray-700 dark:text-gray-300">Enable Auto-Sync</label>
                            <p class="text-sm text-gray-500 dark:text-gray-400">When enabled, agent coupons will be automatically created/updated in WooCommerce.</p>
                        </div>
                    </div>

                    <div class="p-4 bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-700 rounded-md">
                        <div class="flex">
                            <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                            </svg>
                            <div class="ml-3 text-sm text-yellow-700 dark:text-yellow-300">
                                <p><strong>Note:</strong> Auto-sync requires valid API credentials. Sync errors are logged to <code class="text-xs">storage/logs/webhook-*.log</code></p>
                            </div>
                        </div>
                    </div>

                    <!-- Manual Sync Button -->
                    <div class="flex items-center gap-4">
                        <button type="button" id="sync-all-btn"
                                class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-offset-gray-900 shadow-sm transition-colors">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                            </svg>
                            Sync All Agent Coupons Now
                        </button>
                        <span id="sync-status" class="text-sm"></span>
                    </div>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="flex justify-end">
                <button type="submit"
                        class="inline-flex items-center gap-2 px-6 py-2.5 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 shadow-sm transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                    Save Settings
                </button>
            </div>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Test Connection
    document.getElementById('test-connection-btn').addEventListener('click', function() {
        const btn = this;
        const status = document.getElementById('connection-status');

        btn.disabled = true;
        btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Testing...';
        status.textContent = '';

        fetch('{{ route("settings.woocommerce.test") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                status.innerHTML = '<span class="text-green-600 dark:text-green-400">Connected! WC Version: ' + (data.wc_version || 'unknown') + '</span>';
            } else {
                status.innerHTML = '<span class="text-red-600 dark:text-red-400">' + data.message + '</span>';
            }
        })
        .catch(error => {
            status.innerHTML = '<span class="text-red-600 dark:text-red-400">Error: ' + error.message + '</span>';
        })
        .finally(() => {
            btn.disabled = false;
            btn.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg> Test Connection';
        });
    });

    // Sync All Coupons
    document.getElementById('sync-all-btn').addEventListener('click', function() {
        if (!confirm('This will sync all active agent coupons to WooCommerce. Continue?')) {
            return;
        }

        const btn = this;
        const status = document.getElementById('sync-status');

        btn.disabled = true;
        btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Syncing...';
        status.textContent = 'This may take a while...';

        fetch('{{ route("settings.woocommerce.sync-all") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                status.innerHTML = '<span class="text-green-600 dark:text-green-400">' + data.message + '</span>';
            } else {
                status.innerHTML = '<span class="text-red-600 dark:text-red-400">' + data.message + '</span>';
            }
        })
        .catch(error => {
            status.innerHTML = '<span class="text-red-600 dark:text-red-400">Error: ' + error.message + '</span>';
        })
        .finally(() => {
            btn.disabled = false;
            btn.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg> Sync All Agent Coupons Now';
        });
    });
});
</script>
@endsection