@extends('layouts.user')

@section('content')

@php
    $user = auth()->user();
    $activeSub = $user->subscriptions->where('status', 'active')->sortByDesc('expires_at')->first();
    $apiKeys = $user->apiKeys;
    $activeKeysCount = $apiKeys->where('status', 'active')->count();

    /* ── Human-readable time helper ── */
    if (!function_exists('humanTime')) {
        function humanTime(int $days): string {
            if ($days <= 0)  return 'Expired';
            if ($days === 1) return '1 day left';
            if ($days < 7)   return $days . ' days left';
            if ($days < 14)  return '1 week left';
            if ($days < 30)  return round($days / 7) . ' weeks left';
            if ($days < 60)  return '1 month left';
            if ($days < 365) return round($days / 30) . ' months left';
            return round($days / 365, 1) . ' years left';
        }
    }
    /* ── Expiring soon calculation ── */
    $expiringSoon = false;
    $daysLeft = null;
    if ($activeSub) {
        $daysLeft = (int) now()->diffInDays($activeSub->expires_at, false);
        $expiringSoon = $daysLeft >= 0 && $daysLeft <= 7;
    }
@endphp

{{-- PAGE HEADER --}}
<div class="mb-5">
    <a href="{{ route('user.dashboard') }}" class="text-muted d-inline-flex align-items-center gap-1 mb-2" style="font-size:12px;text-decoration:none;letter-spacing:.3px;">
        <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M19 12H5M5 12l7 7M5 12l7-7"/></svg>
        Back to Dashboard
    </a>
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">
        <div class="page-header-accent">
            <p class="text-muted mb-1" style="font-size:13px;letter-spacing:.5px;">Tab Hider Secure API Integration</p>
            <h2 class="fw-bold mb-0" style="letter-spacing:-0.5px;">My API Keys</h2>
        </div>
        @if($activeSub)
            <div class="d-flex align-items-center gap-2 px-3 py-2 rounded-3 bg-success bg-opacity-10 text-success border border-success-subtle">
                <span class="d-inline-block rounded-circle bg-success" style="width: 8px; height: 8px;"></span>
                <span class="fw-semibold text-capitalize" style="font-size: 13px;">{{ $activeSub->plan_type }} Premium active</span>
            </div>
        @else
            <div class="d-flex align-items-center gap-2 px-3 py-2 rounded-3 bg-danger bg-opacity-10 text-danger border border-danger-subtle">
                <span class="d-inline-block rounded-circle bg-danger" style="width: 8px; height: 8px;"></span>
                <span class="fw-semibold" style="font-size: 13px;">No active premium subscription</span>
            </div>
        @endif
    </div>
</div>

{{-- Flash Messages --}}
@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif
@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

{{-- ══════════════════════════════════
     EXPIRING SOON URGENT WARNING BANNER
══════════════════════════════════ --}}
@if($activeSub && $expiringSoon)
    <div class="alert alert-warning border-warning border-opacity-50 bg-warning bg-opacity-10 d-flex align-items-center gap-3 p-3 mb-4 rounded-3" role="alert" style="box-shadow: 0 4px 14px rgba(217, 119, 6, 0.08);">
        <span class="d-flex align-items-center justify-content-center bg-warning text-dark rounded-circle" style="width: 32px; height: 32px; font-size: 16px; animation: pulse-warning 1.8s infinite;">⚠️</span>
        <div>
            <h6 class="alert-heading fw-bold mb-1" style="color: #9a3412; font-size: 14px;">Your Tab Hider Premium Key is Expiring Soon!</h6>
            <p class="mb-0 text-dark-emphasis small">
                Your key will expire in <strong>{{ humanTime($daysLeft) }}</strong> on <strong>{{ $activeSub->expires_at->format('d M Y') }}</strong>. Please renew to ensure uninterrupted panic-defense protection.
            </p>
        </div>
        <a href="{{ url('/#pricing') }}" class="btn btn-warning btn-sm ms-auto fw-bold text-dark px-3 py-2" style="border-radius:6px; font-size:12px;">Renew Key Now</a>
    </div>
    <style>
        @keyframes pulse-warning {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.4); }
            70% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(217, 119, 6, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
        }
    </style>
