import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:html/parser.dart' as htmlParser;
import 'package:flutter_project/bars/app_bar';
import 'package:flutter_project/bars/bottom_bar';

class EmbalsesPage extends StatefulWidget {
  const EmbalsesPage({Key? key}) : super(key: key);

  @override
  _EmbalsesPageState createState() => _EmbalsesPageState();
}

class _EmbalsesPageState extends State<EmbalsesPage> {
List<Map<String, dynamic>> embalsesData = [];
  List<String> descripciones = ['Cota (m)', 'Volumen (Hm3)', 'Entrada (l/s)', 'Salida (l/s)'];

  @override
  void initState() {
    super.initState();
    obtenerDatos();
  }

  Future<void> obtenerDatos() async {
    final response = await http.get(Uri.parse('http://www.crcivan.com/escaparate/noticias.cgi?idnoticias=192683'));
    if (response.statusCode == 200) {
      final document = htmlParser.parse(response.body);

      // Buscar los elementos <span> dentro de la estructura específica
      final elementosSpan = document.querySelectorAll('html > body > div > center > table > tbody > tr > td > div > center > table > tbody > tr > td > table > tbody > tr > td > font > font > table > tbody > tr > td > span');
      final nombreEmbalses = document.querySelectorAll('html > body > div > center > table > tbody > tr > td > div > center > table > tbody > tr > td > table > tbody > tr > td > font > font > table > tbody > tr > td > p > span');
      
      final filaTabla = document.querySelectorAll('html > body > div > center > table > tbody > tr > td > div > center > table > tbody > tr > td > table > tbody > tr > td > font > font > table > tbody > tr');
      // Limpiar la lista de datos antes de actualizarla
      setState(() {
        embalsesData.clear();
      });   

     /* for (var i = 0; i < filaTabla.length; i++){
        var nombre[i] = filaTabla.child('td > p > span');
        List elemento[i] = filaTabla.child('td > span');
        embalseData.add(nombre, elemento);
      }*/

      // Agregar textos de los elementos <span> a la lista
  /*  for (var i = 0; i < elementosSpan.length; i++) {
        final elemento = elementosSpan[i];
        final style = elemento.attributes['style'];
        if (style != null && style.contains('font-size: 12pt;')) {
          setState(() {
            // Verificar si el índice es válido antes de agregar los datos a embalsesData
            if (i < nombreEmbalses.length) {
              embalsesData.add({
                'nombre': nombreEmbalses[i].text,
                'otroTexto': elemento.text,
              });
            }
          });
        }
      } */

  for (var fila in filaTabla) {
  var nombreElemento = fila.querySelector('td > p > span');
  var elementos = fila.querySelectorAll('td > span');

  if (nombreElemento != null && elementos.isNotEmpty) {
    var nombre = nombreElemento.text;
    var listaElementos = elementos.map<String>((elemento) => elemento.text).toList();

    // Crear un mapa con el nombre del embalse y sus elementos
    var embalseMap = {'nombre': nombre, 'elementos': listaElementos};

    // Agregar el mapa a la lista de embalsesData
    setState(() {
      embalsesData.add(embalseMap);
    });
  }
}


    } else {
      throw Exception('Error al cargar los datos de embalses');
    }

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const CustomAppBar(),
      body: Stack(
        children: [
          // Fondo con la imagen
          Positioned.fill(
            child: Image(
              image: AssetImage('assets/logo-fondo.png'),
              fit: BoxFit.cover,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: ListView.builder(
              itemCount: embalsesData.length,
              itemBuilder: (context, index) {
                final embalseData = embalsesData[index];
                final nombreEmbalse = embalseData['nombre'];
                final listaElementos = embalseData['elementos'];

                return Padding(
                  padding: const EdgeInsets.only(bottom: 8.0),
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10.0),
                    ),
                    child: Column(
                      children: [
                        Row(
                          children: [
                            Expanded(
                              child: Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Text(
                                  nombreEmbalse!,
                                  style: TextStyle(
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                        Row(
                          children: [
                            Expanded(
                              child: Padding(
                                padding: const EdgeInsets.symmetric(horizontal: 8.0),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: List.generate(
                                    listaElementos.length,
                                    (index) => Text(
                                      '${descripciones[index]}: ${listaElementos[index]}',
                                      style: TextStyle(
                                        fontWeight: FontWeight.normal,
                                      ),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
      bottomNavigationBar: const CustomBottomBar(),
    );
  }
}