prosappweb/lib/ui/views/profile_view.dart

import 'dart:typed_data';

import 'package:file_picker/file_picker.dart';
import 'package:prosapp_web_app/models/city.dart';
import 'package:prosapp_web_app/models/usuario.dart';
import 'package:prosapp_web_app/providers/auth_provider.dart';
import 'package:prosapp_web_app/providers/cities_provider.dart';
import 'package:prosapp_web_app/providers/profile_form_provider.dart';
import 'package:prosapp_web_app/router/router.dart';
import 'package:prosapp_web_app/services/navigation_service.dart';
import 'package:prosapp_web_app/services/notifications_service.dart';
import 'package:prosapp_web_app/ui/cards/white_card.dart';
import 'package:prosapp_web_app/ui/inputs/custom_inputs.dart';
import 'package:prosapp_web_app/ui/labels/custom_labels.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

  @override
  State<ProfileView> createState() => _ProfileViewState();
}

class _ProfileViewState extends State<ProfileView> {
  Usuario? user;
  List<City> cities = [];

  @override
  void initState() {
    super.initState();

    final authProvider = Provider.of<AuthProvider>(context, listen: false);
    final profileFormProvider =
        Provider.of<ProfileFormProvider>(context, listen: false);
    final citiesProvider = Provider.of<CitiesProvider>(context, listen: false);

    profileFormProvider.user = authProvider.user;
    setState(() {
      cities = citiesProvider.cities;
      user = authProvider.user;
    });
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      if (constraints.maxWidth < 700) {
        return ListView(
          physics: const ClampingScrollPhysics(),
          children: const [SizedBox(height: 10), _ProfileViewBody()],
        );
      } else {
        return Container(
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
          child: ListView(
            physics: const ClampingScrollPhysics(),
            children: const [SizedBox(height: 10), _ProfileViewBody()],
          ),
        );
      }
    });
  }
}

class _ProfileViewBody extends StatelessWidget {
  const _ProfileViewBody();

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      if (constraints.maxWidth < 700) {
        return const Column(
          children: [
            _AvatarContainer(containerFull: true),
            _ProfileViewForm(),
          ],
        );
      } else {
        return Center(
          child: ConstrainedBox(
            constraints: const BoxConstraints(maxWidth: 900),
            child: Table(
              columnWidths: const {
                0: FixedColumnWidth(250),
              },
              children: const [
                TableRow(
                  children: [
                    _AvatarContainer(containerFull: true),
                    _ProfileViewForm(),
                  ],
                )
              ],
            ),
          ),
        );
      }
    });
  }
}

class _ProfileViewForm extends StatelessWidget {
  const _ProfileViewForm();

  @override
  Widget build(BuildContext context) {
    final profileFormProvider = Provider.of<ProfileFormProvider>(context);
    final citiesProvider = Provider.of<CitiesProvider>(context);
    final cities = citiesProvider.cities;
    final user = profileFormProvider.user!;
    final isDark = Theme.of(context).brightness == Brightness.dark;
    final textColor = isDark ? Colors.white : Colors.black87;

    // Normaliza el valor actual para que coincida exactamente con la lista
    final cityNames = cities.map((c) => c.cityName).toList();
    String? currentCity;
    if (user.city != null && user.city!.isNotEmpty) {
      final saved = user.city!.toLowerCase().trim();
      currentCity = cityNames.firstWhere(
        (n) => n.toLowerCase().trim() == saved,
        orElse: () => '',
      );
      if (currentCity!.isEmpty) currentCity = null;
    }

    return WhiteCard(
      title: 'Información general',
      child: Form(
        key: profileFormProvider.formKey,
        autovalidateMode: AutovalidateMode.always,
        child: Column(
          children: [
            const SizedBox(height: 10),
            TextFormField(
              initialValue: user.name,
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'El nombre es obligatorio';
                }
                if (value.trim().length < 4) {
                  return 'El nombre debe tener al menos 4 caracteres';
                }
                return null;
              },
              onChanged: (value) {
                profileFormProvider.copyUserWith(name: value);
              },
              decoration: CustomInputs.formInputDecoration(
                hint: 'Nombre de usuario',
                label: 'Nombre',
                icon: Icons.person_outline,
              ),
            ),
            const SizedBox(height: 20),
            TextFormField(
              readOnly: true,
              onTap: user.phone == null || user.phone!.isEmpty
                  ? () {
                      NavigationService.navigateTo(Flurorouter.phoneRoute);
                    }
                  : null,
              initialValue: user.phone ?? '',
              decoration: CustomInputs.formInputDecoration(
                hint: 'Número de teléfono',
                label: 'Teléfono',
                icon: Icons.phone,
              ),
            ),
            const SizedBox(height: 20),
            TextFormField(
              readOnly: true,
              onTap: user.email == null || user.email!.isEmpty
                  ? () {
                      NavigationService.navigateTo(Flurorouter.emailRoute);
                    }
                  : null,
              initialValue: user.email ?? '',
              decoration: CustomInputs.formInputDecoration(
                hint: 'Correo del usuario',
                label: 'Correo',
                icon: Icons.email_outlined,
              ),
            ),
            const SizedBox(height: 20),
            if (citiesProvider.isLoading)
              const Padding(
                padding: EdgeInsets.symmetric(vertical: 16),
                child: Center(child: CircularProgressIndicator()),
              )
            else
              DropdownButtonFormField<String>(
                validator: (value) {
                  if (value == null) return 'La ciudad es obligatoria';
                  return null;
                },
                value: currentCity,
                isExpanded: true,
                decoration: CustomInputs.formInputDecoration(
                  hint: 'Selecciona tu ciudad',
                  label: 'Ciudad',
                  icon: Icons.location_city_outlined,
                ),
                items: cities.map((City ciudad) {
                  return DropdownMenuItem<String>(
                    value: ciudad.cityName,
                    child: Text(
                      '${ciudad.cityName} - ${ciudad.stateOfCity}',
                      style: TextStyle(
                        color: textColor,
                        fontWeight: FontWeight.normal,
                      ),
                      overflow: TextOverflow.ellipsis,
                    ),
                  );
                }).toList(),
                onChanged: (value) {
                  if (value != null) profileFormProvider.copyUserWith(city: value);
                },
              ),
            const SizedBox(height: 20),
            ConstrainedBox(
              constraints: const BoxConstraints(maxWidth: 130),
              child: ElevatedButton(
                onPressed: () async {
                  await profileFormProvider.updateUserInfo();

                  Provider.of<AuthProvider>(context, listen: false)
                      .refreshUser();
                },
                style: ButtonStyle(
                  backgroundColor: WidgetStateProperty.all(
                     Colors.blue.shade400,

                  ),
                  shape: WidgetStateProperty.all(const RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(5)),
                  )),
                  shadowColor: WidgetStateProperty.all(Colors.transparent),
                ),
                child: const Text('Guardar',
                    style: TextStyle(color: Colors.white)),
              ),
            ),
            const SizedBox(height: 10),
          ],
        ),
      ),
    );
  }
}

