{% extends "base.html" %}
{% block title %}Settings — LAZARUS{% endblock %}

{% block content %}
<style>
    .settings{padding:2rem;max-width:800px;margin:0 auto;}
    .settings-header{margin-bottom:2rem;opacity:0;animation:fU .6s ease-out .1s forwards;}
    @keyframes fU{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
    .settings-header h1{font-size:1.75rem;font-weight:700;margin-bottom:4px;}
    .settings-header p{font-size:0.875rem;color:var(--text-muted);}

    .settings-card{background:rgba(30,30,40,0.6);backdrop-filter:blur(12px);border:1px solid rgba(99,102,241,0.15);border-radius:14px;padding:1.5rem;margin-bottom:1.5rem;transition:all .3s;opacity:0;animation:fU .6s ease-out forwards;}
    .settings-card:nth-child(2){animation-delay:.2s;}
    .settings-card:nth-child(3){animation-delay:.3s;}
    .settings-card:nth-child(4){animation-delay:.4s;}
    .settings-card:hover{border-color:rgba(99,102,241,0.3);}
    .settings-card h3{font-size:0.9375rem;font-weight:600;margin-bottom:1rem;display:flex;align-items:center;gap:8px;}
    .settings-card h3 svg{width:18px;height:18px;color:var(--primary);}

    .form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
    .form-label{font-size:0.75rem;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;}
    .form-input{width:100%;padding:10px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;color:var(--text-main);font-size:14px;font-family:'Space Grotesk',sans-serif;outline:none;transition:all .2s;}
    .form-input::placeholder{color:var(--text-subtle);}
    .form-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,0.12);}

    .btn{padding:10px 18px;border-radius:10px;font-family:'Space Grotesk',sans-serif;font-size:0.8125rem;font-weight:600;cursor:pointer;transition:all .2s;border:none;display:inline-flex;align-items:center;gap:6px;}
    .btn-primary{background:linear-gradient(135deg,var(--brand-500),var(--brand-700));color:white;}
    .btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(99,102,241,0.3);}
    .btn-secondary{background:var(--surface-3);color:var(--text-main);border:1px solid var(--border);}
    .btn-secondary:hover{border-color:var(--primary);}

    .status-msg{padding:10px 14px;border-radius:10px;font-size:0.8125rem;margin-top:8px;display:flex;align-items:center;gap:8px;}
    .status-msg.success{background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.2);color:var(--success);}
    .status-msg.error{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.2);color:var(--danger);}

    .settings-link{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;text-decoration:none;color:var(--text-main);transition:all .2s;}
    .settings-link:hover{border-color:var(--primary);transform:translateX(4px);}
    .settings-link-text h3{font-size:0.8125rem;font-weight:600;margin-bottom:2px;}
    .settings-link-text p{font-size:0.6875rem;color:var(--text-subtle);}
    .settings-link svg{width:16px;height:16px;color:var(--text-subtle);}

    .stat-box{flex:1;min-width:120px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;}
    .stat-num{font-size:1.25rem;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--primary);}
    .stat-label{font-size:0.6875rem;color:var(--text-subtle);margin-top:2px;}

    @media(max-width:640px){.settings{padding:1rem;}}
</style>

