import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:form_builder_validators/form_builder_validators.dart';
import '../../../../core/theme/app_colors.dart';
import '../../../../core/widgets/medical_modal.dart';
import '../../../dashboard/data/models/doctor_info_model.dart';
import '../store/config_store.dart';

class ConfigModalView extends StatefulWidget {
  final ValueChanged<DoctorInfoModel>? onSaved;
  final ConfigStore? store;

  const ConfigModalView({
    super.key,
    this.onSaved,
    this.store,
  });

  @override
  State<ConfigModalView> createState() => _ConfigModalViewState();
}

class _ConfigModalViewState extends State<ConfigModalView> {
  late final ConfigStore _store;
  final _formKey = GlobalKey<FormBuilderState>();

  @override
  void initState() {
    super.initState();
    _store = widget.store ?? ConfigStore();
    if (widget.store == null) {
      _store.loadConfig();
    }
  }

  Future<void> _handleSave() async {
    if (_formKey.currentState?.saveAndValidate() ?? false) {
      final values = _formKey.currentState!.value;
      if (values['nombre_doctor'] != null) {
        _store.nombreDoctor = values['nombre_doctor'].toString();
      }
      if (values['especialidad'] != null) {
        _store.especialidad = values['especialidad'].toString();
      }
      if (values['descrip_especialidad'] != null) {
        _store.descripEspecialidad = values['descrip_especialidad'].toString();
      }
      if (values['descrip_general'] != null) {
        _store.descripGeneral = values['descrip_general'].toString();
      }

      final updated = await _store.saveConfig();
      if (updated != null && mounted) {
        widget.onSaved?.call(updated);
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(
            content: Row(
              children: [
                Icon(Icons.check_circle_rounded, color: Colors.white, size: 18),
                SizedBox(width: 8),
                Expanded(
                  child: Text('Configuración del consultorio guardada correctamente'),
                ),
              ],
            ),
            backgroundColor: Color(0xFF00A65A),
            behavior: SnackBarBehavior.floating,
            duration: Duration(seconds: 3),
          ),
        );
        Navigator.of(context).pop();
      }
    }
  }

  InputDecoration _cleanDecoration({
    required String label,
    IconData? icon,
    bool isRequired = false,
    String? hintText,
  }) {
    return InputDecoration(
      labelText: isRequired ? '$label *' : label,
      hintText: hintText,
      filled: true,
      fillColor: Colors.white,
      isDense: true,
      contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 13),
      prefixIcon: icon != null
          ? Icon(icon, size: 18, color: isRequired ? AppColors.primary : AppColors.textMuted)
          : null,
      prefixIconConstraints: const BoxConstraints(minWidth: 38, minHeight: 38),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: const BorderSide(color: Color(0xFFE2E8F0)),
      ),
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: const BorderSide(color: Color(0xFFE2E8F0)),
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: const BorderSide(color: AppColors.primary, width: 1.5),
      ),
      errorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: const BorderSide(color: AppColors.error),
      ),
      focusedErrorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: const BorderSide(color: AppColors.error, width: 1.5),
      ),
      labelStyle: TextStyle(
        fontSize: 13,
        fontWeight: FontWeight.w600,
        color: isRequired ? AppColors.primary : AppColors.textSecondary,
      ),
      hintStyle: const TextStyle(fontSize: 12.5, color: Color(0xFF94A3B8)),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Observer(
      builder: (_) {
        return MedicalModalDialog(
          titleIcon: Container(
            padding: const EdgeInsets.all(8),
            decoration: BoxDecoration(
              color: AppColors.primaryContainer,
              borderRadius: BorderRadius.circular(10),
            ),
            child: const Icon(Icons.settings_suggest_rounded, color: AppColors.primary, size: 22),
          ),
          title: 'Configuración del Consultorio',
          subtitle: const Text(
            'Actualice la información del doctor, especialidad y datos de contacto de la clínica',
            style: TextStyle(fontSize: 12, color: AppColors.textMuted),
          ),
          maxWidth: 780,
          maxHeight: 660,
          bottomBar: _buildBottomBar(),
          child: _store.isLoading
              ? const Center(
                  child: Padding(
                    padding: EdgeInsets.all(40),
                    child: CircularProgressIndicator(),
                  ),
                )
              : _buildForm(),
        );
      },
    );
  }

  Widget _buildBottomBar() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
      decoration: const BoxDecoration(
        color: Color(0xFFF8FAFC),
        border: Border(top: BorderSide(color: Color(0xFFE2E8F0))),
      ),
      child: Row(
        children: [
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(6),
              border: Border.all(color: const Color(0xFFE2E8F0)),
            ),
            child: const Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.keyboard_outlined, size: 12, color: AppColors.textMuted),
                SizedBox(width: 4),
                Text(
                  'ESC para salir',
                  style: TextStyle(fontSize: 11, color: AppColors.textMuted, fontWeight: FontWeight.w500),
                ),
              ],
            ),
          ),
          const Spacer(),
          TextButton(
            onPressed: _store.isSaving ? null : () => Navigator.of(context).pop(),
            style: TextButton.styleFrom(
              foregroundColor: AppColors.textSecondary,
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
            ),
            child: const Text('Cancelar', style: TextStyle(fontWeight: FontWeight.w600)),
          ),
          const SizedBox(width: 12),
          ElevatedButton(
            onPressed: _store.isSaving ? null : _handleSave,
            style: ElevatedButton.styleFrom(
              backgroundColor: const Color(0xFF00A65A),
              foregroundColor: Colors.white,
              padding: const EdgeInsets.symmetric(horizontal: 22, vertical: 12),
              elevation: 1,
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
            ),
            child: _store.isSaving
                ? const SizedBox(
                    width: 18,
                    height: 18,
                    child: CircularProgressIndicator(
                      strokeWidth: 2,
                      valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
                    ),
                  )
                : const Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Icon(Icons.check_circle_outline_rounded, size: 18),
                      SizedBox(width: 8),
                      Text(
                        'Guardar Configuración',
                        style: TextStyle(fontSize: 13, fontWeight: FontWeight.w700),
                      ),
                    ],
                  ),
          ),
        ],
      ),
    );
  }

  Widget _buildForm() {
    return SingleChildScrollView(
      padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
      child: FormBuilder(
        key: _formKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            if (_store.errorMessage != null) ...[
              Container(
                padding: const EdgeInsets.all(12),
                margin: const EdgeInsets.only(bottom: 16),
                decoration: BoxDecoration(
                  color: AppColors.error.withValues(alpha: 0.1),
                  borderRadius: BorderRadius.circular(8),
                  border: Border.all(color: AppColors.error.withValues(alpha: 0.3)),
                ),
                child: Row(
                  children: [
                    const Icon(Icons.error_outline_rounded, color: AppColors.error, size: 20),
                    const SizedBox(width: 10),
                    Expanded(
                      child: Text(
                        _store.errorMessage!,
                        style: const TextStyle(fontSize: 12.5, color: AppColors.error, fontWeight: FontWeight.w500),
                      ),
                    ),
                  ],
                ),
              ),
            ],

            // Sección 1: Identidad Médica
            _buildSectionHeader(
              icon: Icons.person_pin_rounded,
              title: 'Identidad del Profesional',
              subtitle: 'Nombre y especialidad principal reflejados en el encabezado y recetas',
            ),
            const SizedBox(height: 12),
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Expanded(
                  flex: 6,
                  child: FormBuilderTextField(
                    name: 'nombre_doctor',
                    initialValue: _store.nombreDoctor,
                    decoration: _cleanDecoration(
                      label: 'Nombre del Doctor',
                      icon: Icons.badge_outlined,
                      isRequired: true,
                      hintText: 'Ej. Dr. Luis A. Castro Sosa',
                    ),
                    validator: FormBuilderValidators.compose([
                      FormBuilderValidators.required(errorText: 'Requerido'),
                      FormBuilderValidators.minLength(3, errorText: 'Mínimo 3 caracteres'),
                    ]),
                    onChanged: (v) => _store.nombreDoctor = v ?? '',
                  ),
                ),
                const SizedBox(width: 14),
                Expanded(
                  flex: 5,
                  child: FormBuilderTextField(
                    name: 'especialidad',
                    initialValue: _store.especialidad,
                    decoration: _cleanDecoration(
                      label: 'Especialidad',
                      icon: Icons.medical_services_outlined,
                      isRequired: true,
                      hintText: 'Ej. Cirujano Urólogo',
                    ),
                    validator: FormBuilderValidators.compose([
                      FormBuilderValidators.required(errorText: 'Requerido'),
                      FormBuilderValidators.minLength(3, errorText: 'Mínimo 3 caracteres'),
                    ]),
                    onChanged: (v) => _store.especialidad = v ?? '',
                  ),
                ),
              ],
            ),
            const SizedBox(height: 22),

            // Sección 2: Áreas de Enfoque y Subespecialidades
            _buildSectionHeader(
              icon: Icons.local_hospital_outlined,
              title: 'Áreas de Enfoque y Subespecialidades',
              subtitle: 'Enfermedades, órganos o áreas de tratamiento de su consulta',
            ),
            const SizedBox(height: 12),
            FormBuilderTextField(
              name: 'descrip_especialidad',
              initialValue: _store.descripEspecialidad,
              maxLines: 4,
              decoration: _cleanDecoration(
                label: 'Descripción de Especialidades',
                hintText: 'Ej. Enfermedades Vías Urinarias, Riñones, Vejiga, Próstata, Disfunción eréctil...',
              ),
              onChanged: (v) => _store.descripEspecialidad = v ?? '',
            ),
            const SizedBox(height: 22),

            // Sección 3: Datos de Contacto y Clínica
            _buildSectionHeader(
              icon: Icons.apartment_rounded,
              title: 'Datos del Consultorio y Contacto',
              subtitle: 'Dirección física de la clínica, edificio, teléfonos, celular y correo',
            ),
            const SizedBox(height: 12),
            FormBuilderTextField(
              name: 'descrip_general',
              initialValue: _store.descripGeneral,
              maxLines: 4,
              decoration: _cleanDecoration(
                label: 'Información General y Contacto',
                hintText: 'Ej. Instituto materno infantil, Av. Juan Pablo Duarte, Santiago. Tel: 809-583-2394...',
              ),
              onChanged: (v) => _store.descripGeneral = v ?? '',
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildSectionHeader({
    required IconData icon,
    required String title,
    required String subtitle,
  }) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Icon(icon, size: 18, color: AppColors.primary),
        const SizedBox(width: 8),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                style: const TextStyle(
                  fontSize: 13,
                  fontWeight: FontWeight.w700,
                  color: AppColors.textPrimary,
                ),
              ),
              const SizedBox(height: 2),
              Text(
                subtitle,
                style: const TextStyle(
                  fontSize: 11.5,
                  color: AppColors.textMuted,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}