/**
 * Info-Overlay — Erklärende Begriffs-Popups für Kinder (10–14 Jahre).
 *
 * Nutzung:
 *   import { INFO_TOPICS, openInfoOverlay } from '@ui/info-overlay'
 *   openInfoOverlay(INFO_TOPICS.co2)
 *
 * Zeigt ein einfaches, kinderverständliches Erklär-Panel über der Simulation.
 * Braucht im HTML nur einen leeren <div id="info-overlay-host"></div>.
 * Die passenden CSS-Klassen (.info-overlay, .info-card, .info-hint) werden
 * in der jeweiligen Seite definiert.
 */

export interface InfoTopic {
  title: string
  /** Lange Erklärung in einfachen Worten. Darf \n\n für Absätze enthalten. */
  text: string
  /** Optionaler "Merksatz" am Ende */
  hint?: string
}

/**
 * Kurzdefinition für Mouseover-Tooltips.
 * 1–2 Sätze, die eine Einheit oder ein Fachwort knapp erklären.
 */
export interface TipDef {
  title: string
  text: string
}

export const TIPS: Record<string, TipDef> = {
  ppm: {
    title: 'ppm',
    text: '„parts per million" – wie viele CO₂-Teilchen unter 1 Million Luft-Teilchen sind. 425 ppm = 425 CO₂-Teilchen unter einer Million. Früher waren es 280, ab 500 wird es gefährlich.',
  },
  celsius: {
    title: '°C',
    text: 'Grad Celsius. Die globale Durchschnitts­temperatur der Erde. Vorindustriell: 15 °C. Pariser Klimaziel: unter 17 °C halten.',
  },
  paris_goal: {
    title: 'Pariser Klimaziel',
    text: '2015 haben fast alle Länder der Welt in Paris versprochen, die Erderwärmung auf höchstens 2 °C über dem vorindustriellen Niveau zu begrenzen — besser sogar auf 1,5 °C. In unserer Simulation heißt das: Die globale Temperatur darf nicht über 17 °C steigen.',
  },
  cm: {
    title: 'cm Meeresspiegel',
    text: 'Zentimeter, um die das Meer seit Start angestiegen ist. 30 cm = Strand weg. 60 cm = erste Häuser betroffen.',
  },
  mio_euro: {
    title: 'Mio €',
    text: 'Millionen Euro. So viel Geld hat der ganze Inselstaat zur Verfügung. 1 Mio € = 1.000.000 €.',
  },
  population: {
    title: 'Bevölkerung',
    text: 'Wie viele Menschen auf der Insel leben. Mehr Leute = mehr Steuern, aber auch mehr zu schützen.',
  },
  budget: {
    title: 'Budget',
    text: 'Dein Geld. Steigt durch Steuern (Bevölkerung), sinkt durch Baukosten und Wartung. Unter 0 = Pleite.',
  },
  flooded: {
    title: 'Überflutete Gebiete',
    text: 'Wie viel Prozent deiner Stadt schon unter Wasser stehen. Ab 30% drohst du zu verlieren.',
  },
  upkeep: {
    title: 'Wartung',
    text: 'Jedes Jahr abgezogene Kosten, um eine Maßnahme (Solar, Wind, Deich …) am Laufen zu halten.',
  },
  power: {
    title: 'Strom (MW)',
    text: 'Megawatt – die Einheit für elektrische Leistung. Eine Insel mit 6.000 Einwohnern braucht etwa 6 MW. Die Anzeige „6/8 MW" heißt: 6 MW werden gebraucht, 8 MW sind da. Wenn der Bedarf größer wird als die Kapazität, hast du einen Stromausfall.',
  },
  blackout: {
    title: 'Stromausfall',
    text: 'Wenn deine Kraftwerke nicht genug Strom liefern, wird es kalt. Die Leute fällen Bäume und verheizen das Holz, um warm zu bleiben. Das setzt zusätzliches CO₂ frei — und tote Bäume können kein CO₂ mehr binden. Ein doppelter Schaden! Baue rechtzeitig genug Kraftwerke (Wind oder Solar — Kohle ist billiger, aber schlecht für das Klima).',
  },
}

let tipEl: HTMLDivElement | null = null
let tipInstalled = false

function ensureTipElement(): HTMLDivElement {
  if (tipEl) return tipEl
  tipEl = document.createElement('div')
  tipEl.className = 'info-tip'
  tipEl.style.cssText = `
    position: fixed; pointer-events: none; z-index: 95;
    max-width: 260px; padding: .55rem .75rem;
    background: #1a2b33; color: #f5f6f4;
    border-radius: 8px; font-size: .78rem; line-height: 1.45;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    opacity: 0; transition: opacity .12s ease-out;
    font-family: inherit;
  `
  document.body.appendChild(tipEl)
  return tipEl
}

