import 'dart:async';
import 'package:flutter/material.dart';
import 'package:prosapp_web_app/providers/auth_provider.dart';
import 'package:prosapp_web_app/router/router.dart';
import 'package:provider/provider.dart';

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

  @override
  State<PhoneLoginView> createState() => _PhoneLoginViewState();
}

class _PhoneLoginViewState extends State<PhoneLoginView> {
  final _phoneController = TextEditingController();
  final _otpController = TextEditingController();
  bool _codeSent = false;
  bool _loading = false;
  String _phone = '';
  int _resendSeconds = 0;
  Timer? _timer;

  @override
  void dispose() {
    _phoneController.dispose();
    _otpController.dispose();
    _timer?.cancel();
    super.dispose();
  }

  void _startResendTimer() {
    setState(() => _resendSeconds = 60);
    _timer?.cancel();
    _timer = Timer.periodic(const Duration(seconds: 1), (t) {
      if (_resendSeconds == 0) {
        t.cancel();
      } else {
        setState(() => _resendSeconds--);
      }
    });
  }

  Future<void> _sendCode() async {
    final raw = _phoneController.text.trim();
    if (raw.length < 7) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Ingresa un número válido')),
      );
      return;
    }
    _phone = '+57$raw';
    setState(() => _loading = true);
    try {
      await Provider.of<AuthProvider>(context, listen: false).verifyPhoneNumber(_phone);
      setState(() { _codeSent = true; });
      _startResendTimer();
    } catch (_) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Error al enviar código. Verifica el número.')),
      );
    } finally {
      setState(() => _loading = false);
    }
  }

  Future<void> _verifyOtp() async {
    final otp = _otpController.text.trim();
    if (otp.length != 6) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Ingresa el código de 6 dígitos')),
      );
      return;
    }
    setState(() => _loading = true);
    await Provider.of<AuthProvider>(context, listen: false).signInWithOTP(_phone, otp);
    setState(() => _loading = false);
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ConstrainedBox(
        constraints: const BoxConstraints(maxWidth: 420),
        child: SingleChildScrollView(
          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 32),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              if (!_codeSent) _buildPhoneForm() else _buildOtpForm(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildPhoneForm() {
    final isDark = Theme.of(context).brightness == Brightness.dark;
    final titleColor = isDark ? Colors.white : const Color(0xFF1E293B);
    final subtitleColor = isDark ? Colors.white54 : Colors.grey;
    final inputFill = isDark ? const Color(0xFF1E293B) : const Color(0xFFF5F8FF);
    final inputBorder = isDark ? const Color(0xFF334155) : const Color(0xFFE0E7FF);
    final prefixFill = isDark ? const Color(0xFF0F172A) : const Color(0xFFF5F5F5);
    final prefixBorder = isDark ? const Color(0xFF334155) : const Color(0xFFE0E0E0);
    final prefixText = isDark ? Colors.white : Colors.black87;

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('Iniciar sesión', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: titleColor)),
        const SizedBox(height: 4),
        Text('Te enviaremos un código de 6 dígitos', style: TextStyle(color: subtitleColor, fontSize: 13)),
        const SizedBox(height: 24),
        Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 18),
              decoration: BoxDecoration(
                color: prefixFill,
                borderRadius: BorderRadius.circular(10),
                border: Border.all(color: prefixBorder),
              ),
              child: Text('+57', style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600, color: prefixText)),
            ),
            const SizedBox(width: 10),
            Expanded(
              child: TextField(
                controller: _phoneController,
                keyboardType: TextInputType.phone,
                style: TextStyle(color: titleColor),
                decoration: InputDecoration(
                  hintText: '300 123 4567',
                  hintStyle: TextStyle(color: subtitleColor),
                  filled: true,
                  fillColor: inputFill,
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10),
                    borderSide: BorderSide.none,
                  ),
                  enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10),
                    borderSide: BorderSide(color: inputBorder),
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10),
                    borderSide: const BorderSide(color: Color(0xFF42A4EF), width: 2),
                  ),
                ),
              ),
            ),
          ],
        ),
        const SizedBox(height: 24),
        SizedBox(
          width: double.infinity,
          child: ElevatedButton(
            onPressed: _loading ? null : _sendCode,
            style: ElevatedButton.styleFrom(
              backgroundColor: const Color(0xFF42A4EF),
              foregroundColor: Colors.white,
              padding: const EdgeInsets.symmetric(vertical: 16),
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
              elevation: 0,
            ),
            child: _loading
                ? const SizedBox(height: 20, width: 20, child: CircularProgressIndicator(color: Colors.white, strokeWidth: 2))
                : const Text('Enviar código', style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600)),
          ),
        ),
        const SizedBox(height: 24),
        Row(children: [
          const Expanded(child: Divider()),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 12),
            child: Text('o', style: TextStyle(color: subtitleColor)),
          ),
          const Expanded(child: Divider()),
        ]),
        const SizedBox(height: 16),
        SizedBox(
          width: double.infinity,
          child: OutlinedButton(
            onPressed: () => Navigator.pushReplacementNamed(context, Flurorouter.loginRoute),
            style: OutlinedButton.styleFrom(
              padding: const EdgeInsets.symmetric(vertical: 14),
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
              side: const BorderSide(color: Color(0xFF42A4EF)),
            ),
            child: const Text('Iniciar sesión con email', style: TextStyle(color: Color(0xFF42A4EF), fontWeight: FontWeight.w600)),
          ),
        ),
        const SizedBox(height: 12),
        Center(
          child: TextButton(
            onPressed: () => Navigator.pushReplacementNamed(context, Flurorouter.registerRoute),
            child: RichText(
              text: TextSpan(
                style: TextStyle(color: subtitleColor, fontSize: 13),
                children: const [
                  TextSpan(text: '¿No tienes cuenta? '),
                  TextSpan(text: 'Regístrate', style: TextStyle(color: Color(0xFF42A4EF), fontWeight: FontWeight.w600)),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildOtpForm() {
    final isDark = Theme.of(context).brightness == Brightness.dark;
    final titleColor = isDark ? Colors.white : const Color(0xFF1E293B);
    final subtitleColor = isDark ? Colors.white54 : Colors.grey;
    final inputFill = isDark ? const Color(0xFF1E293B) : const Color(0xFFF5F8FF);
    final inputBorder = isDark ? const Color(0xFF334155) : const Color(0xFFE0E7FF);

    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        const Icon(Icons.sms_outlined, size: 52, color: Color(0xFF42A4EF)),
        const SizedBox(height: 12),
        Text('Código de verificación', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: titleColor)),
        const SizedBox(height: 8),
        Text(
          'Enviamos un SMS a $_phone',
          textAlign: TextAlign.center,
          style: TextStyle(color: subtitleColor, fontSize: 13),
        ),
        const SizedBox(height: 28),
        TextField(
          controller: _otpController,
          keyboardType: TextInputType.number,
          textAlign: TextAlign.center,
          maxLength: 6,
          style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold, letterSpacing: 12, color: titleColor),
          decoration: InputDecoration(
            counterText: '',
            hintText: '------',
            hintStyle: TextStyle(letterSpacing: 12, color: subtitleColor),
            filled: true,
            fillColor: inputFill,
            border: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: BorderSide.none),
            enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: BorderSide(color: inputBorder)),
            focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: const BorderSide(color: Color(0xFF42A4EF), width: 2)),
          ),
        ),
        const SizedBox(height: 24),
        SizedBox(
          width: double.infinity,
          child: ElevatedButton(
            onPressed: _loading ? null : _verifyOtp,
            style: ElevatedButton.styleFrom(
              backgroundColor: const Color(0xFF42A4EF),
              foregroundColor: Colors.white,
              padding: const EdgeInsets.symmetric(vertical: 16),
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
              elevation: 0,
            ),
            child: _loading
                ? const SizedBox(height: 20, width: 20, child: CircularProgressIndicator(color: Colors.white, strokeWidth: 2))
                : const Text('Verificar', style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600)),
          ),
        ),
        const SizedBox(height: 16),
        _resendSeconds > 0
            ? Text('Reenviar en $_resendSeconds s', style: TextStyle(color: subtitleColor, fontSize: 13))
            : TextButton(
                onPressed: _sendCode,
                child: const Text('Reenviar código', style: TextStyle(color: Color(0xFF42A4EF), fontWeight: FontWeight.w600)),
              ),
        const SizedBox(height: 8),
        TextButton(
          onPressed: () => setState(() { _codeSent = false; _otpController.clear(); }),
          child: Text('← Cambiar número', style: TextStyle(color: subtitleColor, fontSize: 13)),
        ),
      ],
    );
  }
}