import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../models/sake_item.dart';
import '../providers/sake_list_provider.dart';
import '../providers/menu_providers.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'menu_settings_screen.dart';
import '../widgets/sake_price_dialog.dart';
import '../widgets/step_indicator.dart';
import '../services/pricing_helper.dart';
import '../theme/app_theme.dart';

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

  @override
  ConsumerState<MenuPricingScreen> createState() => _MenuPricingScreenState();
}

class _MenuPricingScreenState extends ConsumerState<MenuPricingScreen> {
  // Local price state (銘柄ID → 価格)
  final Map<String, int?> _prices = {};
  // Local variants state (銘柄ID → バリエーションMap)
  final Map<String, Map<String, int>> _variants = {};

  @override
  void initState() {
    super.initState();
    // One-time hint for Exit button
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final prefs = SharedPreferences.getInstance();
      final shown = prefs.then((p) => p.getBool('business_mode_help_shown') ?? false);
      
      shown.then((hasShown) {
        if (!hasShown && mounted) {
           ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              content: const Text('右上の×でいつでも終了できます'),
              duration: const Duration(seconds: 3),
              action: SnackBarAction(
                label: 'OK',
                onPressed: () {},
              ),
            ),
          );
          prefs.then((p) => p.setBool('business_mode_help_shown', true));
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    // Initialize orderedIds if empty
    final orderedIds = ref.watch(menuOrderedIdsProvider);
    final selectedIds = ref.watch(selectedMenuSakeIdsProvider);
    final sakeListAsync = ref.watch(sakeListProvider);

    // Sync order with selection if needed
    // We use a post-frame callback or check during build to initialize if empty relative to selection
    // But modifying provider during build is bad.
    // Better to just derive the list for display if orderedIds is empty, 
    // AND initialize the provider when the user actually interacts (reorder) OR in initState.
    
    // Actually, we should initialize it in initState or via a ProviderListener.
    // Let's do it in the build via a microtask if empty, OR safer: in initState.
    
    // Get selected items in order
    final selectedItems = sakeListAsync.when(
      data: (list) {
         // Filter list first
         final selectedList = list.where((item) => selectedIds.contains(item.id)).toList();
         
         if (orderedIds.isNotEmpty) {
             final sakeMap = {for (var s in list) s.id: s};
             // Return ordered items + any new selected items appended at the end
             final orderedItems = orderedIds
                 .map((id) => sakeMap[id])
                 .whereType<SakeItem>()
                 .where((s) => selectedIds.contains(s.id))
                 .toList();
                 
             // Append any selected items that are NOT in orderedIds (newly selected)
             final orderedIdSet = orderedIds.toSet();
             final newItems = selectedList.where((s) => !orderedIdSet.contains(s.id));
             
             return [...orderedItems, ...newItems];
         } else {
            return selectedList;
         }
      },
      loading: () => <SakeItem>[],
      error: (_, __) => <SakeItem>[],
    );

    // Initialize prices from existing data
    for (var item in selectedItems) {
      if (!_prices.containsKey(item.id)) {
        // Use manualPrice or calculated price as initial value
        _prices[item.id] = item.userData.price;
      }
      if (!_variants.containsKey(item.id) && item.userData.priceVariants != null) {
        _variants[item.id] = Map.from(item.userData.priceVariants!);
      }
    }

    final setPricesCount = _prices.values.where((p) => p != null && p > 0).length;

    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: const StepIndicator(currentStep: 2, totalSteps: 3),
        centerTitle: true,
        actions: [
          IconButton(
            icon: const Icon(Icons.close),
            onPressed: () => _showExitDialog(context, ref),
            tooltip: '終了',
          ),
        ],
        bottom: PreferredSize(
          preferredSize: const Size.fromHeight(2),
          child: LinearProgressIndicator(
            value: 2 / 3, // Step 2 of 3 = 66%
            backgroundColor: Colors.grey[200],
            valueColor: const AlwaysStoppedAnimation<Color>(AppTheme.posimaiBlue),
            minHeight: 2,
          ),
        ),
      ),
      body: selectedItems.isEmpty
          ? const Center(child: Text('お酒が選択されていません'))
          : Column(
              children: [
                // ガイドバナー (銘柄選択画面と統一)
                Container(
                  padding: const EdgeInsets.all(12),
                  decoration: BoxDecoration(
                    color: Colors.blue.withOpacity(0.1),
                    border: Border(
                      bottom: BorderSide(color: Colors.blue.withOpacity(0.3)),
                    ),
                  ),
                  child: Row(
                    children: [
                      Icon(Icons.swap_vert, size: 20, color: Colors.blue[700]),
                      const SizedBox(width: 8),
                      Expanded(
                        child: Text(
                          'ドラッグして並び替え',
                          style: TextStyle(
                            color: Colors.blue[900],
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                      TextButton(
                        onPressed: () => _showBulkPriceDialog(selectedItems),
                        style: TextButton.styleFrom(
                          foregroundColor: AppTheme.posimaiBlue,
                          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 0),
                          minimumSize: Size.zero,
                          tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                        ),
                        child: const Text('一括設定', style: TextStyle(fontWeight: FontWeight.bold)),
                      ),
                    ],
                  ),
                ),

                // Scrollable List
                Expanded(
                  child: ReorderableListView.builder(
                    padding: const EdgeInsets.all(16),
                    itemCount: selectedItems.length,
                    onReorder: (int oldIndex, int newIndex) {
                      if (oldIndex < newIndex) {
                        newIndex -= 1;
                      }
                      
                      // CRITICALLY IMPORTANT:
                      // Ensure the provider is initialized with the current view's IDs before reordering
                      // if it was empty or out of sync.
                      final currentIds = selectedItems.map((s) => s.id).toList();
                      final notifier = ref.read(menuOrderedIdsProvider.notifier);
                      
                      // Check if we need to initialize or just reorder
                      // If the provider state suggests it's empty or mismatch, force init first.
                      if (ref.read(menuOrderedIdsProvider).isEmpty || ref.read(menuOrderedIdsProvider).length != currentIds.length) {
                         notifier.initialize(currentIds);
                      }

                      notifier.reorder(oldIndex, newIndex);
                    },
                    itemBuilder: (context, index) {
                      final sake = selectedItems[index];
                      // Wrap in Keyed Subtree via Container/Padding with Key
                      return Padding(
                        key: ValueKey(sake.id), // CRITICAL for ReorderableListView
                        padding: const EdgeInsets.only(bottom: 8),
                         child: _buildPriceCard(sake, index), // Pass index for potential future use or just context
                      );
                    },
                  ),
                ),

                // Bottom Action Bar (統一デザイン)
                SafeArea(
                  child: Container(
                    padding: const EdgeInsets.all(16),
                    decoration: BoxDecoration(
                      color: Theme.of(context).cardColor,
                      boxShadow: [
                        BoxShadow(
                          color: Colors.black.withOpacity(0.05),
                          blurRadius: 8,
                          offset: const Offset(0, -2),
                        ),
                      ],
                    ),
                    child: Row(
                      children: [
                        // 戻るボタン (左端)
                        SizedBox(
                          width: 56,
                          height: 56,
                          child: OutlinedButton(
                            onPressed: () => Navigator.pop(context),
                            style: OutlinedButton.styleFrom(
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(12),
                              ),
                              side: BorderSide(color: Colors.grey[300]!),
                              padding: EdgeInsets.zero,
                            ),
                            child: Icon(Icons.arrow_back, color: Colors.grey[700]),
                          ),
                        ),
                        const SizedBox(width: 12),

                        // 次へボタン (右側いっぱいに広がる)
                        Expanded(
                          child: SizedBox(
                            height: 56,
                            child: ElevatedButton.icon(
                              onPressed: setPricesCount == selectedItems.length
                                  ? () => _proceedToMenuSettings(selectedItems)
                                  : null,
                              style: ElevatedButton.styleFrom(
                                backgroundColor: AppTheme.posimaiBlue,
                                foregroundColor: Colors.white,
                                disabledBackgroundColor: Colors.grey[300],
                                disabledForegroundColor: Colors.grey[600],
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(12),
                                ),
                              ),
                              icon: const Icon(Icons.arrow_forward),
                              label: Text(
                                setPricesCount == selectedItems.length
                                    ? '表示設定'
                                    : '価格を設定してください',
                                style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
    );
  }

  Widget _buildPriceCard(SakeItem sake, int index) {
    // Check if already set in sake data (from previous menu)
    final existingPrice = sake.userData.price;
    final currentPrice = _prices[sake.id] ?? existingPrice;
    final hasPrice = currentPrice != null && currentPrice > 0;
    final variants = _variants[sake.id] ?? {};

    // Auto-load existing price if not yet set locally
    if (_prices[sake.id] == null && existingPrice != null) {
      _prices[sake.id] = existingPrice;
    }

    return Card(
      elevation: 2,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
        side: hasPrice
            ? BorderSide(color: Colors.green, width: 2) // Green for ready
            : const BorderSide(color: Colors.red, width: 2), // Red for missing
      ),
      child: InkWell(
        borderRadius: BorderRadius.circular(12),
        onTap: () => _showPriceDialog(sake),
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Sake Name
              Row(
                children: [
                   // Drag Handle
                  ReorderableDragStartListener(
                    index: index,
                    child: const Padding(
                      padding: EdgeInsets.only(right: 12, top: 4, bottom: 4),
                      child: Icon(Icons.drag_indicator, color: Colors.grey),
                    ),
                  ),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          sake.displayData.name,
                          style: Theme.of(context).textTheme.titleMedium?.copyWith(
                                fontWeight: FontWeight.bold,
                              ),
                        ),
                        if (sake.itemType != ItemType.set)
                        Text(
                          '${sake.displayData.brewery} / ${sake.displayData.prefecture}',
                          style: Theme.of(context).textTheme.bodySmall?.copyWith(
                                color: Colors.grey[600],
                              ),
                        ),
                      ],
                    ),
                  ),
                  Icon(
                    hasPrice ? Icons.check_circle : Icons.edit,
                    color: hasPrice ? Colors.green : Colors.grey,
                  ),
                ],
              ),
              const SizedBox(height: 12),

              // Price Display
              if (hasPrice) ...[
                Container(
                  padding: const EdgeInsets.all(12),
                  decoration: BoxDecoration(
                    color: Colors.grey.withOpacity(0.05),
                    borderRadius: BorderRadius.circular(8),
                    border: Border.all(color: Colors.grey.withOpacity(0.2)),
                  ),
                  child: variants.isEmpty
                      ? Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            const Text(
                              '一合',
                              style: TextStyle(fontSize: 14, color: Colors.grey),
                            ),
                            Text(
                              '${PricingHelper.formatPrice(currentPrice)}円',
                              style: const TextStyle(
                                fontSize: 16,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ],
                        )
                      : Column(
                          children: variants.entries.map((e) => Padding(
                            padding: const EdgeInsets.only(bottom: 6),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text(
                                  e.key,
                                  style: const TextStyle(fontSize: 14, color: Colors.grey),
                                ),
                                Text(
                                  '${PricingHelper.formatPrice(e.value)}円',
                                  style: const TextStyle(
                                    fontSize: 16,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ],
                            ),
                          )).toList(),
                        ),
                ),
              ] else ...[
                Container(
                  padding: const EdgeInsets.all(12),
                  decoration: BoxDecoration(
                    color: Colors.red.withOpacity(0.05),
                    borderRadius: BorderRadius.circular(8),
                    border: Border.all(color: Colors.red.withOpacity(0.3)),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(Icons.add_circle_outline, size: 20, color: Colors.red[700]),
                      const SizedBox(width: 8),
                      Text(
                        '価格を設定してください',
                        style: TextStyle(
                          color: Colors.red[700],
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ],
          ),
        ),
      ),
    );
  }

  /// 価格設定ダイアログを表示
  void _showPriceDialog(SakeItem sake) {
    showDialog(
      context: context,
      builder: (context) => SakePriceDialog(
        sakeItem: sake,
        onSave: (basePrice, variants) {
          setState(() {
            _prices[sake.id] = basePrice;
            _variants[sake.id] = variants;
          });
        },
      ),
    );
  }

  void _showBulkPriceDialog(List<SakeItem> items) {
    int? bulkPrice;
    bool overwriteVariants = false;

    // Count items with multiple size variants
    final variantsCount = items.where((item) {
      final variants = _variants[item.id];
      return variants != null && variants.isNotEmpty;
    }).length;

    showDialog(
      context: context,
      builder: (context) => StatefulBuilder(
        builder: (context, setDialogState) => AlertDialog(
          title: const Text('一括設定'),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              TextField(
                keyboardType: TextInputType.number,
                decoration: const InputDecoration(
                  labelText: '一合の税込価格',
                  hintText: '例: 1500',
                  suffixText: '円',
                  border: OutlineInputBorder(),
                ),
                autofocus: true,
                onChanged: (value) {
                  bulkPrice = int.tryParse(value);
                },
              ),
              if (variantsCount > 0) ...[
                const SizedBox(height: 16),
                Container(
                  padding: const EdgeInsets.all(12),
                  decoration: BoxDecoration(
                    color: Colors.orange.withValues(alpha: 0.1),
                    borderRadius: BorderRadius.circular(8),
                    border: Border.all(color: Colors.orange.withValues(alpha: 0.3)),
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        children: [
                          Icon(Icons.warning_amber, color: Colors.orange[700], size: 20),
                          const SizedBox(width: 8),
                          Expanded(
                            child: Text(
                              '提供サイズ設定済み: $variantsCount銘柄',
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                color: Colors.orange[900],
                              ),
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(height: 4),
                      InkWell(
                        onTap: () {
                          setDialogState(() {
                            overwriteVariants = !overwriteVariants;
                          });
                        },
                        child: Row(
                          children: [
                            SizedBox(
                              height: 24,
                              width: 24,
                              child: Checkbox(
                                value: overwriteVariants,
                                onChanged: (value) {
                                  setDialogState(() {
                                    overwriteVariants = value ?? false;
                                  });
                                },
                                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                                visualDensity: VisualDensity.compact,
                              ),
                            ),
                            const SizedBox(width: 8),
                            const Expanded(
                              child: Text(
                                '一合の税込価格で上書き',
                                style: TextStyle(fontSize: 14),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ],
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: const Text('キャンセル'),
            ),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: AppTheme.posimaiBlue,
                foregroundColor: Colors.white,
              ),
              onPressed: () {
                if (bulkPrice != null && bulkPrice! > 0) {
                  setState(() {
                    for (var item in items) {
                      final hasVariants = _variants[item.id] != null && _variants[item.id]!.isNotEmpty;

                      // Skip items with variants unless overwrite is checked
                      if (hasVariants && !overwriteVariants) {
                        continue;
                      }

                      _prices[item.id] = bulkPrice;

                      // Clear variants if overwriting
                      if (hasVariants && overwriteVariants) {
                        _variants[item.id] = {};
                      }
                    }
                  });
                  Navigator.pop(context);
                }
              },
              child: const Text('適用'),
            ),
          ],
        ),
      ),
    );
  }


  Future<void> _proceedToMenuSettings(List<SakeItem> items) async {
    // Save prices to Hive
    final box = Hive.box<SakeItem>('sake_items');

    for (var item in items) {
      final price = _prices[item.id];
      final variants = _variants[item.id];

      if (price != null && price > 0) {
        final newItem = item.copyWith(
          manualPrice: price,
          priceVariants: variants != null && variants.isNotEmpty ? variants : null,
          isUserEdited: true,
        );
        await box.put(item.key, newItem);
      }
    }

    if (!mounted) return;

    // Navigate to Menu Settings (simplified)
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const MenuSettingsScreen()),
    );
  }

  Future<void> _showExitDialog(BuildContext context, WidgetRef ref) async {
    final confirmed = await showDialog<bool>(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('お品書き作成を終了しますか？'),
        content: const Text('入力内容は保存されません。'),
        actions: [
          TextButton(
            child: const Text('キャンセル'),
            onPressed: () => Navigator.pop(context, false),
          ),
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              backgroundColor: AppTheme.posimaiBlue,
              foregroundColor: Colors.white,
            ),
            onPressed: () => Navigator.pop(context, true),
            child: const Text('終了'),
          ),
        ],
      ),
    );

    if (confirmed == true && context.mounted) {
      ref.read(menuModeProvider.notifier).set(false);
      ref.read(selectedMenuSakeIdsProvider.notifier).clear();
      Navigator.of(context).popUntil((route) => route.isFirst);
    }
  }
}