import 'package:flutter/material.dart';
import 'package:guia_valpo_vina/models/user_profile.dart';
import 'package:guia_valpo_vina/services/supabase_service.dart';

class ProviderOnboardingWeb extends StatefulWidget {
  final UserProfile profile;
  const ProviderOnboardingWeb({super.key, required this.profile});

  @override
  State<ProviderOnboardingWeb> createState() => _ProviderOnboardingWebState();
}

class _ProviderOnboardingWebState extends State<ProviderOnboardingWeb> {
  final _formKey = GlobalKey<FormState>();
  late TextEditingController _companyNameController;
  late TextEditingController _phoneController;
  late TextEditingController _addressController;
  
  // Nuevos controladores para la visión CL-APP
  late TextEditingController _rutController; 
  String _selectedRole = 'comercio'; // 'comercio' o 'creador'
  
  DateTime? _birthDate;
  bool _acceptedPolicies = false;
  bool _isLoading = false;

  @override
  void initState() {
    super.initState();
    _companyNameController = TextEditingController(text: widget.profile.nombreEmpresa);
    _phoneController = TextEditingController(text: widget.profile.phone);
    _addressController = TextEditingController(text: widget.profile.direccionParticular);
    _rutController = TextEditingController(); 
    _birthDate = widget.profile.fechaNacimiento;
    _acceptedPolicies = widget.profile.aceptoPoliticas;
  }

  @override
  void dispose() {
    _companyNameController.dispose();
    _phoneController.dispose();
    _addressController.dispose();
    _rutController.dispose();
    super.dispose();
  }

  // --- Lógica de UI ---