function showTip(key: string, x: number, y: number): void {
  const tip = TIPS[key]
  if (!tip) return
  const el = ensureTipElement()
  el.innerHTML = `
    <div style="font-weight:800; color:#8ecbd8; margin-bottom:.15rem; font-size:.72rem; letter-spacing:.03em; text-transform:uppercase;">${escapeHtml(tip.title)}</div>
    <div>${escapeHtml(tip.text)}</div>
  `
  // Positionierung: rechts unterhalb des Cursors, außer wenn am Rand
  const pad = 12
  const rect = { w: 280, h: 80 } // grobe Schätzung
  let left = x + pad
  let top = y + pad
  if (left + rect.w > window.innerWidth)  left = x - rect.w - pad
  if (top + rect.h > window.innerHeight)  top = y - rect.h - pad
  el.style.left = `${Math.max(6, left)}px`
  el.style.top = `${Math.max(6, top)}px`
  el.style.opacity = '1'
}

function hideTip(): void {
  if (tipEl) tipEl.style.opacity = '0'
}

/**
 * Installiert einen globalen Delegated-Listener für `data-tip="key"`-Elemente.
 * Muss nur einmal pro Seite aufgerufen werden.
 */
export function installTooltips(): void {
  if (tipInstalled) return
  tipInstalled = true
  document.addEventListener('mouseover', (e) => {
    const target = (e.target as HTMLElement)?.closest('[data-tip]') as HTMLElement | null
    if (!target) return
    const key = target.getAttribute('data-tip')
    if (!key) return
    showTip(key, e.clientX, e.clientY)
  })
  document.addEventListener('mousemove', (e) => {
    if (!tipEl || tipEl.style.opacity === '0') return
    const target = (e.target as HTMLElement)?.closest('[data-tip]') as HTMLElement | null
    if (!target) { hideTip(); return }
    const key = target.getAttribute('data-tip')
    if (!key || !TIPS[key]) { hideTip(); return }
    // Tooltip mitbewegen
    const pad = 12
    let left = e.clientX + pad
    let top = e.clientY + pad
    if (left + 280 > window.innerWidth)  left = e.clientX - 290
    if (top + 80 > window.innerHeight)   top = e.clientY - 90
    tipEl.style.left = `${Math.max(6, left)}px`
    tipEl.style.top = `${Math.max(6, top)}px`
  })
  document.addEventListener('mouseout', (e) => {
    const target = (e.target as HTMLElement)?.closest('[data-tip]')
    if (!target) return
    hideTip()
  })
}