@endif

<div class="row g-4">
    {{-- ── LEFT COLUMN: KEYS MANAGEMENT ── --}}
    <div class="col-lg-8">
        <div class="panel-canvas p-4">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h5 class="fw-bold mb-0">Authorized Keys</h5>
                    <p class="text-muted mb-0" style="font-size: 12px;">Active keys authenticate your browser extension requests.</p>
                </div>
            </div>

            @if($apiKeys->isEmpty())
                <div class="text-center py-5">
                    <div style="font-size:3rem;margin-bottom:12px;">🔑</div>
                    <h6 class="fw-bold mb-2">No API Keys Yet</h6>
                    <p class="text-muted small mb-4">You need a premium subscription to generate and utilize API keys.</p>
                    <a href="{{ url('/#pricing') }}" class="btn-steel-primary" style="font-size:13px;padding:10px 24px;">Upgrade Plan</a>
                </div>
            @else
                <div class="table-responsive">
                    <table class="table align-middle" style="font-size:13px;">
                        <thead>
                            <tr style="border-bottom:2px solid #f4f4f5;">
                                <th class="text-muted fw-semibold pb-3" style="font-size:11px;text-transform:uppercase;letter-spacing:1px;border:none;min-width:180px;">Key</th>
                                <th class="text-muted fw-semibold pb-3" style="font-size:11px;text-transform:uppercase;letter-spacing:1px;border:none;">Subscription</th>
                                <th class="text-muted fw-semibold pb-3" style="font-size:11px;text-transform:uppercase;letter-spacing:1px;border:none;">Status</th>
                                <th class="text-muted fw-semibold pb-3" style="font-size:11px;text-transform:uppercase;letter-spacing:1px;border:none;">Expires</th>
                                <th class="text-muted fw-semibold pb-3" style="font-size:11px;text-transform:uppercase;letter-spacing:1px;border:none;">Time Left</th>
                                <th class="text-muted fw-semibold pb-3 text-end" style="font-size:11px;text-transform:uppercase;letter-spacing:1px;border:none;min-width:150px;">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($apiKeys as $key)
                            @php
                                $sub        = $key->subscription;
                                $expiresAt  = $sub ? $sub->expires_at : null;
                                $daysLeft   = $expiresAt ? (int) now()->diffInDays($expiresAt, false) : null;
                                $isExpired  = $expiresAt && now()->isAfter($expiresAt);
                                $expiringSoon = !$isExpired && $daysLeft !== null && $daysLeft <= 7;
                            @endphp
                            <tr>
                                {{-- Key --}}
                                <td class="py-3">
                                    <div class="d-flex align-items-center gap-2">
                                        <code class="px-2 py-1 rounded" style="background:#f0f0f0;font-size:12px;color:#18181b;word-break:break-all;font-family:monospace;">{{ $key->key }}</code>
                                    </div>
                                </td>

                                {{-- Plan --}}
                                <td class="text-capitalize">
                                    {{ $sub ? $sub->plan_type . ' Premium' : 'N/A' }}
                                </td>

                                {{-- Key Status --}}
                                <td>
                                    @if($isExpired)
                                        <span class="badge bg-danger">Expired</span>
                                    @elseif($key->status == 'active')
                                        <span class="badge bg-success">Active</span>
                                    @else
                                        <span class="badge bg-secondary">Disabled</span>
                                    @endif
                                </td>

                                {{-- Expiry Date --}}
                                <td>
                                    @if($expiresAt)
                                        <span class="{{ $isExpired ? 'text-danger fw-semibold' : ($expiringSoon ? 'text-warning fw-semibold' : '') }}">
                                            {{ $expiresAt->format('d M Y') }}
                                        </span>
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>

                                {{-- Days Left --}}
                                <td>
                                    @if($daysLeft !== null)
                                        @if($isExpired)
                                            <span class="badge" style="background:#fef2f2;color:#b91c1c;font-size:11px;">Expired</span>
                                        @elseif($expiringSoon)
                                            <span class="badge" style="background:#fffbeb;color:#d97706;font-size:11px;">{{ humanTime($daysLeft) }}</span>
                                        @else
                                            <span class="badge" style="background:#f0fdf4;color:#15803d;font-size:11px;">{{ humanTime($daysLeft) }}</span>
                                        @endif
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>

                                {{-- Actions --}}
                                <td class="text-end">
                                    <div class="d-flex gap-2 justify-content-end">
                                        @if(!$isExpired)
                                            <form action="{{ route('user.keys.toggle', $key->id) }}" method="POST" class="m-0">
                                                @csrf
                                                <button type="submit" class="btn btn-sm {{ $key->status == 'active' ? 'btn-outline-warning' : 'btn-outline-success' }}" style="font-size:12px;padding:5px 12px;">
                                                    {{ $key->status == 'active' ? 'Disable' : 'Enable' }}
                                                </button>
                                            </form>
                                            <form action="{{ route('user.keys.rotate', $key->id) }}" method="POST" class="m-0">
                                                @csrf
                                                <button type="submit" class="btn btn-sm btn-outline-danger" style="font-size:12px;padding:5px 12px;"
                                                    onclick="return confirm('Are you sure you want to rotate this key? The old key will immediately stop working.')">
                                                    Rotate
                                                </button>
                                            </form>
                                        @else
                                            <a href="{{ url('/#pricing') }}" class="btn btn-sm btn-outline-primary" style="font-size:12px;padding:5px 16px;">Renew Plan</a>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>

    {{-- ── RIGHT COLUMN: INTEGRATION & CONTENT PANEL ── --}}
    <div class="col-lg-4">
        {{-- How to Use / Integration Guide --}}
        <div class="panel-canvas p-4 mb-4">
            <p class="fw-semibold mb-1 text-uppercase" style="font-size:10px;letter-spacing:1.8px;color:#888;">Integration Guide</p>
            <h6 class="fw-bold mb-3">How to Activate</h6>
            <p class="text-muted small mb-4" style="line-height:1.6;">Follow these steps to activate premium defense features on your Tab Hider Chrome Extension:</p>
            
            <div class="d-flex flex-column gap-0">
                <div class="d-flex gap-3">
                    <div class="d-flex flex-column align-items-center">
                        <div class="d-flex justify-content-center align-items-center rounded-circle fw-bold flex-shrink-0" style="width:28px;height:28px;font-size:11px;background:#09090b;color:#fff;">1</div>
                        <div style="width:1px;flex:1;background:#e4e4e7;margin:4px 0;"></div>
                    </div>
                    <p class="small text-muted mb-3 pt-1">Copy one of your active API keys from the left panel.</p>
                </div>
                <div class="d-flex gap-3">
                    <div class="d-flex flex-column align-items-center">
                        <div class="d-flex justify-content-center align-items-center rounded-circle fw-bold flex-shrink-0" style="width:28px;height:28px;font-size:11px;background:#09090b;color:#fff;">2</div>
                        <div style="width:1px;flex:1;background:#e4e4e7;margin:4px 0;"></div>
                    </div>
                    <p class="small text-muted mb-3 pt-1">Click the <strong>Tab Hider</strong> icon in your browser's extension toolbar.</p>
                </div>
                <div class="d-flex gap-3">
                    <div class="d-flex flex-column align-items-center">
                        <div class="d-flex justify-content-center align-items-center rounded-circle fw-bold flex-shrink-0" style="width:28px;height:28px;font-size:11px;background:#09090b;color:#fff;">3</div>
                        <div style="width:1px;flex:1;background:#e4e4e7;margin:4px 0;"></div>
                    </div>
                    <p class="small text-muted mb-3 pt-1">Navigate to the <strong>Settings</strong> panel and find the premium activation field.</p>
                </div>
                <div class="d-flex gap-3">
                    <div class="d-flex flex-column align-items-center">
                        <div class="d-flex justify-content-center align-items-center rounded-circle fw-bold flex-shrink-0" style="width:28px;height:28px;font-size:11px;background:#09090b;color:#fff;">4</div>
                    </div>
                    <p class="small text-muted mb-0 pt-1">Paste the key and hit <strong>Activate</strong>. Enjoy premium protection instantly.</p>
                </div>
            </div>
        </div>

        {{-- API Key Security Notice --}}
        <div class="panel-canvas p-4 mb-4" style="background:#FFFBF0; border-color:#EDD98A;">
            <h6 class="fw-bold text-warning-emphasis mb-2 d-flex align-items-center gap-2">
                Security Best Practices
            </h6>
            <ul class="list-unstyled mb-0 small text-warning-emphasis" style="line-height:1.6;">
                <li class="mb-2"><strong>Never Share Keys:</strong> Treat API keys like passwords. Do not expose them in source code or public repositories.</li>
                <li class="mb-2"><strong>Periodic Rotation:</strong> We advise rotating keys every 90 days to maintain secure, authenticated access.</li>
                <li class="mb-0"><strong>Compromise Response:</strong> If a key is leaked, click the <strong>Rotate</strong> button immediately to invalidate the exposed key.</li>
            </ul>
        </div>

        {{-- Extension Download / Premium features --}}
        <div class="panel-canvas p-4" style="background: linear-gradient(135deg, #fafafa, #f4f4f5);">
            <p class="fw-semibold mb-1 text-uppercase" style="font-size:10px;letter-spacing:1.8px;color:#888;">Included</p>
            <h6 class="fw-bold mb-3">Tab Hider Premium</h6>
            <div class="d-flex flex-column gap-2" style="font-size:13px;">
                <div class="d-flex align-items-center gap-2">
                    <svg width="14" height="14" fill="none" stroke="#16a34a" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
                    <span class="text-muted">Unlimited hidden tabs</span>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <svg width="14" height="14" fill="none" stroke="#16a34a" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
                    <span class="text-muted">Advanced keyboard panic triggers</span>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <svg width="14" height="14" fill="none" stroke="#16a34a" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
                    <span class="text-muted">Secure cloud backup &amp; sync</span>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <svg width="14" height="14" fill="none" stroke="#16a34a" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
                    <span class="text-muted">Priority technical support</span>
                </div>
            </div>
            @if(!$activeSub)
            <a href="{{ url('/#pricing') }}" class="btn-steel-primary d-block text-center mt-4" style="font-size:13px;padding:9px;">View Plans</a>
            @endif
        </div>
    </div>
