import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:provider/provider.dart';
import '/core/theme_manager.dart';
import 'dart:io';

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

  @override
  State<AppearanceSettingsScreen> createState() => _AppearanceSettingsScreenState();
}

class _AppearanceSettingsScreenState extends State<AppearanceSettingsScreen> {
  final ImagePicker _picker = ImagePicker();

  Future<void> _pickWallpaper() async {
    final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
    if (image != null) {
      context.read<ThemeProvider>().updateWallpaper(image.path);
    }
  }

  @override
  Widget build(BuildContext context) {
    final themeProv = context.watch<ThemeProvider>();
    final colorScheme = Theme.of(context).colorScheme;

    return Scaffold(
      backgroundColor: colorScheme.background,
      appBar: AppBar(
        title: Text("Оформление", style: TextStyle(fontWeight: FontWeight.bold, color: Theme.of(context).colorScheme.onSurface)),
        elevation: 0,
        backgroundColor: Colors.transparent,
        iconTheme: IconThemeData(color: Theme.of(context).colorScheme.onSurface),
      ),
      body: ListView(
        physics: const BouncingScrollPhysics(),
        padding: const EdgeInsets.all(16),
        children: [
          // Ночной режим
          Container(
            decoration: BoxDecoration(
              color: colorScheme.surfaceVariant.withOpacity(0.2),
              borderRadius: BorderRadius.circular(20),
            ),
            child: SwitchListTile(
              contentPadding: const EdgeInsets.symmetric(horizontal: 20),
              secondary: Icon(Icons.dark_mode_rounded, color: colorScheme.primary),
              title: const Text("Ночной режим", style: TextStyle(fontWeight: FontWeight.w600)),
              value: themeProv.themeMode == ThemeMode.dark,
              onChanged: (val) => themeProv.toggleTheme(val),
            ),
          ),
          const SizedBox(height: 20),

          // Цветовые акценты темы
          Container(
            padding: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: colorScheme.surfaceVariant.withOpacity(0.2),
              borderRadius: BorderRadius.circular(24),
              border: Border.all(color: colorScheme.outlineVariant.withOpacity(0.1)),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Icon(Icons.palette_outlined, color: colorScheme.primary, size: 22),
                    const SizedBox(width: 12),
                    const Text("Цвет интерфейса", style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600)),
                  ],
                ),
                const SizedBox(height: 16),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    _colorCircle(const Color(0xFF24A1DE), themeProv),
                    _colorCircle(const Color(0xFF3E8E7E), themeProv),
                    _colorCircle(const Color(0xFF8E3E7E), themeProv),
                    _colorCircle(const Color(0xFFFF9800), themeProv),
                    _colorCircle(const Color(0xFFF44336), themeProv),
                  ],
                ),
              ],
            ),
          ),
          const SizedBox(height: 20),

          // Обои чата
          Container(
            decoration: BoxDecoration(
              color: colorScheme.surfaceVariant.withOpacity(0.2),
              borderRadius: BorderRadius.circular(24),
            ),
            child: Column(
              children: [
                ListTile(
                  contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 4),
                  leading: Icon(Icons.wallpaper_rounded, color: colorScheme.primary),
                  title: const Text('Обои чата', style: TextStyle(fontWeight: FontWeight.w600)),
                  subtitle: const Text('Установить фоновое изображение'),
                  trailing: Icon(Icons.chevron_right_rounded, color: colorScheme.outline),
                  onTap: _pickWallpaper,
                ),
                if (themeProv.wallpaperPath != null) ...[
                  Padding(
                    padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(16),
                      child: Stack(
                        alignment: Alignment.bottomRight,
                        children: [
                          Container(
                            height: 160,
                            width: double.infinity,
                            decoration: BoxDecoration(
                              image: DecorationImage(
                                image: FileImage(File(themeProv.wallpaperPath!)),
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: IconButton.filled(
                              color: colorScheme.error,
                              icon: const Icon(Icons.delete_outline_rounded, color: Colors.white),
                              onPressed: () => themeProv.updateWallpaper(null),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ],
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _colorCircle(Color color, ThemeProvider prov) {
    bool isSelected = prov.accentColor == color;
    return GestureDetector(
      onTap: () => prov.updateAccentColor(color),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 200),
        padding: const EdgeInsets.all(3),
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          border: Border.all(color: isSelected ? color : Colors.transparent, width: 2),
        ),
        child: CircleAvatar(backgroundColor: color, radius: 16),
      ),
    );
  }
}