@extends('layouts.app')

@section('title', 'Store Details')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="mb-6">
        <div class="flex justify-between items-start">
            <div>
                <h1 class="text-2xl font-bold">{{ $store->name }}</h1>
                <p class="text-gray-600 dark:text-gray-400">{{ $store->url }}</p>
            </div>
            <div class="flex space-x-3">
                <a href="{{ route('settings.stores.edit', $store) }}"
                   class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
                    Edit
                </a>
                <a href="{{ route('settings.stores') }}"
                   class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
                    Back to Stores
                </a>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
            <div class="flex items-center">
                <div class="flex-1">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Status</p>
                    <p class="text-2xl font-bold">
                        @if($store->is_active)
                            <span class="text-green-600 dark:text-green-400">Active</span>
                        @else
                            <span class="text-red-600 dark:text-red-400">Inactive</span>
                        @endif
                    </p>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
            <div class="flex items-center">
                <div class="flex-1">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Total Orders</p>
                    <p class="text-2xl font-bold">{{ $store->orders_count ?? 0 }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
            <div class="flex items-center">
                <div class="flex-1">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Webhooks</p>
                    <p class="text-2xl font-bold">
                        @if($store->webhooks_enabled)
                            <span class="text-green-600 dark:text-green-400">Enabled</span>
                        @else
                            <span class="text-gray-600 dark:text-gray-400">Disabled</span>
                        @endif
                    </p>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
            <div class="flex items-center">
                <div class="flex-1">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Last Sync</p>
                    <p class="text-sm font-bold">
                        {{ $store->last_sync ? $store->last_sync->diffForHumans() : 'Never' }}
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Store Details -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow mb-6">
        <div class="p-6">
            <h2 class="text-lg font-semibold mb-4">Store Configuration</h2>

            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium mb-2">Store Prefix</label>
                    <input type="text" readonly
                           value="{{ $store->store_prefix }}"
                           class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm">
                </div>

                <div>
                    <label class="block text-sm font-medium mb-2">Store URL</label>
                    <div class="flex items-center space-x-2">
                        <input type="text" readonly
                               value="{{ $store->url }}"
                               class="flex-1 rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm">
                        <a href="{{ $store->url }}" target="_blank"
                           class="px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm whitespace-nowrap">
                            Visit Store
                        </a>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium mb-2">Consumer Key</label>
                    <input type="password" readonly
                           value="{{ $store->consumer_key }}"
                           class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700 text-sm">
                </div>

                <div class="pt-4 border-t border-gray-200 dark:border-gray-700">
                    <label class="block text-sm font-medium mb-2">Sync Orders</label>
                    <form action="{{ route('settings.stores.sync', $store) }}" method="POST" class="flex flex-col sm:flex-row items-start sm:items-center gap-3">
                        @csrf
                        <div class="flex-1 w-full sm:w-auto">
                            <select name="sync_type" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 rounded-md text-sm">
                                <option value="current_month" selected>📅 Current Month Only - For active order verification</option>
                                <option value="recent">⏱️ Recent (Last 30 Days) - Recent orders sync</option>
                                <option value="historical">📦 Historical (12 Months) - Full historical sync</option>
                            </select>
                        </div>
                        <button type="submit"
                                class="w-full sm:w-auto px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 text-sm whitespace-nowrap">
                            Sync Orders
                        </button>
                    </form>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
                        💡 <strong>Recommended:</strong> Use "Current Month Only" for daily operations. Past data can be entered manually in Seller KPI section.
                    </p>
                </div>

                <div class="pt-4 border-t border-gray-200 dark:border-gray-700">
                    <label class="block text-sm font-medium mb-2">Webhooks (Real-time Sync)</label>
                    <div class="flex space-x-3">

                    @if($store->webhooks_enabled)
                        <form action="{{ route('settings.stores.webhooks-disable', $store) }}" method="POST">
                            @csrf
                            <button type="submit"
                                    class="px-4 py-2 bg-orange-600 text-white rounded-md hover:bg-orange-700 text-sm">
                                Disable Webhooks
                            </button>
                        </form>
                    @else
                        <form action="{{ route('settings.stores.webhooks-enable', $store) }}" method="POST">
                            @csrf
                            <button type="submit"
                                    class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm">
                                Enable Webhooks
                            </button>
                        </form>
                    @endif
                    </div>
                </div>

                {{-- Disconnect Store Section (Admin Only) --}}
                @if(auth()->user()->isAdmin())
                <div class="pt-4 border-t border-gray-200 dark:border-gray-700" x-data="disconnectStore()">
                    <label class="block text-sm font-medium mb-2 text-red-600 dark:text-red-400">Danger Zone</label>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
                        Disconnect this store to remove all synced orders. You can reconnect anytime to sync fresh data from WooCommerce.
                    </p>
                    <button type="button"
                            @click="checkDisconnect()"
                            class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 text-sm">
                        Disconnect Store
                    </button>

                    {{-- Disconnect Modal --}}
                    <div x-show="showModal" x-cloak
                         class="fixed inset-0 z-50 overflow-y-auto"
                         aria-labelledby="modal-title" role="dialog" aria-modal="true">
                        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                            {{-- Background overlay --}}
                            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="showModal = false"></div>

                            {{-- Modal panel --}}
                            <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                                <div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                                    {{-- Loading state --}}
                                    <div x-show="loading" class="text-center py-8">
                                        <svg class="animate-spin h-8 w-8 mx-auto text-gray-400" 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>
                                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Checking store status...</p>
                                    </div>

                                    {{-- Blocked state (orders in progress) --}}
                                    <div x-show="!loading && !canDisconnect" class="sm:flex sm:items-start">
                                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-yellow-100 dark:bg-yellow-900 sm:mx-0 sm:h-10 sm:w-10">
                                            <svg class="h-6 w-6 text-yellow-600 dark:text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                                            </svg>
                                        </div>
                                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                                            <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Cannot Disconnect Store</h3>
                                            <div class="mt-2">
                                                <p class="text-sm text-gray-500 dark:text-gray-400">
                                                    You have <span class="font-bold text-yellow-600" x-text="inProgressOrders"></span> orders in progress.
                                                    Please complete or delete them first.
                                                </p>
                                                <div class="mt-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-md p-3">
                                                    <p class="text-sm font-medium text-yellow-800 dark:text-yellow-200">Orders by status:</p>
                                                    <ul class="mt-1 text-sm text-yellow-700 dark:text-yellow-300">
                                                        <template x-for="(count, status) in statusBreakdown" :key="status">
                                                            <li x-text="status + ': ' + count + ' orders'"></li>
                                                        </template>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Ready to disconnect state --}}
                                    <div x-show="!loading && canDisconnect">
                                        <div class="sm:flex sm:items-start">
                                            <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-red-900 sm:mx-0 sm:h-10 sm:w-10">
                                                <svg class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                                                </svg>
                                            </div>
                                            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left flex-1">
                                                <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
                                                    Disconnect Store: <span x-text="storeName"></span>
                                                </h3>
                                                <div class="mt-2">
                                                    <p class="text-sm text-gray-500 dark:text-gray-400">
                                                        This will permanently delete:
                                                    </p>
                                                    <ul class="mt-2 text-sm text-red-600 dark:text-red-400 list-disc list-inside">
                                                        <li><span class="font-bold" x-text="totalOrders"></span> orders</li>
                                                        <li>All tracking numbers & AWB data</li>
                                                        <li>All order history & logs</li>
                                                        <li>All WhatsApp sent records</li>
                                                    </ul>

                                                    <template x-if="ordersWithTracking > 0">
                                                        <div class="mt-3 p-3 bg-amber-50 dark:bg-amber-900/20 rounded-md">
                                                            <p class="text-sm text-amber-800 dark:text-amber-200">
                                                                <strong x-text="ordersWithTracking"></strong> orders have tracking numbers.
                                                                Sync them to WooCommerce first to preserve them.
                                                            </p>
                                                        </div>
                                                    </template>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Action Buttons --}}
                                        <div class="mt-4 space-y-3">
                                            {{-- Download CSV Backup --}}
                                            <form action="{{ route('stores.disconnect.export-csv', $store) }}" method="POST" class="inline-block w-full">
                                                @csrf
                                                <button type="submit"
                                                        class="w-full inline-flex justify-center items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                                                    </svg>
                                                    Download CSV Backup First
                                                </button>
                                            </form>

                                            {{-- Sync Tracking to WooCommerce --}}
                                            <template x-if="ordersWithTracking > 0">
                                                <button type="button"
                                                        @click="syncTracking()"
                                                        :disabled="syncing"
                                                        class="w-full inline-flex justify-center items-center px-4 py-2 border border-amber-300 dark:border-amber-600 rounded-md shadow-sm text-sm font-medium text-amber-700 dark:text-amber-200 bg-amber-50 dark:bg-amber-900/20 hover:bg-amber-100 dark:hover:bg-amber-900/40 disabled:opacity-50">
                                                    <template x-if="!syncing">
                                                        <span class="flex items-center">
                                                            <svg class="w-4 h-4 mr-2 flex-shrink-0" 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>
                                                            <span>Sync&nbsp;</span><span x-text="ordersWithTracking"></span><span>&nbsp;Tracking Numbers to WooCommerce</span>
                                                        </span>
                                                    </template>
                                                    <template x-if="syncing">
                                                        <span class="flex items-center">
                                                            <svg class="animate-spin h-4 w-4 mr-2" 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...
                                                        </span>
                                                    </template>
                                                </button>
                                            </template>

                                            {{-- Sync Result --}}
                                            <div x-show="syncResult" class="p-3 rounded-md" :class="syncResult?.success ? 'bg-green-50 dark:bg-green-900/20' : 'bg-red-50 dark:bg-red-900/20'">
                                                <p class="text-sm" :class="syncResult?.success ? 'text-green-800 dark:text-green-200' : 'text-red-800 dark:text-red-200'" x-text="syncResultMessage"></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Modal Footer --}}
                                <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                                    <template x-if="canDisconnect">
                                        <form action="{{ route('stores.disconnect', $store) }}" method="POST" class="w-full sm:w-auto sm:ml-3">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit"
                                                    onclick="return confirm('FINAL WARNING: This will permanently delete all orders. This cannot be undone. Continue?')"
                                                    class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm">
                                                Disconnect & Delete All Orders
                                            </button>
                                        </form>
                                    </template>
                                    <template x-if="!canDisconnect && !loading">
                                        <a href="{{ route('orders.index', ['store' => $store->id, 'status' => 'processing']) }}"
                                           class="w-full sm:w-auto sm:ml-3 inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:text-sm">
                                            View In-Progress Orders
                                        </a>
                                    </template>
                                    <button type="button" @click="showModal = false"
                                            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm">
                                        Cancel
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Recent Orders -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow">
        <div class="p-6 border-b border-gray-200 dark:border-gray-700">
            <h2 class="text-lg font-semibold">Recent Orders</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">Last 10 orders from this store</p>
        </div>

        @if($recentOrders->count() > 0)
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-gray-700">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Order Number</th>
                        <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Customer</th>
                        <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Total</th>
                        <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Status</th>
                        <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Date</th>
                        <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                    @foreach($recentOrders as $order)
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            {{ $order->display_order_id }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                            {{ $order->billing['first_name'] ?? '' }} {{ $order->billing['last_name'] ?? '' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                            {{ $order->currency }} {{ number_format($order->total, 2) }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
                                {{ $order->status === 'completed' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' :
                                   ($order->status === 'processing' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' :
                                   'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200') }}">
                                {{ ucfirst($order->status) }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                            {{ $order->created_at->format('M d, Y') }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                            <a href="{{ route('orders.show', $order) }}"
                               class="text-blue-600 dark:text-blue-400 hover:underline">
                                View
                            </a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
        <div class="p-6 text-center">
            <p class="text-gray-500 dark:text-gray-400">No orders found for this store</p>
            <p class="text-sm text-gray-400 dark:text-gray-500 mt-2">
                Try syncing orders from WooCommerce
            </p>
        </div>
        @endif
    </div>
</div>

@if(auth()->user()->isAdmin())
@push('scripts')
<script>
function disconnectStore() {
    return {
        showModal: false,
        loading: false,
        canDisconnect: false,
        totalOrders: 0,
        inProgressOrders: 0,
        completedOrders: 0,
        ordersWithTracking: 0,
        statusBreakdown: {},
        storeName: '',
        syncing: false,
        syncResult: null,

        get syncResultMessage() {
            if (!this.syncResult) return '';
            if (this.syncResult.success) {
                return `Successfully synced ${this.syncResult.synced_count} tracking numbers to WooCommerce. ${this.syncResult.failed_count} failed.`;
            }
            return `Sync failed: ${this.syncResult.error}`;
        },

        async checkDisconnect() {
            this.showModal = true;
            this.loading = true;
            this.syncResult = null;

            try {
                const response = await fetch('{{ route("stores.disconnect.check", $store) }}');
                const data = await response.json();

                this.canDisconnect = data.can_disconnect;
                this.totalOrders = data.total_orders;
                this.inProgressOrders = data.in_progress_orders;
                this.completedOrders = data.completed_orders;
                this.ordersWithTracking = data.orders_with_tracking;
                this.statusBreakdown = data.status_breakdown;
                this.storeName = data.store_name;
            } catch (error) {
                console.error('Failed to check disconnect status:', error);
                alert('Failed to check store status. Please try again.');
                this.showModal = false;
            } finally {
                this.loading = false;
            }
        },

        async syncTracking() {
            this.syncing = true;
            this.syncResult = null;

            try {
                const response = await fetch('{{ route("stores.disconnect.sync-tracking", $store) }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                });
                const data = await response.json();
                this.syncResult = data;

                if (data.success) {
                    // Update the tracking count after sync
                    this.ordersWithTracking = Math.max(0, this.ordersWithTracking - data.synced_count);
                }
            } catch (error) {
                console.error('Failed to sync tracking:', error);
                this.syncResult = { success: false, error: 'Network error. Please try again.' };
            } finally {
                this.syncing = false;
            }
        }
    };
}
</script>
@endpush
@endif
@endsection