#!/bin/bash
# generator/project/07-create-html.sh

set -e
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
PROJECT_ROOT="$(cd "$SCRIPT_DIR/../.." && pwd)"

source "$SCRIPT_DIR/../common/logging.sh"
source "$PROJECT_ROOT/generator/common/confirm-action.sh"

main() {
  write_file_with_confirm "src/public/index.html" "
<!DOCTYPE html>
<html lang=\"es\">
<head>
  <meta charset=\"UTF-8\">
  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
  <title>Hexagonizer</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: #0a0a0a; font-family: 'Arial', sans-serif; overflow: hidden; height: 100vh; }
    .navbar { position: fixed; top: 0; left: 0; right: 0; height: 70px; background: rgba(0,0,0,0.9); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0,255,157,0.2); display: flex; justify-content: space-between; align-items: center; padding: 0 2rem; z-index: 100; }
    .logo { font-size: 1.5rem; font-weight: bold; color: #00ff9d; text-shadow: 0 0 10px #00ff9d; }
    .nav-links { display: flex; gap: 2rem; }
    .nav-links a { color: #fff; text-decoration: none; padding: 0.5rem 1rem; border: 1px solid rgba(0,255,157,0.3); border-radius: 4px; transition: all 0.3s ease; font-size: 0.9rem; }
    .nav-links a:hover { color: #00ff9d; border-color: #00ff9d; box-shadow: 0 0 10px rgba(0,255,157,0.3); }
    .container { height: 100vh; display: flex; justify-content: center; align-items: center; background: radial-gradient(ellipse at center, rgba(0,255,157,0.1) 0%, rgba(0,0,0,1) 70%); }
    .hex-ring { position: relative; width: 300px; height: 300px; }
    .hex-ring div { position: absolute; width: 60px; height: 104px; background: linear-gradient(135deg, #00ff9d, #00b86b); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); opacity: 0.6; animation: pulse 2s ease-in-out infinite; }
    .hex-ring div:nth-child(1) { top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 0s; width: 80px; height: 138px; opacity: 0.9; }
    .hex-ring div:nth-child(2) { top: 20%; left: 50%; transform: translate(-50%, -50%) rotate(0deg); animation-delay: 0.3s; }
    .hex-ring div:nth-child(3) { top: 80%; left: 50%; transform: translate(-50%, -50%) rotate(0deg); animation-delay: 0.6s; }
    .hex-ring div:nth-child(4) { top: 50%; left: 20%; transform: translate(-50%, -50%) rotate(0deg); animation-delay: 0.9s; }
    .hex-ring div:nth-child(5) { top: 50%; left: 80%; transform: translate(-50%, -50%) rotate(0deg); animation-delay: 1.2s; }
    .hex-ring div:nth-child(6) { top: 30%; left: 30%; transform: translate(-50%, -50%) rotate(0deg); animation-delay: 1.5s; }
    .hex-ring div:nth-child(7) { top: 70%; left: 70%; transform: translate(-50%, -50%) rotate(0deg); animation-delay: 1.8s; }
    @keyframes pulse { 0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.15); } }
    .title { position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 1.5rem; letter-spacing: 4px; text-transform: uppercase; white-space: nowrap; }
    .title span { color: #00ff9d; }
    .particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
    .particle { position: absolute; width: 3px; height: 3px; background: #00ff9d; border-radius: 50%; animation: float 6s ease-in-out infinite; opacity: 0; }
    @keyframes float { 0%, 100% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(-100px); } }
  </style>
</head>
<body>
  <nav class=\"navbar\">
    <div class=\"logo\">HEXAGONIZER</div>
    <div class=\"nav-links\">
      <a href=\"/health\">Health</a>
      <a href=\"/public\">API</a>
    </div>
  </nav>
  <div class=\"container\">
    <div class=\"hex-ring\">
      <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
      <div class=\"title\">Generated by <span>Hexagonizer</span></div>
    </div>
  </div>
  <div class=\"particles\" id=\"particles\"></div>
  <script>
    function createParticles() {
      const container = document.getElementById('particles');
      for (let i = 0; i < 30; i++) {
        const p = document.createElement('div');
        p.className = 'particle';
        p.style.left = Math.random() * 100 + '%';
        p.style.top = Math.random() * 100 + '%';
        p.style.animationDelay = Math.random() * 6 + 's';
        p.style.animationDuration = (3 + Math.random() * 4) + 's';
        container.appendChild(p);
      }
    }
    document.addEventListener('DOMContentLoaded', createParticles);
  </script>
</body>
</html>
"
  log "SUCCESS" "HTML home page created"
}

if [[ "${BASH_SOURCE[0]}" == "${0}" ]]; then
  main "$@"
fi
