@extends('layouts.admin')

@section('title', 'کدهای فعالسازی')

@section('styles')
<style>
    .otp-code-badge {
        font-family: 'Courier New', monospace;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 4px;
        color: #2c3e50;
        background: #f4f6f8;
        border: 1.5px dashed #bdc3cb;
        border-radius: 8px;
        padding: 6px 14px;
        display: inline-block;
        cursor: pointer;
        transition: all .2s;
        user-select: all;
    }
    .otp-code-badge:hover {
        background: #e8f5e9;
        border-color: #4caf50;
        color: #1b5e20;
    }
    .otp-code-badge.copied {
        background: #e8f5e9;
        border-color: #4caf50;
        color: #1b5e20;
    }
    .stat-box {
        text-align: center;
        padding: 16px 10px;
        border-radius: 10px;
        margin-bottom: 8px;
    }
    .stat-box .stat-num {
        font-size: 32px;
        font-weight: 700;
        line-height: 1;
    }
    .stat-box .stat-label {
        font-size: 13px;
        margin-top: 4px;
        opacity: .8;
    }
    .stat-box.total   { background: #e3f2fd; color: #1565c0; }
    .stat-box.active  { background: #e8f5e9; color: #2e7d32; }
    .stat-box.expired { background: #fff3e0; color: #e65100; }
    .stat-box.used    { background: #f3e5f5; color: #6a1b9a; }
    .filter-bar { background: #fff; border-radius: 10px; padding: 14px 18px; margin-bottom: 18px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
    .generate-box { background: #fff; border-radius: 10px; padding: 16px 18px; margin-bottom: 18px; box-shadow: 0 1px 4px rgba(0,0,0,.08); border-right: 4px solid #1565c0; }
    .table td, .table th { vertical-align: middle !important; }
    .contact-cell { direction: ltr; text-align: right; font-size: 13px; }
    .time-cell { font-size: 12px; color: #555; }
    .label-active  { background-color: #4caf50; }
    .label-expired { background-color: #ff9800; }
    .label-used    { background-color: #9c27b0; }
    .auto-refresh-badge { float: left; margin-top: 3px; }
    .table-hover tbody tr:hover .otp-code-badge { border-color: #1565c0; }
</style>
@endsection

@section('content')

{{-- ── آمار سریع ──────────────────────────────────────────────────────── --}}
<div class="row">
    <div class="col-xs-6 col-sm-3">
        <div class="stat-box total">
            <div class="stat-num">{{ number_format($stats['total']) }}</div>
            <div class="stat-label">کل کدها</div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-3">
        <div class="stat-box active">
            <div class="stat-num">{{ number_format($stats['active']) }}</div>
            <div class="stat-label">فعال (قابل استفاده)</div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-3">
        <div class="stat-box expired">
            <div class="stat-num">{{ number_format($stats['expired']) }}</div>
            <div class="stat-label">منقضی شده</div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-3">
        <div class="stat-box used">
            <div class="stat-num">{{ number_format($stats['used']) }}</div>
            <div class="stat-label">استفاده شده</div>
        </div>
    </div>
</div>

{{-- ── ساخت کد دستی ───────────────────────────────────────────────────── --}}
<div class="generate-box">
    <h4 style="margin-top:0; margin-bottom:12px;">
        <i class="material-icons" style="vertical-align:middle; font-size:20px; margin-left:6px;">add_circle_outline</i>
        ساخت کد فعالسازی دستی برای کاربر
    </h4>
    <form action="{{ route('admin.otp-codes.generate') }}" method="POST" class="form-inline" style="gap:10px; flex-wrap:wrap;">
        @csrf
        <div class="form-group" style="margin-left:10px; margin-bottom:8px;">
            <label class="sr-only">شماره یا ایمیل</label>
            <input type="text" name="phone_or_email" class="form-control"
                   placeholder="شماره موبایل یا ایمیل کاربر" style="min-width:220px;" required>
        </div>
        <div class="form-group" style="margin-left:10px; margin-bottom:8px;">
            <label class="sr-only">نوع</label>
            <select name="type" class="form-control" required>
                <option value="login">ورود</option>
                <option value="register">ثبت‌نام</option>
                <option value="reset_password">بازیابی رمز</option>
                <option value="verify_phone">تایید شماره</option>
                <option value="verify_email">تایید ایمیل</option>
            </select>
        </div>
        <button type="submit" class="btn btn-primary waves-effect" style="margin-bottom:8px;">
            <i class="material-icons" style="vertical-align:middle; font-size:16px;">vpn_key</i>
            ساخت کد (۳۰ دقیقه)
        </button>
    </form>
    @if(session('success'))
        <div class="alert alert-success" style="margin-top:10px; margin-bottom:0; padding:10px 16px;">
            <i class="material-icons" style="vertical-align:middle; font-size:18px; margin-left:6px;">check_circle</i>
            {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger" style="margin-top:10px; margin-bottom:0; padding:10px 16px;">
            <i class="material-icons" style="vertical-align:middle; font-size:18px; margin-left:6px;">error</i>
            {{ session('error') }}
        </div>
    @endif
</div>

{{-- ── فیلتر و جستجو ──────────────────────────────────────────────────── --}}
<div class="filter-bar">
    <form method="GET" action="{{ route('admin.otp-codes.index') }}" class="form-inline" style="gap:8px; flex-wrap:wrap;">
        <div class="form-group" style="margin-left:8px; margin-bottom:6px;">
            <input type="text" name="search" class="form-control input-sm"
                   placeholder="جستجو: شماره، ایمیل یا کد..."
                   value="{{ request('search') }}" style="min-width:220px;">
        </div>
        <div class="form-group" style="margin-left:8px; margin-bottom:6px;">
            <select name="type" class="form-control input-sm">
                <option value="">همه انواع</option>
                <option value="login"          {{ request('type')=='login'          ? 'selected':'' }}>ورود</option>
                <option value="register"       {{ request('type')=='register'       ? 'selected':'' }}>ثبت‌نام</option>
                <option value="reset_password" {{ request('type')=='reset_password' ? 'selected':'' }}>بازیابی رمز</option>
                <option value="verify_phone"   {{ request('type')=='verify_phone'   ? 'selected':'' }}>تایید شماره</option>
                <option value="verify_email"   {{ request('type')=='verify_email'   ? 'selected':'' }}>تایید ایمیل</option>
            </select>
        </div>
        <div class="form-group" style="margin-left:8px; margin-bottom:6px;">
            <select name="status" class="form-control input-sm">
                <option value="">همه وضعیت‌ها</option>
                <option value="active"  {{ request('status')=='active'  ? 'selected':'' }}>فعال</option>
                <option value="expired" {{ request('status')=='expired' ? 'selected':'' }}>منقضی</option>
                <option value="used"    {{ request('status')=='used'    ? 'selected':'' }}>استفاده شده</option>
            </select>
        </div>
        <div style="margin-bottom:6px;">
            <button type="submit" class="btn btn-default btn-sm waves-effect">
                <i class="material-icons" style="vertical-align:middle; font-size:15px;">search</i> فیلتر
            </button>
            <a href="{{ route('admin.otp-codes.index') }}" class="btn btn-default btn-sm waves-effect" style="margin-right:4px;">
                <i class="material-icons" style="vertical-align:middle; font-size:15px;">clear</i> پاک‌کردن
            </a>
        </div>
        <div style="margin-bottom:6px; margin-right:auto;">
            <form action="{{ route('admin.otp-codes.cleanup') }}" method="POST" style="display:inline;">
                @csrf
                <button type="submit" class="btn btn-warning btn-sm waves-effect"
                        onclick="return confirm('کدهای منقضی و استفاده‌شده قدیمی (بیش از ۱ روز) پاک شوند؟')">
                    <i class="material-icons" style="vertical-align:middle; font-size:15px;">delete_sweep</i> پاک‌سازی قدیمی
                </button>
            </form>
        </div>
    </form>
</div>

{{-- ── جدول کدها ──────────────────────────────────────────────────────── --}}
<div class="row clearfix">
    <div class="col-lg-12">
        <div class="card">
            <div class="header">
                <h2>
                    کدهای فعالسازی
                    <small>{{ $otpCodes->total() }} کد یافت شد</small>
                    <span class="auto-refresh-badge">
                        <button class="btn btn-xs btn-default waves-effect" id="toggleRefresh">
                            <i class="material-icons" style="font-size:14px; vertical-align:middle;">autorenew</i>
                            بروزرسانی خودکار: خاموش
                        </button>
                    </span>
                </h2>
            </div>
            <div class="body">
                @if($otpCodes->isEmpty())
                    <div class="text-center" style="padding:40px 0; color:#999;">
                        <i class="material-icons" style="font-size:48px; display:block; margin-bottom:10px;">vpn_key_off</i>
                        کدی یافت نشد
                    </div>
                @else
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead style="background:#f8f9fa;">
                            <tr>
                                <th style="width:50px;">#</th>
                                <th>کد فعالسازی</th>
                                <th>شماره / ایمیل</th>
                                <th>کاربر</th>
                                <th>نوع</th>
                                <th>وضعیت</th>
                                <th>انقضا</th>
                                <th>زمان ارسال</th>
                                <th style="width:90px;">عملیات</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($otpCodes as $otp)
                            @php
                                $status = $otp->status;
                                $isActive = $status === 'active';
                            @endphp
                            <tr class="{{ $isActive ? 'success' : ($status === 'used' ? '' : 'warning') }}"
                                style="{{ $isActive ? 'background:#f1fdf4 !important;' : '' }}">
                                <td>{{ $otp->id }}</td>

                                {{-- کد --}}
                                <td>
                                    <span class="otp-code-badge {{ $isActive ? '' : 'text-muted' }}"
                                          onclick="copyCode(this, '{{ $otp->code }}')"
                                          title="کلیک کنید تا کپی شود">
                                        {{ $otp->code }}
                                    </span>
                                    @if($isActive)
                                        <br><small style="color:#388e3c; font-size:11px;">
                                            <i class="material-icons" style="font-size:11px; vertical-align:middle;">touch_app</i>
                                            برای کپی کلیک کنید
                                        </small>
                                    @endif
                                </td>

                                {{-- تماس --}}
                                <td class="contact-cell">
                                    @if($otp->phone)
                                        <i class="material-icons" style="font-size:13px; vertical-align:middle; color:#555;">phone</i>
                                        {{ $otp->phone }}
                                    @endif
                                    @if($otp->email)
                                        <br><i class="material-icons" style="font-size:13px; vertical-align:middle; color:#555;">email</i>
                                        {{ $otp->email }}
                                    @endif
                                </td>

                                {{-- کاربر --}}
                                <td>
                                    @if($otp->user)
                                        <a href="{{ route('admin.users.edit', $otp->user_id) }}">
                                            {{ $otp->user->full_name ?: '—' }}
                                        </a>
                                        <br><small style="color:#888;">#{{ $otp->user_id }}</small>
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>

                                {{-- نوع --}}
                                <td>
                                    <span class="label label-info">{{ $otp->type_label }}</span>
                                </td>

                                {{-- وضعیت --}}
                                <td>
                                    @if($status === 'active')
                                        <span class="label label-active">
                                            <i class="material-icons" style="font-size:12px; vertical-align:middle;">check_circle</i>
                                            فعال
                                        </span>
                                    @elseif($status === 'used')
                                        <span class="label label-used">
                                            <i class="material-icons" style="font-size:12px; vertical-align:middle;">done_all</i>
                                            استفاده شده
                                        </span>
                                    @else
                                        <span class="label label-expired">
                                            <i class="material-icons" style="font-size:12px; vertical-align:middle;">timer_off</i>
                                            منقضی
                                        </span>
                                    @endif
                                </td>

                                {{-- انقضا --}}
                                <td class="time-cell">
                                    @if($otp->expires_at)
                                        @if($isActive)
                                            <span style="color:#2e7d32; font-weight:600;">
                                                {{ $otp->expires_at->format('H:i') }}
                                            </span>
                                            <br>
                                            <span class="countdown" data-expires="{{ $otp->expires_at->timestamp }}"></span>
                                        @else
                                            {{ $otp->expires_at->format('Y/m/d H:i') }}
                                        @endif
                                    @else
                                        —
                                    @endif
                                </td>

                                {{-- زمان ارسال --}}
                                <td class="time-cell">
                                    {{ $otp->created_at ? $otp->created_at->format('Y/m/d H:i:s') : '—' }}
                                    <br>
                                    <small style="color:#999;">
                                        {{ $otp->created_at ? $otp->created_at->diffForHumans() : '' }}
                                    </small>
                                </td>

                                {{-- عملیات --}}
                                <td>
                                    @if(!$otp->verified)
                                        <form action="{{ route('admin.otp-codes.extend', $otp->id) }}" method="POST" style="display:inline;">
                                            @csrf
                                            <button type="submit"
                                                    class="btn btn-xs waves-effect {{ $isActive ? 'btn-default' : 'btn-warning' }}"
                                                    title="تمدید ۳۰ دقیقه">
                                                <i class="material-icons" style="font-size:14px; vertical-align:middle;">alarm_add</i>
                                            </button>
                                        </form>
                                    @else
                                        <span class="text-muted" title="استفاده شده">—</span>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                {{-- Pagination --}}
                <div style="margin-top:12px;">
                    {{ $otpCodes->links() }}
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
// ── کپی کد ──────────────────────────────────────────────────────────────────
function copyCode(el, code) {
    navigator.clipboard.writeText(code).then(function () {
        el.classList.add('copied');
        var orig = el.textContent;
        el.textContent = '✓ کپی شد!';
        setTimeout(function () {
            el.textContent = orig;
            el.classList.remove('copied');
        }, 1800);
    }).catch(function () {
        // fallback
        var ta = document.createElement('textarea');
        ta.value = code;
        document.body.appendChild(ta);
        ta.select();
        document.execCommand('copy');
        document.body.removeChild(ta);
        el.classList.add('copied');
        setTimeout(function () { el.classList.remove('copied'); }, 1800);
    });
}

// ── شمارش معکوس تا انقضا ────────────────────────────────────────────────────
function updateCountdowns() {
    document.querySelectorAll('.countdown').forEach(function (el) {
        var expires = parseInt(el.dataset.expires);
        var now = Math.floor(Date.now() / 1000);
        var diff = expires - now;
        if (diff <= 0) {
            el.textContent = 'منقضی شد';
            el.style.color = '#e65100';
        } else {
            var m = Math.floor(diff / 60);
            var s = diff % 60;
            el.textContent = m + ':' + String(s).padStart(2, '0') + ' مانده';
            el.style.color = diff < 120 ? '#e65100' : '#2e7d32';
        }
    });
}
updateCountdowns();
setInterval(updateCountdowns, 1000);

// ── بروزرسانی خودکار ────────────────────────────────────────────────────────
var autoRefreshTimer = null;
var autoRefreshOn = false;
document.getElementById('toggleRefresh').addEventListener('click', function () {
    autoRefreshOn = !autoRefreshOn;
    if (autoRefreshOn) {
        this.innerHTML = '<i class="material-icons" style="font-size:14px;vertical-align:middle;">autorenew</i> بروزرسانی خودکار: روشن (۱۵ ث)';
        this.classList.add('btn-success');
        this.classList.remove('btn-default');
        autoRefreshTimer = setInterval(function () { location.reload(); }, 15000);
    } else {
        this.innerHTML = '<i class="material-icons" style="font-size:14px;vertical-align:middle;">autorenew</i> بروزرسانی خودکار: خاموش';
        this.classList.remove('btn-success');
        this.classList.add('btn-default');
        clearInterval(autoRefreshTimer);
    }
});
</script>
@endsection