import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

import '../constants.dart';
import '../models/user_profile.dart';
import '../services/user_service.dart';
import '../utils/helper.dart';
import '../utils/math.dart';
import 'edit_profile_page.dart';
import 'user_data_page.dart';

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

  @override
  State<UserProfilePage> createState() => _UserProfilePageState();
}

class _UserProfilePageState extends State<UserProfilePage> {
  String? profileImageUrl; // Track the profile image URL
  late UserProfile myData;
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    // Load user data on initialization
    _loadUserData();
  }

  Future<void> _loadUserData() async {
    myData = await UserService.getUserProfileById(
        FirebaseAuth.instance.currentUser!.uid);

    setState(() {
      // Initialize the profile image URL
      profileImageUrl = myData.profilePictureUrl;
      // Set loading to false once data is loaded
      isLoading = false;
    });
  }

  void editNameInfo() async {
    final updatedUserData = await Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => EditProfilePage(userData: myData),
      ),
    );

    if (updatedUserData != null) {
      setState(() {
        // above Type of updatedUserData is dynamic, so check EditProfilePage
        profileImageUrl = updatedUserData[Constants.dbFieldUsersProfilePic];
        myData.profilePictureUrl =
            updatedUserData[Constants.dbFieldUsersProfilePic];
        myData.name = updatedUserData[Constants.dbFieldUsersName];
        myData.bio = updatedUserData[Constants.dbFieldUsersBio];
      });
    }
  }

  void editUserDataInfo() async {
    final updatedUserData = await Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) =>
            const UserDataPage(isRegProcess: false, isEditMode: true),
      ),
    );

    if (updatedUserData != null) {
      setState(() {
        // above Type of updatedUserData is dynamic, so check UserDataPage
        myData.born = updatedUserData[Constants.dbFieldUsersYearBorn];
        myData.gender = updatedUserData[Constants.dbFieldUsersGender];
        myData.languages = updatedUserData[Constants.dbCollectionLanguages];
        myData.locations = updatedUserData[Constants.dbCollectionLocations];
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('User Profile'),
      ),
      body: isLoading
          ? const Center(child: CircularProgressIndicator())
          : Padding(
              padding: const EdgeInsets.all(16.0),
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    _buildAvatar(context),
                    const SizedBox(height: 16),
                    Divider(color: Theme.of(context).colorScheme.primary),
                    const SizedBox(height: 16),
                    _buildLocation(context),
                    const SizedBox(height: 16),
                    Divider(color: Theme.of(context).colorScheme.primary),
                    const SizedBox(height: 16),
                  ],
                ),
              ),
            ),
    );
  }

  Widget _buildLocation(BuildContext context) {
    int age = calcAge(myData.born);
    return Column(
      children: [
        Align(
          alignment: Alignment.centerLeft,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Age',
                        style: TextStyle(
                          color: Theme.of(context).colorScheme.primary,
                        ),
                      ),
                      Text(
                          (age > 0
                              ? '$age years old, born ${myData.born}'
                              : 'n/a'),
                          style: const TextStyle(fontSize: 16)),
                    ],
                  ),
                  Align(
                    alignment: Alignment.bottomRight,
                    child: OutlinedButton.icon(
                      label: const Text('Edit'),
                      icon: const Icon(Icons.edit),
                      onPressed: editUserDataInfo,
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 16),
              Text(
                'Gender',
                style: TextStyle(
                  color: Theme.of(context).colorScheme.primary,
                ),
              ),
              Text(getDisplayText(myData.gender),
                  style: const TextStyle(fontSize: 16)),
              const SizedBox(height: 16),
              Text(
                'Spoken languages',
                style: TextStyle(
                  color: Theme.of(context).colorScheme.primary,
                ),
              ),
              Text(
                myData.languages.map((lang) => lang.name).join(', '),
                style: const TextStyle(fontSize: 16),
              ),
              const SizedBox(height: 16),
              Text(
                'Locations',
                style: TextStyle(
                  color: Theme.of(context).colorScheme.primary,
                ),
              ),
              if (myData.locations.isEmpty)
                const Text('n/a', style: TextStyle(fontSize: 16)),
              if (myData.locations.containsKey(Constants.dbDocMainLocation))
                Text(
                  myData.locations[Constants.dbDocMainLocation].toString(),
                  style: const TextStyle(fontSize: 16),
                ),
              if (myData.locations.containsKey(Constants.dbDocSecondLocation))
                Text(
                  myData.locations[Constants.dbDocSecondLocation].toString(),
                  style: const TextStyle(fontSize: 16),
                ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildAvatar(BuildContext context) {
    return Column(
      children: [
        Align(
          alignment: Alignment.bottomRight,
          child: OutlinedButton.icon(
            label: const Text('Edit'),
            icon: const Icon(Icons.edit),
            onPressed: editNameInfo,
          ),
        ),
        CircleAvatar(
          radius: 50,
          backgroundImage:
              profileImageUrl != null ? NetworkImage(profileImageUrl!) : null,
          child: profileImageUrl == null
              ? const Icon(Icons.person, size: 50)
              : null,
        ),
        const SizedBox(height: 16),
        Text(myData.name, style: const TextStyle(fontSize: 24)),
        Text(myData.email, style: const TextStyle(fontSize: 16)),
        const SizedBox(height: 32),
        Align(
          alignment: Alignment.centerLeft,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Short description of yourself',
                style: TextStyle(
                  color: Theme.of(context).colorScheme.primary,
                ),
              ),
              Text(myData.bio ?? 'n/a', style: const TextStyle(fontSize: 16)),
            ],
          ),
        ),
      ],
    );
  }
}