@extends('layouts.app')

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

@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-primary i { color: #fff; }

    .banner-warn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
        padding: 1rem 1.25rem;
        margin-bottom: 1.5rem;
        background: rgba(245, 158, 11, 0.08);
        border: 1px solid rgba(245, 158, 11, 0.35);
        border-radius: var(--radius-lg);
        color: var(--warning);
        font-size: 0.9rem;
    }
    .banner-warn a {
        color: var(--warning);
        font-weight: 600;
        text-decoration: underline;
    }
    .banner-warn .bw-left {
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    .stat-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.25rem;
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    .stat-card .stat-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: var(--radius-md);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        background: rgba(37, 211, 102, 0.15);
        color: #25D366;
    }
    .stat-card .stat-icon.accent { background: rgba(16, 191, 255, 0.12); color: var(--accent); }
    .stat-card .stat-icon.success { background: rgba(34, 197, 94, 0.15); color: var(--success); }
    .stat-card .stat-icon.warning { background: rgba(245, 158, 11, 0.15); color: var(--warning); }

    .stat-card .stat-meta { display: flex; flex-direction: column; }
    .stat-card .stat-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
    .stat-card .stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }

    .filter-bar {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
    }
    .filter-bar .search-input {
        flex: 1;
        min-width: 200px;
        max-width: 320px;
        position: relative;
    }
    .filter-bar .search-input input {
        width: 100%;
        padding: 0.625rem 1rem 0.625rem 2.5rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--bg-card);
        color: var(--text-primary);
        font-family: inherit;
        font-size: 0.875rem;
        outline: none;
    }
    .filter-bar .search-input input:focus { border-color: var(--accent); }
    .filter-bar .search-input input::placeholder { color: var(--text-muted); }
    .filter-bar .search-input i {
        position: absolute;
        left: 0.875rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-muted);
        font-size: 0.875rem;
    }
    .filter-bar select {
        padding: 0.625rem 0.875rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--bg-card);
        color: var(--text-primary);
        font-family: inherit;
        font-size: 0.875rem;
        outline: none;
        cursor: pointer;
    }
    .filter-bar select:focus { border-color: var(--accent); }

    .table-container {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow-x: auto;
    }
    .data-table {
        width: 100%;
        border-collapse: collapse;
    }
    .data-table th {
        text-align: left;
        padding: 0.75rem 1.25rem;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
        border-bottom: 1px solid var(--border);
        background: var(--bg-secondary);
    }
    .data-table td {
        padding: 0.875rem 1.25rem;
        font-size: 0.875rem;
        border-bottom: 1px solid var(--border);
        color: var(--text-secondary);
        vertical-align: middle;
    }
    .data-table tbody tr:hover { background: var(--bg-hover); }
    .data-table a { color: var(--accent); text-decoration: none; }
    .data-table a:hover { text-decoration: underline; }

    .phone-cell { color: var(--text-primary); font-weight: 600; font-family: monospace; }

    .state-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.625rem;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: capitalize;
    }
    .state-idle { background: rgba(99, 110, 114, 0.18); color: var(--text-muted); }
    .state-menu { background: rgba(16, 191, 255, 0.12); color: var(--accent); }
    .state-browsing { background: rgba(16, 191, 255, 0.12); color: var(--accent); }
    .state-product { background: rgba(16, 191, 255, 0.12); color: var(--accent); }
    .state-qty { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
    .state-cart { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
    .state-details_name { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
    .state-details_address { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
    .state-confirm { background: rgba(34, 197, 94, 0.15); color: var(--success); }

    .action-btn {
        background: var(--bg-hover);
        border: 1px solid var(--border);
        color: var(--text-secondary);
        padding: 0.375rem 0.625rem;
        border-radius: var(--radius-sm);
        font-size: 0.8rem;
        cursor: pointer;
        transition: all var(--transition);
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        font-family: inherit;
        text-decoration: none;
    }
    .action-btn:hover {
        background: var(--accent-light);
        color: var(--accent);
        border-color: var(--accent);
    }

    .pagination-wrapper { display: flex; justify-content: center; padding: 1.5rem; }

    .empty-state {
        text-align: center;
        padding: 3rem 1.5rem;
        color: var(--text-muted);
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
    }
    .empty-state i {
        font-size: 2.5rem;
        margin-bottom: 0.75rem;
        color: #25D366;
        opacity: 0.6;
    }
    .empty-state h3 {
        font-size: 1rem;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
    }
    .empty-state p { font-size: 0.85rem; margin-bottom: 1rem; }

    .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);
    }

    @media (max-width: 768px) {
        .filter-bar { flex-direction: column; align-items: stretch; }
        .filter-bar .search-input { max-width: 100%; }
        .data-table th, .data-table td { padding: 0.625rem 0.75rem; }
    }
</style>
@endpush

@section('content')
    <div class="page-header">
        <div>
            <h1><i class="fab fa-whatsapp"></i> WhatsApp Conversations</h1>
            <p>Manage customer conversations and orders placed through WhatsApp.</p>
        </div>
        <a href="{{ route('inventory.whatsapp.settings') }}" class="btn-primary">
            <i class="fas fa-gear" style="color:#fff;"></i> Settings
        </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(!$tenant->wa_enabled)
        <div class="banner-warn">
            <div class="bw-left">
                <i class="fas fa-triangle-exclamation"></i>
                <span>WhatsApp integration is disabled. Configure credentials in Settings.</span>
            </div>
            <a href="{{ route('inventory.whatsapp.settings') }}">Go to Settings &rarr;</a>
        </div>
    @endif

    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon"><i class="fas fa-comments"></i></div>
            <div class="stat-meta">
                <span class="stat-label">Total</span>
                <span class="stat-value">{{ number_format($stats['total'] ?? 0) }}</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon accent"><i class="fas fa-bolt"></i></div>
            <div class="stat-meta">
                <span class="stat-label">Active Today</span>
                <span class="stat-value">{{ number_format($stats['active_today'] ?? 0) }}</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon success"><i class="fas fa-receipt"></i></div>
            <div class="stat-meta">
                <span class="stat-label">Orders Placed</span>
                <span class="stat-value">{{ number_format($stats['orders_placed'] ?? 0) }}</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon warning"><i class="fas fa-cart-arrow-down"></i></div>
            <div class="stat-meta">
                <span class="stat-label">Abandoned Carts</span>
                <span class="stat-value">{{ number_format($stats['abandoned'] ?? 0) }}</span>
            </div>
        </div>
    </div>

    <form method="GET" action="{{ route('inventory.whatsapp.conversations') }}" class="filter-bar">
        <div class="search-input">
            <i class="fas fa-search"></i>
            <input type="text" name="q" placeholder="Search by phone..." value="{{ request('q') }}">
        </div>
        <select name="state" onchange="this.form.submit()">
            <option value="">All States</option>
            <option value="idle" {{ request('state') === 'idle' ? 'selected' : '' }}>Idle</option>
            <option value="menu" {{ request('state') === 'menu' ? 'selected' : '' }}>Menu</option>
            <option value="browsing" {{ request('state') === 'browsing' ? 'selected' : '' }}>Browsing</option>
            <option value="product" {{ request('state') === 'product' ? 'selected' : '' }}>Product</option>
            <option value="qty" {{ request('state') === 'qty' ? 'selected' : '' }}>Qty</option>
            <option value="cart" {{ request('state') === 'cart' ? 'selected' : '' }}>Cart</option>
            <option value="details_name" {{ request('state') === 'details_name' ? 'selected' : '' }}>Details - Name</option>
            <option value="details_address" {{ request('state') === 'details_address' ? 'selected' : '' }}>Details - Address</option>
            <option value="confirm" {{ request('state') === 'confirm' ? 'selected' : '' }}>Confirm</option>
        </select>
        <button type="submit" class="action-btn"><i class="fas fa-filter"></i> Apply</button>
    </form>

    @if(isset($conversations) && $conversations->count())
        <div class="table-container">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Phone</th>
                        <th>Customer</th>
                        <th>State</th>
                        <th>Last Message</th>
                        <th>Last Order</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($conversations as $conv)
                        @php
                            $state = $conv->state ?? 'idle';
                            $stateClass = 'state-' . $state;
                            $lastAt = $conv->last_message_at ?? $conv->updated_at;
                        @endphp
                        <tr>
                            <td>
                                <a href="{{ route('inventory.whatsapp.conversation', $conv->id) }}" class="phone-cell">
                                    <i class="fab fa-whatsapp" style="color:#25D366;margin-right:0.35rem;"></i>{{ $conv->phone ?? '—' }}
                                </a>
                            </td>
                            <td>{{ $conv->customer?->name ?? '—' }}</td>
                            <td><span class="state-badge {{ $stateClass }}">{{ str_replace('_', ' ', $state) }}</span></td>
                            <td>{{ $lastAt ? \Carbon\Carbon::parse($lastAt)->diffForHumans() : '—' }}</td>
                            <td>
                                @if($conv->last_order_id && $conv->lastOrder)
                                    <a href="{{ route('inventory.orders.show', $conv->last_order_id) }}">#{{ $conv->lastOrder->id }}</a>
                                @else
                                    —
                                @endif
                            </td>
                            <td>
                                <a href="{{ route('inventory.whatsapp.conversation', $conv->id) }}" class="action-btn" title="View">
                                    <i class="fas fa-eye"></i> View
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="pagination-wrapper">
                {{ $conversations->withQueryString()->links() }}
            </div>
        </div>
    @else
        <div class="empty-state">
            <i class="fab fa-whatsapp"></i>
            <h3>No conversations yet</h3>
            <p>When customers message your WhatsApp business number, their conversations will appear here.</p>
            @if(!$tenant->wa_enabled)
                <a href="{{ route('inventory.whatsapp.settings') }}" class="btn-primary">
                    <i class="fas fa-gear" style="color:#fff;"></i> Configure WhatsApp
                </a>
            @endif
        </div>
    @endif
@endsection