import 'package:agrilink_vocpro/core/constant/app_color.dart';
import 'package:agrilink_vocpro/core/constant/app_theme.dart';
import 'package:agrilink_vocpro/core/state/result_state.dart';
import 'package:agrilink_vocpro/features/control/provider/control_provider.dart';
import 'package:bootstrap_icons/bootstrap_icons.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provider/provider.dart';

class ControlScreen extends StatelessWidget {
  const ControlScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final provider = Provider.of<ControlProvider>(context, listen: true);
    return Scaffold(
      appBar: AppBar(
        title: Text('Control', style: AppTheme.labelMedium),
        centerTitle: true,
        backgroundColor: Colors.white,
        scrolledUnderElevation: 0,
      ),
      body: RefreshIndicator(
        onRefresh: () async =>
            await context.read<ControlProvider>().getRelayStatus(),
        child: SafeArea(
          child: ListView(
            children: [
              SizedBox(height: 16.h),
              GridView(
                  padding: EdgeInsets.all(16.r),
                  physics: const NeverScrollableScrollPhysics(),
                  shrinkWrap: true,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                    crossAxisSpacing: 16.r,
                    mainAxisSpacing: 16.r,
                    childAspectRatio: 1.4.h,
                  ),
                  children: [
                    ControlButtonWidget(
                      title: 'Katup Air',
                      subtitle: 'Relay 1',
                      isActive: provider.control_1,
                      onTap: () {},
                    ),
                    ControlButtonWidget(
                      title: 'Lampu Utama',
                      subtitle: 'Relay 2',
                      isActive: provider.control_2,
                      onTap: () {},
                    ),
                  ]),
            ],
          ),
        ),
      ),
    );
  }
}

class ControlButtonWidget extends StatelessWidget {
  const ControlButtonWidget({
    super.key,
    required this.title,
    required this.subtitle,
    required this.isActive,
    required this.onTap,
  });

  final String title;
  final String subtitle;
  final bool isActive;
  final Function() onTap;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.r),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16.r),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.2),
            spreadRadius: 1.r,
            blurRadius: 16.r,
            offset: Offset(0, 12.r),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(title, style: AppTheme.labelMedium),
          Text(subtitle, style: AppTheme.labelSmall),
          const Spacer(),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Consumer<ControlProvider>(
                builder: (context, provider, child) {
                  switch (provider.relayState) {
                    case ResultState.loading:
                      return CircleAvatar(
                        radius: 20.r,
                        backgroundColor: Colors.transparent,
                        child: const CupertinoActivityIndicator(),
                      );
                    default:
                      return InkWell(
                        highlightColor: Colors.black,
                        onTap: onTap,
                        child: CircleAvatar(
                          radius: 20.r,
                          backgroundColor: isActive
                              ? AppColor.secondary
                              : Colors.grey.shade400,
                          child: const Icon(
                            BootstrapIcons.power,
                            color: Colors.white,
                          ),
                        ),
                      );
                  }
                },
              ),
            ],
          )
        ],
      ),
    );
  }
}