import 'package:flutter/material.dart';
import 'domicilios.dart'; // Para navegar aquí tras el login

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

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> with SingleTickerProviderStateMixin {
  final _formKey = GlobalKey<FormState>();

  // Controladores para capturar el texto
  final _usuarioController = TextEditingController();
  final _passwordController = TextEditingController();

  bool _obscurePassword = true; // Ocultar/mostrar contraseña
  late TabController _tabController; // Controla si inicia con Email o Teléfono

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  void dispose() {
    _usuarioController.dispose();
    _passwordController.dispose();
    _tabController.dispose();
    super.dispose();
  }

  void _iniciarSesion() {
    if (_formKey.currentState!.validate()) {
      // Aquí irá tu lógica futura con Firebase/Supabase

      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text('¡Ingreso exitoso!'),
          backgroundColor: Colors.green,
        ),
      );

      // Navegamos directamente a tu pantalla de Gestión de Domicilios
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => const GestionDomiciliosScreen()),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: SingleChildScrollView(
          padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 16.0),
          child: Form(
            key: _formKey,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                const SizedBox(height: 40),

                // Icono e Identidad de la App
                CircleAvatar(
                  radius: 45,
                  backgroundColor: Colors.green[50],
                  child: Icon(Icons.recycling_rounded, size: 55, color: Colors.green[700]),
                ),
                const SizedBox(height: 16),
                Text(
                  'EcoRecolección',
                  style: Theme.of(context).textTheme.headlineMedium?.copyWith(
                    fontWeight: FontWeight.bold,
                    color: Colors.green[800],
                  ),
                ),
                Text(
                  'Por una comunidad más limpia y educada',
                  style: TextStyle(color: Colors.grey[600], fontSize: 14),
                ),
                const SizedBox(height: 40),

                // Selector de tipo de ingreso (Email / Teléfono)
                Container(
                  decoration: BoxDecoration(
                    color: Colors.grey[100],
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: TabBar(
                    controller: _tabController,
                    indicatorSize: TabBarIndicatorSize.tab,
                    dividerColor: Colors.transparent,
                    indicator: BoxDecoration(
                      color: Colors.green[700],
                      borderRadius: BorderRadius.circular(12),
                    ),
                    labelColor: Colors.white,
                    unselectedLabelColor: Colors.grey[600],
                    labelStyle: const TextStyle(fontWeight: FontWeight.bold),
                    tabs: const [
                      Tab(text: 'Correo Electrónico'),
                      Tab(text: 'Teléfono'),
                    ],
                    onTap: (index) {
                      _usuarioController.clear(); // Limpia al cambiar de pestaña
                    },
                  ),
                ),
                const SizedBox(height: 24),

                // Contenedor dinámico según el Tab activo
                AnimatedBuilder(
                  animation: _tabController,
                  builder: (context, child) {
                    bool esEmail = _tabController.index == 0;
                    return TextFormField(
                      controller: _usuarioController,
                      keyboardType: esEmail ? TextInputType.emailAddress : TextInputType.phone,
                      decoration: InputDecoration(
                        labelText: esEmail ? 'Correo Electrónico' : 'Número de Teléfono',
                        hintText: esEmail ? 'ejemplo@correo.com' : '10 dígitos',
                        prefixIcon: Icon(esEmail ? Icons.email_outlined : Icons.phone_android_rounded, color: Colors.green[700]),
                        border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(12),
                          borderSide: BorderSide(color: Colors.green[700]!, width: 2),
                        ),
                      ),
                      validator: (value) {
                        if (value == null || value.trim().isEmpty) {
                          return esEmail ? 'Ingresa tu correo' : 'Ingresa tu teléfono';
                        }
                        if (esEmail && !RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$').hasMatch(value)) {
                          return 'Introduce un correo válido';
                        }
                        return null;
                      },
                    );
                  },
                ),
                const SizedBox(height: 16),

                // Campo de Contraseña
                TextFormField(
                  controller: _passwordController,
                  obscureText: _obscurePassword,
                  decoration: InputDecoration(
                    labelText: 'Contraseña',
                    prefixIcon: Icon(Icons.lock_outline_rounded, color: Colors.green[700]),
                    suffixIcon: IconButton(
                      icon: Icon(_obscurePassword ? Icons.visibility_off_outlined : Icons.visibility_outlined, color: Colors.grey),
                      onPressed: () {
                        setState(() {
                          _obscurePassword = !_obscurePassword;
                        });
                      },
                    ),
                    border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(12),
                      borderSide: BorderSide(color: Colors.green[700]!, width: 2),
                    ),
                  ),
                  validator: (value) {
                    if (value == null || value.isEmpty) {
                      return 'Ingresa tu contraseña';
                    }
                    if (value.length < 6) {
                      return 'Debe tener al menos 6 caracteres';
                    }
                    return null;
                  },
                ),

                // Olvidé mi contraseña
                Align(
                  alignment: Alignment.centerRight,
                  child: TextButton(
                    onPressed: () {},
                    child: Text('¿Olvidaste tu contraseña?', style: TextStyle(color: Colors.green[800], fontWeight: FontWeight.w600)),
                  ),
                ),
                const SizedBox(height: 16),

                // Botón Ingresar
                SizedBox(
                  width: double.infinity,
                  height: 52,
                  child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.green[700],
                      foregroundColor: Colors.white,
                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
                      elevation: 1,
                    ),
                    onPressed: _iniciarSesion,
                    child: const Text('Iniciar Sesión', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
                  ),
                ),
                const SizedBox(height: 24),

                // Crear cuenta nueva
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('¿No tienes una cuenta? ', style: TextStyle(color: Colors.grey[600])),
                    GestureDetector(
                      onTap: () {}, // Aquí abrirías la pantalla de registro
                      child: Text(
                        'Regístrate',
                        style: TextStyle(color: Colors.green[800], fontWeight: FontWeight.bold, decoration: TextDecoration.underline),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}