<!DOCTYPE html><html lang="es">
<head>
<meta charset="UTF-8">
<title>WeatherScan NE Argentina & Asunción</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Chart.js --><script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script><style>
  html, body { margin:0; padding:0; height:100%; width:100%; font-family:Arial, sans-serif; background:#0f172a; color:#e6eef8; }
  #dashboard { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; width:100%; }
  .city-screen { display:none; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; padding:20px; box-sizing:border-box; }
  .city-screen.active { display:flex; }
  .city-name { font-size:36px; font-weight:bold; margin-bottom:10px; }
  .current-weather { font-size:24px; margin-bottom:10px; }
  .details { font-size:18px; margin-bottom:10px; }
  canvas { max-width:80%; }
  .footer { position:absolute; bottom:10px; font-size:14px; color:#9fb7dd; }
</style></head>
<body><div id="dashboard"></div>
<div class="footer">Datos: Open-Meteo • Actualización automática cada 5 minutos</div><script>
const CITIES = [
  { id:'resistencia', name:'Resistencia, Chaco (AR)', lat:-27.4517, lon:-58.9860 },
  { id:'corrientes',  name:'Corrientes (AR)',      lat:-27.4806, lon:-58.8345 },
  { id:'formosa',     name:'Formosa (AR)',         lat:-26.1845, lon:-58.1789 },
  { id:'posadas',     name:'Posadas (AR)',         lat:-27.3669, lon:-55.8960 },
  { id:'asuncion',    name:'Asunción (PY)',        lat:-25.2637, lon:-57.5759 }
];

const REFRESH_MS = 5*60*1000; // 5 minutos
let cityData = {};
let currentIndex = 0;
const dashboard = document.getElementById('dashboard');
let chartInstances = {};

// Crear pantallas para cada ciudad
CITIES.forEach(c=>{
  const screen = document.createElement('div');
  screen.className='city-screen';
  screen.id='screen-'+c.id;
  screen.innerHTML=`
    <div class="city-name" id="name-${c.id}">${c.name}</div>
    <div class="current-weather" id="temp-${c.id}">Cargando...</div>
    <div class="details" id="details-${c.id}"></div>
    <canvas id="chart-${c.id}" height="150"></canvas>
  `;
  dashboard.appendChild(screen);
});

// Función para traer datos
async function fetchCityWeather(city){
  const url = `https://api.open-meteo.com/v1/forecast?latitude=${city.lat}&longitude=${city.lon}&timezone=America/Argentina/Cordoba&current_weather=true&hourly=temperature_2m,precipitation_probability&forecast_days=2`;
  try{
    const res = await fetch(url);
    const data = await res.json();
    cityData[city.id] = data;
  }catch(e){
    console.warn('Error fetching data for', city.name, e);
  }
}

async function refreshAll(){
  await Promise.all(CITIES.map(fetchCityWeather));
  updateScreens();
}

// Actualizar pantalla con datos
function updateScreens(){
  CITIES.forEach(c=>{
    const data = cityData[c.id];
    if(!data) return;
    const cur = data.current_weather;
    document.getElementById('temp-'+c.id).innerText=`🌡️ ${cur.temperature}°C · 💨 ${cur.windspeed} km/h · Hum: N/A`;
    document.getElementById('details-'+c.id).innerText=`Hora: ${cur.time} · Código clima: ${cur.weathercode}`;

    const ctx = document.getElementById('chart-'+c.id).getContext('2d');
    const times = data.hourly.time.slice(0,24).map(t=>t.slice(11,16));
    const temps = data.hourly.temperature_2m.slice(0,24);

    if(chartInstances[c.id]) chartInstances[c.id].destroy();
    chartInstances[c.id] = new Chart(ctx, {
      type:'line',
      data:{ labels: times, datasets:[{label:'Temp (°C)', data: temps, borderColor:'#60a5fa', backgroundColor:'rgba(96,165,250,0.2)', fill:true, tension:0.3, pointRadius:0 }]},
      options:{ plugins:{legend:{display:false}}, scales:{y:{beginAtZero:false}}}
    });
  });
}

// Rotación de pantallas
function rotateScreens(){
  CITIES.forEach(c=>document.getElementById('screen-'+c.id).classList.remove('active'));
  const currentCity = CITIES[currentIndex];
  document.getElementById('screen-'+currentCity.id).classList.add('active');
  currentIndex = (currentIndex+1) % CITIES.length;
}

// Inicial
refreshAll();
rotateScreens();
setInterval(refreshAll, REFRESH_MS);
setInterval(rotateScreens, 15000); // cambiar pantalla cada 15s

</script></body>
</html>