ui_builder.gleam

import gleam/string

fn active_class(page: String, key: String) -> String {
  case page == key || string.starts_with(page, key <> "-") {
    True -> " active"
    False -> ""
  }
}

fn nav_item(page: String, key: String, href: String, icon: String, label: String) -> String {
  "<a class='nav-item" <> active_class(page, key) <> "' href='" <> href <> "'><i class='" <> icon <> "'></i><span>" <> label <> "</span></a>"
}

fn nav_html(page: String) -> String {
  let sidebar = "<sidebar-nav>
    <div class='brand-logo'><i class='fas fa-brain'></i><span>FlashSync</span></div>
    <div class='nav-section'><div class='nav-label'>Core</div>"
  let sidebar = sidebar <> nav_item(page, "hub", "/hub", "fas fa-home", "Dashboard")
  let sidebar = sidebar <> nav_item(page, "flashcards", "/flashcards", "fas fa-cards-blank", "Flashcards")
  let sidebar = sidebar <> nav_item(page, "education", "/education", "fas fa-graduation-cap", "Education Portal")
  let sidebar = sidebar <> "</div>
    <div class='nav-section'><div class='nav-label'>Intelligence</div>"
  let sidebar = sidebar <> nav_item(page, "tutor", "/tutor", "fas fa-robot", "AI Tutor")
  let sidebar = sidebar <> nav_item(page, "ai-solver", "/ai-solver", "fas fa-wand-magic-sparkles", "AI Solver")
  let sidebar = sidebar <> nav_item(page, "study-tools", "/study-tools", "fas fa-toolbox", "Study Tools")
  let sidebar = sidebar <> nav_item(page, "heatmap", "/heatmap", "fas fa-fire", "Heatmap")
  let sidebar = sidebar <> "</div>
    <div class='nav-section'><div class='nav-label'>Analytics</div>"
  let sidebar = sidebar <> nav_item(page, "biometric", "/biometric", "fas fa-heart", "Focus Track")
  let sidebar = sidebar <> nav_item(page, "exam", "/exams", "fas fa-clipboard-list", "Exams")
  let sidebar = sidebar <> nav_item(page, "timetravel", "/timetravel", "fas fa-hourglass-end", "Timeline")
  let sidebar = sidebar <> nav_item(page, "analytics", "/analytics", "fas fa-chart-line", "Analytics")
  let sidebar = sidebar <> "</div>
    <div class='nav-section'><div class='nav-label'>Personalization</div>"
  let sidebar = sidebar <> nav_item(page, "achievements", "/achievements", "fas fa-trophy", "Achievements")
  let sidebar = sidebar <> nav_item(page, "calendar", "/calendar", "fas fa-calendar", "Calendar")
  let sidebar = sidebar <> nav_item(page, "notes", "/notes", "fas fa-sticky-note", "Notes")
  let sidebar = sidebar <> nav_item(page, "vocabulary", "/vocabulary", "fas fa-book", "Vocabulary")
  let sidebar = sidebar <> nav_item(page, "pomodoro", "/pomodoro", "fas fa-clock", "Pomodoro")
  let sidebar = sidebar <> nav_item(page, "formulas", "/formulas", "fas fa-square-root-variable", "Formulas")
  let sidebar = sidebar <> nav_item(page, "profile", "/profile", "fas fa-user", "Profile")
  let sidebar = sidebar <> nav_item(page, "settings", "/settings", "fas fa-sliders", "Settings")
  sidebar <> "</div>
  </sidebar-nav>"
}

