@extends('layouts.app')

@section('title', 'Gestión de Tiendas Sincronizadas — ' . \App\Models\Setting::get('app_name', 'TI Manager'))

@section('content')
<div class="animate-fadeIn">
    <div class="page-header" style="margin-bottom: 24px;">
        <div style="display: flex; justify-content: space-between; align-items: center;">
            <div style="display: flex; align-items: center; gap: 10px;">
                <a href="{{ route('products.index') }}" class="btn btn-ghost" style="padding: 8px; color: var(--text-muted);"><i class="ph ph-arrow-left" style="font-size: 1.5rem;"></i></a>
                <div>
                    <h1 class="page-title" style="margin: 0;">Tiendas Sincronizadas</h1>
                    <p class="text-muted" style="margin-top: 4px; font-size: 0.95rem;">Gestiona las fuentes desde donde importas productos a tu catálogo.</p>
                </div>
            </div>
            
            <button type="button" class="btn btn-outline" onclick="document.getElementById('importStoreModal').style.display='flex'" style="color: var(--primary); border-color: var(--primary);">
                <i class="ph ph-cloud-arrow-down"></i> Importar Nueva Tienda
            </button>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success">
            <i class="ph ph-check-circle" style="font-size: 1.2rem;"></i>
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger">
            <i class="ph ph-warning-circle" style="font-size: 1.2rem;"></i>
            {{ session('error') }}
        </div>
    @endif

    <div class="card-glass" style="padding: 0; overflow: hidden;">
        @if(count($stores) > 0)
            <table class="table" style="width: 100%; border-collapse: collapse;">
                <thead>
                    <tr style="border-bottom: 1px solid rgba(0,0,0,0.05); background: rgba(0,0,0,0.02);">
                        <th style="text-align: left; padding: 15px 20px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px;">Sitio Web (Origen)</th>
                        <th style="text-align: center; padding: 15px 20px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px;">Plataforma</th>
                        <th style="text-align: center; padding: 15px 20px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px;">Productos Importados</th>
                        <th style="text-align: center; padding: 15px 20px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px;">Última Sincronización</th>
                        <th style="text-align: right; padding: 15px 20px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px;">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($stores as $store)
                        <tr style="border-bottom: 1px solid rgba(0,0,0,0.03); transition: background 0.2s;" onmouseover="this.style.background='rgba(0,0,0,0.01)'" onmouseout="this.style.background='transparent'">
                            <td style="padding: 15px 20px;">
                                <div style="display: flex; align-items: center; gap: 10px;">
                                    <div style="width: 40px; height: 40px; border-radius: 8px; background: rgba(0,0,0,0.03); display: flex; align-items: center; justify-content: center;">
                                        <i class="ph ph-storefront" style="font-size: 1.3rem; color: var(--text-muted);"></i>
                                    </div>
                                    <div>
                                        <div style="font-weight: 600; font-size: 1rem;">{{ $store['domain'] }}</div>
                                        <a href="https://{{ $store['domain'] }}" target="_blank" style="font-size: 0.8rem; color: var(--primary); text-decoration: none;">Visitar Tienda <i class="ph ph-arrow-square-out"></i></a>
                                    </div>
                                </div>
                            </td>
                            <td style="padding: 15px 20px; text-align: center;">
                                @foreach($store['types'] as $type)
                                    @if($type === 'woocommerce')
                                        <span class="badge" style="background: rgba(150, 88, 138, 0.1); color: #96588a; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600;">WooCommerce</span>
                                    @elseif($type === 'shopify')
                                        <span class="badge" style="background: rgba(149, 191, 71, 0.1); color: #95bf47; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600;">Shopify</span>
                                    @else
                                        <span class="badge" style="background: rgba(0, 0, 0, 0.05); color: var(--text-secondary); padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600;">{{ ucfirst($type) }}</span>
                                    @endif
                                @endforeach
                            </td>
                            <td style="padding: 15px 20px; text-align: center;">
                                <span style="font-weight: 700; font-size: 1.1rem; color: var(--text-primary);">{{ $store['count'] }}</span>
                            </td>
                            <td style="padding: 15px 20px; text-align: center;">
                                @if($store['last_sync'])
                                    <div style="font-size: 0.9rem;">{{ \Carbon\Carbon::parse($store['last_sync'])->diffForHumans() }}</div>
                                    <div style="font-size: 0.75rem; color: var(--text-muted);">{{ \Carbon\Carbon::parse($store['last_sync'])->format('d M Y, h:i A') }}</div>
                                @else
                                    <span style="color: var(--text-muted); font-size: 0.9rem;">Nunca</span>
                                @endif
                            </td>
                            <td style="padding: 15px 20px; text-align: right;">
                                <div style="display: flex; justify-content: flex-end; gap: 8px;">
                                    <form action="{{ route('stores.sync') }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="domain" value="{{ $store['domain'] }}">
                                        <button type="submit" class="btn btn-ghost" style="padding: 8px; color: var(--primary);" title="Forzar Sincronización de Precios" onclick="confirmAction(event, '¿Poner en cola de sincronización los {{ $store['count'] }} productos de {{ $store['domain'] }}?')">
                                            <i class="ph ph-arrows-clockwise" style="font-size: 1.2rem;"></i>
                                        </button>
                                    </form>
                                    
                                    <form action="{{ route('stores.destroy') }}" method="POST">
                                        @csrf
                                        @method('DELETE')
                                        <input type="hidden" name="domain" value="{{ $store['domain'] }}">
                                        <button type="submit" class="btn btn-ghost" style="padding: 8px; color: var(--danger);" title="Eliminar Todos los Productos" onclick="confirmAction(event, '¡ADVERTENCIA!\n\nEstás a punto de eliminar permanentemente TODOS los {{ $store['count'] }} productos importados desde {{ $store['domain'] }}.\n\nEsta acción no se puede deshacer.\n\n¿Estás completamente seguro?')">
                                            <i class="ph ph-trash" style="font-size: 1.2rem;"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @else
            <div style="padding: 60px 20px; text-align: center;">
                <div style="width: 80px; height: 80px; border-radius: 50%; background: rgba(0,0,0,0.03); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;">
                    <i class="ph ph-storefront" style="font-size: 2.5rem; color: var(--text-muted);"></i>
                </div>
                <h3 style="margin-bottom: 10px;">No hay tiendas sincronizadas</h3>
                <p style="color: var(--text-muted); margin-bottom: 24px; max-width: 400px; margin-left: auto; margin-right: auto;">
                    Actualmente no tienes productos importados desde ninguna página web. Los productos creados manualmente no aparecerán aquí.
                </p>
                <button type="button" class="btn" onclick="document.getElementById('importStoreModal').style.display='flex'" style="background: var(--primary); color: white;">
                    <i class="ph ph-cloud-arrow-down"></i> Importar mi primera tienda
                </button>
            </div>
        @endif
    </div>
</div>

{{-- Include the same import modal from products index --}}
@include('products.partials.import_store_modal')

@endsection