<?php
require_once __DIR__ . '/engine/engine.php';
$requires_search = true;
$requires_chartjs = true;
require_once __DIR__ . '/views/header.php';
require_once __DIR__ . '/views/navigation.php';
?>

<main class="flex-grow-1">
  <section>
    <div class="container my-5">
      <div class="row">
        <div class="col-12">
          <h2 class="text-center">Risikokurve</h2>
          <canvas id="riskCurveChart" height="800" style="max-height: 800px;"></canvas>
        </div>
      </div>
    </div>
  </section>
  
  <section class="bg-light my-5 py-5">
    <div class="container">
      <div class="row">
        <h3 class="text-center">Branchen & Anlageklassen</h3>
        <p class="mb-4 text-center fst-italic">There is a time for everything</p>
        <div class="col-md-6">
          <h5>Anlageklassen</h5>
          <table class="table table-bordered text-center align-middle">
            <thead class="table-light">
              <tr>
                <th>Anlage</th>
                <th>Erholung</th>
                <th>Ruhephase</th>
                <th>Spekulation</th>
                <th>Turbulenzen</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Beta / Risk On</td>
                <td class="bg-warning"></td>
                <td class="bg-success"></td>
                <td class="bg-warning"></td>
                <td class="bg-danger"></td>
              </tr>
              <tr>
                <td>Aktien</td>
                <td class="bg-success"></td>
                <td class="bg-success"></td>
                <td class="bg-warning"></td>
                <td class="bg-danger"></td>
              </tr>
              <tr>
                <td>Kredite</td>
                <td class="bg-success"></td>
                <td class="bg-warning"></td>
                <td class="bg-danger"></td>
                <td class="bg-warning"></td>
              </tr>
              <tr>
                <td>Rohstoffe</td>
                <td class="bg-danger"></td>
                <td class="bg-success"></td>
                <td class="bg-success"></td>
                <td class="bg-danger"></td>
              </tr>
              <tr>
                <td>Anleihe-Laufzeit</td>
                <td class="bg-danger"></td>
                <td class="bg-danger"></td>
                <td class="bg-warning"></td>
                <td class="bg-success"></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="col-md-6">
          <h5>Branchen</h5>
          <table class="table table-bordered text-center align-middle">
            <thead class="table-light">
              <tr>
                <th>Branche</th>
                <th>Erholung</th>
                <th>Ruhephase</th>
                <th>Spekulation</th>
                <th>Turbulenzen</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Zykliker</td>
                <td class="bg-success"></td>
                <td class="bg-success"></td>
                <td class="bg-danger"></td>
                <td class="bg-danger"></td>
              </tr>
              <tr>
                <td>Technologie</td>
                <td class="bg-success"></td>
                <td class="bg-success"></td>
                <td class="bg-danger"></td>
                <td class="bg-danger"></td>
              </tr>
              <tr>
                <td>Finanzen</td>
                <td class="bg-warning"></td>
                <td class="bg-success"></td>
                <td class="bg-warning"></td>
                <td class="bg-danger"></td>
              </tr>
              <tr>
                <td>Energie</td>
                <td class="bg-danger"></td>
                <td class="bg-success"></td>
                <td class="bg-success"></td>
                <td class="bg-danger"></td>
              </tr>
              <tr>
                <td>Defensive Werte</td>
                <td class="bg-danger"></td>
                <td class="bg-danger"></td>
                <td class="bg-success"></td>
                <td class="bg-success"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </section>
  
  <section>
    <div class="container my-5">
      <div class="row">
        <h3 class="text-center mb-4">Zyklus</h3>
        <div class="col-12" style="height:400px;">
          <canvas id="macroChart" height="400" class="w-100"></canvas>
        </div>
        <div class="col-12">
          <table class="table table-bordered table-sm mt-5 text-center align-middle">
            <thead class="table-light">
              <tr>
                <th></th>
                <th>Steigende Inflation</th>
                <th>Fallende Inflation</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th class="text-start">Beschleunigtes Wachstum</th>
                <td>Schwellenländer-Aktien; Internationales Immobilien; Rohstoffe; Gold; EM-Anleihen-Spreads; Inflationsgeschützte Anleihen</td>
                <td>Aktien (entwickelte Länder); Immobilien (entwickelte Länder); Unternehmensanleihen-Spreads (Entw.); Staatsanleihen mittlere Laufzeit</td>
              </tr>
              <tr>
                <th class="text-start">Abschwächendes Wachstum</th>
                <td>Rohstoffe; Gold; EM-Anleihen-Spreads; Inflationsgeschützte Anleihen</td>
                <td>Langlaufende Staatsanleihen; Gold</td>
              </tr>
              <tr>
                <th class="text-start">Zentrum</th>
                <td colspan="2">Kasse (niedrige Volatilität)</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </section>
  
  <script>
    const ctx = document.getElementById('riskCurveChart').getContext('2d');
  
    // === Risikokurve (glatte Parabel) generieren ===
    const curveData = [];
    const a = 10;
    const yMin = 0.5;
    for (let x = 0; x <= 2.0; x += 0.05) {
      const y = a * Math.pow(x - 1, 2) + yMin;
      curveData.push({ x: parseFloat(x.toFixed(2)), y: parseFloat(y.toFixed(2)) });
    }
  
    const data = {
      datasets: [
        {
          label: 'Assets',
          type: 'scatter',
          data: [
            { x: 0.10, y: 9.5, label: 'Altcoins' },
            { x: 0.15, y: 8.5, label: 'Bitcoin-Miners' },
            { x: 0.20, y: 7.1, label: 'Zykl. Rohstoffe' },
            { x: 0.30, y: 5.8, label: 'Rohstoffe' },
            { x: 0.35, y: 4.8, label: 'Rohstofftitel' },
            { x: 0.40, y: 3.9, label: 'Edelmetalle' },
            { x: 0.50, y: 2.9, label: 'Defensive Sektoren' },
            { x: 0.80, y: 1.4, label: 'Geldmarktfonds' },
            { x: 1.00, y: 0.5, label: 'Cash' },
            { x: 1.05, y: 1.0, label: 'Staatsanleihen' },
            { x: 1.20, y: 1.3, label: 'Gold' },
            { x: 1.50, y: 2.4, label: 'Aktien-ETFs (S&P 500)' },
            { x: 1.60, y: 4.2, label: 'Sektor-ETFs (Halbleiter)' },
            { x: 1.80, y: 6.1, label: 'Big-Tech, Mega-Cap' },
            { x: 1.90, y: 7.1, label: 'Mid- & Small Caps' },
            { x: 2.00, y: 9.0, label: 'Bitcoin' }
          ],
          backgroundColor: 'black',
          pointRadius: 5,
          datalabels: {
            align: 'left',
            anchor: 'end',
            color: 'black',
            font: {
              size: 14,
              weight: 'bold'
            },
            formatter: function(value) {
              return value.label;
            }
          },
          clip: false
        },
        {
          label: '',
          type: 'line',
          data: curveData,
          borderColor: 'red',
          borderWidth: 2,
          fill: false,
          tension: 0,
          pointRadius: 0,
          datalabels: {
            display: false
          },
          clip: { top: false, bottom: false, left: false, right: false }
        }
      ]
    };
  
    const config = {
      type: 'scatter',
      data: data,
      options: {
        responsive: true,
        plugins: {
          datalabels: {
            display: true
          },
          tooltip: {
            backgroundColor: '#000',
            titleColor: '#fff',
            bodyColor: '#fff',
            borderWidth: 1,
            callbacks: {
              title: () => '',
              label: function(context) {
                return context.raw.label || '';
              }
            }
          },
          legend: {
            display: true,
            position: 'top'
          },
          annotation: {
            annotations: {
              summer1: {
                type: 'box',
                xMin: 0,
                xMax: 0.25,
                backgroundColor: 'rgba(255, 255, 0, 0.15)',
                label: { content: 'SOMMER', enabled: true, position: 'end' }
              },
              autumn: {
                type: 'box',
                xMin: 0.25,
                xMax: 0.50,
                backgroundColor: 'rgba(255, 165, 0, 0.15)',
                label: { content: 'HERBST', enabled: true, position: 'end' }
              },
              winter: {
                type: 'box',
                xMin: 0.50,
                xMax: 1.0,
                backgroundColor: 'rgba(173, 216, 230, 0.15)',
                label: { content: 'WINTER', enabled: true, position: 'end' }
              },
              spring: {
                type: 'box',
                xMin: 1.0,
                xMax: 1.8,
                backgroundColor: 'rgba(144, 238, 144, 0.15)',
                label: { content: 'FRÜHLING', enabled: true, position: 'end' }
              },
              summer2: {
                type: 'box',
                xMin: 1.8,
                xMax: 2.0,
                backgroundColor: 'rgba(255, 255, 0, 0.15)',
                label: { content: 'SOMMER', enabled: true, position: 'end' }
              }
            }
          }
        },
        scales: {
          x: {
            type: 'linear',
            min: 0,
            max: 2.0,
            title: {
              display: true,
              text: 'Makroökonomische Lage',
              color: 'black',
              font: {
                size: 14,
                weight: 'bold'
              }
            }
          },
          y: {
            min: 0,
            max: 10,
            title: {
              display: true,
              text: 'Rendite/Risiko-Verhältnis',
              color: 'black',
              font: {
                size: 14,
                weight: 'bold'
              }
            }
          }
        }
      },
      plugins: [ChartDataLabels]
    };
  
    new Chart(ctx, config);
  </script>
  
  <script>
  // Datenpunkte: x = Wachstum (−1 langsam, +1 schnell), y = Inflation (−1 fallend, +1 steigend)
  const points = [
    // Q1: +Wachstum / +Inflation
    {label:'Schwellenländer-Aktien', x:0.80, y:0.85, r:14, c:'#1b9e77'},
    {label:'Internationales Immobilien', x:0.70, y:0.55, r:12, c:'#66a61e'},
    {label:'Gold', x:0.60, y:0.40, r:12, c:'#b8860b'},
    {label:'Rohstoffe', x:0.58, y:0.38, r:12, c:'#d95f02'},
    {label:'EM-Anleihen-Spreads', x:0.45, y:0.20, r:12, c:'#7570b3'},
    {label:'Inflationsgeschützte Anleihen', x:0.30, y:0.05, r:12, c:'#e7298a'},
  
    // Q4: +Wachstum / −Inflation
    {label:'Unternehmensanleihen-Spreads (Entw.)', x:0.55, y:-0.30, r:12, c:'#1f78b4'},
    {label:'Staatsanleihen mittlere Laufzeit',      x:0.45, y:-0.45, r:12, c:'#6a3d9a'},
    {label:'Immobilien (entwickelte Länder)',       x:0.70, y:-0.70, r:12, c:'#33a02c'},
    {label:'Aktien (entwickelte Länder)',           x:0.78, y:-0.80, r:14, c:'#e31a1c'},
  
    // Q3: −Wachstum / −Inflation
    {label:'Langlaufende Staatsanleihen', x:-0.55, y:-0.65, r:12, c:'#a6cee3'},
    {label:'Gold',                         x:-0.35, y:-0.55, r:12, c:'#b8860b'},
  
    // Q2: −Wachstum / +Inflation
    {label:'Gold',                         x:-0.35, y:0.65,  r:12, c:'#b8860b'},
    {label:'Rohstoffe',                    x:-0.28, y:0.58,  r:12, c:'#d95f02'},
    {label:'EM-Anleihen-Spreads',          x:-0.10, y:0.25,  r:12, c:'#7570b3'},
    {label:'Inflationsgeschützte Anleihen',x:-0.05, y:0.05,  r:12, c:'#e7298a'},
  
    // Zentrum
    {label:'Kasse', x: 0.00, y: 0.00, r:13, c:'#7f7f7f'},
    {label:'Kasse', x:-0.05, y: 0.02, r:10, c:'#7f7f7f'}
  ];
  
  const datasets = points.map(p => ({
    label: p.label,
    data: [{x:p.x, y:p.y, r:p.r}],
    backgroundColor: p.c,
    borderColor: 'rgba(0,0,0,.25)',
    borderWidth: 1,
  }));
  
  const canvasEl = document.getElementById('macroChart');
  const macroChart = new Chart(canvasEl, {
    type: 'bubble',
    data: { datasets },
    options: {
      responsive: true,
      plugins: {
        legend: { display: false },
        tooltip: { callbacks: { label: ctx => ctx.dataset.label } },
        annotation: {
          annotations: {
            x0: { type:'line', xMin:0, xMax:0, borderColor:'rgba(0,0,0,.6)', borderWidth:2, label:{display:true, content:'Inflation 0', position:'start'} },
            y0: { type:'line', yMin:0, yMax:0, borderColor:'rgba(0,0,0,.6)', borderWidth:2, label:{display:true, content:'Wachstum 0', position:'start', rotation:90} }
          }
        }
      },
      scales: {
        x: {
          min: -1, max: 1, grid: { display:false },
          title: { display:true, text:'Wachstum  (← langsamer | schneller →)', color:'#000', font:{size:16, weight:'bold'} }
        },
        y: {
          min: -1, max: 1, grid: { display:false },
          title: { display:true, text:'Inflation  (↓ fallend | steigend ↑)', color:'#000', font:{size:16, weight:'bold'} }
        }
      }
    }
  });
  
  // Falls nötig: Chart.js Annotation Plugin registrieren (wenn noch nicht global geschehen)
  // if (window['chartjs-plugin-annotation']) { Chart.register(window['chartjs-plugin-annotation']); macroChart.update(); }
  </script>
  
</main>
<?php require_once __DIR__ . '/views/footer.php'; ?>