import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:lucide_icons/lucide_icons.dart';
import '../providers/ui_experiment_provider.dart';

class DevMenuScreen extends ConsumerWidget {
  const DevMenuScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final experiment = ref.watch(uiExperimentProvider);
    
    return Scaffold(
      appBar: AppBar(
        title: const Text('🔬 開発者メニュー'),
      ),
      body: ListView(
        children: [
          const ListTile(
            leading: Icon(LucideIcons.flaskConical),
            title: Text('UI実験'),
            subtitle: Text('新しいデザインのテスト'),
          ),
          Card(
            margin: const EdgeInsets.all(16),
            child: Column(
              children: [
                SwitchListTile(
                  secondary: const Text('📱', style: TextStyle(fontSize: 24)),
                  title: const Text('グリッド3列表示'),
                  subtitle: Text('瓶型の縦長カード (現在: ${experiment.gridColumns}列)'),
                  value: experiment.gridColumns == 3,
                  onChanged: (val) => ref.read(uiExperimentProvider.notifier)
                      .setGridColumns(val ? 3 : 2),
                ),
                const Divider(),
                SwitchListTile(
                  secondary: const Text('✨', style: TextStyle(fontSize: 24)),
                  title: const Text('FABバウンス'),
                  subtitle: Text('ぷるんとした動き (現在: ${experiment.fabAnimation == 'bounce' ? 'ON' : 'OFF'})'),
                  value: experiment.fabAnimation == 'bounce',
                  onChanged: (val) => ref.read(uiExperimentProvider.notifier)
                      .setFabAnimation(val ? 'bounce' : 'rotate'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}