/*
 * Veil Browser - Settings Page (about:settings)
 */

#ifndef VEIL_PAGE_SETTINGS_H
#define VEIL_PAGE_SETTINGS_H

static const char *SETTINGS_HTML =
"<!DOCTYPE html>"
"<html><head><meta charset='utf-8'><title>Settings</title>"
"<style>"
":root { --bg: %s; --accent: %s; --grad-start: %s; --grad-mid: %s; --grad-end: %s; }"
"* { box-sizing: border-box; margin: 0; padding: 0; }"
"body { font-family: 'JetBrains Mono', 'Fira Code', monospace; background: var(--bg); color: #e0e0e8; display: flex; height: 100vh; }"
".sidebar { width: 180px; background: rgba(255,255,255,0.02); padding: 20px 0; border-right: 1px solid rgba(255,255,255,0.05); }"
".sidebar h2 { font-size: 14px; padding: 0 20px; margin-bottom: 20px; background: linear-gradient(90deg, var(--grad-start), var(--grad-mid), var(--grad-end)); "
"              -webkit-background-clip: text; -webkit-text-fill-color: transparent; }"
".nav-item { display: block; padding: 10px 20px; color: #707080; font-size: 12px; cursor: pointer; border-left: 2px solid transparent; }"
".nav-item:hover { background: rgba(255,255,255,0.03); color: #a0a0a8; }"
".nav-item.active { border-left-color: var(--accent); color: #e0e0e8; background: rgba(255,255,255,0.03); }"
".content { flex: 1; padding: 30px 40px; overflow-y: auto; }"
".page { display: none; }"
".page.active { display: block; }"
".page h3 { font-size: 16px; margin-bottom: 20px; color: #c0c0c8; }"
".setting { display: flex; align-items: center; margin: 12px 0; padding: 12px; background: rgba(255,255,255,0.03); border-radius: 8px; }"
".setting label { flex: 1; font-size: 12px; color: #909098; }"
".setting input[type=color] { width: 45px; height: 28px; border: none; border-radius: 4px; cursor: pointer; background: transparent; }"
".setting input[type=color]::-webkit-color-swatch-wrapper { padding: 2px; }"
".setting input[type=color]::-webkit-color-swatch { border-radius: 3px; border: 1px solid rgba(255,255,255,0.1); }"
".setting select { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #e0e0e8; "
"                  padding: 6px 10px; border-radius: 4px; font-size: 11px; font-family: inherit; cursor: pointer; }"
".setting select option { background: #1a1a1f; }"
".setting input[type=text] { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #e0e0e8; "
"                            padding: 6px 10px; border-radius: 4px; font-size: 11px; font-family: inherit; width: 250px; outline: none; }"
".setting input[type=text]:focus { border-color: var(--accent); }"
".setting input[type=text]::placeholder { color: #505060; }"
".reset-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #707080; "
"             padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 10px; margin-left: 8px; }"
".reset-btn:hover { background: rgba(255,255,255,0.1); color: #e0e0e8; }"
".reset-all { margin-top: 20px; padding: 8px 16px; background: var(--accent); "
"             border: none; color: #0a0a0f; font-weight: bold; border-radius: 4px; cursor: pointer; font-size: 11px; }"
".reset-all:hover { opacity: 0.9; }"
".info-section { margin: 16px 0; padding: 16px; background: rgba(255,255,255,0.02); border-radius: 8px; }"
".info-section h4 { color: #909098; margin-bottom: 12px; font-size: 12px; }"
".info-section p { margin: 6px 0; font-size: 11px; color: #606070; }"
".info-section code { background: rgba(255,255,255,0.05); padding: 2px 6px; border-radius: 3px; color: #a0a0a8; }"
".version { margin-top: 30px; font-size: 10px; color: #404050; }"
"</style></head><body>"
"<div class='sidebar'>"
"  <h2>Veil Einstellungen</h2>"
"  <div class='nav-item active' onclick='showPage(\"general\")'>Allgemein</div>"
"  <div class='nav-item' onclick='showPage(\"customize\")'>Anpassung</div>"
"  <div class='nav-item' onclick='showPage(\"info\")'>Info</div>"
"</div>"
"<div class='content'>"
"  <div id='general' class='page active'>"
"    <h3>Allgemein</h3>"
"    <div class='setting'>"
"      <label>Suchmaschine</label>"
"      <select id='search_engine' onchange='update(\"search_engine\", this.value)'>"
"        <option value='0' %s>DuckDuckGo</option>"
"        <option value='1' %s>Google</option>"
"        <option value='2' %s>Brave</option>"
"        <option value='3' %s>Startpage</option>"
"      </select>"
"    </div>"
"    <div class='setting'>"
"      <label>Lesezeichenleiste anzeigen</label>"
"      <select id='show_bookmarks' onchange='update(\"show_bookmarks\", this.value)'>"
"        <option value='1' %s>An</option>"
"        <option value='0' %s>Aus</option>"
"      </select>"
"    </div>"
"    <div class='setting'>"
"      <label>Quick Links anzeigen</label>"
"      <select id='show_quicklinks' onchange='update(\"show_quicklinks\", this.value)'>"
"        <option value='1' %s>An</option>"
"        <option value='0' %s>Aus</option>"
"      </select>"
"    </div>"
"    <div class='setting'>"
"      <label>Download-Speicherort</label>"
"      <input type='text' id='download_dir' value='%s' placeholder='Standard: ~/Downloads' "
"             onchange='update(\"download_dir\", this.value)'>"
"      <button class='reset-btn' onclick='document.getElementById(\"download_dir\").value=\"\"; update(\"download_dir\", \"\")'>Reset</button>"
"    </div>"
"  </div>"
"  <div id='customize' class='page'>"
"    <h3>Anpassung</h3>"
"    <div class='setting'>"
"      <label>Hintergrundbild verwenden</label>"
"      <select id='use_bg_image' onchange='update(\"use_bg_image\", this.value)'>"
"        <option value='1' %s>An</option>"
"        <option value='0' %s>Aus</option>"
"      </select>"
"    </div>"
"    <div class='setting'>"
"      <label>Hintergrundbild hochladen</label>"
"      <input type='file' id='bg_image_file' accept='image/*' onchange='uploadBgImage(this)' "
"             style='font-size:11px; color:#909098;'>"
"    </div>"
"    <div class='setting'>"
"      <label>Bild-Deckkraft: <span id='opacity_val'>%d</span>%%</label>"
"      <input type='range' id='bg_opacity' min='0' max='100' value='%d' "
"             oninput='document.getElementById(\"opacity_val\").textContent=this.value' "
"             onchange='update(\"bg_opacity\", this.value)' style='width:120px;'>"
"    </div>"
"    <div style='height:1px; background:rgba(255,255,255,0.1); margin:16px 0;'></div>"
"    <h3 style='font-size:14px; color:#808090; margin-bottom:12px;'>Farben</h3>"
"    <div class='setting'>"
"      <label>Hintergrundfarbe</label>"
"      <input type='color' id='bg' value='%s' onchange='update(\"bg\", this.value)'>"
"      <button class='reset-btn' onclick='resetColor(\"bg\", \"%s\")'>Reset</button>"
"    </div>"
"    <div class='setting'>"
"      <label>Akzentfarbe</label>"
"      <input type='color' id='accent' value='%s' onchange='update(\"accent\", this.value)'>"
"      <button class='reset-btn' onclick='resetColor(\"accent\", \"%s\")'>Reset</button>"
"    </div>"
"    <div class='setting'>"
"      <label>Gradient Start</label>"
"      <input type='color' id='grad_start' value='%s' onchange='update(\"grad_start\", this.value)'>"
"      <button class='reset-btn' onclick='resetColor(\"grad_start\", \"%s\")'>Reset</button>"
"    </div>"
"    <div class='setting'>"
"      <label>Gradient Mitte</label>"
"      <input type='color' id='grad_mid' value='%s' onchange='update(\"grad_mid\", this.value)'>"
"      <button class='reset-btn' onclick='resetColor(\"grad_mid\", \"%s\")'>Reset</button>"
"    </div>"
"    <div class='setting'>"
"      <label>Gradient Ende</label>"
"      <input type='color' id='grad_end' value='%s' onchange='update(\"grad_end\", this.value)'>"
"      <button class='reset-btn' onclick='resetColor(\"grad_end\", \"%s\")'>Reset</button>"
"    </div>"
"    <button class='reset-all' onclick='resetAll()'>Alle zurücksetzen</button>"
"  </div>"
"  <div id='info' class='page'>"
"    <h3>Info</h3>"
"    <div class='info-section'>"
"      <h4>Tastenkürzel</h4>"
"      <p><code>Ctrl+T</code> Neuer Tab</p>"
"      <p><code>Ctrl+W</code> Tab schließen</p>"
"      <p><code>Ctrl+L</code> URL-Leiste fokussieren</p>"
"      <p><code>Ctrl+R</code> / <code>F5</code> Neu laden</p>"
"      <p><code>F11</code> Vollbild umschalten</p>"
"    </div>"
"    <div class='info-section'>"
"      <h4>Über Veil</h4>"
"      <p>Ein Privater WebKit-Browser, ohne unnötigen Müll :)</p>"
"      <p>Gebaut mit GTK3 und WebKit2GTK</p>"
"      <p>Entwickelt von Packed https://papp-box.de/</p>"
"    </div>"
"    <p class='version'>Veil Browser v1.0</p>"
"  </div>"
"</div>"
"<script>"
"function showPage(id) {"
"  document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));"
"  document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));"
"  document.getElementById(id).classList.add('active');"
"  event.target.classList.add('active');"
"}"
"function update(key, val) {"
"  window.webkit.messageHandlers.settings.postMessage(JSON.stringify({key:key, value:val}));"
"}"
"function resetColor(key, def) {"
"  document.getElementById(key).value = def;"
"  update(key, def);"
"}"
"function uploadBgImage(input) {"
"  if (!input.files || !input.files[0]) return;"
"  const file = input.files[0];"
"  const reader = new FileReader();"
"  reader.onload = function(e) {"
"    const base64 = e.target.result.split(',')[1];"
"    window.webkit.messageHandlers.settings.postMessage(JSON.stringify({key:'bg_image', value:base64}));"
"  };"
"  reader.readAsDataURL(file);"
"}"
"function resetAll() {"
"  resetColor('bg', '%s');"
"  resetColor('accent', '%s');"
"  resetColor('grad_start', '%s');"
"  resetColor('grad_mid', '%s');"
"  resetColor('grad_end', '%s');"
"}"
"</script></body></html>";

#endif /* VEIL_PAGE_SETTINGS_H */
