// Client-seitiges Gegenstück zu components/HeartRating.astro. Astro-Komponenten können nicht im
// Browser laufen (sie werden nur beim Bauen der Seite zu HTML) — überall dort, wo sich Herzen
// nach dem Laden der Seite per JavaScript ändern müssen (neue Kundenrezension, Login-Zustand,
// zusammengeführte Bewertungen), wird stattdessen diese Funktion benutzt. Bewusst dieselbe
// Optik/Logik wie HeartRating.astro (Lila-Babyblau-Verlauf, gleicher Herz-Pfad) — bei
// Design-Änderungen an einer Stelle IMMER auch die andere anpassen.

let zaehler = 0;

const HERZ_PFAD =
  "M12 21s-7.5-4.9-10.2-9.3C.2 8.7 1.4 5 5 4.1c2.1-.5 4 1.4 5 2.9.6-.9 1.3-1.7 2.2-2.2 1.9-1.1 4.4-.7 5.8 1 1.9 2.3 1.5 5.6-.6 8.6C14.9 17.5 12 21 12 21z";

/** Spiegelt die Props von HeartRating.astro (showValue/anzahlLabel optional). */
export function heartsHtml(bewertung: number, size = 16, opts: { showValue?: boolean; anzahlLabel?: string } = {}): string {
  zaehler += 1;
  const gradId = `hrc-${Date.now().toString(36)}-${zaehler}`;
  const herzen = Array.from({ length: 5 }, (_, i) => {
    const diff = bewertung - i;
    if (diff >= 0.75) return "full";
    if (diff >= 0.25) return "half";
    return "empty";
  });
  const svgs = herzen
    .map((zustand) => {
      const fill = zustand === "empty" ? "none" : `url(#${gradId})`;
      const stroke = zustand === "empty" ? "var(--c-text-muted)" : `url(#${gradId})`;
      const opacity = zustand === "half" ? "0.5" : "1";
      return `<svg class="heart-icon heart-${zustand}" width="${size}" height="${size}" viewBox="0 0 24 24"><path d="${HERZ_PFAD}" fill="${fill}" fill-opacity="${opacity}" stroke="${stroke}" stroke-width="1.4" stroke-linejoin="round"></path></svg>`;
    })
    .join("");
  const valueHtml = opts.showValue ? `<span class="heart-value">${bewertung.toFixed(1)}</span>` : "";
  const countHtml = opts.anzahlLabel ? `<span class="heart-count small">${opts.anzahlLabel}</span>` : "";
  return `<span class="heart-rating" role="img" aria-label="${bewertung.toFixed(1)} von 5 Herzen${opts.anzahlLabel ? `, ${opts.anzahlLabel}` : ""}">
    <svg width="0" height="0" style="position:absolute;" aria-hidden="true"><defs><linearGradient id="${gradId}" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="var(--c-purple-glow)"></stop><stop offset="55%" stop-color="#8aa8e6"></stop><stop offset="100%" stop-color="var(--c-accent)"></stop></linearGradient></defs></svg>
    <span class="heart-icons">${svgs}</span>${valueHtml}${countHtml}
  </span>`;
}

/** Klickbare Herzen-Auswahl fürs Bewertungsformular (1-5, volle Herzen, kein Halb-Zustand). */
export function heartsPickerHtml(size = 28): string {
  const gradId = `hrc-picker-${Date.now().toString(36)}-${++zaehler}`;
  const svgs = Array.from({ length: 5 }, (_, i) => {
    const wert = i + 1;
    return `<button type="button" class="heart-pick" data-wert="${wert}" aria-label="${wert} von 5 Herzen"><svg width="${size}" height="${size}" viewBox="0 0 24 24"><path d="${HERZ_PFAD}" fill="none" stroke="var(--c-text-muted)" stroke-width="1.4" stroke-linejoin="round"></path></svg></button>`;
  }).join("");
  return `<span class="heart-picker" data-heart-picker data-grad="${gradId}">
    <svg width="0" height="0" style="position:absolute;" aria-hidden="true"><defs><linearGradient id="${gradId}" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="var(--c-purple-glow)"></stop><stop offset="55%" stop-color="#8aa8e6"></stop><stop offset="100%" stop-color="var(--c-accent)"></stop></linearGradient></defs></svg>
    ${svgs}
  </span>`;
}

/** Setzt Fill/Stroke der Picker-Herzen passend zum gewählten Wert (aufgerufen bei Hover+Klick). */
export function heartsPickerAktualisieren(picker: HTMLElement, wert: number) {
  const gradId = picker.dataset.grad;
  const buttons = Array.from(picker.querySelectorAll<HTMLButtonElement>(".heart-pick"));
  buttons.forEach((btn) => {
    const btnWert = Number(btn.dataset.wert);
    const path = btn.querySelector("path")!;
    const aktiv = btnWert <= wert;
    path.setAttribute("fill", aktiv ? `url(#${gradId})` : "none");
    path.setAttribute("stroke", aktiv ? `url(#${gradId})` : "var(--c-text-muted)");
  });
}
