@extends('layouts.app')
@section('title', __('profile.security_settings'))
@section('page_heading', __('profile.security_settings'))

@section('content')
<div style="display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-bottom:1.25rem">
    <a href="{{ route('dashboard.profile.edit') }}" class="app-btn app-btn--secondary app-btn--sm">
        <i class="fa-solid fa-user-gear me-1"></i>{{ __('profile.edit_profile') }}
    </a>
</div>

<style>
.sec-layout { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; align-items: start; }
@media(max-width:991px){ .sec-layout { grid-template-columns: 1fr; } }

.sec-nav { background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; position:sticky; top:1rem; }
.dark .sec-nav { background:var(--bg-card); }
.sec-nav a {
    display:flex; align-items:center; gap:.75rem;
    padding:.75rem 1rem; font-size:.85rem; font-weight:700;
    color:var(--text-secondary); text-decoration:none; cursor:pointer;
    border-inline-start:3px solid transparent;
    transition:background .12s,color .12s;
}
.sec-nav a:hover { background:var(--surface-50); color:var(--text-primary); }
.sec-nav a.active { background:var(--c-primary-bg); color:var(--c-primary-dark); border-inline-start-color:var(--c-primary); }
.dark .sec-nav a.active { background:rgba(37,99,235,.1); color:var(--c-primary-muted); }
.sec-nav__icon { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.8rem; flex-shrink:0; background:var(--surface-100); color:var(--text-muted); }
.sec-nav a.active .sec-nav__icon { background:var(--c-primary-ghost); color:var(--c-primary); }
.sec-nav__sep { height:1px; background:var(--border-subtle); margin:0; }

.sec-panel { display:none; }
.sec-panel.active { display:flex; flex-direction:column; gap:1.5rem; }

