import 'package:flutter/material.dart';
import '../../core/app_colors.dart';
import 'ai_camera_screen.dart';

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

  static const _cats = [
    _Cat(Icons.grass,Color(0xFF2E7D32),'Orgánicos','Restos de comida, jardín','🟢 Bolsa Verde',[
      'Frutas y verduras','Cáscaras de huevo','Posos de café y té',
      'Restos de comida preparada','Pasto y hojas','Cáscaras de semillas'],
      ['Aceites en exceso','Carnes en grandes cantidades']),
    _Cat(Icons.recycling,Color(0xFF1565C0),'Reciclables','Papel, plástico, vidrio, metal','🔵 Bolsa Azul',[
      'Botellas PET','Latas de aluminio','Cartón y papel limpio',
      'Vidrio (botellas, frascos)','Periódico y revistas'],
      ['Vidrio roto sin envolver','Papel sucio o mojado','Unicel']),
    _Cat(Icons.delete,Color(0xFF757575),'No Reciclables','Residuos que no se reusan','⚫ Bolsa Negra',[
      'Pañales desechables','Toallas sanitarias','Papel higiénico usado',
      'Colillas de cigarro','Cerámica rota'],['Baterías','Medicamentos','Aceite usado']),
    _Cat(Icons.warning_amber,Color(0xFFC62828),'Peligrosos','Requieren manejo especial','🔴 Separado',[
      'Agujas y jeringas','Medicamentos vencidos','Pilas y baterías',
      'Aceite de cocina usado','Pintura y solventes'],[],isWarn:true),
    _Cat(Icons.devices_other,Color(0xFFE65100),'Electrónicos (RAEE)','Aparatos electrónicos','🟠 Punto de acopio',[
      'Celulares viejos','Computadoras','Televisiones',
      'Focos ahorradores','Cables y cargadores'],[],isSpecial:true),
  ];

  @override
  Widget build(BuildContext context) => Scaffold(
    backgroundColor: AppColors.grisFondo,
    appBar: AppBar(automaticallyImplyLeading:false,
      backgroundColor:AppColors.guindaPrimary, foregroundColor:Colors.white,
      title:const Text('Guía de Separación'),
      actions:[IconButton(icon:const Icon(Icons.camera_alt),
        tooltip:'Clasificar con IA',
        onPressed:()=>Navigator.push(context,MaterialPageRoute(builder:(_)=>const AiCameraScreen())))],
      bottom:PreferredSize(preferredSize:const Size.fromHeight(4),
        child:Container(height:4,color:AppColors.dorado))),
    body:Column(children:[
      Container(width:double.infinity,
        color:AppColors.verdeExito.withOpacity(0.1),
        padding:const EdgeInsets.symmetric(horizontal:16,vertical:8),
        child:Row(children:[
          const Icon(Icons.offline_bolt,color:AppColors.verdeExito,size:16),
          const SizedBox(width:6),
          const Text('Disponible sin conexión a internet',
              style:TextStyle(color:AppColors.verdeExito,fontSize:12,fontWeight:FontWeight.w500)),
          const Spacer(),
          TextButton.icon(icon:const Icon(Icons.camera_alt,size:14),
            label:const Text('Clasificar IA',style:TextStyle(fontSize:12)),
            style:TextButton.styleFrom(foregroundColor:AppColors.guindaPrimary),
            onPressed:()=>Navigator.push(context,MaterialPageRoute(builder:(_)=>const AiCameraScreen()))),
        ])),
      // Importancia de separar
      Container(margin:const EdgeInsets.fromLTRB(12,8,12,0),
        padding:const EdgeInsets.all(12),
        decoration:BoxDecoration(color:Colors.green.shade50,borderRadius:BorderRadius.circular(8),
          border:Border.all(color:Colors.green.shade200)),
        child:const Column(crossAxisAlignment:CrossAxisAlignment.start, children:[
          Text('¿Por qué separar tu basura?',style:TextStyle(fontWeight:FontWeight.bold,color:Color(0xFF2E7D32))),
          SizedBox(height:6),
          Text('♻️ El 60% de los residuos en México pueden reciclarse o compostarse, pero solo el 5% lo hace.\n'
              '🌱 Separar correctamente reduce la contaminación del suelo y agua, genera empleos verdes '
              'y disminuye los gases de efecto invernadero producidos en rellenos sanitarios.',
              style:TextStyle(fontSize:12,color:Colors.black87)),
        ])),
      Expanded(child:ListView.builder(
        padding:const EdgeInsets.all(12),
        itemCount:_cats.length,
        itemBuilder:(ctx,i)=>_CatCard(cat:_cats[i]))),
    ]),
  );
}

