import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import '../../screen/home/card_riwayat_rekaman.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:toastification/toastification.dart';

import '../../app/constant.dart';
import '../../app/route.dart';
import '../../provider/current_user_provider.dart';
import '../../provider/voice_to_text_provider.dart';
import 'list_riwayat_rekaman_provider.dart';

class HomeScreen extends HookConsumerWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [
      SystemUiOverlay.bottom,
    ]);

    final currentUser = ref.watch(currentUserProvider);
    final host = currentUser?.host ?? "";
    final isLoading = useState<bool>(false);
    final userId = currentUser?.model.userId ?? "";
    final listRekamanArr = ref.watch(listRekamanRwt);

    useEffect(() {
      WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
        final userID = currentUser?.model.userId ?? "0";
        if (userID == "0") {
          // not logged in
          Navigator.of(context)
              .pushNamedAndRemoveUntil(loginRoute, (route) => false);
          return;
        }
      });
      return () {};
    }, [currentUser]);

    void showLongToast(
      String title,
      String message,
      String typeToast,
      Duration waktu,
    ) {
      if (typeToast == "success") {
        toastification.show(
          context: context,
          title: Text(title),
          description: Text(message),
          autoCloseDuration: waktu,
          type: ToastificationType.success,
        );
      } else if (typeToast == "error") {
        toastification.show(
          context: context,
          title: Text(title),
          description: Text(message),
          autoCloseDuration: waktu,
          type: ToastificationType.error,
          style: ToastificationStyle.fillColored,
        );
      }
    }

    // listRiwayProvider
    ref.listen(listRiwayatRekamanProvider, (prev, next) {
      if (next is ListRiwayatRekamanStateLoading) {
        isLoading.value = true;
      } else if (next is ListRiwayatRekamanStateError) {
        isLoading.value = false;
        // errorMessage.value = next.message;
         showLongToast(
          'Error',
          next.message,
          'error',
          Duration(seconds: 3),
        );
      } else if (next is ListRiwayatRekamanStateDone) {
        isLoading.value = false;
      }
    });

    useEffect(() {
      WidgetsBinding.instance.addPostFrameCallback((timestap) async {
        ref.read(listRiwayatRekamanProvider.notifier).listRiwayatRekaman(
              host: host,
              userId: userId,
            );
      });
      return () {};
    }, []);

    return GestureDetector(
      onTap: () {
        FocusManager.instance.primaryFocus!.unfocus();
      },
      child: Scaffold(
        resizeToAvoidBottomInset: true,
        backgroundColor: Constant.bgGrey,
        body: Column(
          children: [
            // atas
            Image.asset(
              'images/vektoratas.png',
              width: double.infinity,
              fit: BoxFit.cover,
            ),
            SizedBox(
              height: Constant.getActualYPhone(
                context: context,
                y: 34,
              ),
            ),
            // rekam audio baru
            Padding(
              padding: EdgeInsets.only(
                left: Constant.getActualXPhone(
                  context: context,
                  x: 20,
                ),
                right: Constant.getActualXPhone(
                  context: context,
                  x: 20,
                ),
              ),
              child: SizedBox(
                width: double.infinity,
                height: Constant.getActualYPhone(
                  context: context,
                  y: 48,
                ),
                child: ElevatedButton(
                  onPressed: () {
                    Navigator.of(context).pushNamed(rekamRoute);
                  },
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Constant.bgButton,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8),
                    ),
                    elevation: 8,
                    shadowColor: Constant.bgButton.withOpacity(0.24),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.mic,
                        size: Constant.getActualXPhone(
                          context: context,
                          x: 20,
                        ),
                        color: Constant.textWhite,
                      ),
                      SizedBox(
                        width: Constant.getActualXPhone(
                          context: context,
                          x: 10,
                        ),
                      ),
                      Text(
                        'REKAM AUDIO BARU',
                        style:
                            Constant.titleButton500(context: context).copyWith(
                          color: Constant.textWhite,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            SizedBox(
              height: Constant.getActualYPhone(
                context: context,
                y: 56,
              ),
            ),
            // judul
            Padding(
              padding: EdgeInsets.only(
                left: Constant.getActualXPhone(
                  context: context,
                  x: 20,
                ),
                right: Constant.getActualXPhone(
                  context: context,
                  x: 20,
                ),
              ),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        'Riwayat',
                        style: Constant.titleRiwayat(context: context).copyWith(
                          color: Constant.textBlack,
                        ),
                      ),
                      Text(
                        '20 Audio Terakhir',
                        style:
                            Constant.titleInputan500(context: context).copyWith(
                          color: Constant.inputanGrey,
                        ),
                      ),
                    ],
                  ),
                  SizedBox(
                    height: Constant.getActualYPhone(
                      context: context,
                      y: 24,
                    ),
                  ),
                ],
              ),
            ),
            // loading
            if (isLoading.value)
              Expanded(
                child: Center(
                  child: CircularProgressIndicator(
                    color: Constant.bgButton,
                  ),
                ),
              )
            // belum ada riwayat
            else if (listRekamanArr.isEmpty)
              Expanded(
                child: RefreshIndicator(
                  color: Constant.bgButton,
                  onRefresh: () async {
                    ref
                        .read(listRiwayatRekamanProvider.notifier)
                        .listRiwayatRekaman(
                          host: host,
                          userId: userId,
                        );
                  },
                  child: ListView(
                    physics:
                        AlwaysScrollableScrollPhysics(), // Agar bisa di-refresh meski kosong
                    children: [
                      SizedBox(
                          height: MediaQuery.of(context).size.height *
                              0.3), // Atur tinggi agar teks di tengah
                      Align(
                        alignment: Alignment.center,
                        child: Text(
                          'Belum Ada Audio',
                          style: Constant.titleInputan500(context: context),
                        ),
                      ),
                    ],
                  ),
                ),
              )

            // list card
            else
              Expanded(
                child: RefreshIndicator(
                  color: Constant.bgButton,
                  onRefresh: () async {
                    ref
                        .read(listRiwayatRekamanProvider.notifier)
                        .listRiwayatRekaman(
                          host: host,
                          userId: userId,
                        );
                  },
                  child: Padding(
                    padding: EdgeInsets.only(
                      left: Constant.getActualXPhone(context: context, x: 13),
                      right: Constant.getActualXPhone(context: context, x: 13),
                      bottom: Constant.getActualYPhone(context: context, y: 20),
                    ),
                    child: ListView.builder(
                      physics: AlwaysScrollableScrollPhysics(),
                      shrinkWrap: true,
                      itemCount: listRekamanArr.length,
                      itemBuilder: (context, i) {
                        final obj = listRekamanArr[i];
                        return Padding(
                          padding: EdgeInsets.only(
                            top: Constant.getActualYPhone(
                                context: context, y: 15),
                          ),
                          child: CardRiwayatRekaman(
                            data: obj,
                          ),
                        );
                      },
                    ),
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }
}