{% extends "base.html" %}

{% block title %}7 Magníficos - BackTestingMarket{% endblock %}

{% block head %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles-magnificent.css') }}">
<!-- Plotly CDN -->
{% endblock %}

{% block content %}
<script src="https://cdn.plot.ly/plotly-2.32.0.min.js"></script>

<section class="container my-5" id="magnificent-seven">
  <h2 class="text-center mb-2">{{ _('🧠 Los 7 Magníficos del Mercado') }}</h2>
  <p class="text-center mb-4">
    <strong>Market Score:</strong>
    <span
        class="{% if market_score > 0 %}text-success{% elif market_score < 0 %}text-danger{% else %}text-secondary{% endif %}"
        style="font-weight: bold;">
      {{ market_score }}%
    </span>
  </p>

  <!-- 📊 GRÁFICOS PLOTLY en Grid 2x2 -->
  <div class="row g-4 mb-5">
    <div class="col-md-6">
      <div class="card shadow-sm p-3">
        <h5>% Change Normalizado</h5>
        <div id="chartPct"></div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card shadow-sm p-3">
        <h5>RSI Score</h5>
        <div id="chartRSI"></div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card shadow-sm p-3">
        <h5>ATR Score</h5>
        <div id="chartATR"></div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card shadow-sm p-3">
        <h5>Volumen Relativo Score</h5>
        <div id="chartVol"></div>
      </div>
    </div>
  </div>

  <!-- Tarjetas de compañías -->
  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
    {% for company in companies %}
    <div class="col">
      <div class="card shadow-sm h-100 border rounded-4 p-2
        {% if company.change_pct > 0 %}
          bg-success-subtle
        {% elif company.change_pct < 0 %}
          bg-danger-subtle
        {% else %}
          bg-body
        {% endif %}
        text-always-black" data-aos="fade-up">
        <div class="card-body d-flex flex-column justify-content-between">
          <div class="d-flex align-items-center mb-2">
            <img src="{{ company.logo }}" alt="{{ company.name }}" class="me-3" style="width: 40px;">
            <div>
              <h5 class="card-title mb-0">{{ company.name }} <small>({{ company.ticker }})</small></h5>
              <small>{{ company.sector }}</small>
            </div>
          </div>
          <div class="mb-3">
            <p class="mb-1">📈 {{ _('Precio') }}: <strong>${{ company.price }}</strong> <span>({{ company.change_pct
                }}%)</span></p>
            <p class="mb-1">💰 P/E: <strong>{{ company.pe_ratio }}</strong> | EPS: <strong>{{ company.eps }}</strong>
            </p>
            <p class="mb-1">📊 RSI: <strong>{{ company.rsi }}</strong> ({{ company.trend_label }})</p>
            <p class="mb-1">🏛️ Cap Bursátil: <strong>{{ company.market_cap }}</strong></p>
          </div>
          <a href="#" class="btn btn-outline-primary w-100" data-bs-toggle="modal" data-bs-target="#chartModal"
              data-ticker="{{ company.ticker }}">Ver Detalle</a>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</section>

<!-- Modal TradingView -->
<div class="modal fade" id="chartModal" tabindex="-1" aria-labelledby="chartModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered" style="max-width: 1200px; width: 100%;">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="chartModalLabel">Gráfico Avanzado</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
      </div>
      <div class="modal-body p-0" style="height: 650px;">
        <div id="tv-container" class="p-2" style="height: 100%; width: 100%; border-radius: 8px; overflow: hidden;">
          <!-- TradingView dinámico -->
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ⚡️ JS Plotly + TradingView -->
<script>
  // ⚡️ Pasa datos Jinja → JS Arrays SEGURO
  const labels = JSON.parse('{{ companies | map(attribute="ticker") | list | tojson | safe }}');
  const pctData = JSON.parse('{{ companies | map(attribute="pct_score") | list | tojson | safe }}');
  const rsiData = JSON.parse('{{ companies | map(attribute="rsi_score") | list | tojson | safe }}');
  const atrData = JSON.parse('{{ companies | map(attribute="atr_score") | list | tojson | safe }}');
  const volData = JSON.parse('{{ companies | map(attribute="vol_score") | list | tojson | safe }}');

  // ✅ Plotly % Change
  Plotly.newPlot('chartPct', [{
    x: labels,
    y: pctData,
    type: 'bar'
  }], { title: '% Change Normalizado' });

  // ✅ Plotly RSI
  Plotly.newPlot('chartRSI', [{
    x: labels,
    y: rsiData,
    type: 'bar'
  }], { title: 'RSI Score' });

  // ✅ Plotly ATR
  Plotly.newPlot('chartATR', [{
    x: labels,
    y: atrData,
    type: 'bar'
  }], { title: 'ATR Score' });

  // ✅ Plotly Vol Rel
  Plotly.newPlot('chartVol', [{
    x: labels,
    y: volData,
    type: 'bar'
  }], { title: 'Volumen Relativo Score' });

  // ✅ TradingView Modal
  document.addEventListener('DOMContentLoaded', function () {
    const chartModal = document.getElementById('chartModal');
    chartModal.addEventListener('show.bs.modal', function (event) {
      const ticker = event.relatedTarget?.getAttribute('data-ticker') || 'AAPL';
      const container = document.getElementById('tv-container');
      container.innerHTML = '';
      const script = document.createElement('script');
      script.src = "https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js";
      script.async = true;
      script.innerHTML = JSON.stringify({
        "autosize": true,
        "symbol": ticker,
        "interval": "D",
        "timezone": "Etc/UTC",
        "theme": document.body.classList.contains("dark-mode") ? "dark" : "light",
        "style": "1",
        "locale": "en",
        "toolbar_bg": "#f1f3f6",
        "enable_publishing": false,
        "hide_side_toolbar": false,
        "allow_symbol_change": true,
        "save_image": true
      });
      container.appendChild(script);
    });
  });
</script>
{% endblock %}