Widget _buildInitials(String name) {
  final parts = name.trim().split(RegExp(r'\s+'));
  final initials = parts.length >= 2
      ? '${parts.first[0]}${parts.last[0]}'.toUpperCase()
      : (parts.first.isEmpty ? '?' : parts.first[0].toUpperCase());
  final colors = [
    const Color(0xFF6366F1), const Color(0xFF8B5CF6),
    const Color(0xFFEC4899), const Color(0xFF14B8A6),
    const Color(0xFFF59E0B), const Color(0xFF10B981),
    const Color(0xFFEF4444), const Color(0xFF3B82F6),
  ];
  final bg = name.isEmpty ? colors[0] : colors[name.codeUnitAt(0) % colors.length];
  return Container(
    color: bg,
    child: Center(
      child: Text(initials,
          style: const TextStyle(color: Colors.white, fontSize: 48, fontWeight: FontWeight.bold)),
    ),
  );
}

class _AvatarContainer extends StatelessWidget {
  final bool containerFull;

  const _AvatarContainer({required this.containerFull});

  @override
  Widget build(BuildContext context) {
    final user = Provider.of<AuthProvider>(context).user!;
    final profileFormProvider = Provider.of<ProfileFormProvider>(context);

    final picUrl = profileFormProvider.user!.picture;
    final hasPicture = picUrl != null && picUrl.isNotEmpty;
    final userName = profileFormProvider.user!.name;

    Widget avatarImage;
    if (hasPicture) {
      avatarImage = Image.network(picUrl, fit: BoxFit.cover,
          errorBuilder: (_, __, ___) => _buildInitials(userName));
    } else {
      avatarImage = _buildInitials(userName);
    }
    final image = avatarImage;

    return WhiteCard(
      width: containerFull ? null : 250,
      child: SizedBox(
        width: double.infinity,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              user.name,
              style: CustomLabels.h2,
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 10),
            SizedBox(
              width: 160,
              height: 160,
              child: Stack(
                children: [
                  SizedBox(
                    width: 200,
                    height: 200,
                    child: ClipOval(child: image),
                  ),
                  Positioned(
                    bottom: 5,
                    right: 5,
                    child: Container(
                      width: 45,
                      height: 45,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(100),
                        border: Border.all(color: Colors.white, width: 5),
                      ),
                      child: FloatingActionButton(
                        onPressed: () async {
                          FilePickerResult? result =
                              await FilePicker.platform.pickFiles(
                            withData: true,
                          );

                          if (result != null) {
                            PlatformFile file = result.files.first;
                            Uint8List? fileBytes = file.bytes;

                            if (fileBytes != null) {
                              NotificationsService.showBusyIndicator(context);
                              await profileFormProvider
                                  .uploadPicture(fileBytes);
                              Provider.of<AuthProvider>(context, listen: false)
                                  .refreshUser();

                              Navigator.pop(context);
                            }
                          } else {}
                        },
                        backgroundColor: Colors.indigo,
                        elevation: 0,
                        child: const Icon(
                          Icons.camera_alt_outlined,
                          size: 20,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
            const SizedBox(height: 20),
          ],
        ),
      ),
    );
  }
}