import 'package:flutter/material.dart';
import '../providers/app_state.dart';

class SettingsPage extends StatelessWidget {
  final AppState appState;

  const SettingsPage({super.key, required this.appState});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Settings')),
      body: ListView(
        children: [
          const SizedBox(height: 8),

          // ── Appearance ──────────────────────────────
          _sectionHeader('Appearance'),
          SwitchListTile(
            title: const Text('Dark Mode'),
            subtitle: const Text('Use dark theme with dark map tiles'),
            value: appState.darkMode,
            onChanged: (v) => appState.setDarkMode(v),
            secondary: Icon(
              appState.darkMode ? Icons.dark_mode : Icons.light_mode,
            ),
          ),

          const Divider(),

          // ── Map Style ───────────────────────────────
          _sectionHeader('Map Style'),
          _mapStyleTile(context, 'voyager', 'CartoDB Voyager',
              'Colorful, detailed map (recommended)', Icons.map),
          _mapStyleTile(context, 'osm', 'OpenStreetMap',
              'Standard OSM tiles', Icons.public),
          _mapStyleTile(context, 'positron', 'CartoDB Positron',
              'Clean, light minimal style', Icons.brightness_7),
          _mapStyleTile(context, 'dark', 'CartoDB Dark',
              'Dark map tiles', Icons.brightness_3),

          const Divider(),

          // ── About ───────────────────────────────────
          _sectionHeader('About'),
          const ListTile(
            leading: Icon(Icons.info_outline),
            title: Text('Delivery Route App'),
            subtitle: Text('Newspaper delivery route management'),
          ),
          const ListTile(
            leading: Icon(Icons.newspaper),
            title: Text('Supported Newspapers'),
            subtitle: Text('BN, AD, TEL, VK'),
          ),
        ],
      ),
    );
  }

  Widget _sectionHeader(String title) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(16, 16, 16, 4),
      child: Text(
        title,
        style: TextStyle(
          fontSize: 14,
          fontWeight: FontWeight.w600,
          color: Colors.blue[700],
        ),
      ),
    );
  }

  Widget _mapStyleTile(
    BuildContext context,
    String style,
    String title,
    String subtitle,
    IconData icon,
  ) {
    final isSelected = appState.mapStyle == style;
    return RadioListTile<String>(
      title: Text(title),
      subtitle: Text(subtitle),
      value: style,
      groupValue: appState.mapStyle,
      onChanged: (v) {
        if (v != null) appState.setMapStyle(v);
      },
      secondary: Icon(icon, color: isSelected ? Colors.blue : null),
      activeColor: Colors.blue,
    );
  }
}