import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';

import '../../domain/models/floor_plan_mode.dart';
import '../../providers.dart';
import '../ble_provision/ble_provision_sheet.dart';
import 'widgets/konva_web_view.dart';

class FloorPlanScreen extends ConsumerStatefulWidget {
  const FloorPlanScreen({super.key});

  @override
  ConsumerState<FloorPlanScreen> createState() => _FloorPlanScreenState();
}

class _FloorPlanScreenState extends ConsumerState<FloorPlanScreen> {
  final _konvaKey = GlobalKey<KonvaWebViewState>();

  @override
  Widget build(BuildContext context) {
    final mode = ref.watch(floorPlanModeProvider);

    // TODO: forward live tag positions into the WebView.
    // ref.listen(tagPositionsProvider, (_, next) {
    //   next.whenData((positions) => _konvaKey.currentState?.updateTags(positions));
    // });

    // TODO: forward particle cloud updates into the WebView.
    // ref.listen(particleCloudProvider, (_, next) {
    //   next.whenData((particles) => _konvaKey.currentState?.updateParticleCloud(particles));
    // });

    // TODO: react to selectedSensorIdProvider and highlight sensor in WebView.
    // ref.listen(selectedSensorIdProvider, (_, id) {
    //   _konvaKey.currentState?.highlightSensor(id);
    // });

    return Scaffold(
      appBar: AppBar(
        title: const Text('Floor Plan'),
        actions: [
          IconButton(
            tooltip: mode == FloorPlanMode.edit ? 'View mode' : 'Edit mode',
            icon: Icon(
              mode == FloorPlanMode.edit ? Icons.visibility : Icons.edit,
            ),
            onPressed: () {
              final next = mode == FloorPlanMode.edit
                  ? FloorPlanMode.view
                  : FloorPlanMode.edit;
              ref.read(floorPlanModeProvider.notifier).state = next;
              _konvaKey.currentState?.setMode(next);
            },
          ),
        ],
      ),
      body: KonvaWebView(
        key: _konvaKey,
        mode: mode,
        onSensorTapped: (id) {
          ref.read(selectedSensorIdProvider.notifier).state = id;
          // TODO: optionally navigate to sensor detail or show tooltip.
        },
        onSensorMoved: (id, position) {
          // TODO: persist new position via sensorRepositoryProvider.
        },
      ),
      floatingActionButton: mode == FloorPlanMode.edit
          ? FloatingActionButton.extended(
              icon: const Icon(Icons.add),
              label: const Text('Add sensor'),
              onPressed: () => showModalBottomSheet<void>(
                context: context,
                isScrollControlled: true,
                builder: (_) => const BleProvisionSheet(),
              ),
            )
          : null,
    );
  }
}