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

import '../viewmodels/dev_menu_view_model.dart';

class DevMenuView extends StatefulWidget {
  const DevMenuView({super.key});

  @override
  State<DevMenuView> createState() => _DevMenuViewState();
}

class _DevMenuViewState extends State<DevMenuView> {
  DevMenuViewModel? _vm;

  @override
  void initState() {
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (!mounted) return;

      _vm = context.read<DevMenuViewModel>();
      _vm!.addListener(_onVmChange);
    });
  }

  void _onVmChange() {
    if (!mounted) return;

    final vm = _vm;
    if (vm == null) return;

    final message = vm.lastAction;
    if (message == null) return;

    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(message)),
    );
  }

  @override
  void dispose() {
    _vm?.removeListener(_onVmChange);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final vm = context.watch<DevMenuViewModel>();

    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          onPressed: () => context.pop(),
          icon: const Icon(Icons.arrow_back),
        ),
        title: const Text('Dev Menu'),
        centerTitle: true,
      ),
      body: ListView(
        padding: const EdgeInsets.symmetric(vertical: 12),
        children: [
          _Section(
            title: 'Data Management',
            children: [
              _Tile(
                icon: Icons.delete_sweep_rounded,
                title: 'Clear all open tabs',
                onTap: vm.isLoading ? null : () => vm.clearOpenTabs(),
              ),
              _Tile(
                icon: Icons.history_rounded,
                title: 'Clear closed tab history',
                onTap: vm.isLoading ? null : () => vm.clearClosedTabHistory(),
              ),
              _Tile(
                icon: Icons.inventory_2_rounded,
                title: 'Reset all stock',
                onTap: vm.isLoading ? null : () => vm.resetAllStock(),
              ),
              _Tile(
                icon: Icons.delete_forever_rounded,
                title: 'Clear all products',
                onTap: vm.isLoading ? null : () => vm.clearAllProducts(),
              ),
              _Tile(
                icon: Icons.add_box_rounded,
                title: 'Seed demo data',
                onTap: vm.isLoading ? null : () => vm.seedDemoData(),
              ),
            ],
          ),
          _Section(
            title: 'Debugging',
            children: [
              _Tile(
                icon: Icons.lock_reset_rounded,
                title: 'Reset PIN',
                subtitle: 'Remove PIN lock',
                onTap: vm.isLoading ? null : () => vm.resetPin(),
              ),
              _Tile(
                icon: Icons.bug_report_rounded,
                title: 'Toggle debug overlay',
                subtitle: 'Show FPS, memory, widget count',
                onTap: () => _showDebugOverlayInfo(),
              ),
              _Tile(
                icon: Icons.error_outline_rounded,
                title: 'Error screen',
                subtitle: 'View the error screen UI',
                onTap: () => context.push('/error'),
              ),
            ],
          ),
          _Section(
            title: 'Feature Toggles',
            children: [
              _Tile(
                icon: Icons.update_rounded,
                title: 'Mock update available',
                subtitle: 'Simulate OTA update dialog',
                onTap: () => _showMockUpdateDialog(),
              ),
            ],
          ),
          _Section(
            title: 'Testing Helpers',
            children: [
              _Tile(
                icon: Icons.receipt_long_rounded,
                title: 'Create test tab',
                subtitle: 'Add tab with random items',
                onTap: vm.isLoading ? null : () => vm.createTestTab(),
              ),
              _Tile(
                icon: Icons.grid_view_rounded,
                title: 'Add 100 test products',
                subtitle: 'Stress test product grid',
                onTap: vm.isLoading ? null : () => vm.addTestProducts(),
              ),
              _Tile(
                icon: Icons.warning_rounded,
                title: 'Simulate low stock',
                subtitle: 'Set all products below threshold',
                onTap: vm.isLoading ? null : () => vm.simulateLowStock(),
              ),
              _Tile(
                icon: Icons.history_rounded,
                title: 'Generate 100 mock orders',
                subtitle: 'Random customers, items, and amounts',
                onTap: vm.isLoading
                    ? null
                    : () => vm.generateMockOrders(count: 100),
              ),
            ],
          ),
          _Section(
            title: 'Performance',
            children: [
              _Tile(
                icon: Icons.image_rounded,
                title: 'Clear image cache',
                onTap: vm.isLoading ? null : () => vm.clearImageCache(),
              ),
              _Tile(
                icon: Icons.refresh_rounded,
                title: 'Reload product images',
                onTap: vm.isLoading ? null : () => vm.reloadProductImages(),
              ),
            ],
          ),
          if (vm.isLoading)
            const Padding(
              padding: EdgeInsets.all(20),
              child: Center(child: CircularProgressIndicator()),
            ),
        ],
      ),
    );
  }

  void _showDebugOverlayInfo() {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('Debug Overlay'),
        content: const Text(
          'The debug overlay shows FPS, memory usage, and widget counts. '
          'Enable it via Flutter DevTools in debug mode.',
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('OK'),
          ),
        ],
      ),
    );
  }

  void _showMockUpdateDialog() {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('Update available'),
        content: const Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Version 99.0.0 is available.'),
            SizedBox(height: 12),
            Text('Bug fixes and performance improvements.'),
          ],
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('Later'),
          ),
          FilledButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('Update'),
          ),
        ],
      ),
    );
  }
}

class _Section extends StatelessWidget {
  final String title;
  final List<Widget> children;

  const _Section({required this.title, required this.children});

  @override
  Widget build(BuildContext context) {
    final scheme = Theme.of(context).colorScheme;

    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title.toUpperCase(),
            style: TextStyle(
              fontSize: 12,
              fontWeight: FontWeight.w700,
              letterSpacing: 0.5,
              color: scheme.onSurface.withValues(alpha: 0.5),
            ),
          ),
          const SizedBox(height: 8),
          Container(
            decoration: BoxDecoration(
              color: scheme.onSurface.withValues(alpha: 0.04),
              borderRadius: BorderRadius.circular(14),
              border: Border.all(
                color: scheme.onSurface.withValues(alpha: 0.06),
              ),
            ),
            clipBehavior: Clip.antiAlias,
            child: Column(children: children),
          ),
        ],
      ),
    );
  }
}

class _Tile extends StatelessWidget {
  final IconData icon;
  final String title;
  final String? subtitle;
  final VoidCallback? onTap;

  const _Tile({
    required this.icon,
    required this.title,
    this.subtitle,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    final scheme = Theme.of(context).colorScheme;

    return Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: onTap,
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
          child: Row(
            children: [
              Icon(
                icon,
                size: 22,
                color: scheme.onSurface.withValues(alpha: 0.7),
              ),
              const SizedBox(width: 14),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      title,
                      style: TextStyle(
                        fontWeight: FontWeight.w600,
                        color: scheme.onSurface,
                      ),
                    ),
                    if (subtitle != null)
                      Text(
                        subtitle!,
                        style: Theme.of(context).textTheme.bodySmall?.copyWith(
                              color: scheme.onSurface.withValues(alpha: 0.5),
                            ),
                      ),
                  ],
                ),
              ),
              if (onTap != null)
                Icon(
                  Icons.chevron_right_rounded,
                  color: scheme.onSurface.withValues(alpha: 0.3),
                ),
            ],
          ),
        ),
      ),
    );
  }
}