import {get} from "./api.js";

const grid = document.getElementById("personalityGrid");
const icons = {spark:"✥", quill:"✒", code:"⌘", flask:"⚗", "book-open":"▤", logic:"∴"};
const result = await get("/personalities");
if (result.error) {
    grid.textContent = result.error;
} else {
    for (const item of result.personalities || []) {
        const card = document.createElement("article");
        card.className = "settings-panel personality-card";
        card.style.setProperty("--personality-accent", item.accentColor);
        const icon = document.createElement("div");
        icon.className = "personality-icon";
        icon.textContent = icons[item.icon] || "✦";
        icon.title = item.name;
        icon.setAttribute("aria-hidden", "true");
        const specialization = document.createElement("p");
        specialization.className = "personality-specialization";
        specialization.textContent = `${item.specialization}${item.isDefault ? " · Default" : ""}`;
        const name = document.createElement("h2");
        name.textContent = item.name;
        name.title = `Inspired by ${item.historicalInspiration}`;
        const description = document.createElement("p");
        description.className = "subtitle";
        description.textContent = item.description;
        const details = document.createElement("details");
        details.className = "personality-details";
        const summary = document.createElement("summary");
        summary.textContent = "Learn more";
        const longDescription = document.createElement("p");
        longDescription.textContent = item.longDescription;
        const inspiration = document.createElement("p");
        inspiration.className = "personality-inspiration";
        inspiration.textContent = `Thematic inspiration: ${item.historicalInspiration}`;
        details.append(summary, longDescription, inspiration);
        const action = document.createElement("a");
        action.className = "primary-action";
        action.textContent = "Start Chat";
        action.setAttribute("aria-label", `Start a chat with ${item.name}, ${item.specialization}`);
        action.href = `/app/chats/new?personality=${encodeURIComponent(item.id)}`;
        card.append(icon, specialization, name, description, details, action);
        grid.append(card);
    }
}