@extends('backEnd.layouts.master')
@section('title', 'Customer Insights Settings')

@section('content')
@php
    $tierMode = old('tier_mode', $settings['tier_mode'] ?? 'spend');
    $tiers = old('tiers', $settings['tiers'] ?? $defaultTiers);
@endphp
<div class="container-fluid py-3">
    <div class="d-flex align-items-center mb-3 flex-wrap gap-2">
        <a href="{{ route('admin.customers.insights') }}" class="btn btn-sm btn-outline-secondary"><i class="fas fa-arrow-left"></i></a>
        <div>
            <h4 class="fw-bold mb-0"><i class="fas fa-sliders-h me-2 text-primary"></i>Customer Insights Settings</h4>
            <small class="text-muted">Customer tiers (Regular → Bronze → Silver → Gold), auto tags, AI insight</small>
        </div>
    </div>

    <form method="POST" action="{{ route('admin.customers.insights-settings.save') }}" id="insightsSettingsForm">
        @csrf
        <div class="row g-3">
            <div class="col-lg-8">
                <div class="card shadow-sm border-0 mb-3">
                    <div class="card-header bg-white fw-bold"><i class="fas fa-layer-group me-2 text-warning"></i>Customer Tiers</div>
                    <div class="card-body">
                        <p class="small text-muted mb-3">Default tier = <strong>Regular</strong>. Order/spend threshold পূরণ করলে auto upgrade — অথবা Edit Customer থেকে manual set।</p>

                        <label class="form-label fw-semibold mb-2">Tier calculate কোন metric দিয়ে?</label>
                        <div class="row g-2 mb-3">
                            <div class="col-md-6">
                                <label class="cis-vip-option w-100 {{ $tierMode === 'spend' ? 'is-active' : '' }}">
                                    <input type="radio" name="tier_mode" value="spend" class="d-none cis-tier-radio" {{ $tierMode === 'spend' ? 'checked' : '' }}>
                                    <span class="cis-vip-option-inner">
                                        <i class="fas fa-wallet text-primary"></i>
                                        <strong>Total Spend (৳)</strong>
                                        <small>Delivered orders মোট খরচ</small>
                                    </span>
                                </label>
                            </div>
                            <div class="col-md-6">
                                <label class="cis-vip-option w-100 {{ $tierMode === 'orders' ? 'is-active' : '' }}">
                                    <input type="radio" name="tier_mode" value="orders" class="d-none cis-tier-radio" {{ $tierMode === 'orders' ? 'checked' : '' }}>
                                    <span class="cis-vip-option-inner">
                                        <i class="fas fa-shopping-bag text-success"></i>
                                        <strong>Total Orders</strong>
                                        <small>মোট অর্ডার count</small>
                                    </span>
                                </label>
                            </div>
                        </div>
                        <div class="form-text mb-3" id="tierModeHint">{{ \App\Services\CustomerInsightsSettingsService::tierModeLabel($tierMode) }}</div>

                        <div class="table-responsive">
                            <table class="table table-sm align-middle cis-tier-table">
                                <thead class="table-light">
                                    <tr>
                                        <th>Tier Tag</th>
                                        <th>Display Name</th>
                                        <th class="cis-tier-col-spend">Min Spend (৳)</th>
                                        <th class="cis-tier-col-orders">Min Orders</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($tiers as $i => $tier)
                                    <tr>
                                        <td>
                                            <span class="ci-tier-badge {{ $tier['css_class'] ?? 'ci-tier-regular' }}">
                                                <i class="fas {{ $tier['icon'] ?? 'fa-user' }} me-1"></i>{{ ucfirst($tier['key'] ?? 'tier') }}
                                            </span>
                                            <input type="hidden" name="tiers[{{ $i }}][key]" value="{{ $tier['key'] }}">
                                            <input type="hidden" name="tiers[{{ $i }}][css_class]" value="{{ $tier['css_class'] ?? '' }}">
                                            <input type="hidden" name="tiers[{{ $i }}][icon]" value="{{ $tier['icon'] ?? 'fa-user' }}">
                                        </td>
                                        <td>
                                            @if(!empty($tier['is_default']))
                                            <input type="text" name="tiers[{{ $i }}][name]" class="form-control form-control-sm" value="{{ $tier['name'] ?? 'Regular' }}" readonly>
                                            @else
                                            <input type="text" name="tiers[{{ $i }}][name]" class="form-control form-control-sm" value="{{ $tier['name'] ?? '' }}" required>
                                            @endif
                                        </td>
                                        <td class="cis-tier-col-spend">
                                            @if(!empty($tier['is_default']))
                                            <input type="number" name="tiers[{{ $i }}][min_spend]" class="form-control form-control-sm" value="0" readonly>
                                            @else
                                            <input type="number" name="tiers[{{ $i }}][min_spend]" class="form-control form-control-sm" min="0" step="100" value="{{ $tier['min_spend'] ?? 0 }}">
                                            @endif
                                        </td>
                                        <td class="cis-tier-col-orders">
                                            @if(!empty($tier['is_default']))
                                            <input type="number" name="tiers[{{ $i }}][min_orders]" class="form-control form-control-sm" value="0" readonly>
                                            @else
                                            <input type="number" name="tiers[{{ $i }}][min_orders]" class="form-control form-control-sm" min="0" value="{{ $tier['min_orders'] ?? 0 }}">
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="card shadow-sm border-0 mb-3">
                    <div class="card-header bg-white fw-bold"><i class="fas fa-tags me-2"></i>Other Auto Tags</div>
                    <div class="card-body row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Repeat buyer (min orders)</label>
                            <input type="number" name="repeat_order_threshold" class="form-control" min="1"
                                   value="{{ old('repeat_order_threshold', $settings['repeat_order_threshold'] ?? 3) }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">High value spend (৳)</label>
                            <input type="number" name="high_value_spend" class="form-control" min="0" step="100"
                                   value="{{ old('high_value_spend', $settings['high_value_spend'] ?? 20000) }}">
                        </div>
                    </div>
                </div>

                <div class="card shadow-sm border-0">
                    <div class="card-header bg-white fw-bold"><i class="fas fa-robot me-2 text-info"></i>AI Insight</div>
                    <div class="card-body">
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" name="ai_insight_enabled" value="1" id="aiInsightEnabled"
                                   {{ old('ai_insight_enabled', $settings['ai_insight_enabled'] ?? false) ? 'checked' : '' }}>
                            <label class="form-check-label fw-semibold" for="aiInsightEnabled">Enable AI insight on Customer Insights page</label>
                        </div>
                        @if($aiConfigured)
                        <div class="alert alert-success py-2 small mb-3"><i class="fas fa-check-circle me-1"></i> Global AI configured</div>
                        @else
                        <div class="alert alert-warning py-2 small mb-3"><i class="fas fa-exclamation-triangle me-1"></i> AI API key নেই — Global AI setup করুন</div>
                        @endif
                        <ul class="small mb-0 ps-3">
                            @foreach($aiFeatures as $feature)
                            <li class="mb-2"><strong>{{ $feature['title'] }}:</strong> {{ $feature['body'] }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card shadow-sm border-0">
                    <div class="card-body">
                        <h6 class="fw-bold">How tiers work</h6>
                        <ul class="small text-muted ps-3 mb-3">
                            <li><strong>Regular</strong> — default (নতুন customer)</li>
                            <li><strong>Bronze / Silver / Gold</strong> — threshold পূরণ হলে auto tag</li>
                            <li>Spend mode = Min Spend column use হয়</li>
                            <li>Orders mode = Min Orders column use হয়</li>
                            <li>Manual tier: Edit Customer → Customer Tier</li>
                        </ul>
                        @can('customers.update')
                        <a href="{{ route('admin.customer-tags.index') }}" class="btn btn-outline-primary btn-sm w-100 mb-2">
                            <i class="fas fa-tags me-1"></i> Extra Manual Tags
                        </a>
                        @endcan
                        <button type="submit" class="btn btn-primary w-100"><i class="fas fa-save me-1"></i> Save Settings</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="{{ asset('backEnd/css/customer-insights.css') }}?v={{ @filemtime(public_path('backEnd/css/customer-insights.css')) ?: time() }}">
<style>
.cis-vip-option { cursor: pointer; margin: 0; }
.cis-vip-option-inner {
    display: flex; flex-direction: column; gap: 4px;
    border: 2px solid #e5e7eb; border-radius: 10px; padding: 14px 16px;
    background: #fff; transition: border-color .15s, background .15s;
}
.cis-vip-option.is-active .cis-vip-option-inner { border-color: #6366f1; background: #eef2ff; }
.cis-tier-table .form-control-sm { min-width: 90px; }
.cis-tier-col-spend.is-muted, .cis-tier-col-orders.is-muted { opacity: .35; }
</style>
@endpush

@push('scripts')
<script>
(function () {
    const hints = {
        spend: @json(\App\Services\CustomerInsightsSettingsService::tierModeLabel('spend')),
        orders: @json(\App\Services\CustomerInsightsSettingsService::tierModeLabel('orders')),
    };

    function syncTierMode() {
        const mode = document.querySelector('.cis-tier-radio:checked')?.value || 'spend';
        document.querySelectorAll('.cis-vip-option').forEach(el => {
            el.classList.toggle('is-active', el.querySelector('.cis-tier-radio')?.value === mode);
        });
        document.querySelectorAll('.cis-tier-col-spend').forEach(el => el.classList.toggle('is-muted', mode !== 'spend'));
        document.querySelectorAll('.cis-tier-col-orders').forEach(el => el.classList.toggle('is-muted', mode !== 'orders'));
        const hint = document.getElementById('tierModeHint');
        if (hint) hint.textContent = hints[mode] || hints.spend;
    }

    document.querySelectorAll('.cis-tier-radio').forEach(r => r.addEventListener('change', syncTierMode));
    syncTierMode();
})();
</script>
@endpush