import { zoekThema } from "../constants/themas.js";

/** `#rrggbb` (of `#rgb`) → `rgba(r, g, b, alpha)` */
function metAlpha(hex, alpha) {
  const h = hex.replace("#", "");
  const vol = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
  const n = parseInt(vol, 16);
  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${alpha})`;
}

/**
 * Geeft een thema-object (T) terug op basis van het gekozen kleurthema en
 * licht/donker. Wordt gebruikt door alle componenten om consistent kleuren te
 * krijgen.
 *
 * Thema en modus staan los van elkaar: het thema levert het accent, `darkMode`
 * de ondergrond. De randen, invoervelden en schaduwen worden uit het accent
 * afgeleid, zodat ze vanzelf meekleuren.
 *
 * @param {string}  themaId  id uit `constants/themas.js`
 * @param {boolean} darkMode
 */
export function useTheme(themaId, darkMode) {
  const thema = zoekThema(themaId);
  const p = darkMode ? thema.donker : thema.helder;

  // Het accent dat tekst draagt is per ondergrond een andere stap van dezelfde
  // kleur: de lichte op donker, de donkere op licht. Eén stap voor beide haalt
  // aan één kant altijd te weinig contrast.
  const accentTekst = darkMode ? thema.licht : thema.hoofd;

  return {
    bg:   p.bg,
    card: p.card,
    // Ondoorzichtige achtergrond voor popups/modals: kaartkleur over de pagina-bg.
    popupBg: `linear-gradient(${p.card}, ${p.card}), ${p.bg}`,
    sidebar:     p.diep,
    border:      darkMode ? metAlpha(thema.licht, 0.15) : "rgba(0,0,0,0.07)",
    muted:       p.muted,
    text:        p.tekst,
    subtext:     p.sub,
    inputBg:     darkMode ? metAlpha(thema.licht, 0.08) : metAlpha(thema.hoofd, 0.05),
    inputBorder: darkMode ? metAlpha(thema.licht, 0.2)  : "#e2e8f0",
    contentBg:   p.bg,
    shadow:      darkMode ? `0 4px 24px ${metAlpha(thema.hoofd, 0.25)}` : "0 4px 20px rgba(0,0,0,0.07)",
    cardShadow:  darkMode ? `0 4px 20px ${metAlpha(thema.hoofd, 0.2)}`  : "0 2px 8px rgba(0,0,0,0.06)",
    radius:      "14px",
    font:        "'Poppins', system-ui, sans-serif",

    // ── Accenten ──────────────────────────────────────────────────────────────
    // Componenten die nu nog PURPLE / PURPLE_LIGHT uit constants/index.js
    // importeren horen hier naartoe: een const op moduleniveau is niet
    // reactief en kan dus niet met een themakeuze meeveranderen.
    accent:         thema.hoofd,
    accentLicht:    thema.licht,
    accentTekst,
    accentGradient: `linear-gradient(135deg, ${thema.hoofd}, ${thema.licht})`,
    // Start- en eindkleur van de vermogenslijn in de grafiek.
    chartVan: thema.chart,
    chartTot: thema.licht,

    // Voor componenten die op de modus moeten beslissen. Eerder werd dat gedaan
    // door T.bg met een vaste hex te vergelijken; met elf thema's kan dat niet meer.
    darkMode,
    themaId:   thema.id,
    themaNaam: thema.naam,
  };
}