import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:lucide_icons/lucide_icons.dart';
import '../providers/theme_provider.dart';
import '../widgets/settings/app_settings_section.dart';
import '../widgets/settings/other_settings_section.dart';
import '../widgets/settings/backup_settings_section.dart';

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

  @override
  ConsumerState<ShopSettingsScreen> createState() => _ShopSettingsScreenState();
}

class _ShopSettingsScreenState extends ConsumerState<ShopSettingsScreen> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final userProfile = ref.watch(userProfileProvider);
    final isDark = Theme.of(context).brightness == Brightness.dark;

    return Scaffold(
      appBar: AppBar(
        title: const Text('店舗ページ'),
        centerTitle: true,
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          // Business Config Section
          _buildSectionHeader(context, '価格設定', LucideIcons.briefcase),
          Card(
            color: isDark ? const Color(0xFF1E1E1E) : null,
            child: ListTile(
              leading: Icon(LucideIcons.percent, color: isDark ? Colors.orange[300] : Theme.of(context).primaryColor),
              title: const Text('基本掛率'),
              trailing: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                   Text('×', style: TextStyle(
                     fontWeight: FontWeight.bold, 
                     fontSize: 16,
                     color: isDark ? Colors.grey[400] : Colors.grey[600],
                   )),
                   const SizedBox(width: 8),
                   Container(
                     padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
                     decoration: BoxDecoration(
                       color: isDark ? Colors.grey[800] : Colors.grey[100],
                       borderRadius: BorderRadius.circular(8),
                       border: Border.all(color: isDark ? Colors.grey[700]! : Colors.grey[300]!),
                     ),
                     child: DropdownButton<double>(
                       value: userProfile.defaultMarkup,
                       isDense: true,
                       underline: const SizedBox(),
                       items: List.generate(41, (index) {
                         final val = 1.0 + (index * 0.1);
                         return DropdownMenuItem(
                           value: double.parse(val.toStringAsFixed(1)),
                           child: Text(val.toStringAsFixed(1)),
                         );
                       }),
                       onChanged: (val) {
                         if (val != null) {
                           ref.read(userProfileProvider.notifier).setDefaultMarkup(val);
                         }
                       },
                     ),
                   ),
                ],
              ),
            ),
          ),
          const SizedBox(height: 24),

          // App Settings (Moved UP)
          const AppearanceSettingsSection(),
          const SizedBox(height: 24),

          // Other Settings (Renamed & Configured)
          const OtherSettingsSection(
            title: 'その他',
          ),
          
          const SizedBox(height: 24),
          const BackupSettingsSection(),
        ],
      ),
    );
  }

  Widget _buildSectionHeader(BuildContext context, String title, IconData icon) {
    final isDark = Theme.of(context).brightness == Brightness.dark;
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 4),
      child: Row(
        children: [
          Icon(icon, size: 20, color: isDark ? Colors.orange[300] : Theme.of(context).primaryColor),
          const SizedBox(width: 8),
          Text(
            title,
            style: Theme.of(context).textTheme.titleMedium?.copyWith(
              fontWeight: FontWeight.bold,
              color: isDark ? Colors.grey[300] : Theme.of(context).primaryColor,
            ),
          ),
        ],
      ),
    );
  }
}