import 'package:flutter/material.dart';

class OrdenMesaCard extends StatelessWidget {
  final String mesaNumero;
  final String ordenNumero;
  final List<OrdenItem> items;
  final bool tieneItemsListos;
  final VoidCallback onLiberarOrden;

  const OrdenMesaCard({
    Key? key,
    required this.mesaNumero,
    required this.ordenNumero,
    required this.items,
    this.tieneItemsListos = false,
    required this.onLiberarOrden,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.all(8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.min,
        children: [
          // Encabezado de la mesa
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  'Mesa $mesaNumero',
                  style: const TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Row(
                  children: [
                    const Icon(Icons.access_time, size: 16),
                    const SizedBox(width: 4),
                    Text('15:03'),
                  ],
                ),
              ],
            ),
          ),
          const Divider(height: 1),
          // Número de orden
          Padding(
            padding:
                const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
            child: Text(
              'Orden #$ordenNumero',
              style: TextStyle(
                color: Colors.grey[600],
                fontSize: 14,
              ),
            ),
          ),
          // Lista de items
          ListView.builder(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            itemCount: items.length,
            itemBuilder: (context, index) {
              final item = items[index];
              return ListTile(
                contentPadding: const EdgeInsets.symmetric(horizontal: 16.0),
                leading: Text(
                  '${item.cantidad}x',
                  style: const TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                title: Text(
                  item.nombre,
                  style: const TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.w500,
                  ),
                ),
                subtitle: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      item.descripcion,
                      style: TextStyle(
                        color: Colors.grey[600],
                        fontSize: 14,
                      ),
                    ),
                    if (item.notas != null)
                      Text(
                        item.notas!,
                        style: TextStyle(
                          color: Colors.red[400],
                          fontSize: 14,
                        ),
                      ),
                  ],
                ),
                trailing: item.isListo
                    ? Container(
                        padding: const EdgeInsets.symmetric(
                            horizontal: 12, vertical: 6),
                        decoration: BoxDecoration(
                          color: Colors.black,
                          borderRadius: BorderRadius.circular(20),
                        ),
                        child: const Text(
                          'Listo',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 12,
                          ),
                        ),
                      )
                    : const Icon(Icons.chevron_right),
              );
            },
          ),

          Padding(
            padding: const EdgeInsets.all(16.0),
            child: ElevatedButton(
              onPressed: onLiberarOrden,
              style: ElevatedButton.styleFrom(
                backgroundColor: const Color(0xFF4CAF50),
                padding: const EdgeInsets.symmetric(vertical: 16),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
              ),
              child: const Text(
                'Liberar Orden Completa',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class OrdenItem {
  final int cantidad;
  final String nombre;
  final String descripcion;
  final String? notas;
  final bool isListo;

  OrdenItem({
    required this.cantidad,
    required this.nombre,
    required this.descripcion,
    this.notas,
    this.isListo = false,
  });
}

class OrdenesScreen extends StatelessWidget {
  const OrdenesScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final items = [
      OrdenItem(
        cantidad: 1,
        nombre: 'Chilaquiles Verdes',
        descripcion: 'Tortillas fritas en salsa verde con pollo',
        notas: 'Sin cebolla ni tomate',
      ),
      OrdenItem(
        cantidad: 2,
        nombre: 'Huevos Rancheros',
        descripcion: 'Huevos fritos sobre tortilla con salsa roja',
      ),
    ];

    final items2 = [
      OrdenItem(
        cantidad: 1,
        nombre: 'Club Sandwich',
        descripcion: 'Sándwich triple con pollo, jamón y tocino',
        isListo: true,
      ),
    ];

    return ListView(
      children: [
        OrdenMesaCard(
          mesaNumero: '5',
          ordenNumero: 'A-123',
          items: items,
          onLiberarOrden: () {
            // Implementar lógica para liberar orden
          },
        ),
        OrdenMesaCard(
          mesaNumero: '3',
          ordenNumero: 'A-124',
          items: items2,
          tieneItemsListos: true,
          onLiberarOrden: () {
            // Implementar lógica para liberar orden
          },
        ),
      ],
    );
  }
}