@extends('layouts.app')
@section('title', 'Settings')
@section('page-title', 'Settings')

@section('content')
<div class="page-header">
    <h1>Settings</h1>
    <p>Manage your admin account credentials</p>
</div>

<div class="row g-4">

    {{-- ─── Profile Info ───────────────────────────────────── --}}
    <div class="col-lg-4">
        <div class="glass-card text-center">
            <div class="user-avatar mx-auto mb-3" style="width:70px;height:70px;font-size:1.4rem;">
                {{ strtoupper(substr($user->name, 0, 2)) }}
            </div>
            <div style="font-size:1rem;font-weight:700;">{{ $user->name }}</div>
            <div style="font-size:0.82rem;color:#8b949e;margin-top:2px;">{{ $user->email }}</div>
            <hr style="border-color:rgba(255,255,255,0.08);margin:1.25rem 0;">
            <div class="d-flex justify-content-between" style="font-size:0.8rem;">
                <span style="color:#8b949e;">Role</span>
                <span class="badge" style="background:rgba(13,110,253,0.2);color:#6ea8fe;border:1px solid rgba(13,110,253,0.3);">
                    Administrator
                </span>
            </div>
            <div class="d-flex justify-content-between mt-2" style="font-size:0.8rem;">
                <span style="color:#8b949e;">Joined</span>
                <span>{{ $user->created_at->format('M Y') }}</span>
            </div>
        </div>
    </div>

    {{-- ─── Change Password ─────────────────────────────────── --}}
    <div class="col-lg-8">
        <div class="glass-card">
            <h6 class="fw-700 mb-1">
                <i class="bi bi-key-fill me-2" style="color:#ffc107;"></i>Change Password
            </h6>
            <p class="mb-4" style="font-size:0.8rem;color:#8b949e;">
                Use a strong password with at least 8 characters
            </p>

            <form action="{{ route('settings.password') }}" method="POST" novalidate>
                @csrf
                @method('PUT')

                <div class="mb-3">
                    <label for="current_password" class="form-label">Current Password</label>
                    <div class="input-group">
                        <span class="input-group-text" style="background:rgba(42,46,51,0.8);border:1px solid rgba(255,255,255,0.08);border-right:none;color:#6c757d;border-radius:10px 0 0 10px;">
                            <i class="bi bi-lock-fill"></i>
                        </span>
                        <input type="password" id="current_password" name="current_password"
                               class="form-control @error('current_password') is-invalid @enderror"
                               style="border-left:none !important;border-radius:0 10px 10px 0 !important;"
                               placeholder="Enter current password" required>
                        @error('current_password')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="mb-3">
                    <label for="password" class="form-label">New Password</label>
                    <div class="input-group">
                        <span class="input-group-text" style="background:rgba(42,46,51,0.8);border:1px solid rgba(255,255,255,0.08);border-right:none;color:#6c757d;border-radius:10px 0 0 10px;">
                            <i class="bi bi-shield-lock-fill"></i>
                        </span>
                        <input type="password" id="password" name="password"
                               class="form-control @error('password') is-invalid @enderror"
                               style="border-left:none !important;border-radius:0 10px 10px 0 !important;"
                               placeholder="Min 8 characters" required minlength="8">
                        @error('password')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="mb-4">
                    <label for="password_confirmation" class="form-label">Confirm New Password</label>
                    <div class="input-group">
                        <span class="input-group-text" style="background:rgba(42,46,51,0.8);border:1px solid rgba(255,255,255,0.08);border-right:none;color:#6c757d;border-radius:10px 0 0 10px;">
                            <i class="bi bi-shield-check-fill"></i>
                        </span>
                        <input type="password" id="password_confirmation" name="password_confirmation"
                               class="form-control"
                               style="border-left:none !important;border-radius:0 10px 10px 0 !important;"
                               placeholder="Repeat new password" required>
                    </div>
                </div>

                {{-- Password strength indicator --}}
                <div class="mb-4" id="strengthWrapper" style="display:none;">
                    <div style="font-size:0.78rem;color:#8b949e;margin-bottom:4px;">Password strength</div>
                    <div class="progress" style="height:4px;border-radius:4px;background:rgba(255,255,255,0.1);">
                        <div id="strengthBar" class="progress-bar" style="width:0%;border-radius:4px;transition:all 0.3s;"></div>
                    </div>
                    <div id="strengthLabel" style="font-size:0.75rem;margin-top:4px;"></div>
                </div>

                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check2-circle me-2"></i>Update Password
                </button>
            </form>
        </div>

        {{-- ─── API Info ──────────────────────────────────── --}}
        <div class="glass-card mt-4">
            <h6 class="fw-700 mb-1">
                <i class="bi bi-code-slash me-2" style="color:#20c997;"></i>ESP32 API Reference
            </h6>
            <p class="mb-3" style="font-size:0.8rem;color:#8b949e;">Endpoints your device should use</p>
            <div class="row g-3">
                <div class="col-md-6">
                    <div style="background:rgba(32,201,151,0.08);border:1px solid rgba(32,201,151,0.2);border-radius:10px;padding:0.85rem;">
                        <div style="font-size:0.7rem;font-weight:700;color:#20c997;text-transform:uppercase;letter-spacing:0.05em;">GET Config</div>
                        <div style="font-family:monospace;font-size:0.8rem;color:#e6edf3;margin-top:4px;word-break:break-all;">
                            {{ url('/api/device') }}
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div style="background:rgba(253,126,20,0.08);border:1px solid rgba(253,126,20,0.2);border-radius:10px;padding:0.85rem;">
                        <div style="font-size:0.7rem;font-weight:700;color:#fd7e14;text-transform:uppercase;letter-spacing:0.05em;">POST Heartbeat</div>
                        <div style="font-family:monospace;font-size:0.8rem;color:#e6edf3;margin-top:4px;word-break:break-all;">
                            {{ url('/api/device/heartbeat') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script>
const pwInput        = document.getElementById('password');
const strengthWrapper = document.getElementById('strengthWrapper');
const strengthBar    = document.getElementById('strengthBar');
const strengthLabel  = document.getElementById('strengthLabel');

pwInput.addEventListener('input', () => {
    const val = pwInput.value;
    strengthWrapper.style.display = val ? 'block' : 'none';

    let score = 0;
    if (val.length >= 8)  score++;
    if (/[A-Z]/.test(val)) score++;
    if (/[0-9]/.test(val)) score++;
    if (/[^A-Za-z0-9]/.test(val)) score++;

    const colors  = ['#dc3545','#ffc107','#0d6efd','#20c997'];
    const labels  = ['Weak','Fair','Good','Strong'];
    const widths  = ['25%','50%','75%','100%'];

    strengthBar.style.width  = widths[score - 1] || '10%';
    strengthBar.style.background = colors[score - 1] || '#dc3545';
    strengthLabel.textContent = labels[score - 1] || '';
    strengthLabel.style.color = colors[score - 1] || '#dc3545';
});
</script>
@endpush