// JavaScript code to write HTML content
const openaiURL = "https://api.openai.com/v1/completions";
const themodel = "text-davinci-003";
var apikey = "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";

$('body').css("margin", "20px");
$('body').css("padding", "20px");

document.write(`
    <h1>Discover Color Stories with AI</h1>
    <p>Click on a color to learn about its significance and history.</p>

    <div id="enterkey">
        Enter API key:
        <input style='width:25vw;' id="apikey" placeholder="Enter API key here">
        <button onclick='setApiKey();'>Set API key</button>
    </div>

    <div id="colorOptions" style="margin-top: 20px;">
        <!-- Color options will be added here -->
    </div>

    <div id="colorInfo" style="margin-top: 20px; background-color:#f0f0f0; border: 1px solid black; padding: 15px; width:60vw;"></div>
`);

// Define a list of colors and their hex codes
const colors = {
    "Red": "#FF0000", "Green": "#00FF00", "Blue": "#0000FF",
    "Yellow": "#FFFF00", "Purple": "#800080", "Orange": "#FFA500",
    "Pink": "#FFC0CB", "Teal": "#008080", "Lavender": "#E6E6FA",
    "Brown": "#A52A2A", "Crimson": "#DC143C", "Magenta": "#FF00FF",
    "Lime": "#00FF00", "Maroon": "#800000", "Navy": "#000080",
    "Olive": "#808000", "Cyan": "#00FFFF", "Turquoise": "#40E0D0",
    "Silver": "#C0C0C0", "Gold": "#FFD700", "Peach": "#FFDAB9",
    "Beige": "#F5F5DC", "Mustard": "#FFDB58", "Coral": "#FF7F50",
    "Ivory": "#FFFFF0", "Plum": "#DDA0DD", "Indigo": "#4B0082",
    "Gray": "#808080", "Sky Blue": "#87CEEB", "Slate": "#708090",
    "Charcoal": "#36454F", "Apricot": "#FBCEB1", "Cerulean": "#007BA7",
    "Raspberry": "#E30B5D", "Emerald": "#50C878", "Viridian": "#40826D",
    "Sapphire": "#0F52BA", "Amber": "#FFBF00", "Bronze": "#CD7F32",
    "Periwinkle": "#CCCCFF", "Tangerine": "#F28500", "Rust": "#B7410E",
    "Ochre": "#CC7722", "Mauve": "#E0B0FF", "Fuchsia": "#FF00FF",
    "Aqua": "#00FFFF", "Sage": "#BCB88A", "Chestnut": "#954535",
    "Lemon": "#FFF700", "Sand": "#C2B280", "Mint": "#3EB489",
    "Blush": "#DE5D83", "Burgundy": "#800020", "Pear": "#D1E231",
    // can add more colors as needed
};

// Function to create color options
function createColorOptions() {
    var colorOptionsDiv = $('#colorOptions');
    $.each(colors, function(colorName, hexCode) {
        colorOptionsDiv.append('<button onclick="getColorInfo(\'' + colorName + '\');" style="background-color:' + hexCode + '; width: 50px; height: 50px; margin: 5px;"></button>');
    });
}

createColorOptions();

function setApiKey() {
    apikey = $('#apikey').val().trim();
    $('#enterkey').html(apikey ? "<b>API key has been set.</b>" : "<b>Please enter an API key.</b>");
}

function getColorInfo(colorName) {
    if (!apikey) {
        alert("API key is not set.");
        return;
    }

    var prompt = "Tell me about the color " + colorName + ", its significance, and historical facts.";

    var data = {
        model: themodel,
        prompt: prompt,
        max_tokens: 300 //max_tokens
    };

    $.ajax({
        type: "POST",
        url: openaiURL,
        headers: {
            "Content-Type": "application/json",
            "Authorization": "Bearer " + apikey
        },
        data: JSON.stringify(data),
        dataType: "json",
        success: function(data) {
            $('#colorInfo').html('<p><strong>' + colorName + ':</strong> ' + data.choices[0].text + '</p>');
        },
        error: function(jqXHR) {
            var errorMsg = jqXHR.responseJSON && jqXHR.responseJSON.error && jqXHR.responseJSON.error.message;
            $('#colorInfo').text("Error occurred: " + (errorMsg || "Unknown error"));
        }
    });
}