<div class="settings">
    <div class="settings-header">
        <h1>Settings</h1>
        <p>Manage your account and preferences.</p>
    </div>

    <!-- Change Password -->
    <div class="settings-card">
        <h3>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
            Change Password
        </h3>
        <div class="form-group">
            <label class="form-label">Current Password</label>
            <input type="password" id="old_pass" class="form-input" placeholder="Enter current password">
        </div>
        <div class="form-group">
            <label class="form-label">New Password</label>
            <input type="password" id="new_pass" class="form-input" placeholder="Min 8 characters" minlength="8">
        </div>
        <div class="form-group">
            <label class="form-label">Confirm New Password</label>
            <input type="password" id="new_pass2" class="form-input" placeholder="Repeat new password">
        </div>
        <button class="btn btn-primary" onclick="changePassword()">Save Password</button>
        <div id="pass_status"></div>
    </div>

    <!-- Change Username -->
    <div class="settings-card">
        <h3>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
            Change Username
        </h3>
        <div class="form-group">
            <label class="form-label">Current Password</label>
            <input type="password" id="user_pass" class="form-input" placeholder="Enter password to confirm">
        </div>
        <div class="form-group">
            <label class="form-label">New Username</label>
            <input type="text" id="new_user" class="form-input" placeholder="Min 2 characters">
        </div>
        <button class="btn btn-primary" onclick="changeUsername()">Save Username</button>
        <div id="user_status"></div>
    </div>

    <!-- Usage -->
    <div class="settings-card">
        <h3>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/></svg>
            Usage
        </h3>
        <div style="display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;">
            <div class="stat-box"><div class="stat-num" id="stat_calls">–</div><div class="stat-label">API calls</div></div>
            <div class="stat-box"><div class="stat-num" id="stat_retries">–</div><div class="stat-label">Retries</div></div>
            <div class="stat-box"><div class="stat-num" id="stat_failures">–</div><div class="stat-label">Failures</div></div>
        </div>
        <div class="form-hint" style="margin-top:8px;">Counters since Lazarus started.</div>
    </div>

    <!-- Build Depth -->
    <div class="settings-card">
        <h3>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
            Build Depth
        </h3>
        <div class="form-group" style="margin-top:8px;">
            <label class="form-label">How much work the next build does</label>
            <select id="depth_select" class="form-input" style="margin-top:4px;">
                <option value="standard" {{ 'selected' if config and config.build_depth == 'standard' else '' }}>Standard — full site with React frontend & admin</option>
                <option value="quick" {{ 'selected' if config and config.build_depth == 'quick' else '' }}>Quick (~5 min) — backend-only API, no npm</option>
            </select>
            <button class="btn btn-primary" style="margin-top:8px;" onclick="saveDepth()">Save Depth</button>
            <div id="depth_status"></div>
        </div>
    </div>
</div>

<script>
// Status boxes are built with textContent, never innerHTML: `d.error` comes
// from the server and must stay text, not markup.
function setStatus(el,text,kind){
    el.textContent='';
    const msg=document.createElement('div');
    msg.className='status-msg '+(kind||'');
    msg.textContent=text;
    el.appendChild(msg);
}
function loadStats(){
    fetch('/api/stats').then(r=>r.json()).then(d=>{
        const set=(id,v)=>{const el=document.getElementById(id);if(el)el.textContent=v||0;};
        set('stat_calls',d.calls);
        set('stat_retries',d.retries);
        set('stat_failures',d.failures);
    }).catch(()=>{});
}
loadStats();
function saveDepth(){
    const depth=document.getElementById('depth_select').value;
    const st=document.getElementById('depth_status');
    fetch('/api/save-depth',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({depth:depth})})
    .then(r=>r.json()).then(d=>{
        setStatus(st,d.ok?'Build depth saved: '+(depth==='quick'?'Quick':'Standard'):(d.error||'Error'),d.ok?'success':'error');
    }).catch(()=>setStatus(st,'Error saving','error'));
}
function changePassword(){
    const o=document.getElementById('old_pass').value,n=document.getElementById('new_pass').value,n2=document.getElementById('new_pass2').value;
    const st=document.getElementById('pass_status');
    if(n!==n2){setStatus(st,'Passwords do not match','error');return;}
    if(n.length<8){setStatus(st,'Password must be at least 8 characters','error');return;}
    fetch('/api/save-password',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({old_password:o,new_password:n})}).then(r=>r.json()).then(d=>{
        setStatus(st,d.ok?'Password updated':(d.error||'Error'),d.ok?'success':'error');
        if(d.ok){document.getElementById('old_pass').value='';document.getElementById('new_pass').value='';document.getElementById('new_pass2').value='';}
    });
}
function changeUsername(){
    const p=document.getElementById('user_pass').value,u=document.getElementById('new_user').value;
    const st=document.getElementById('user_status');
    if(u.length<2){setStatus(st,'Username must be at least 2 characters','error');return;}
    fetch('/api/save-username',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({password:p,new_username:u})}).then(r=>r.json()).then(d=>{
        setStatus(st,d.ok?'Username updated':(d.error||'Error'),d.ok?'success':'error');
        if(d.ok)document.getElementById('new_user').value='';
    });
}
</script>
{% endblock %}