import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:freekake/components/bottom_navbar.dart';
import 'package:freekake/components/main_menu.dart';
import 'package:freekake/components/point_header.dart';
import 'package:freekake/components/scan_button.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';

// import 'package:image_picker_web/image_picker_web.dart';
import 'package:flutter/foundation.dart' show kIsWeb;

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

  @override
  _PointSayaState createState() => _PointSayaState();
}

class _PointSayaState extends State<PointSaya> {
  dynamic _profileImage;
  dynamic _headerImage;
  ImageProvider? imageProvider;

  final ImagePicker _picker = ImagePicker();

  Future<void> _pickImage(bool isProfile) async {
    if (kIsWeb) {
      // Uint8List? bytesFromPicker = await ImagePickerWeb.getImageAsBytes();
      // if (bytesFromPicker != null) {
      //   setState(() {
      //     if (isProfile) {
      //       _profileImage = bytesFromPicker;
      //     } else {
      //       _headerImage = bytesFromPicker;
      //     }
      //   });
      // }
    } else {
      final pickedFile = await _picker.pickImage(source: ImageSource.gallery);
      if (pickedFile != null) {
        final imageFile = File(pickedFile.path);
        setState(() {
          if (isProfile) {
            _profileImage = imageFile;
          } else {
            _headerImage = imageFile;
          }

          imageProvider =
              kIsWeb ? MemoryImage(_profileImage) : FileImage(_profileImage);
        });
      } else {
        imageProvider = AssetImage("assets/images/luffy.png");
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Point Saya"),
        backgroundColor: Color.fromARGB(225, 79, 76, 182),
      ),
      resizeToAvoidBottomInset: false,
      backgroundColor: const Color.fromARGB(255, 255, 255, 255),
      body: Stack(
        children: [
          Align(
            alignment: Alignment.bottomCenter,
            child: Padding(
              padding: const EdgeInsets.only(top: 0.0, left: 20, right: 20),
              child: Container(
                height: MediaQuery.of(context).size.height * 0.7,
                width: MediaQuery.of(context).size.width,
                decoration: BoxDecoration(
                  color: const Color.fromARGB(150, 137, 123, 69),
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(20),
                    topRight: Radius.circular(20),
                  ),
                ),
                child: Column(
                  spacing: 10,
                  children: [
                    SizedBox(height: 4),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Container(
                        padding: EdgeInsets.symmetric(
                          horizontal: 20,
                          vertical: 10,
                        ),
                        decoration: BoxDecoration(
                          color: const Color.fromARGB(255, 191, 184, 184),
                          borderRadius: BorderRadius.circular(10),
                          boxShadow: [
                            BoxShadow(color: Colors.black12, blurRadius: 8),
                          ],
                        ),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            SizedBox(height: 5),
                            Row(
                              children: [
                                // Image.asset(
                                //   'assets/icons/diamond.png',
                                //   width: 24,
                                // ),
                                Text(
                                  "Total Point",
                                  style: TextStyle(
                                    fontSize: 18,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.black87,
                                  ),
                                ),
                                SizedBox(width: 8),
                                Text(
                                  "300",
                                  style: TextStyle(
                                    fontSize: 18,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.black87,
                                  ),
                                ),
                              ],
                            ),
                            Row(
                              children: [
                                // Image.asset('assets/icons/coin.png', width: 24),
                                Text(
                                  "Total Koin",
                                  style: TextStyle(
                                    fontSize: 18,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.black87,
                                  ),
                                ),
                                SizedBox(width: 8),
                                Text(
                                  "60",
                                  style: TextStyle(
                                    fontSize: 18,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.black87,
                                  ),
                                ),
                              ],
                            ),
                            SizedBox(height: 5),
                          ],
                        ),
                      ),
                    ),
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Padding(padding: EdgeInsets.all(8)),
                        Container(
                          width: MediaQuery.of(context).size.width * 0.8,
                          child: Center(
                            child: Text(
                              "Riwayat poin dan koin",
                              style: TextStyle(
                                fontSize: 18,
                                fontWeight: FontWeight.bold,
                                color: Colors.white60,
                              ),
                            ),
                          ),
                          // color: Colors.amber,
                        ),
                      ],
                    ),
                    PointsHeader(),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        SizedBox(width: 40),
                        Text("Furikake", style: TextStyle(color: Colors.white)),
                        SizedBox(width: 130),
                        Text(
                          "",
                          // "🔥 Level: ${points.level}",
                          // style: TextStyle(color: Colors.orangeAccent),
                        ),
                        Text("100", style: TextStyle(color: Colors.lightBlue)),
                        SizedBox(width: 60),
                        Text("20", style: TextStyle(color: Colors.greenAccent)),
                      ],
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        SizedBox(width: 40),
                        Text("Furikake", style: TextStyle(color: Colors.white)),
                        SizedBox(width: 130),
                        Text(
                          "",
                          // "🔥 Level: ${points.level}",
                          // style: TextStyle(color: Colors.orangeAccent),
                        ),
                        Text("100", style: TextStyle(color: Colors.lightBlue)),
                        SizedBox(width: 60),
                        Text("20", style: TextStyle(color: Colors.greenAccent)),
                      ],
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        SizedBox(width: 40),
                        Text("Furikake", style: TextStyle(color: Colors.white)),
                        SizedBox(width: 130),
                        Text(
                          "",
                          // "🔥 Level: ${points.level}",
                          // style: TextStyle(color: Colors.orangeAccent),
                        ),
                        Text("100", style: TextStyle(color: Colors.lightBlue)),
                        SizedBox(width: 60),
                        Text("20", style: TextStyle(color: Colors.greenAccent)),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ),
          // Profile Picture (bisa diubah)
          Positioned(
            top: 25,
            left: MediaQuery.of(context).size.width / 2 - 50,
            child: GestureDetector(
              onTap: () => _pickImage(true),
              child: Stack(
                alignment: Alignment.bottomRight,
                children: [
                  CircleAvatar(
                    radius: 50,
                    backgroundColor: Colors.grey[300],
                    backgroundImage:
                        _profileImage != null
                            ? (kIsWeb
                                ? MemoryImage(_profileImage) as ImageProvider
                                : FileImage(_profileImage) as ImageProvider)
                            : null,
                    child:
                        _profileImage == null
                            ? Image.asset("assets/images/luffy.png")
                            : null,
                  ),
                  CircleAvatar(
                    radius: 15,
                    backgroundColor: Colors.blue,
                    child: Icon(Icons.edit, color: Colors.white, size: 15),
                  ),
                ],
              ),
            ),
          ),

          Positioned(
            top: 130,
            left: MediaQuery.of(context).size.width / 2 - 30,
            child: GestureDetector(
              onTap: () => _pickImage(true),
              child: Stack(
                alignment: Alignment.bottomRight,
                children: [
                  Text(
                    "Luffy kun",
                    style: TextStyle(
                      color: Colors.deepPurple,
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildListItem(IconData icon, String label, {bool isLogout = false}) {
    return ListTile(
      leading: Icon(
        icon,
        color:
            isLogout
                ? const Color.fromARGB(255, 181, 47, 47)
                : const Color.fromARGB(255, 255, 255, 255),
      ),
      title: Text(label, style: TextStyle(fontSize: 16, color: Colors.black)),
      trailing: Icon(Icons.arrow_forward_ios, size: 16),
      onTap: () {},
    );
  }
}