.sec-card { background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.dark .sec-card { background:var(--bg-card); }
.sec-card__head { padding:1.25rem 1.5rem; border-bottom:1px solid var(--border-subtle); display:flex; align-items:center; gap:.875rem; }
.dark .sec-card__head { border-bottom-color:var(--border); }
.sec-card__ico { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.sec-card__title { font-size:.95rem; font-weight:900; color:var(--text-primary); }
.sec-card__sub { font-size:.78rem; font-weight:600; color:var(--text-muted); margin-top:.15rem; }
.sec-card__body { padding:1.5rem; }

.pwd-bar-wrap { height:4px; border-radius:999px; background:var(--surface-100); overflow:hidden; margin-top:.5rem; }
.pwd-bar { height:100%; border-radius:999px; width:0; transition:width .3s,background .3s; }

.tfa-row { display:flex; align-items:center; gap:1rem; padding:1rem 1.25rem; border:1px solid var(--border); border-radius:12px; }
.tfa-row--on { border-color:#bbf7d0; background:#f0fdf4; }
.dark .tfa-row--on { border-color:rgba(134,239,212,.2); background:rgba(21,128,61,.08); }
.tfa-row__ico { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }

.qr-wrap { display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:start; }
@media(max-width:600px){ .qr-wrap { grid-template-columns:1fr; } }
.qr-card { background:#fff; border:1px solid var(--border); border-radius:14px; padding:1rem; display:flex; flex-direction:column; align-items:center; gap:.6rem; width:190px; }
.dark .qr-card { background:var(--surface-100); }

.sess-item { display:flex; align-items:center; gap:1rem; padding:.875rem 1.25rem; border:1px solid var(--border); border-radius:12px; }
.sess-item--current { border-color:#bbf7d0; background:#f0fdf4; }
.dark .sess-item--current { border-color:rgba(134,239,212,.2); background:rgba(21,128,61,.06); }
.sess-item__ico { width:40px; height:40px; border-radius:10px; background:var(--surface-50); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--text-muted); flex-shrink:0; }
.sess-item--current .sess-item__ico { background:#dcfce7; border-color:#bbf7d0; color:#16a34a; }
</style>

<div class="sec-layout">

{{-- ── Nav ── --}}
<nav class="sec-nav">
    <a class="active" onclick="secShow('password',this)">
        <span class="sec-nav__icon"><i class="fa-solid fa-key"></i></span>
        {{ __('profile.change_password') }}
    </a>
    <div class="sec-nav__sep"></div>
    <a onclick="secShow('tfa',this)">
        <span class="sec-nav__icon"><i class="fa-solid fa-shield-halved"></i></span>
        {{ __('profile.two_factor_auth') }}
        @if($user->two_factor_email_enabled || $user->two_factor_app_enabled)
            <span class="app-badge app-badge--success ms-auto" style="font-size:.65rem">{{ __('profile.on') }}</span>
        @endif
    </a>
    <div class="sec-nav__sep"></div>
    <a onclick="secShow('sessions',this)">
        <span class="sec-nav__icon"><i class="fa-solid fa-laptop"></i></span>
        {{ __('profile.active_sessions') }}
        <span class="app-badge app-badge--primary ms-auto" style="font-size:.65rem">{{ $sessions->count() }}</span>
    </a>
</nav>

<div>

{{-- ══════════════════════════════════════
     PANEL 1 — Change Password
══════════════════════════════════════ --}}
<div class="sec-panel active" id="sec-password">
    <div class="sec-card">
        <div class="sec-card__head">
            <div class="sec-card__ico" style="background:#eff6ff;color:#2563eb"><i class="fa-solid fa-key"></i></div>
            <div>
                <div class="sec-card__title">{{ __('profile.change_password') }}</div>
                <div class="sec-card__sub">{{ __('profile.change_password_help') }}</div>
            </div>
        </div>
        <div class="sec-card__body">
            <form action="{{ route('dashboard.profile.security.password') }}" method="POST" style="max-width:460px">
                @csrf @method('PUT')
                <div class="flex flex-col gap-4">
                    <div>
                        <label class="app-label font-bold required">{{ __('profile.current_password') }}</label>
                        <input type="password" name="current_password" class="app-input @error('current_password') app-input--invalid @enderror" required>
                        @error('current_password')<div class="app-field-error">{{ $message }}</div>@enderror
                    </div>
                    <div>
                        <label class="app-label font-bold required">{{ __('profile.new_password') }}</label>
                        <input type="password" name="password" id="pwd_new" oninput="pwdStrength(this.value)"
                               class="app-input @error('password') app-input--invalid @enderror" required>
                        <div class="pwd-bar-wrap"><div class="pwd-bar" id="pwd-bar"></div></div>
                        <div class="text-xs text-slate-500 dark:text-slate-400" id="pwd-hint"></div>
                        @error('password')<div class="app-field-error block">{{ $message }}</div>@enderror
                    </div>
                    <div>
                        <label class="app-label font-bold required">{{ __('profile.confirm_new_password') }}</label>
                        <input type="password" name="password_confirmation" class="app-input" required>
                    </div>
                    <div style="background:var(--surface-50);border:1px solid var(--border);border-radius:12px;padding:1rem">
                        <div class="app-check app-check--switch mb-0">
                            <input class="app-check__input" type="checkbox" value="1" id="logout_all" name="logout_all_sessions">
                            <label class="app-check__label font-bold" for="logout_all">{{ __('profile.logout_all_sessions_on_password_change') }}</label>
                            <div class="text-xs text-slate-500 dark:text-slate-400 mt-1">{{ __('profile.logout_all_sessions_on_password_change_help') }}</div>
                        </div>
                    </div>
                    <div><button type="submit" class="app-btn app-btn--primary"><i class="fa-solid fa-check me-1"></i>{{ __('profile.update_password') }}</button></div>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- ══════════════════════════════════════
     PANEL 2 — Two-Factor Authentication
══════════════════════════════════════ --}}
<div class="sec-panel" id="sec-tfa">

    {{-- Email 2FA --}}
    <div class="sec-card">
        <div class="sec-card__head">
            <div class="sec-card__ico" style="background:#f0fdf4;color:#16a34a"><i class="fa-solid fa-envelope-circle-check"></i></div>
            <div style="flex:1">
                <div class="sec-card__title">{{ __('profile.email_two_factor') }}</div>
                <div class="sec-card__sub">{{ __('profile.email_two_factor_help') }}</div>
            </div>
            <span class="app-badge {{ $user->two_factor_email_enabled ? 'app-badge--success' : 'app-badge--secondary' }}">
                {{ $user->two_factor_email_enabled ? __('profile.enabled') : __('profile.disabled') }}
            </span>
        </div>
        <div class="sec-card__body">
            @if($user->two_factor_email_enabled)
                <div class="tfa-row tfa-row--on mb-4">
                    <div class="tfa-row__ico" style="background:#dcfce7;color:#16a34a"><i class="fa-solid fa-circle-check"></i></div>
                    <div>
                        <div class="font-bold" style="font-size:.875rem;color:#15803d">{{ __('profile.email_2fa_active') }}</div>
                        <div class="text-slate-500 dark:text-slate-400" style="font-size:.78rem">{{ $user->email }}</div>
                    </div>
                </div>
                <form action="{{ route('dashboard.profile.security.two_factor.email.disable') }}" method="POST" style="max-width:360px">
                    @csrf
                    <div class="mb-3">
                        <label class="app-label font-bold required">{{ __('profile.current_password') }}</label>
                        <input type="password" name="current_password" class="app-input @error('current_password') app-input--invalid @enderror" required>
                        @error('current_password')<div class="app-field-error">{{ $message }}</div>@enderror
                    </div>
                    <button type="submit" class="app-btn app-btn--danger app-btn--sm">{{ __('profile.disable_email_two_factor') }}</button>
                </form>
            @else
                <form action="{{ route('dashboard.profile.security.two_factor.email.enable') }}" method="POST" style="max-width:360px">
                    @csrf
                    <div class="mb-3">
                        <label class="app-label font-bold required">{{ __('profile.current_password') }}</label>
                        <input type="password" name="current_password" class="app-input @error('current_password') app-input--invalid @enderror" required>
                        @error('current_password')<div class="app-field-error">{{ $message }}</div>@enderror
                    </div>
                    <button type="submit" class="app-btn app-btn--primary app-btn--sm"><i class="fa-solid fa-envelope-circle-check me-1"></i>{{ __('profile.enable_email_two_factor') }}</button>
                </form>
            @endif
        </div>
    </div>

    {{-- Google Authenticator --}}
    <div class="sec-card">
        <div class="sec-card__head">
            <div class="sec-card__ico" style="background:#fef9c3;color:#ca8a04"><i class="fa-solid fa-phone"></i></div>
            <div style="flex:1">
                <div class="sec-card__title">{{ __('profile.google_authenticator') }}</div>
                <div class="sec-card__sub">{{ __('profile.google_authenticator_help') }}</div>
            </div>
            <span class="app-badge {{ $user->two_factor_app_enabled ? 'app-badge--success' : 'app-badge--secondary' }}">
                {{ $user->two_factor_app_enabled ? __('profile.enabled') : __('profile.disabled') }}
            </span>
        </div>
        <div class="sec-card__body">
            @if(!$user->two_factor_secret)
                <div class="app-alert app-alert--info flex gap-2 items-start mb-4">
                    <i class="fa-solid fa-circle-info shrink-0 mt-1"></i>
                    <span>{{ __('profile.google_2fa_not_setup_info') }}</span>
                </div>
                <form action="{{ route('dashboard.profile.security.two_factor.app.generate') }}" method="POST" style="max-width:360px">
                    @csrf
                    <div class="mb-3">
                        <label class="app-label font-bold required">{{ __('profile.current_password') }}</label>
                        <input type="password" name="current_password" class="app-input @error('current_password') app-input--invalid @enderror" required>
                        @error('current_password')<div class="app-field-error">{{ $message }}</div>@enderror
                    </div>
                    <button type="submit" class="app-btn app-btn--primary app-btn--sm"><i class="fa-solid fa-qrcode me-1"></i>{{ __('profile.generate_google_secret') }}</button>
                </form>

            @elseif(!$user->two_factor_app_enabled)
                <div class="app-alert app-alert--warning flex gap-2 items-start mb-4">
                    <i class="fa-solid fa-triangle-exclamation shrink-0 mt-1"></i>
                    <span>{{ __('profile.google_secret_generated_help') }}</span>
                </div>
                <div class="qr-wrap">
                    <div class="qr-card">
                        <div style="font-size:.72rem;font-weight:700;color:var(--text-muted)">{{ __('profile.scan_qr_code') }}</div>
                        <div id="qr-container" style="width:160px;height:160px;display:flex;align-items:center;justify-content:center">
                            <i class="fa-solid fa-arrows-rotate" style="font-size:2rem;color:var(--text-muted);animation:spin .8s linear infinite"></i>
                        </div>
                        <div style="font-size:.7rem;color:var(--text-muted);text-align:center">{{ __('profile.scan_qr_hint') }}</div>
                    </div>
                    <div>
                        <div class="mb-3">
                            <label class="app-label font-bold">{{ __('profile.setup_key') }}</label>
                            <div class="app-input-group">
                                <input type="text" readonly id="setup-key" class="app-input font-monospace" value="{{ $user->two_factor_secret }}">
                                <button type="button" class="app-btn app-btn--secondary" onclick="copyKey()"><i class="fa-solid fa-clipboard" id="copy-ico"></i></button>
                            </div>
                            <div class="text-xs text-slate-500 dark:text-slate-400">{{ __('profile.setup_key_manual_hint') }}</div>
                        </div>
                        <form action="{{ route('dashboard.profile.security.two_factor.app.confirm') }}" method="POST">
                            @csrf
                            <div class="mb-3">
                                <label class="app-label font-bold required">{{ __('profile.current_password') }}</label>
                                <input type="password" name="current_password" class="app-input @error('current_password') app-input--invalid @enderror" required>
                                @error('current_password')<div class="app-field-error">{{ $message }}</div>@enderror
                            </div>
                            <div class="mb-4">
                                <label class="app-label font-bold required">{{ __('profile.authenticator_code') }}</label>
                                <input type="text" name="app_code" inputmode="numeric" maxlength="6" placeholder="000000"
                                       class="app-input font-monospace text-center @error('app_code') app-input--invalid @enderror"
                                       style="max-width:160px;letter-spacing:.4rem;font-size:1.1rem" required>
                                @error('app_code')<div class="app-field-error block">{{ $message }}</div>@enderror
                            </div>
                            <div class="flex items-center gap-3 flex-wrap">
                                <button type="submit" class="app-btn app-btn--primary app-btn--sm"><i class="fa-solid fa-circle-check me-1"></i>{{ __('profile.confirm_and_enable_google_2fa') }}</button>
                                <form action="{{ route('dashboard.profile.security.two_factor.app.disable') }}" method="POST" class="d-inline">
                                    @csrf
                                    <input type="hidden" name="current_password" value="">
                                    <button type="button" class="app-btn app-btn--ghost app-btn--sm text-red-600 dark:text-red-400"
                                            onclick="if(confirm('{{ __('profile.cancel_setup_confirm') }}')) this.closest('form').submit()">
                                        {{ __('profile.cancel_setup') }}
                                    </button>
                                </form>
                            </div>
                        </form>
                    </div>
                </div>

            @else
                <div class="tfa-row tfa-row--on mb-4">
                    <div class="tfa-row__ico" style="background:#dcfce7;color:#16a34a"><i class="fa-solid fa-shield-halved"></i></div>
                    <div>
                        <div class="font-bold" style="font-size:.875rem;color:#15803d">{{ __('profile.google_2fa_active_title') }}</div>
                        <div class="text-slate-500 dark:text-slate-400" style="font-size:.78rem">{{ __('profile.google_2fa_active_help') }}</div>
                    </div>
                </div>
                <form action="{{ route('dashboard.profile.security.two_factor.app.disable') }}" method="POST" style="max-width:360px">
                    @csrf
                    <div class="mb-3">
                        <label class="app-label font-bold required">{{ __('profile.current_password') }}</label>
                        <input type="password" name="current_password" class="app-input @error('current_password') app-input--invalid @enderror" required>
                        @error('current_password')<div class="app-field-error">{{ $message }}</div>@enderror
                    </div>
                    <button type="submit" class="app-btn app-btn--danger app-btn--sm"><i class="fa-solid fa-circle-xmark me-1"></i>{{ __('profile.disable_google_2fa') }}</button>
                </form>
            @endif
        </div>
    </div>
</div>

{{-- ══════════════════════════════════════
     PANEL 3 — Active Sessions
══════════════════════════════════════ --}}
<div class="sec-panel" id="sec-sessions">
    <div class="sec-card">
        <div class="sec-card__head">
            <div class="sec-card__ico" style="background:#f0f9ff;color:#0284c7"><i class="fa-solid fa-laptop"></i></div>
            <div style="flex:1">
                <div class="sec-card__title">{{ __('profile.active_sessions') }}</div>
                <div class="sec-card__sub">{{ __('profile.active_sessions_help') }}</div>
            </div>
            @if($sessions->count() > 1)
            <form action="{{ route('dashboard.profile.security.sessions.destroy_others') }}" method="POST">
                @csrf @method('DELETE')
                <button type="submit" class="app-btn app-btn--danger app-btn--sm">{{ __('profile.logout_other_sessions') }}</button>
            </form>
            @endif
        </div>
        <div class="sec-card__body">
            @if($sessions->isEmpty())
                <p class="text-slate-500 dark:text-slate-400">{{ __('profile.no_active_sessions') }}</p>
            @else
                <div class="flex flex-col gap-3">
                    @foreach($sessions as $session)
                    @php $isCurrent = $session->session_id === $currentSessionId; @endphp
                    <div class="sess-item {{ $isCurrent ? 'sess-item--current' : '' }}">
                        <div class="sess-item__ico">
                            <i class="fa-solid fa-{{ $session->device_type === 'mobile' ? 'phone' : 'laptop' }}"></i>
                        </div>
                        <div style="flex:1;min-width:0">
                            <div style="font-size:.875rem;font-weight:800;color:var(--text-primary)">
                                {{ $session->browser ?: '—' }}
                                @if($isCurrent)
                                    <span class="app-badge app-badge--success ms-1" style="font-size:.65rem">{{ __('profile.current_session') }}</span>
                                @endif
                            </div>
                            <div style="font-size:.75rem;color:var(--text-muted);margin-top:.15rem">
                                {{ $session->platform ?: '' }}
                                @if($session->ip_address) · <span dir="ltr">{{ $session->ip_address }}</span>@endif
                                @if($session->last_activity) · {{ $session->last_activity->diffForHumans() }}@endif
                            </div>
                        </div>
                        @if(!$isCurrent)
                        <form action="{{ route('dashboard.profile.security.sessions.destroy', $session) }}" method="POST">
                            @csrf @method('DELETE')
                            <button type="submit" class="app-btn app-btn--danger app-btn--sm">{{ __('profile.logout_this_session') }}</button>
                        </form>
                        @endif
                    </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
</div>

</div>{{-- end panels wrapper --}}
</div>{{-- end sec-layout --}}
@endsection

@section('scripts')
<script>
function secShow(id, el) {
    document.querySelectorAll('.sec-panel').forEach(p => p.classList.remove('active'));
    document.querySelectorAll('.sec-nav a').forEach(a => a.classList.remove('active'));
    document.getElementById('sec-' + id).classList.add('active');
    el.classList.add('active');
}

function pwdStrength(v) {
    const bar = document.getElementById('pwd-bar');
    const hint = document.getElementById('pwd-hint');
    if (!bar) return;
    let score = 0;
    if (v.length >= 8) score++;
    if (/[A-Z]/.test(v)) score++;
    if (/[0-9]/.test(v)) score++;
    if (/[^A-Za-z0-9]/.test(v)) score++;
    const map = [
        [0, '#e2e8f0', ''],
        [25, '#ef4444', '{{ __("profile.pwd_weak") }}'],
        [50, '#f97316', '{{ __("profile.pwd_fair") }}'],
        [75, '#eab308', '{{ __("profile.pwd_good") }}'],
        [100, '#22c55e', '{{ __("profile.pwd_strong") }}'],
    ];
    const [w, c, t] = map[score] ?? map[0];
    bar.style.width = w + '%';
    bar.style.background = c;
    hint.textContent = t;
    hint.style.color = c;
}

function copyKey() {
    const val = document.getElementById('setup-key')?.value;
    if (!val) return;
    navigator.clipboard.writeText(val).then(() => {
        const ico = document.getElementById('copy-ico');
        ico.className = 'fa-solid fa-clipboard-check';
        setTimeout(() => ico.className = 'fa-solid fa-clipboard', 2000);
    });
}

// Auto-open panel if there are errors on a specific form
@if($errors->hasAny(['password','current_password']) && !$errors->has('app_code'))
    document.addEventListener('DOMContentLoaded', () => {
        const nav = document.querySelector('.sec-nav a:first-child');
        if (nav) secShow('password', nav);
    });
@elseif($errors->has('app_code'))
    document.addEventListener('DOMContentLoaded', () => {
        const nav = document.querySelectorAll('.sec-nav a')[1];
        if (nav) secShow('tfa', nav);
    });
@endif
</script>

@if($user->two_factor_secret && !$user->two_factor_app_enabled)
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"
        integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSe2HkjGk/8tIje5p9OAznSMAytMRWFCRR/g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
    const el = document.getElementById('qr-container');
    if (!el) return;
    el.innerHTML = '';
    new QRCode(el, {
        text: @json($provisioningUri),
        width: 160, height: 160,
        colorDark: '#0f172a', colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.M
    });
    // Auto-switch to 2FA panel
    const nav = document.querySelectorAll('.sec-nav a')[1];
    if (nav) secShow('tfa', nav);
});
</script>
@endif
@endsection