import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:niogu_app/core/components/top_back_bar_app.dart';
import 'package:niogu_app/core/constants/app_font_size.dart';
import 'package:niogu_app/core/constants/app_color.dart';
import 'package:niogu_app/core/widgets/triangle_painter.dart';
import 'package:niogu_app/features/customer/domain/entities/customer.dart';
import 'package:sizer/sizer.dart';

class MapCustomerAddressScreen extends ConsumerStatefulWidget {
  final CustomerAddress address;

  const MapCustomerAddressScreen({super.key, required this.address});

  @override
  ConsumerState<MapCustomerAddressScreen> createState() =>
      _MapCustomerAddressScreenState();
}

class _MapCustomerAddressScreenState
    extends ConsumerState<MapCustomerAddressScreen> {
  final MapController _mapController = MapController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    _mapController.dispose();
    super.dispose();
  }

  void _goToLocation() {
    _mapController.move(widget.address.coordinate, 16.0);
  }

  void _zoomIn() {
    _mapController.move(
      _mapController.camera.center,
      _mapController.camera.zoom + 1,
    );
  }

  void _zoomOut() {
    _mapController.move(
      _mapController.camera.center,
      _mapController.camera.zoom - 1,
    );
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return SafeArea(
          top: false,
          bottom: true,
          right: false,
          left: false,
          child: Scaffold(
            extendBodyBehindAppBar: true,
            appBar: TopBackBarApp(
              title: widget.address.label,
              onTap: () => context.pop(),
            ),
            body: Stack(
              children: [
                FlutterMap(
                  mapController: _mapController,
                  options: MapOptions(
                    initialCenter: widget.address.coordinate,
                    initialZoom: 16.0,
                    minZoom: 3.0,
                    maxZoom: 18.0,
                  ),
                  children: [
                    TileLayer(
                      urlTemplate:
                          'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
                      subdomains: const ['a', 'b', 'c', 'd'],
                      userAgentPackageName: 'com.example.niogu_app',
                    ),
                    MarkerLayer(
                      markers: [
                        Marker(
                          point: widget.address.coordinate,
                          width: 60.w,
                          height: 25.h,
                          alignment: Alignment.topCenter,
                          child: Column(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Container(
                                padding: EdgeInsets.symmetric(
                                  horizontal: 3.w,
                                  vertical: 1.2.h,
                                ),
                                decoration: BoxDecoration(
                                  color: Colors.white,
                                  borderRadius: BorderRadius.circular(2.w),
                                  boxShadow: [
                                    BoxShadow(
                                      color: Colors.black.withOpacity(0.1),
                                      blurRadius: 8,
                                      offset: const Offset(0, 4),
                                    ),
                                  ],
                                  border: Border.all(
                                    color: Colors.grey.shade200,
                                  ),
                                ),
                                child: Column(
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    Text(
                                      "Lokasi Pelanggan",
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                        fontSize: AppFontSize.small.sp,
                                        fontWeight: FontWeight.bold,
                                        color: AppColor.primaryColor,
                                      ),
                                    ),
                                    SizedBox(height: 0.5.h),
                                    Text(
                                      widget.address.fullAddress,
                                      textAlign: TextAlign.center,
                                      maxLines: 3,
                                      overflow: TextOverflow.ellipsis,
                                      style: TextStyle(
                                        fontSize: (AppFontSize.small - 1.25).sp,
                                        color: Colors.grey[700],
                                        fontWeight: FontWeight.w500,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              CustomPaint(
                                size: Size(5.w, 2.5.w),
                                painter: TrianglePainter(Colors.white),
                              ),
                              SizedBox(height: 0.5.h),
                              Icon(
                                Icons.location_on,
                                color: Colors.red,
                                size: 10.w,
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ],
                ),

                Positioned(
                  bottom: 4.h,
                  right: 5.w,
                  child: Column(
                    children: [
                      _buildFloatingButton(
                        icon: Icons.my_location_rounded,
                        iconColor: AppColor.primaryColor,
                        onTap: _goToLocation,
                      ),
                      SizedBox(height: 2.h),
                      _buildFloatingButton(icon: Icons.add, onTap: _zoomIn),
                      SizedBox(height: 1.h),
                      _buildFloatingButton(icon: Icons.remove, onTap: _zoomOut),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }

  Widget _buildFloatingButton({
    required IconData icon,
    required VoidCallback onTap,
    Color iconColor = Colors.black87,
  }) {
    return Material(
      color: Colors.white,
      elevation: 4,
      borderRadius: BorderRadius.circular(2.w),
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(2.w),
        child: Container(
          width: 12.w,
          height: 12.w,
          child: Icon(icon, color: iconColor, size: 6.w),
        ),
      ),
    );
  }
}
