import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:scanktpflutter/model/person_ktp_model.dart';
import 'package:scanktpflutter/screen/home/card_riwayat_scan.dart';
import 'package:scanktpflutter/screen/home/list_riwayat_scan_provider.dart';

import '../../app/constant.dart';
import '../../app/route.dart';
import '../../provider/current_user_provider.dart';
import '../../widget/customsnackbarwidget.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 username = currentUser?.model.username ?? "-";
    final host = currentUser?.host ?? "";
    final isLoading = useState<bool>(false);
    final listScanArr = useState<List<PersonKtp>>(
      List.empty(growable: true),
    );

    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]);

    // listRiwayProvider
    ref.listen(listRiwayatScanProvider, (prev, next) {
      if (next is ListRiwayatScanStateLoading) {
        isLoading.value = true;
      } else if (next is ListRiwayatScanStateError) {
        isLoading.value = false;
        // errorMessage.value = next.message;
        snackbarWidget(
          context,
          next.message,
          snackbarType.error,
          Duration(seconds: 3),
        );
      } else if (next is ListRiwayatScanStateDone) {
        isLoading.value = false;
        listScanArr.value = next.model;
      }
    });

    useEffect(() {
      WidgetsBinding.instance.addPostFrameCallback((timestap) async {
        ref.read(listRiwayatScanProvider.notifier).listRiwayatScan(
              host: host,
            );
      });
      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,
              ),
            ),
            // button scan ktp
            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(scanRoute);
                  },
                  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: [
                      Image.asset(
                        'images/iconbarcode.png',
                        width: Constant.getActualXPhone(
                          context: context,
                          x: 20,
                        ),
                        height: Constant.getActualYPhone(
                          context: context,
                          y: 20,
                        ),
                        fit: BoxFit.cover,
                      ),
                      SizedBox(
                        width: Constant.getActualXPhone(
                          context: context,
                          x: 10,
                        ),
                      ),
                      Text(
                        'SCAN KTP 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 Scan 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 (listScanArr.value.isEmpty)
              Expanded(
                child: RefreshIndicator(
                  color: Constant.bgButton,
                  onRefresh: () async {
                    ref.read(listRiwayatScanProvider.notifier).listRiwayatScan(
                          host: host,
                        );
                  },
                  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 Riwayat',
                          style: Constant.titleInputan500(context: context),
                        ),
                      ),
                    ],
                  ),
                ),
              )
            // list card
            else
              Expanded(
                child: RefreshIndicator(
                  color: Constant.bgButton,
                  onRefresh: () async {
                    ref.read(listRiwayatScanProvider.notifier).listRiwayatScan(
                          host: host,
                        );
                  },
                  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: listScanArr.value.length,
                      itemBuilder: (context, i) {
                        final obj = listScanArr.value[i];
                        return Padding(
                          padding: EdgeInsets.only(
                            top: Constant.getActualYPhone(
                                context: context, y: 15),
                          ),
                          child: CardRiwayatScan(
                            data: obj,
                          ),
                        );
                      },
                    ),
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }
}