  Widget _buildStepIndicator(String title, String subtitle, IconData icon, bool isDone) {
    return Row(
      children: [
        Container(
          padding: const EdgeInsets.all(8),
          decoration: BoxDecoration(
            color: isDone ? Colors.blue.shade700 : Colors.grey.shade800,
            borderRadius: BorderRadius.circular(12),
          ),
          child: Icon(icon, color: Colors.white, size: 20),
        ),
        const SizedBox(width: 12),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(title, style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 13, color: Colors.white)),
            Text(subtitle, style: TextStyle(fontSize: 11, color: Colors.grey.shade400)),
          ],
        )
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);

    return Scaffold(
      backgroundColor: const Color(0xFF020617), // Deep Navy de CL-APP
      body: Row(
        children: [
          // Lado Izquierdo: Branding y Status (Visible solo en Web/Tablet)
          if (MediaQuery.of(context).size.width > 900)
            Expanded(
              flex: 2,
              child: Container(
                color: const Color(0xFF0F172A),
                padding: const EdgeInsets.all(60),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text('CL-APP', style: TextStyle(color: Colors.white, fontSize: 32, fontWeight: FontWeight.black, italic: true)),
                    const Text('SERIE 05: VALPARAÍSO', style: TextStyle(color: Colors.blue, letterSpacing: 4, fontSize: 10, fontWeight: FontWeight.bold)),
                    const Spacer(),
                    Text('Protocolo de\nCertificación 360°', style: theme.textTheme.displaySmall?.copyWith(color: Colors.white, fontWeight: FontWeight.w900, height: 1)),
                    const SizedBox(height: 40),
                    _buildStepIndicator('Validación Legal', 'RUT y Patente Municipal', Icons.gavel, true),
                    const SizedBox(height: 24),
                    _buildStepIndicator('Identidad Digital', 'Perfil de Socio y Contacto', Icons.person, false),
                    const SizedBox(height: 24),
                    _buildStepIndicator('Activación Geo-Sync', 'Validación de punto físico', Icons.map, false),
                    const Spacer(),
                    const Text('© 2025 Inteligencia Regional', style: TextStyle(color: Colors.grey, fontSize: 10)),
                  ],
                ),
              ),
            ),

          // Lado Derecho: El Formulario
          Expanded(
            flex: 3,
            child: Container(
              decoration: const BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(topLeft: Radius.circular(40), bottomLeft: Radius.circular(40)),
              ),
              child: SingleChildScrollView(
                padding: const EdgeInsets.all(60),
                child: Form(
                  key: _formKey,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('Finalizar Registro', style: theme.textTheme.headlineMedium?.copyWith(fontWeight: FontWeight.black)),
                      const Text('Selecciona tu rol en el ecosistema CL-APP', style: TextStyle(color: Colors.grey)),
                      const SizedBox(height: 32),

                      // Selector de Rol Estilizado
                      Row(
                        children: [
                          _roleButton('comercio', Icons.storefront, 'Soy Comercio'),
                          const SizedBox(width: 16),
                          _roleButton('creador', Icons.videocam, 'Soy Creador'),
                        ],
                      ),
                      
                      const SizedBox(height: 40),
                      
                      // Campos dinámicos según ROL
                      TextFormField(
                        controller: _companyNameController,
                        decoration: InputDecoration(
                          labelText: _selectedRole == 'comercio' ? 'Nombre Fantasía del Local *' : 'Nombre de Marca Personal / Productora *',
                          border: const OutlineInputBorder(),
                          prefixIcon: const Icon(Icons.business),
                        ),
                        validator: (v) => v!.isEmpty ? 'Campo obligatorio' : null,
                      ),
                      const SizedBox(height: 24),

                      Row(
                        children: [
                          Expanded(
                            child: TextFormField(
                              controller: _rutController,
                              decoration: const InputDecoration(labelText: 'RUT Empresa / Personal *', border: OutlineInputBorder(), prefixIcon: Icon(Icons.badge)),
                              validator: (v) => v!.isEmpty ? 'Requerido' : null,
                            ),
                          ),
                          const SizedBox(width: 16),
                          Expanded(
                            child: TextFormField(
                              controller: _phoneController,
                              decoration: const InputDecoration(labelText: 'WhatsApp de Contacto *', border: OutlineInputBorder(), prefixIcon: Icon(Icons.phone)),
                              validator: (v) => v!.isEmpty ? 'Requerido' : null,
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(height: 24),

                      TextFormField(
                        controller: _addressController,
                        decoration: const InputDecoration(labelText: 'Dirección de Operación (Valparaíso/Viña) *', border: OutlineInputBorder(), prefixIcon: Icon(Icons.location_on)),
                        validator: (v) => v!.isEmpty ? 'Requerido' : null,
                      ),
                      
                      const SizedBox(height: 32),
                      
                      // Declaración de Conformidad
                      Container(
                        padding: const EdgeInsets.all(20),
                        decoration: BoxDecoration(color: Colors.blue.shade50, borderRadius: BorderRadius.circular(20), border: Border.all(color: Colors.blue.shade100)),
                        child: Column(
                          children: [
                            Row(
                              children: [
                                Icon(Icons.verified_user, color: Colors.blue.shade700),
                                const SizedBox(width: 12),
                                const Text('Compromiso de Calidad CL-APP', style: TextStyle(fontWeight: FontWeight.bold, color: Color(0xFF1E3A8A))),
                              ],
                            ),
                            const SizedBox(height: 12),
                            const Text(
                              'Al validar mi cuenta, me comprometo a ofrecer información veraz y mantener los estándares de la Serie 05 Valparaíso. Entiendo que la activación Pro requiere una validación física de mi ubicación.',
                              style: TextStyle(fontSize: 12, color: Color(0xFF1E3A8A), height: 1.4),
                            ),
                          ],
                        ),
                      ),
                      
                      const SizedBox(height: 16),
                      CheckboxListTile(
                        title: const Text('Acepto los términos de certificación regional.', style: TextStyle(fontSize: 13, fontWeight: FontWeight.bold)),
                        value: _acceptedPolicies,
                        onChanged: (v) => setState(() => _acceptedPolicies = v!),
                        controlAffinity: ListTileControlAffinity.leading,
                        contentPadding: EdgeInsets.zero,
                      ),
                      
                      const SizedBox(height: 40),
                      SizedBox(
                        width: double.infinity,
                        height: 60,
                        child: ElevatedButton(
                          onPressed: _isLoading ? null : _saveProfile,
                          style: ElevatedButton.styleFrom(
                            backgroundColor: const Color(0xFF020617),
                            foregroundColor: Colors.white,
                            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
                            elevation: 0,
                          ),
                          child: _isLoading 
                            ? const CircularProgressIndicator(color: Colors.white) 
                            : const Text('FINALIZAR Y ENTRAR AL DASHBOARD', style: TextStyle(fontWeight: FontWeight.black, letterSpacing: 1.2)),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _roleButton(String role, IconData icon, String label) {
    bool isSelected = _selectedRole == role;
    return Expanded(
      child: InkWell(
        onTap: () => setState(() => _selectedRole = role),
        child: Container(
          padding: const EdgeInsets.symmetric(vertical: 20),
          decoration: BoxDecoration(
            color: isSelected ? const Color(0xFF020617) : Colors.white,
            border: Border.all(color: isSelected ? const Color(0xFF020617) : Colors.grey.shade300),
            borderRadius: BorderRadius.circular(15),
          ),
          child: Column(
            children: [
              Icon(icon, color: isSelected ? Colors.white : Colors.grey),
              const SizedBox(height: 8),
              Text(label, style: TextStyle(color: isSelected ? Colors.white : Colors.grey, fontWeight: FontWeight.bold, fontSize: 12)),
            ],
          ),
        ),
      ),
    );
  }

  // --- Lógica de Guardado ---

  Future<void> _saveProfile() async {
    if (!_formKey.currentState!.validate()) return;
    if (!_acceptedPolicies) {
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Debes aceptar las políticas.')));
      return;
    }

    setState(() => _isLoading = true);

    try {
      // Nota: Aquí debes extender tu UserProfile model para incluir 'role' y 'rut'
      final updatedProfile = widget.profile.copyWith(
        nombreEmpresa: _companyNameController.text.trim(),
        phone: _phoneController.text.trim(),
        direccionParticular: _addressController.text.trim(),
        aceptoPoliticas: true,
        fechaAceptacionPoliticas: DateTime.now(),
        isActive: true,
        // role: _selectedRole, // Asegúrate de tener este campo en tu modelo
      );

      await supabaseService.updateUserProfile(updatedProfile);

      if (mounted) {
        Navigator.of(context).pushReplacementNamed('/');
      }
    } catch (e) {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Error: $e'), backgroundColor: Colors.red));
      }
    } finally {
      if (mounted) setState(() => _isLoading = false);
    }
  }
}