<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Brat Gen by Luhungch</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
  <style>
    :root {
      --background: #ffffff;
      --foreground: #000000;
    }

    body {
      font-family: Arial;
      margin: 0;
      padding: 20px;
      background-color: #f0f0f0;
      color: #333;
    }

    .album-art {
      background-color: var(--background);
      color: var(--foreground);
      width: 24rem;
      height: 24rem;
      text-align: justify;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      font-size: 5rem;
      // font-weight: bold;
      // margin: 0 auto;
      border: 1px solid #ccc;
      white-space: normal;
      word-break: break-word;
    }

    .settings {
      display: flex;
      flex-direction: row;
      gap: 1rem;
      margin: 2rem 0;
      justify-content: center;
    }

    .settings div {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
    }

    .settings select,
    .settings input {
      padding: 0.5rem;
      font-size: 1rem;
    }

    .export button {
      font-size: 1rem;
      padding: 0.5rem 1rem;
      cursor: pointer;
    }

    @media (max-width: 768px) {
      .settings {
        flex-direction: column;
        align-items: center;
      }
    }
  </style>
</head>
<body>
  <section class="shadow">
    <div class="album-art" id="albumArt" contenteditable="true" oninput="adjustFontSize()">Brat Deluxe</div>
  </section>

  <section class="settings">
    <div>
      <label for="preset">Color Presets</label>
      <select id="preset" onchange="updateStyles()">
        <option value="bratdeluxe">Brat Deluxe</option>
        <option value="brat">BRAT</option>
        <option value="crash">CRASH</option>
        <option value="howimfeelingnow">How I'm Feeling Now</option>
        <option value="charli">Charli</option>
        <option value="pop2">Pop 2</option>
        <option value="vroomvroom">Vroom Vroom</option>
        <option value="number1angel">Number 1 Angel</option>
        <option value="sucker">SUCKER</option>
        <option value="trueromance">True Romance</option>
      </select>
    </div>
    <div>
      <label for="background">Background</label>
      <input type="color" id="background" value="#ffffff" onchange="customizeColors()">
    </div>
    <div>
      <label for="foreground">Text</label>
      <input type="color" id="foreground" value="#000000" onchange="customizeColors()">
    </div>
  </section>

  <section class="settings">
    <div>
      <label>
        <input type="checkbox" id="blurCheckbox" onchange="applyFilters()"> Blur
      </label>
      <label>
        <input type="checkbox" id="mirrorCheckbox" onchange="applyFilters()"> Mirror
      </label>
      <label>
        <input type="checkbox" id="centerCheckbox" onchange="applyFilters()"> Center
      </label>
    </div>
  </section>

  <script>
    const albumColors = {
      bratdeluxe: { background: '#ffffff', foreground: '#000000' },
      brat: { background: '#8ace00', foreground: '#000000' },
      crash: { background: '#019bd9', foreground: '#f70000' },
      howimfeelingnow: { background: '#ffffff', foreground: '#c1c1c1' },
      charli: { background: '#918a84', foreground: '#000000' },
      pop2: { background: '#c9a1dd', foreground: '#000000' },
      vroomvroom: { background: '#000000', foreground: '#404040' },
      number1angel: { background: '#d20001', foreground: '#ff1000' },
      sucker: { background: '#f5abcc', foreground: '#ffffff' },
      trueromance: { background: '#700150', foreground: '#ffffff' },
    };

    function updateStyles() {
      const preset = document.getElementById('preset').value;
      const art = document.getElementById('albumArt');
      const colors = albumColors[preset];
      document.documentElement.style.setProperty('--background', colors.background);
      document.documentElement.style.setProperty('--foreground', colors.foreground);
      art.textContent = preset.charAt(0).toUpperCase() + preset.slice(1).replace(/_/g, ' ');
      adjustFontSize();
    }

    // Ambil query string dari URL
    const queryString = window.location.search;
    const path = window.location.pathname;

    if (path.includes("/api")) {
      const blur = document.getElementById('blurCheckbox');
      const mirror = document.getElementById('mirrorCheckbox');
      const center = document.getElementById('centerCheckbox');
      // Jika path mengandung /api, langsung generate gambar dan download
      async function generateImage() {
        const art = document.getElementById('albumArt');

        // Gunakan html2canvas untuk screenshot elemen album-art
        const canvas = await html2canvas(art);
        const image = canvas.toDataURL('image/png');

        // Simpan gambar sebagai file otomatis
        const link = document.createElement('a');
        link.href = image;
        link.download = 'album-art.png';
        link.click(); // Secara otomatis klik untuk download
      }

      if (queryString) {
        const art = document.getElementById('albumArt');
        const urlParams = new URLSearchParams(queryString);

        const textV = urlParams.get('text');
        const blurV = urlParams.get('blur');
        const mirrorV = urlParams.get('mirror');
        const centerV = urlParams.get('center');
        const background = urlParams.get('background') || '#ffffff';
        const foreground = urlParams.get('foreground') || '#000000';

        if (textV) art.textContent = textV;
        if (blurV?.trim() === "true") {
          blur.checked = true
          applyFilters();
        }
        if (mirrorV?.trim() === "true") {
          mirror.checked = true
          applyFilters();
        }
        if (centerV?.trim() === "true") {
          center.checked = true
          applyFilters();
        }
        document.documentElement.style.setProperty('--background', background);
        document.documentElement.style.setProperty('--foreground', foreground);

        // Generate gambar setelah beberapa saat
        setTimeout(generateImage, 1000);
      } else {
        document.body.innerHTML = '<p>No parameters provided in the query string.</p>';
      }
    } else {
      // Kode normal untuk path selain /api
      if (queryString) {
        const art = document.getElementById('albumArt');
        const blur = document.getElementById('blurCheckbox');
        const mirror = document.getElementById('mirrorCheckbox');
        const center = document.getElementById('centerCheckbox');
        const urlParams = new URLSearchParams(queryString);

        const textV = urlParams.get('text');
        const blurV = urlParams.get('blur')?.trim() === "true";
        const mirrorV = urlParams.get('mirror')?.trim() === "true";
        const centerV = urlParams.get('center')?.trim() === "true";

        if (textV) {
          art.textContent = textV;
        }
        if (blur && urlParams.has('blur')) {
          blur.checked = blurV;
          applyFilters();
        }
        if (mirror && urlParams.has('mirror')) {
          mirror.checked = mirrorV;
          applyFilters();
        }
        if (center && urlParams.has('center')) {
          center.checked = centerV;
          applyFilters();
        }
      }
    }

    function customizeColors() {
      const background = document.getElementById('background').value;
      const foreground = document.getElementById('foreground').value;
      document.documentElement.style.setProperty('--background', background);
      document.documentElement.style.setProperty('--foreground', foreground);
      adjustFontSize();
    }

    function adjustFontSize() {
      const art = document.getElementById('albumArt');
      const maxFontSize = 5; // Rem (max size)
      const minFontSize = 1; // Rem (min size)
      const step = 0.1; // Rem

      let currentFontSize = maxFontSize;
      art.style.fontSize = `${currentFontSize}rem`;

      while (art.scrollHeight > art.clientHeight || art.scrollWidth > art.clientWidth) {
        if (currentFontSize <= minFontSize) break;
        currentFontSize -= step;
        art.style.fontSize = `${currentFontSize}rem`;
      }
    }

    function applyFilters() {
      const art = document.getElementById('albumArt');
      const isBlur = document.getElementById('blurCheckbox').checked;
      const isMirror = document.getElementById('mirrorCheckbox').checked;
      const isCenter = document.getElementById('centerCheckbox').checked;

      art.style.filter = isBlur ? 'blur(2px)' : 'none';
      art.style.transform = isMirror ? 'scaleX(-1)' : 'none';
      art.style.alignItems = isCenter ? 'center' : 'flex-start';
      art.style.justifyContent = isCenter ? 'center' : 'flex-start';
    }

    document.addEventListener('DOMContentLoaded', adjustFontSize);
  </script>
</body>
</html>