</div>

{{-- QUICK ACTIONS STRIP --}}
<div class="row g-3 mt-2">
    <div class="col-md-6">
        <a href="{{ route('user.dashboard') }}" class="panel-canvas p-3 d-flex align-items-center gap-3 text-decoration-none" style="transition:all 0.25s;">
            <div class="d-flex align-items-center justify-content-center rounded-2 flex-shrink-0" style="width:38px;height:38px;background:#f4f4f5;">
                <svg width="16" height="16" fill="none" stroke="#52525b" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
            </div>
            <div>
                <p class="fw-semibold mb-0" style="font-size:13px;color:#09090b;">Back to Dashboard</p>
                <p class="text-muted mb-0" style="font-size:12px;">View your account overview</p>
            </div>
        </a>
    </div>
    <div class="col-md-6">
        <a href="{{ url('/#pricing') }}" class="panel-canvas p-3 d-flex align-items-center gap-3 text-decoration-none" style="transition:all 0.25s;">
            <div class="d-flex align-items-center justify-content-center rounded-2 flex-shrink-0" style="width:38px;height:38px;background:#f4f4f5;">
                <svg width="16" height="16" fill="none" stroke="#52525b" stroke-width="2" viewBox="0 0 24 24"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-1.5 6h13"/></svg>
            </div>
            <div>
                <p class="fw-semibold mb-0" style="font-size:13px;color:#09090b;">Renew or Upgrade</p>
                <p class="text-muted mb-0" style="font-size:12px;">Browse premium plans</p>
            </div>
        </a>
    </div>
</div>

@endsection