async function fetchData() {
    const charName = document.getElementById("charName").value;
    const resultDiv = document.getElementById("result");

    if (!charName) {
        resultDiv.innerHTML = "<p>Masukkan nama karakter terlebih dahulu!</p>";
        return;
    }

    try {
        const response = await fetch(`http://localhost:3000/api?name=${charName}`);
        const data = await response.json();

        if (data.error) {
            resultDiv.innerHTML = `<p>${data.error}</p>`;
            return;
        }

        let output = "<h2>Hasil Pencarian:</h2>";

        if (data.skills) {
            output += `<h3>Skill & Discipline</h3>`;
            output += `<p>Karakter: ${data.skills.Karakter}</p>`;
            output += `<p>Link Skill 3: <a href="${data.skills.Skill3}" target="_blank">${data.skills.Skill3}</a></p>`;
            output += `<p>Link Idle + Tap: <a href="${data.skills.Tap}" target="_blank">${data.skills.Tap}</a></p>`;
        }

        if (data.story) {
            output += `<h3>Story Part II</h3>`;
            output += `<p>Member: ${data.story.Member}</p>`;
            output += `<p>Video: <a href="${data.story.Video}" target="_blank">${data.story.Video}</a></p>`;
        }

        if (data.chatAnimations) {
            output += `<h3>Chat Animations</h3>`;
            output += `<p>Karakter: ${data.chatAnimations.Karakter}</p>`;
            output += `<p>Video: <a href="${data.chatAnimations.Video}" target="_blank">${data.chatAnimations.Video}</a></p>`;
        }

        if (data.illustration) {
            output += `<h3>Illustrations</h3>`;
            output += `<p>Karakter: ${data.illustration.Karakter}</p>`;
            output += `<img src="${data.illustration.Image}" alt="Illustration" width="300">`;
        }

        resultDiv.innerHTML = output;
    } catch (error) {
        resultDiv.innerHTML = "<p>Gagal mengambil data.</p>";
    }
}

const express = require("express");
const cors = require("cors");
const fetch = require("node-fetch");
const cheerio = require("cheerio");

const app = express();
app.use(cors());

const headers = {
    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36"
};

async function fetchHtml(url) {
    const response = await fetch(url, { headers });
    return response.text();
}

function parseData(cari, html) {
    const $ = cheerio.load(html);
    const rows = $("tr").slice(1);
    let result = null;

    rows.each((index, row) => {
        const cols = $(row).find("td");
        const characterName = $(cols[0]).find("a").text().trim();
        let skill3Link = $(cols[2]).find("a[href*='SK3']").attr("href") || "";
        let tapLink = $(cols[3]).find("a[href*='Tap']").attr("href") || "";

        if (characterName.includes(cari)) {
            result = { Karakter: characterName, Skill3: skill3Link, Tap: tapLink };
            return false; // Keluar dari loop
        }
    });

    return result;
}

app.get("/api", async (req, res) => {
    const cari = req.query.name;
    if (!cari) return res.json({ error: "Masukkan nama karakter!" });

    const url = "https://arkrecodewiki.miraheze.org/wiki/Love_Link";
    try {
        const html = await fetchHtml(url);
        const segments = html.split("Show Spoilers");

        if (segments.length < 7) return res.json({ error: "Data tidak ditemukan" });

        const skillData = parseData(cari, segments[1]);

        res.json({ skills: skillData || "Tidak ditemukan" });
    } catch (error) {
        res.json({ error: "Gagal mengambil data" });
    }
});

app.listen(3000, () => {
    console.log("Server berjalan di http://localhost:3000");
});