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 'edit_profile_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];
      });
    }
  }

  @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: [
                    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)),
                        ],
                      ),
                    ),
                    const SizedBox(height: 16),
                    Divider(
                      color: Theme.of(context).colorScheme.primary,
                    ),
                    const SizedBox(height: 16),
                  ],
                ),
              ),
            ),
    );
  }
}