fn css_style() -> String {
  ":root { --primary: #00f2ff; --secondary: #bc13fe; --accent: #ff006e; --success: #00ff00; --warning: #ffaa00; --bg-dark: #010103; --bg-darker: #000; --glass: rgba(255,255,255,0.03); --glass-border: rgba(0,242,255,0.1); --page-bg: linear-gradient(135deg, #010103 0%, #0a0a1a 50%, #010103 100%); --text-main: #ffffff; }
    html[data-theme='light'] { --primary:#0065a3; --secondary:#7a2fc7; --accent:#cf2a4f; --success:#0b8f45; --warning:#b86a00; --glass: rgba(0,0,0,0.04); --glass-border: rgba(0,101,163,0.15); --page-bg: linear-gradient(135deg, #f4f8ff 0%, #eef3ff 50%, #f8fbff 100%); --text-main:#111827; }
    * { margin:0; padding:0; box-sizing:border-box; }
    html,body { width:100%; height:100%; background: var(--page-bg); color: var(--text-main); font-family: 'Segoe UI', 'Trebuchet MS', sans-serif; overflow-x: hidden; scroll-behavior: smooth; }
    body { display:flex; gap:0; }
    sidebar-nav { width:280px; background:linear-gradient(180deg,#0a0a0f 0%,#050508 100%); border-right:2px solid rgba(0,242,255,0.1); padding:30px 20px; height:100vh; overflow-y:auto; position:fixed; left:0; top:0; z-index:1000; }
    main-content { flex:1; margin-left:280px; padding:40px; overflow-y:auto; height:100vh; }
    .brand-logo { font-size:1.8rem; font-weight:900; color:var(--primary); margin-bottom:40px; display:flex; align-items:center; gap:12px; }
    .nav-section { margin-bottom:30px; }
    .nav-label { font-size:0.75rem; text-transform:uppercase; color:#666; letter-spacing:2px; margin-bottom:12px; font-weight:700; }
    .nav-item { display:flex; align-items:center; gap:12px; padding:14px 16px; margin:6px 0; border-radius:12px; color:#888; text-decoration:none; cursor:pointer; transition:all 0.3s; border-left:3px solid transparent; }
    .nav-item:hover { background:rgba(0,242,255,0.08); color:var(--primary); border-left-color:var(--primary); }
    .nav-item.active { background:rgba(0,242,255,0.15); color:var(--primary); border-left-color:var(--primary); font-weight:600; }
    h1 { font-size:clamp(2rem, 8vw, 3.5rem); font-weight:900; background:linear-gradient(135deg, #fff 0%, var(--primary) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:15px; }
    h2 { font-size:1.8rem; font-weight:800; margin:20px 0 15px; color:var(--primary); }
    h3 { font-size:1.3rem; font-weight:700; margin:15px 0 10px; color:#fff; }
    .subtitle { color:#999; font-size:1.1rem; margin-bottom:30px; }
    .stat-card { background:var(--glass); border:1px solid rgba(0,242,255,0.15); padding:25px; border-radius:16px; transition:all 0.4s; position:relative; }
    .stat-card:hover { border-color:var(--primary); transform:translateY(-4px); box-shadow:0 15px 40px rgba(0,242,255,0.15); }
    .grid-2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:20px; margin:25px 0; }
    .grid-3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:25px; margin:25px 0; }
    .grid-4 { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:20px; margin:25px 0; }
    .premium-input { width:100%; background:rgba(0,0,0,0.4); border:2px solid rgba(0,242,255,0.2); padding:16px; border-radius:12px; color:#fff; font-size:1rem; transition:all 0.3s; }
    .premium-input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 20px rgba(0,242,255,0.3); }
    .premium-button { background:linear-gradient(135deg, var(--primary) 0%, #0099cc 100%); color:#000; border:none; padding:14px 32px; border-radius:50px; font-weight:700; font-size:1rem; cursor:pointer; transition:all 0.3s; display:inline-flex; align-items:center; gap:8px; }
    .premium-button:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,242,255,0.4); }
    .accent-button { background:linear-gradient(135deg, var(--secondary) 0%, #9a0099 100%); border:none; padding:14px 32px; border-radius:50px; font-weight:700; font-size:1rem; cursor:pointer; transition:all 0.3s; display:inline-flex; align-items:center; gap:8px; color:#fff; }
    .accent-button:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(188,19,254,0.4); }
    .success-button { background:linear-gradient(135deg, var(--success) 0%, #00cc00 100%); border:none; padding:14px 32px; border-radius:50px; font-weight:700; font-size:1rem; cursor:pointer; transition:all 0.3s; display:inline-flex; align-items:center; gap:8px; color:#000; }
    .success-button:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,255,0,0.4); }
    .feature-box { background:linear-gradient(135deg, rgba(0,242,255,0.05) 0%, rgba(188,19,254,0.05) 100%); border:1px solid rgba(0,242,255,0.2); padding:30px; border-radius:20px; margin:20px 0; }
    .chat-window { background:rgba(0,0,0,0.5); border:1px solid rgba(0,242,255,0.2); border-radius:20px; height:500px; display:flex; flex-direction:column; overflow:hidden; }
    .chat-messages { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:15px; }
    .message { padding:15px 20px; border-radius:15px; max-width:85%; line-height:1.5; }
    .message.user { background:linear-gradient(135deg, rgba(0,242,255,0.2), rgba(0,242,255,0.1)); border-left:3px solid var(--primary); margin-left:auto; }
    .message.ai { background:linear-gradient(135deg, rgba(188,19,254,0.2), rgba(188,19,254,0.1)); border-left:3px solid var(--secondary); }
    .chat-input { padding:20px; border-top:1px solid rgba(0,242,255,0.1); display:flex; gap:10px; }
    .chat-input input { flex:1; }
    .toast { position:fixed; bottom:30px; right:30px; padding:18px 28px; border-radius:14px; background:rgba(0,0,0,0.9); border:1px solid var(--primary); color:var(--primary); font-weight:600; transform:translateY(100px); opacity:0; transition:all 0.4s; z-index:10000; }
    .toast.show { transform:translateY(0); opacity:1; }
    .toast.success { border-color:var(--success); color:var(--success); }
    .toast.error { border-color:var(--accent); color:var(--accent); }
    .modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:9999; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s; }
    .modal-overlay.show { opacity:1; pointer-events:auto; }
    .modal-box { background:linear-gradient(135deg, #0f1a30, #141f38); border:1px solid rgba(0,242,255,0.2); border-radius:24px; padding:40px; max-width:500px; width:90%; max-height:80vh; overflow-y:auto; transform:scale(0.9); transition:transform 0.3s; }
    .modal-overlay.show .modal-box { transform:scale(1); }
    .typing-indicator { display:flex; gap:6px; padding:8px 0; }
    .typing-indicator span { width:10px; height:10px; border-radius:50%; background:var(--secondary); animation:typing 1.4s infinite; }
    .typing-indicator span:nth-child(2) { animation-delay:0.2s; }
    .typing-indicator span:nth-child(3) { animation-delay:0.4s; }
    @keyframes typing { 0%,100% { transform:translateY(0); opacity:0.4; } 50% { transform:translateY(-10px); opacity:1; } }
    .flash-card { background:linear-gradient(135deg, #1c2b4e, #141f38); border:2px solid rgba(0,242,255,0.15); border-radius:20px; padding:40px; margin:20px 0; min-height:250px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; transition:all 0.4s; text-align:center; }
    .flash-card:hover { border-color:var(--primary); }
    .flash-card .back { display:none; }
    .flash-card.flipped .front { display:none; }
    .flash-card.flipped .back { display:block; }
    .tag { display:inline-block; padding:4px 12px; border-radius:20px; font-size:0.75rem; font-weight:600; margin:3px; }
    .tag.primary { background:rgba(0,242,255,0.2); color:var(--primary); }
    .tag.success { background:rgba(0,255,0,0.2); color:var(--success); }
    .tag.warning { background:rgba(255,170,0,0.2); color:var(--warning); }
    .tag.accent { background:rgba(188,19,254,0.2); color:var(--secondary); }
    .study-progress-bar { height:8px; background:rgba(0,0,0,0.4); border-radius:4px; margin:15px 0; overflow:hidden; }
    .study-progress-fill { height:100%; background:linear-gradient(90deg, var(--primary), var(--secondary)); border-radius:4px; transition:width 0.5s; }
    .compact-btn { padding:8px 16px; font-size:0.85rem; border-radius:8px; border:none; cursor:pointer; font-weight:600; transition:all 0.2s; display:inline-flex; align-items:center; gap:6px; }
    .compact-btn:hover { transform:translateY(-2px); }
    .stats-row { display:flex; gap:20px; flex-wrap:wrap; margin:20px 0; }
    .stats-badge { background:rgba(0,242,255,0.08); padding:10px 18px; border-radius:10px; border:1px solid rgba(0,242,255,0.1); font-size:0.9rem; }
    .stats-badge strong { color:var(--primary); }
    .mode-toggle { display:flex; gap:10px; flex-wrap:wrap; }
    .mode-btn,.lang-btn { padding:10px 20px; border-radius:10px; border:1px solid rgba(0,242,255,0.2); background:rgba(0,0,0,0.3); color:#888; cursor:pointer; transition:all 0.3s; font-size:0.9rem; }
    .mode-btn:hover,.lang-btn:hover { border-color:var(--primary); color:var(--primary); }
    .mode-btn.active,.lang-btn.active { background:rgba(0,242,255,0.2); border-color:var(--primary); color:var(--primary); font-weight:600; }
    .language-selector { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
    @media (max-width:900px) { sidebar-nav { width:100px; padding:20px 10px; } main-content { margin-left:100px; padding:25px; } .nav-item span:not(:first-child) { display:none; } }
    .confetti { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:99999; overflow:hidden; }
    .confetti-piece { position:absolute; width:10px; height:10px; top:-10px; animation:confettiFall 3s ease-in forwards; }
    @keyframes confettiFall { 0% { transform:translateY(0) rotate(0deg); opacity:1; } 100% { transform:translateY(100vh) rotate(720deg); opacity:0; } }
    .exam-timer { font-size:2rem; font-weight:900; color:var(--primary); text-align:center; padding:20px; }
    .exam-timer.warning { color:var(--warning); animation:pulse 1s infinite; }
    .exam-timer.critical { color:var(--accent); animation:pulse 0.5s infinite; }
    @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }"
}

pub fn build_premium_html(page: String, content: String) -> String {
  let head_start = "<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>FlashSync Pro</title>
  <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css' rel='stylesheet'>
  <style>"
  let style = css_style()
  let head_end = "</style>
</head>
<body>"
  let sidebar = nav_html(page)
  let modal_toast = "
  <div id='toast' class='toast'></div>
  <div id='modalOverlay' class='modal-overlay' onclick='closeModal(event)'>
    <div class='modal-box'><h2 id='modalTitle'></h2><div id='modalBody'></div>
      <button class='premium-button' onclick='closeModal()' style='margin-top:20px;width:100%;'>Close</button>
    </div>
  </div>
  <script src=\"/static/app.js\"></script>
</body>
</html>"
  head_start <> style <> head_end <> sidebar <> "<main-content>" <> content <> "</main-content>" <> modal_toast
}