@extends('layouts.app')

@section('title', 'Customers')

@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; }

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

    /* Stats Cards */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 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(16, 191, 255, 0.12);
        color: var(--accent);
    }

    .stat-card .stat-icon.vip { background: rgba(255, 193, 7, 0.15); color: #ffc107; }
    .stat-card .stat-icon.flagged { background: rgba(255, 71, 87, 0.15); color: #ff4757; }
    .stat-card .stat-icon.blocked { background: rgba(99, 110, 114, 0.15); color: #a4b0be; }

    .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 */
    .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;
        transition: border-color var(--transition);
    }

    .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;
        appearance: none;
        padding-right: 2rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236a6a8e' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
    }

    .filter-bar select:focus { border-color: var(--accent); }

    /* Table */
    .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.5rem;
        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.5rem;
        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); }

    .customer-name {
        font-weight: 600;
        color: var(--text-primary);
    }

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

    .chip-blocked {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.15rem 0.5rem;
        margin-left: 0.375rem;
        border-radius: 20px;
        font-size: 0.65rem;
        font-weight: 600;
        background: rgba(255, 71, 87, 0.15);
        color: #ff4757;
    }

    .action-btn {
        background: var(--bg-hover);
        border: 1px solid var(--border);
        color: var(--text-secondary);
        padding: 0.375rem 0.75rem;
        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);
    }

    .empty-state i {
        font-size: 2.25rem;
        margin-bottom: 0.75rem;
        color: var(--accent);
        opacity: 0.5;
    }

    .empty-state h3 {
        font-size: 1rem;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
    }

    .empty-state p { font-size: 0.85rem; max-width: 380px; margin: 0 auto; }

    @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">
        <h1>Customers</h1>
        <a href="{{ route('inventory.customers.export') }}" class="btn-primary">
            <i class="fas fa-file-export"></i> Export CSV
        </a>
    </div>

    @if(session('success'))
        <div class="flash-message flash-success" style="display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1rem;background:rgba(0,212,170,0.1);border:1px solid var(--success);color:var(--success);border-radius:var(--radius-md);margin-bottom:1rem;">
            <i class="fas fa-check-circle"></i>
            <span>{{ session('success') }}</span>
        </div>
    @endif

    {{-- Stats Cards --}}
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon"><i class="fas fa-users"></i></div>
            <div class="stat-meta">
                <span class="stat-label">Total Customers</span>
                <span class="stat-value">{{ number_format($stats['total'] ?? 0) }}</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon vip"><i class="fas fa-trophy"></i></div>
            <div class="stat-meta">
                <span class="stat-label">VIP</span>
                <span class="stat-value">{{ number_format($stats['vip'] ?? 0) }}</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon flagged"><i class="fas fa-flag"></i></div>
            <div class="stat-meta">
                <span class="stat-label">Flagged</span>
                <span class="stat-value">{{ number_format($stats['flagged'] ?? 0) }}</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon blocked"><i class="fas fa-ban"></i></div>
            <div class="stat-meta">
                <span class="stat-label">Blocked</span>
                <span class="stat-value">{{ number_format($stats['blocked'] ?? 0) }}</span>
            </div>
        </div>
    </div>

    {{-- Assignee quick-filter chips --}}
    <div style="display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:0.75rem;">
        @php
            $chipStyle = 'padding:0.35rem 0.85rem;border-radius:999px;font-size:0.78rem;font-weight:600;text-decoration:none;border:1px solid var(--border);';
            $chipActive = 'background:var(--accent);color:#fff;border-color:var(--accent);';
            $chipIdle = 'color:var(--text-secondary,#6b7280);background:var(--bg-card);';
        @endphp
        <a href="{{ route('inventory.customers.index', array_merge(request()->except(['assignee','page']), [])) }}"
           style="{{ $chipStyle }} {{ ($assignee ?? null) ? $chipIdle : $chipActive }}">All ({{ $stats['total'] ?? 0 }})</a>
        @if($currentStaff)
            <a href="{{ route('inventory.customers.index', array_merge(request()->except('page'), ['assignee' => 'mine'])) }}"
               style="{{ $chipStyle }} {{ ($assignee ?? null) === 'mine' ? $chipActive : $chipIdle }}">
                <i class="fas fa-user"></i> My Customers ({{ $stats['mine'] ?? 0 }})
            </a>
        @endif
        <a href="{{ route('inventory.customers.index', array_merge(request()->except('page'), ['assignee' => 'unassigned'])) }}"
           style="{{ $chipStyle }} {{ ($assignee ?? null) === 'unassigned' ? $chipActive : $chipIdle }}">
            Unassigned ({{ $stats['unassigned'] ?? 0 }})
        </a>
        @foreach(($teamMembers ?? []) as $m)
            @php $mName = optional($m->user)->name ?? 'Staff #'.$m->id; @endphp
            <a href="{{ route('inventory.customers.index', array_merge(request()->except('page'), ['assignee' => $m->id])) }}"
               style="{{ $chipStyle }} {{ (string) ($assignee ?? '') === (string) $m->id ? $chipActive : $chipIdle }}">
                {{ $mName }}
            </a>
        @endforeach
    </div>

    {{-- Contact-status quick filters --}}
    <div style="display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:1rem;">
        <span style="font-size:0.72rem; color:var(--text-muted); align-self:center; text-transform:uppercase; letter-spacing:0.05em;">Contact:</span>
        <a href="{{ route('inventory.customers.index', array_merge(request()->except(['contact','page']), [])) }}"
           style="{{ $chipStyle }} {{ empty($contactFilter ?? null) ? $chipActive : $chipIdle }}">All</a>
        <a href="{{ route('inventory.customers.index', array_merge(request()->except('page'), ['contact' => 'follow_up_due'])) }}"
           style="{{ $chipStyle }} {{ ($contactFilter ?? null) === 'follow_up_due' ? 'background:#ff9f43;color:#fff;border-color:#ff9f43;' : $chipIdle }}">
            <i class="fas fa-clock"></i> Follow-up due ({{ $stats['follow_up_due'] ?? 0 }})
        </a>
        <a href="{{ route('inventory.customers.index', array_merge(request()->except('page'), ['contact' => 'never_contacted'])) }}"
           style="{{ $chipStyle }} {{ ($contactFilter ?? null) === 'never_contacted' ? $chipActive : $chipIdle }}">
            Never contacted ({{ $stats['never_contacted'] ?? 0 }})
        </a>
        @foreach(($contactStatusOptions ?? []) as $key => $opt)
            @if($key === 'pending') @continue @endif
            <a href="{{ route('inventory.customers.index', array_merge(request()->except('page'), ['contact' => $key])) }}"
               style="{{ $chipStyle }} {{ ($contactFilter ?? null) === $key ? 'background:'.$opt['color'].';color:#fff;border-color:'.$opt['color'].';' : $chipIdle }}">
                {{ $opt['label'] }}
            </a>
        @endforeach
    </div>

    {{-- Filter Bar --}}
    <form method="GET" action="{{ route('inventory.customers.index') }}" class="filter-bar">
        @if(! empty($assignee))<input type="hidden" name="assignee" value="{{ $assignee }}">@endif
        <div class="search-input">
            <i class="fas fa-search"></i>
            <input type="text" name="search" placeholder="Search by name, email, or phone..." value="{{ request('search') }}">
        </div>
        <select name="tag" onchange="this.form.submit()">
            <option value="">All Tags</option>
            <option value="new" {{ request('tag') === 'new' ? 'selected' : '' }}>New</option>
            <option value="regular" {{ request('tag') === 'regular' ? 'selected' : '' }}>Regular</option>
            <option value="vip" {{ request('tag') === 'vip' ? 'selected' : '' }}>VIP</option>
            <option value="flagged" {{ request('tag') === 'flagged' ? 'selected' : '' }}>Flagged</option>
        </select>
        <button type="submit" class="action-btn"><i class="fas fa-filter"></i> Apply</button>
    </form>

    {{-- Customers Table --}}
    @if(isset($customers) && $customers->count())
        <div class="table-container">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Total Orders</th>
                        <th>Total Spent</th>
                        <th>Tag</th>
                        <th>Assigned To</th>
                        <th>Last Contacted</th>
                        <th>Last Order</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($customers as $customer)
                        @php
                            $tag = $customer->tag ?? 'new';
                            $tagStyles = [
                                'vip' => 'background: rgba(255, 193, 7, 0.15); color: #ffc107;',
                                'flagged' => 'background: rgba(255, 71, 87, 0.15); color: #ff4757;',
                                'regular' => 'background: rgba(16, 191, 255, 0.15); color: var(--accent);',
                                'new' => 'background: rgba(99, 110, 114, 0.15); color: #a4b0be;',
                            ];
                            $tagStyle = $tagStyles[$tag] ?? $tagStyles['new'];
                        @endphp
                        <tr>
                            <td>
                                <span class="customer-name">{{ $customer->name ?? '—' }}</span>
                                @if($customer->is_blocked)
                                    <span class="chip-blocked"><i class="fas fa-ban"></i> Blocked</span>
                                @endif
                            </td>
                            <td>{{ $customer->email ?? '—' }}</td>
                            <td>{{ $customer->phone ?? '—' }}</td>
                            <td>{{ number_format($customer->total_orders ?? 0) }}</td>
                            <td>&#8358;{{ number_format($customer->total_spent ?? 0, 2) }}</td>
                            <td>
                                <span class="tag-badge" style="{{ $tagStyle }}">{{ ucfirst($tag) }}</span>
                                @php
                                    $rs = (int) ($customer->risk_score ?? 0);
                                    $rBand = $rs >= 70 ? 'high' : ($rs >= 40 ? 'medium' : 'low');
                                    $rColor = $rBand === 'high' ? 'var(--danger)' : ($rBand === 'medium' ? 'var(--warning)' : 'var(--success)');
                                @endphp
                                @if($rs > 0)
                                    <span title="Risk score: {{ $rs }}/100" style="display:inline-flex;align-items:center;gap:0.3rem;margin-left:0.35rem;padding:0.1rem 0.5rem;border-radius:999px;font-size:0.7rem;background:{{ $rColor }}22;color:{{ $rColor }};border:1px solid {{ $rColor }};">
                                        <i class="fas fa-gauge-high"></i>{{ $rs }}
                                    </span>
                                @endif
                            </td>
                            <td>
                                {{-- Assignee chip + inline reassign (owner/manager only) --}}
                                @if($customer->assigned_to && $customer->assignedStaff)
                                    <span style="display:inline-block;padding:3px 9px;border-radius:999px;background:rgba(16,191,255,0.14);color:var(--accent);font-size:0.72rem;font-weight:600;">
                                        {{ optional($customer->assignedStaff->user)->name ?? 'Staff #'.$customer->assigned_to }}
                                    </span>
                                @else
                                    <span style="color:var(--text-muted,#9CA3AF);font-size:0.78rem;">Unassigned</span>
                                @endif

                                @php
                                    // Owner and staff-with-customers.manage get the inline reassign.
                                    $canReassign = (! $currentStaff) || ($currentStaff && $currentStaff->can_do('customers.manage'));
                                @endphp
                                @if($canReassign)
                                    <form method="POST" action="{{ route('inventory.customers.assign', $customer->id) }}" style="display:inline-flex;align-items:center;margin-left:0.35rem;">
                                        @csrf
                                        <select name="staff_id" onchange="this.form.submit()"
                                                style="padding:0.2rem 0.4rem;font-size:0.72rem;border:1px solid var(--border);border-radius:6px;background:var(--bg-card);color:var(--text-primary);">
                                            <option value="">— reassign —</option>
                                            @foreach(($teamMembers ?? []) as $m)
                                                <option value="{{ $m->id }}" {{ $customer->assigned_to == $m->id ? 'selected' : '' }}>{{ optional($m->user)->name ?? 'Staff #'.$m->id }}</option>
                                            @endforeach
                                        </select>
                                    </form>
                                @endif
                            </td>
                            <td>
                                @php
                                    $statusKey = $customer->contact_status ?: 'pending';
                                    $statusInfo = ($contactStatusOptions ?? [])[$statusKey] ?? null;
                                    $followUpDue = $customer->next_follow_up_at && $customer->next_follow_up_at->lte(now());
                                @endphp
                                @if($customer->last_contacted_at)
                                    <div style="font-size:0.82rem; color:var(--text-primary);" title="{{ $customer->last_contacted_at->format('Y-m-d H:i') }}">
                                        {{ $customer->last_contacted_at->diffForHumans() }}
                                    </div>
                                    @if($customer->last_contact_channel)
                                        <div style="font-size:0.7rem; color:var(--text-muted);">
                                            via {{ ucfirst($customer->last_contact_channel) }}
                                            @if($customer->lastContactedByStaff && optional($customer->lastContactedByStaff->user)->name)
                                                · {{ \Illuminate\Support\Str::words(optional($customer->lastContactedByStaff->user)->name, 1, '') }}
                                            @endif
                                        </div>
                                    @endif
                                @else
                                    <span style="color:var(--text-muted); font-size:0.78rem;">Never</span>
                                @endif
                                @if($statusInfo && $statusKey !== 'pending')
                                    <div style="margin-top:0.25rem;">
                                        <span style="font-size:0.66rem; font-weight:600; padding:0.1rem 0.45rem; border-radius:999px; background:{{ $statusInfo['color'] }}1f; color:{{ $statusInfo['color'] }};">
                                            {{ $statusInfo['label'] }}
                                        </span>
                                    </div>
                                @endif
                                @if($followUpDue)
                                    <div style="margin-top:0.2rem;">
                                        <span style="font-size:0.66rem; font-weight:600; padding:0.1rem 0.45rem; border-radius:999px; background:rgba(255,159,67,0.15); color:#ff9f43;">
                                            <i class="fas fa-clock"></i> Follow-up due
                                        </span>
                                    </div>
                                @endif
                            </td>
                            <td>
                                {{ $customer->last_order_at ? $customer->last_order_at->diffForHumans() : 'Never' }}
                            </td>
                            <td>
                                <a href="{{ route('inventory.customers.show', $customer->id) }}" class="action-btn">
                                    <i class="fas fa-eye"></i> View
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="pagination-wrapper">
                {{ $customers->withQueryString()->links() }}
            </div>
        </div>
    @else
        <div class="table-container">
            <div class="empty-state">
                <i class="fas fa-user-friends"></i>
                <h3>No customers yet</h3>
                <p>Customers are created automatically when orders are placed. Once you have orders, customer profiles will appear here.</p>
            </div>
        </div>
    @endif
@endsection