import 'package:flutter/material.dart';
import 'package:turquessa_mesas_hoster/utils/widgets/custom_appbar.dart';
import 'package:turquessa_mesas_hoster/utils/widgets/navigation_rail.dart';

class CreacionPedido extends StatefulWidget {
  const CreacionPedido({super.key});

  @override
  State<CreacionPedido> createState() => _CreacionPedidoState();
}

class _CreacionPedidoState extends State<CreacionPedido> {
  final _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.bottomRight,
              end: Alignment.topLeft,
              colors: [
            Color(0xFF7FD4D4),
            Color.fromARGB(255, 141, 225, 225),
            Color.fromARGB(255, 74, 156, 156),
          ])),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
          title: const CustomAppbar(),
        ),
        body: Row(
          children: [
            CustomNavigationRail(selectedIndex: _selectedIndex),
            Expanded(
              flex: 5,
              child: Container(
                decoration: const BoxDecoration(
                  color: Colors.white,
                ),
                child: const Column(
                  children: [
                    CategoryFilters(),
                    CategoryGrid(),
                  ],
                ),
              ),
            ),
            Expanded(
              flex: 4,
              child: Container(
                decoration: const BoxDecoration(
                  color: Colors.white,
                ),
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Padding(
                        padding: EdgeInsets.only(left: 10),
                        child: Text(
                          "Mesa 3: Palmeras",
                          textAlign: TextAlign.start,
                          style: TextStyle(
                              fontSize: 40,
                              fontWeight: FontWeight.bold,
                              color: Colors.black),
                        ),
                      ),
                      const Divider(),
                      SingleChildScrollView(
                        child: DataTable(
                            columnSpacing: 10,
                            dataRowMinHeight: 40,
                            dataRowMaxHeight: 80,
                            columns: <DataColumn>[
                              const DataColumn(label: Text('Cant')),
                              const DataColumn(label: Text('Nombre')),
                              const DataColumn(label: Text('SubTotal')),
                              const DataColumn(label: Text('Acciones')),
                            ],
                            rows: <DataRow>[
                              DataRow(selected: true, cells: <DataCell>[
                                const DataCell(Text('1')),
                                const DataCell(Text('Mesa 1')),
                                const DataCell(Text('\$100.00')),
                                DataCell(IconButton(
                                    icon: const Icon(Icons.pending_sharp),
                                    onPressed: () {}))
                              ]),
                              DataRow(cells: <DataCell>[
                                const DataCell(Text('1')),
                                const DataCell(Text(
                                    'Hamburguesa de Queso y Ahumado sin cebolla ni tomate')),
                                const DataCell(Text("\$100.00")),
                                DataCell(IconButton(
                                    icon: const Icon(Icons.pending_sharp),
                                    onPressed: () {}))
                              ]),
                              DataRow(cells: <DataCell>[
                                const DataCell(Text('1')),
                                const DataCell(Text(
                                    'Hamburguesa de Queso y Ahumado sin cebolla ni tomate')),
                                const DataCell(Text("\$100.00")),
                                DataCell(IconButton(
                                    icon: const Icon(Icons.pending_sharp),
                                    onPressed: () {}))
                              ]),
                              DataRow(cells: <DataCell>[
                                const DataCell(Text('1')),
                                const DataCell(Text(
                                    'Hamburguesa de Queso y Ahumado sin cebolla ni tomate')),
                                const DataCell(Text("\$100.00")),
                                DataCell(IconButton(
                                    icon: const Icon(Icons.pending_sharp),
                                    onPressed: () {}))
                              ]),
                            ]),
                      ),
                      Expanded(
                        child: Column(
                          children: [
                            const Divider(),
                            const Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text(
                                  "Total",
                                  style: TextStyle(
                                      fontSize: 20,
                                      fontWeight: FontWeight.bold),
                                ),
                                Text(
                                  "\$300.00",
                                  style: TextStyle(
                                      fontSize: 20,
                                      fontWeight: FontWeight.bold),
                                ),
                              ],
                            ),
                            const SizedBox(height: 10),
                            Row(
                              children: [
                                Expanded(
                                  flex: 9,
                                  child: ElevatedButton(
                                    style: const ButtonStyle(
                                      backgroundColor: MaterialStatePropertyAll(
                                          Colors.green),
                                    ),
                                    onPressed: () {},
                                    child: const Text(
                                      "Mandar a Preparacion",
                                      style: TextStyle(color: Colors.white),
                                    ),
                                  ),
                                ),
                                Expanded(
                                  flex: 1,
                                  child: IconButton(
                                    style: const ButtonStyle(
                                        backgroundColor:
                                            MaterialStatePropertyAll(
                                                Colors.white),
                                        iconColor: MaterialStatePropertyAll(
                                            Colors.red)),
                                    icon: const Icon(
                                      Icons.delete,
                                      color: Colors.red,
                                    ),
                                    onPressed: () {},
                                  ),
                                ),
                              ],
                            )
                          ],
                        ),
                      )
                    ],
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

class CategoryGrid extends StatelessWidget {
  const CategoryGrid({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
        padding: const EdgeInsets.all(8),
        child: GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 4,
            crossAxisSpacing: 10,
            mainAxisSpacing: 15,
          ),
          itemCount: 20,
          itemBuilder: (context, index) {
            return Card(
              shadowColor: Colors.grey.shade700,
              surfaceTintColor: Colors.white,
              child: Column(children: [
                Padding(
                  padding: const EdgeInsets.all(3),
                  child: Container(
                    height: 80,
                    width: double.infinity,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      image: DecorationImage(
                        image: NetworkImage(
                            "https://picsum.photos/200/300?random=$index"),
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                ),
                Center(
                  child: Text(
                    "Producto $index",
                    style: const TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                        color: Colors.black),
                  ),
                ),
                const Text("Precio: \$50.00")
              ]),
            );
          },
        ),
      ),
    );
  }
}

class CategoryFilters extends StatefulWidget {
  const CategoryFilters({super.key});

  @override
  State<CategoryFilters> createState() => CategoryFiltersState();
}

class CategoryFiltersState extends State<CategoryFilters> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(8),
      decoration: BoxDecoration(
        border: Border(bottom: BorderSide(color: Colors.grey.shade300)),
      ),
      child: Row(
        children: [
          // Buscador
          Expanded(
            child: Container(
              height: 40,
              padding: const EdgeInsets.symmetric(horizontal: 12),
              decoration: BoxDecoration(
                color: Colors.grey.shade200,
                borderRadius: BorderRadius.circular(20),
              ),
              child: Row(
                children: [
                  Icon(Icons.search, color: Colors.grey.shade600),
                  const SizedBox(width: 8),
                  Text('Buscar', style: TextStyle(color: Colors.grey.shade600)),
                ],
              ),
            ),
          ),
          const SizedBox(width: 10),

          // Botones de filtro
          _FilterButtonPLaceHolder('Categoría'),
          const SizedBox(width: 10),
          _FilterButtonPLaceHolder('Topics'),
          const SizedBox(width: 10),
          _FilterButtonPLaceHolder('Extras'),
        ],
      ),
    );
  }
}

Widget _FilterButtonPLaceHolder(String text) {
  return Container(
    padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
    decoration: BoxDecoration(
      color: Colors.grey.shade200,
      borderRadius: BorderRadius.circular(4),
    ),
    child: Text(text, style: const TextStyle(fontSize: 16)),
  );
}