#ifndef PORTAL_HTML_H
#define PORTAL_HTML_H

#include <Arduino.h>

const char PORTAL_CSS[] PROGMEM =
    "<style>"
    "*{box-sizing:border-box;margin:0;padding:0}"
    "body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;"
    "background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);"
    "min-height:100vh;padding:20px;display:flex;flex-direction:column;align-"
    "items:center;"
    "justify-content:center}"
    ".container{max-width:480px;width:100%;background:white;"
    "padding:30px;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,0.2)}"
    "h1{color:white;margin-bottom:25px;font-size:28px;font-weight:700;text-"
    "align:center;text-shadow:0 2px 4px rgba(0,0,0,0.2)}"
    ".subtitle{color:#666;font-size:14px;margin-bottom:25px;text-align:center}"
    "h2{color:#666;font-size:14px;margin:10px 0 15px;border-bottom:2px solid "
    "#eee;padding-bottom:10px}"
    ".input-group{margin-bottom:15px}"
    "label{display:block;margin-bottom:8px;color:#555;font-weight:500;font-"
    "size:14px}"
    "input,button{width:100%;padding:12px;border:2px solid "
    "#e9ecef;border-radius:8px;font-size:15px}"
    "input:focus{outline:none;border-color:#667eea}"
    "button{background:#667eea;color:white;border:none;cursor:pointer;font-"
    "weight:600;transition:0.2s}"
    "button:hover{background:#5568d3}"
    ".loader{border:3px solid #f3f3f3;border-top:3px solid "
    "#667eea;border-radius:50%;"
    "width:24px;height:24px;animation:spin 1s linear infinite;margin:20px auto}"
    "@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}"
    ".network{padding:12px;margin:8px 0;background:#f8f9fa;border:1px solid "
    "#e9ecef;"
    "border-radius:8px;cursor:pointer;display:flex;justify-content:space-"
    "between;align-items:center;transition:0.2s}"
    ".network:hover{background:#eef2ff;border-color:#667eea}"
    ".rssi{font-size:12px;color:#888;background:#eee;padding:2px "
    "6px;border-radius:4px}"
    ".lock{font-size:12px;margin-right:5px}"
    ".saved-list{margin-top:25px;padding-top:25px;border-top:2px solid #e9ecef}"
    ".saved-title{color:#666;font-size:13px;margin-bottom:12px;font-weight:600}"
    ".saved-row{display:flex;gap:10px;align-items:center}"
    ".saved-btn{flex:1;background:#17a2b8;font-size:14px;padding:10px;margin:"
    "6px 0}"
    ".saved-btn:hover{background:#138496}"
    ".delete-btn{background:#dc3545;width:40px;padding:0;margin:6px 0;"
    "display:flex;align-items:center;justify-content:center;font-size:18px}"
    ".delete-btn:hover{background:#c82333}"
    "</style>";

const char PORTAL_HTML[] PROGMEM =
    "<!DOCTYPE html><html><head><meta charset='utf-8'>"
    "<meta name='viewport' content='width=device-width,initial-scale=1'>"
    "<title>WiFi Setup</title>"
    "%CSS%"
    "</head><body>"
    "<h1>🌐 %AP_NAME%</h1>"
    "<div class='container'>"

    // Scan Results Section
    "<h2>Select Network</h2>"
    "<div id='list'>"
    "<div class='loader'></div>"
    "<div style='text-align:center;color:#666;font-size:14px'>Scanning nearby "
    "networks...</div>"
    "</div>"

    // Form Section
    "<form action='/connect' method='POST' style='margin-top:25px'>"
    "<div class='input-group'>"
    "<label>Network Name (SSID)</label>"
    "<input type='text' id='ssid' name='ssid' placeholder='Select or type...' "
    "required>"
    "</div>"
    "<div class='input-group'>"
    "<label>Password</label>"
    "<input type='text' name='pass' placeholder='Enter password...'>"
    "</div>"
    "<button type='submit'>Connect</button>"
    "</form>"

    // Saved Networks Placeholder
    "%SAVED_LIST%"

    "</div>"
    "<script>"
    "function s(n){document.getElementById('ssid').value=n;}"
    "fetch('/scan-results').then(r=>r.json()).then(d=>{"
    "let h='';let seen={};"
    "if(d.length==0)h='<p style=\"text-align:center;color:#666\">No networks "
    "found</p>';"
    "else d.forEach(n=>{"
    "if(!seen[n.s]){ seen[n.s]=true;"
    "h+=`<div class='network' onclick='s(\"${n.s}\")'>`+"
    "`<div>${n.e?'🔒':''} <b>${n.s}</b></div>`+"
    "`<div class='rssi'>${n.r}dBm</div></div>`;"
    "}});"
    "document.getElementById('list').innerHTML=h;"
    "});"
    "</script>"
    "</body></html>";

#endif
