import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:turquessa_mesas_hoster/core/models/producto_model.dart';
import 'package:turquessa_mesas_hoster/mvvm/viewmodels/pedido_view_model.dart';
import 'package:turquessa_mesas_hoster/mvvm/viewmodels/producto_view_model.dart';
import 'package:turquessa_mesas_hoster/utils/widgets/custom_appbar.dart';
import 'package:turquessa_mesas_hoster/mvvm/views/home/categorias_navbar.dart';
import 'package:turquessa_mesas_hoster/mvvm/viewmodels/home_view_model.dart';
import 'package:turquessa_mesas_hoster/utils/widgets/modal_infonegaocio.dart';
import 'package:turquessa_mesas_hoster/mvvm/views/home/producto/producto_screen.dart';

const List<Map<String, dynamic>> items = [
  {
    'nombre': 'Hamburguesa de res',
    'descripcion': 'Hamburguesa de res con queso cheddar',
    'precio': '\$ 120.00',
    'imageUrl':
        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
  },
  {
    'nombre': 'Hamburguesa de pollo',
    'descripcion': 'Hamburguesa de pollo con queso cheddar',
    'precio': '\$ 100.00',
    'imageUrl':
        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
  },
  {
    'nombre': 'Hamburguesa de res',
    'descripcion': 'Hamburguesa de res con queso cheddar',
    'precio': '\$ 120.00',
    'imageUrl':
        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
  },
  {
    'nombre': 'Hamburguesa de pollo',
    'descripcion': 'Hamburguesa de pollo con queso cheddar',
    'precio': '\$ 100.00',
    'imageUrl':
        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
  },
  {
    'nombre': 'Hamburguesa de pollo',
    'descripcion': 'Hamburguesa de pollo con queso cheddar',
    'precio': '\$ 100.00',
    'imageUrl':
        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
  },
  {
    'nombre': 'Hamburguesa de pollo',
    'descripcion': 'Hamburguesa de pollo con queso cheddar',
    'precio': '\$ 100.00',
    'imageUrl':
        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
  },
  {
    'nombre': 'Hamburguesa de pollo',
    'descripcion': 'Hamburguesa de pollo con queso cheddar',
    'precio': '\$ 100.00',
    'imageUrl':
        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
  },
  {
    'nombre': 'Hamburguesa de pollo',
    'descripcion': 'Hamburguesa de pollo con queso cheddar',
    'precio': '\$ 100.00',
    'imageUrl':
        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
  },
  {
    'nombre': 'Hamburguesa de pollo',
    'descripcion': 'Hamburguesa de pollo con queso cheddar',
    'precio': '\$ 100.00',
    'imageUrl':
        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
  },
  {
    'nombre': 'Hamburguesa de pollo',
    'descripcion': 'Hamburguesa de pollo con queso cheddar',
    'precio': '\$ 100.00',
    'imageUrl':
        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
  },
  {
    'nombre': 'Hamburguesa de pollo',
    'descripcion': 'Hamburguesa de pollo con queso cheddar',
    'precio': '\$ 100.00',
    'imageUrl':
        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
  },
  {
    'nombre': 'Hamburguesa de pollo',
    'descripcion': 'Hamburguesa de pollo con queso cheddar',
    'precio': '\$ 100.00',
    'imageUrl':
        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
  },
];

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  void initState() {
    super.initState();
    final homeViewModel = Provider.of<HomeViewModel>(context, listen: false);
    final productoViewModel =
        Provider.of<ProductoViewModel>(context, listen: false);
    WidgetsBinding.instance.addPostFrameCallback((_) {
      Provider.of<ProductoViewModel>(context, listen: false)
          .sincronizarProductosYCategorias();
      homeViewModel.fetchLocalCategorias();
      productoViewModel.sincronizarProductos();
      productoViewModel.sincronizarCategorias();
      productoViewModel.fetchLocalAll();
    });
  }

  @override
  Widget build(BuildContext context) {
    final homeViewModel = Provider.of<HomeViewModel>(context);
    final pedidoViewModel = Provider.of<ProductoViewModel>(context);
    return Scaffold(
        bottomNavigationBar: BottomAppBar(
            color: Colors.black,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                IconButton(
                  icon: const Icon(Icons.search, color: Colors.white),
                  onPressed: () {},
                ),
                IconButton(
                  icon: const Icon(Icons.menu, color: Colors.white),
                  onPressed: () {
                    Navigator.of(context).pushNamed('carrito');
                  },
                ),
                const Text(
                  'Producto',
                  style: TextStyle(
                    color: Colors.cyanAccent,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                IconButton(
                  icon: const Icon(Icons.favorite_border, color: Colors.white),
                  onPressed: () {
                    Navigator.of(context).pushNamed('perfil');
                  },
                ),
              ],
            )),
        backgroundColor: Colors.white,
        body: CustomScrollView(
          slivers: [
            SliverAppBar(
              floating: true,
              expandedHeight: 200, // Ajusta la altura para acomodar la imagen
              flexibleSpace: FlexibleSpaceBar(
                background: Image.asset(
                  'assets/turquessa_prop.jpg',
                  fit: BoxFit.cover,
                ),
              ),
              bottom: PreferredSize(
                preferredSize:
                    Size.fromHeight(120), // Altura del contenido adicional
                child: Container(
                  color: Color.fromARGB(255, 47, 208, 229),
                  padding:
                      const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                  child: Row(
                    children: [
                      Container(
                        width: 80,
                        height: 80,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(12),
                        ),
                        child: Center(
                          child: Image.asset('assets/props.png'),
                        ),
                      ),
                      const SizedBox(width: 20),
                      const Text(
                        'Turquessa-Coffee',
                        style: TextStyle(
                          color: Colors.black,
                          fontSize: 26,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      const SizedBox(width: 15),
                      GestureDetector(
                        onTap: () {
                          mostrarInformacionNegocioBottomSheet(context);
                        },
                        child: Container(
                          padding: const EdgeInsets.all(8),
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            border: Border.all(color: Colors.white, width: 2),
                          ),
                          child: const Icon(Icons.info,
                              color: Colors.white, size: 20),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            SliverPersistentHeader(
              delegate: CategoriasSliverChild(),
              pinned: true,
            ),
            const SliverToBoxAdapter(
              child: Center(
                child: Text('Coffee',
                    style: TextStyle(
                      fontSize: 40,
                      fontWeight: FontWeight.bold,
                      fontStyle: FontStyle.italic,
                    )),
              ),
            ),
            SliverList(
                delegate: SliverChildBuilderDelegate(
              (context, index) {
                return _buildBurgerItem(
                  items[index]['nombre'],
                  items[index]['descripcion'],
                  items[index]['precio'],
                  items[index]['imageUrl'],
                  context,
                );
              },
              childCount: items.length,
            ))
          ],
        ));
  }
}

class CategoriasSliverChild extends SliverPersistentHeaderDelegate {
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return SingleChildScrollView(
        scrollDirection: Axis.horizontal, child: CategoriasNavBar());
  }

  @override
  double get maxExtent => 120.0;

  @override
  double get minExtent => 120.0;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return false;
  }
}

Widget _buildBurgerItem(String nombre, String descripcion, String precio,
    String imageUrl, BuildContext context) {
  return GestureDetector(
    onTap: () {
      Navigator.of(context).pushNamed('producto');
    },
    child: Column(
      children: [
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 12),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              // Imagen con borde redondeado
              ClipRRect(
                borderRadius: BorderRadius.circular(10),
                child: Image.network(
                  imageUrl,
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                  errorBuilder: (context, error, stackTrace) {
                    return Container(
                      width: 100,
                      height: 100,
                      color: Colors.grey[300],
                      child: const Icon(Icons.restaurant,
                          size: 40, color: Colors.grey),
                    );
                  },
                ),
              ),
              const SizedBox(width: 16),

              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // Título con estilo más negrita
                    Text(
                      nombre,
                      style: const TextStyle(
                        color: Colors.black,
                        fontSize: 20,
                        fontWeight: FontWeight.w800,
                      ),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                    const SizedBox(height: 6),

                    // Descripción con color gris más claro
                    Text(
                      descripcion,
                      style: TextStyle(
                        color: Colors.grey[500],
                        fontSize: 16,
                        fontWeight: FontWeight.w400,
                      ),
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                    ),

                    const SizedBox(height: 12),

                    // Precio con estilo destacado
                    Text(
                      precio ?? 'Sin Precio',
                      style: const TextStyle(
                        color: Colors.black,
                        fontSize: 22,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ),
              ),

              Icon(
                Icons.add_circle_outline,
                size: 28,
                color: Colors.grey[700],
              ),
            ],
          ),
        ),
        Divider(
          height: 1,
          thickness: 1,
          color: Colors.grey[300],
        ),
      ],
    ),
  );
}