export const INFO_TOPICS: Record<string, InfoTopic> = {
  co2: {
    title: '🌫 CO₂ — das Treibhaus-Gas',
    text:
      'CO₂ (Kohlenstoffdioxid) ist ein unsichtbares Gas in der Luft. Du atmest es auch aus. Pflanzen brauchen es zum Wachsen.\n\n' +
      'Das Problem: Wenn Menschen Benzin, Kohle oder Gas verbrennen, entsteht sehr viel CO₂. Das bleibt über hunderte Jahre in der Luft und wirkt wie ein dickes Dach über der Erde — die Wärme der Sonne kommt rein, aber nur schwer wieder raus.\n\n' +
      'Vor 200 Jahren hatte unsere Luft etwa 280 ppm CO₂. Heute sind es über 420 ppm. Je mehr CO₂, desto wärmer wird es.',
    hint: 'ppm bedeutet: wieviele CO₂-Teilchen in einer Million Luft-Teilchen drinstecken.',
  },

  temperature: {
    title: '🌡 Globale Temperatur',
    text:
      'Die Erde hat eine Durchschnittstemperatur. Das ist die mittlere Temperatur von allen Orten und allen Jahreszeiten zusammen.\n\n' +
      'Vor der Industrialisierung (etwa 1850) lag sie bei rund 15°C. Heute ist sie schon um mehr als 1°C gestiegen.\n\n' +
      'Das klingt wenig — aber 2°C mehr würden bedeuten: Gletscher schmelzen, Meere steigen, Hitzewellen werden häufiger, viele Tiere verlieren ihr Zuhause.',
    hint: 'Im Pariser Klimaabkommen (2015) haben sich die Länder geeinigt, die Erwärmung auf unter 2°C zu halten — möglichst sogar unter 1,5°C.',
  },

  sealevel: {
    title: '🌊 Meeresspiegelanstieg',
    text:
      'Wenn es wärmer wird, passieren zwei Dinge mit den Meeren:\n\n' +
      '1) Das Wasser dehnt sich aus. Wie ein Metallstab, der im Feuer länger wird.\n' +
      '2) Die Gletscher und das Eis am Nord- und Südpol schmelzen. Das viele Schmelzwasser fließt ins Meer.\n\n' +
      'Beides zusammen lässt den Meeresspiegel langsam, aber unaufhaltsam steigen. Schon 50 cm mehr reichen, um Strände, Felder und ganze Küstenstädte unter Wasser zu setzen.\n\n' +
      'Inselstaaten wie Tuvalu oder die Malediven sind besonders gefährdet. Dort leben Menschen, die ihr Zuhause verlieren könnten.',
    hint: 'Wenn das gesamte Eis der Antarktis schmelzen würde, stiege das Meer um etwa 60 Meter.',
  },

  budget: {
    title: '💰 Budget',
    text:
      'Dein Budget ist das Geld, das der ganzen Insel zur Verfügung steht — angegeben in Millionen Euro (Mio €). Jedes Jahr bekommst du Steuern von der Bevölkerung. Je mehr Menschen auf der Insel leben, desto mehr kannst du einnehmen.\n\n' +
      'Aber: Alles was du gebaut hast, kostet auch jedes Jahr Wartung. Ein Windpark kostet z. B. 18 Mio € pro Jahr, damit er gewartet wird und funktioniert.\n\n' +
      'Wenn dein Budget unter 0 Mio € fällt, bist du pleite — dann hast du verloren.',
    hint: 'Überlege vor jedem Bau: Kann ich mir auch die Wartung in den nächsten Jahren leisten?',
  },

  glacier: {
    title: '🏔 Gletscher',
    text:
      'Gletscher sind riesige, uralte Eismassen. Sie entstehen in den Bergen, wo über Jahrtausende Schnee fällt und sich zu Eis verdichtet.\n\n' +
      'Gletscher sind wichtig: Im Sommer schmilzt etwas Eis und liefert Trinkwasser für Menschen, Tiere und Felder weiter unten im Tal.\n\n' +
      'Wenn es zu warm wird, schmelzen die Gletscher schneller als neuer Schnee nachkommt. Am Ende sind sie ganz verschwunden — und das Trinkwasser im Sommer fehlt.',
    hint: 'Der Vulkan auf unserer Insel hat einen Gletscher als Kappe. Wenn die Temperatur steigt, kannst du zusehen, wie er schrumpft.',
  },

  wedge: {
    title: '⛰ Warum ist die Insel schräg?',
    text:
      'Echte Inseln sind fast nie flach. Sie haben meistens eine höhere Seite (zum Beispiel mit einem Berg) und eine niedrigere, die sanft ins Meer abfällt.\n\n' +
      'Das Tiefland ist besonders in Gefahr, wenn der Meeresspiegel steigt. Genau das passiert auch auf unserer Insel: Die Vorderseite wird zuerst nass, weil sie fast auf Meereshöhe liegt.\n\n' +
      'Das ist kein Programmfehler — das soll zeigen, dass man mit Deichen zwar Häuser schützen kann, aber nicht die ganze Landschaft.',
  },

  deich: {
    title: '🌊 Deich',
    text:
      'Ein Deich ist ein aufgeschütteter Wall aus Erde, Sand und Gras, der das Meer von einer Stadt oder einem Feld fernhält.\n\n' +
      'In den Niederlanden werden Deiche seit über 1000 Jahren gebaut. Ohne sie wäre ein großer Teil des Landes Meer.\n\n' +
      'Ein Deich im Spiel schützt deine Häuser davor, dass sie vom steigenden Meer überflutet werden — aber er hilft nicht gegen die Klimaerwärmung selbst. Du musst trotzdem das CO₂ reduzieren.',
    hint: 'Deiche sind eine "Anpassung" — man bekämpft nicht die Ursache, sondern die Folge.',
  },

  solar: {
    title: '☀️ Solaranlage',
    text:
      'Eine Solaranlage macht aus Sonnenlicht Strom. Auf ihren dunkelblauen Panels sitzen viele kleine Zellen, die Licht in elektrischen Strom umwandeln.\n\n' +
      'Der große Vorteil: Es entsteht kein CO₂. Das ist der wichtigste Unterschied zu einem Kraftwerk, das Kohle oder Gas verbrennt.\n\n' +
      'Deshalb ersetzt jede Solaranlage ein Stück "schmutzigen" Strom. In der Simulation siehst du das so: Bei jedem Haus, das eine Solaranlage hat, verschwindet die Rauchwolke vom Schornstein.',
  },

  wind: {
    title: '💨 Windpark',
    text:
      'Ein Windpark sind mehrere große Windräder. Der Wind dreht die Flügel, und ein Generator im Turm macht daraus Strom.\n\n' +
      'Wind ist kostenlos und erzeugt keinen CO₂. Ein einziges großes Windrad kann den Strom für hunderte Haushalte liefern.\n\n' +
      'In der Simulation ist ein Windpark teurer als eine Solaranlage, reduziert aber deutlich mehr CO₂. Er ist die stärkste Einzel-Maßnahme.',
  },

  forest: {
    title: '🌲 Wald aufforsten',
    text:
      'Bäume holen CO₂ aus der Luft und speichern es in ihrem Holz. Ein ausgewachsener Baum bindet pro Jahr etwa 10 kg CO₂.\n\n' +
      'Wenn du einen Wald pflanzt, hilfst du also direkt gegen den Klimawandel. Der Effekt ist aber klein — du brauchst sehr viele Bäume, um wirklich etwas zu bewirken.\n\n' +
      'Wälder sind günstig, aber allein reichen sie nicht aus. Am besten kombinierst du sie mit Solaranlagen oder Windrädern.',
  },

  vegetation: {
    title: '🌿 Warum sterben Pflanzen bei Meeresanstieg?',
    text:
      'Die meisten Pflanzen können kein salziges Wasser vertragen. Wenn das Meer steigt, sickert Salzwasser durch den Boden — auch dort, wo du es gar nicht siehst.\n\n' +
      'Das Salz zerstört die feinen Wurzeln. Die Pflanzen können kein Wasser mehr aufnehmen und vertrocknen, obwohl der Boden nass ist. Ganze Wälder und Felder werden so kaputt.\n\n' +
      'In Kenia, an der Küste, sind in den letzten Jahren schon viele Mangroven und Bauernfelder durch Salzwasser gestorben. Das ist nicht Theorie — das passiert gerade.',
    hint: 'Fachbegriff: Versalzung. Erst gehen die Pflanzen kaputt, dann die Böden.',
  },

  drinking_water: {
    title: '💧 Trinkwasser in Gefahr',
    text:
      'Auf Inseln gibt es meistens keine Flüsse oder Seen. Die Menschen bekommen ihr Trinkwasser aus Brunnen — also aus Süßwasser, das unter der Erde liegt.\n\n' +
      'Wenn das Meer steigt, drückt das salzige Meerwasser unter der Insel durch und vermischt sich mit dem Süßwasser. Der Brunnen gibt dann salziges Wasser — und das kann man nicht trinken.\n\n' +
      'Viele Inseln haben deshalb heute schon Probleme, obwohl die Häuser noch gar nicht unter Wasser stehen.',
  },
}