class _Cat {
  final IconData icon; final Color color; final String title, subtitle, bolsa;
  final List<String> items, noItems;
  final bool isWarn, isSpecial;
  const _Cat(this.icon,this.color,this.title,this.subtitle,this.bolsa,
      this.items,this.noItems,{this.isWarn=false,this.isSpecial=false});
}

class _CatCard extends StatefulWidget {
  final _Cat cat;
  const _CatCard({super.key, required this.cat});
  @override State<_CatCard> createState() => _CatCardState();
}

class _CatCardState extends State<_CatCard> {
  bool _open = false;
  @override
  Widget build(BuildContext context) {
    final c = widget.cat;
    return Card(margin:const EdgeInsets.only(bottom:10),elevation:2,
      shape:RoundedRectangleBorder(borderRadius:BorderRadius.circular(10),
        side:BorderSide(color:c.color.withOpacity(0.3))),
      child:InkWell(borderRadius:BorderRadius.circular(10),
        onTap:()=>setState(()=>_open=!_open),
        child:Column(children:[
          Container(decoration:BoxDecoration(color:c.color.withOpacity(0.1),
            borderRadius:BorderRadius.vertical(top:const Radius.circular(10),
              bottom:_open?Radius.zero:const Radius.circular(10))),
            padding:const EdgeInsets.all(14),
            child:Row(children:[
              Container(width:40,height:40,decoration:BoxDecoration(color:c.color,borderRadius:BorderRadius.circular(8)),
                child:Icon(c.icon,color:Colors.white,size:22)),
              const SizedBox(width:10),
              Expanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start, children:[
                Text(c.title,style:TextStyle(fontWeight:FontWeight.bold,fontSize:15,color:c.color)),
                Text(c.subtitle,style:const TextStyle(color:AppColors.grisTexto,fontSize:11)),
                Text(c.bolsa,style:TextStyle(fontSize:11,fontWeight:FontWeight.w600,color:c.color)),
              ])),
              Icon(_open?Icons.expand_less:Icons.expand_more,color:c.color),
            ])),
          if (_open) Padding(padding:const EdgeInsets.fromLTRB(14,0,14,14),
            child:Column(crossAxisAlignment:CrossAxisAlignment.start, children:[
              const SizedBox(height:8),
              Text('✅ Qué va aquí:',style:TextStyle(fontWeight:FontWeight.bold,color:c.color,fontSize:12)),
              const SizedBox(height:4),
              ...c.items.map((e)=>Padding(padding:const EdgeInsets.symmetric(vertical:2),
                child:Row(children:[Icon(Icons.check_circle_outline,size:13,color:c.color),
                  const SizedBox(width:6),Text(e,style:const TextStyle(fontSize:12))]))),
              if (c.noItems.isNotEmpty) ...[
                const SizedBox(height:8),
                const Text('❌ NO incluir:',style:TextStyle(fontWeight:FontWeight.bold,color:AppColors.rojoError,fontSize:12)),
                ...c.noItems.map((e)=>Padding(padding:const EdgeInsets.symmetric(vertical:2),
                  child:Row(children:[const Icon(Icons.cancel_outlined,size:13,color:AppColors.rojoError),
                    const SizedBox(width:6),Text(e,style:const TextStyle(fontSize:12,color:AppColors.rojoError))]))),
              ],
              if (c.isSpecial) ...[
                const SizedBox(height:8),
                Container(padding:const EdgeInsets.all(8),
                  decoration:BoxDecoration(color:Colors.orange.shade50,borderRadius:BorderRadius.circular(6),
                    border:Border.all(color:Colors.orange.shade200)),
                  child:const Text('📍 Lleva a puntos de acopio autorizados por el municipio.',
                      style:TextStyle(fontSize:11))),
              ],
              if (c.isWarn) ...[
                const SizedBox(height:8),
                Container(padding:const EdgeInsets.all(8),
                  decoration:BoxDecoration(color:Colors.red.shade50,borderRadius:BorderRadius.circular(6),
                    border:Border.all(color:Colors.red.shade200)),
                  child:const Text('⚠️ NUNCA mezcles residuos peligrosos con basura común.',
                      style:TextStyle(fontSize:11))),
              ],
            ])),
        ])));
  }
}