/**
 * Öffnet das Info-Overlay. Braucht einen <div id="info-overlay-host"></div>
 * im Seiten-HTML.
 */
export function openInfoOverlay(topic: InfoTopic | null | undefined): void {
  const host = document.getElementById('info-overlay-host')
  if (!host) return
  // Defensive: niemals ein leeres Modal zeigen, wenn topic fehlt oder kein Inhalt da ist.
  if (!topic || !topic.title || !topic.text) {
    host.innerHTML = ''
    return
  }
  const paragraphs = topic.text.split('\n\n').map(p => `<p>${escapeHtml(p)}</p>`).join('')
  const hintHtml = topic.hint
    ? `<div class="info-hint">💡 ${escapeHtml(topic.hint)}</div>`
    : ''
  host.innerHTML = `
    <div class="info-overlay" id="info-overlay-bg">
      <div class="info-card">
        <h3>${escapeHtml(topic.title)}</h3>
        ${paragraphs}
        ${hintHtml}
        <button class="tut-btn" id="info-close">Verstanden ✓</button>
      </div>
    </div>
  `
  const close = () => { host.innerHTML = '' }
  document.getElementById('info-close')?.addEventListener('click', close)
  document.getElementById('info-overlay-bg')?.addEventListener('click', (e) => {
    if ((e.target as HTMLElement).id === 'info-overlay-bg') close()
  })
}

function escapeHtml(s: string): string {
  return s
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
}
