import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:aesthetica_wallpaper/providers/editor_provider.dart';

// -------------------------------------
// --- 4. Editor Controls (EditorControls) ---
// -------------------------------------
class EditorControls extends StatelessWidget {
  const EditorControls({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Colors.grey[900]!, Colors.grey[850]!],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
        ),
      ),
      child: Column(
        children: [
          // Top decoration bar
          Container(
            width: 50,
            height: 3,
            margin: const EdgeInsets.only(
              top: 6,
              bottom: 8,
            ), // Further reduced margins
            decoration: BoxDecoration(
              color: Colors.grey[600],
              borderRadius: BorderRadius.circular(2),
            ),
          ),
          // Display all controls directly, no tabs
          Expanded(
            child: Container(
              padding: const EdgeInsets.symmetric(
                horizontal: 16,
              ), // Reduced horizontal padding
              child: Consumer<EditorProvider>(
                builder: (context, provider, child) {
                  return ListView(
                    children: [
                      // Color controls
                      _buildSlider(
                        context,
                        label: 'Brightness',
                        value: provider.currentRecipe.brightness,
                        min: -1.0,
                        max: 1.0,
                        onChanged: (val) => provider.setBrightness(val),
                        icon: Icons.brightness_6,
                        color: Colors.yellow,
                      ),
                      _buildSlider(
                        context,
                        label: 'Contrast',
                        value: provider.currentRecipe.contrast,
                        min: 0.0,
                        max: 4.0,
                        onChanged: (val) => provider.setContrast(val),
                        icon: Icons.contrast,
                        color: Colors.orange,
                      ),
                      _buildSlider(
                        context,
                        label: 'Saturation',
                        value: provider.currentRecipe.saturation,
                        min: 0.0,
                        max: 4.0,
                        onChanged: (val) => provider.setSaturation(val),
                        icon: Icons.palette,
                        color: Colors.pink,
                      ),
                      // Filter controls
                      _buildSlider(
                        context,
                        label: 'Blur',
                        value: provider.currentRecipe.blur,
                        min: 0.0,
                        max: 20.0,
                        onChanged: (val) => provider.setBlur(val),
                        icon: Icons.blur_on,
                        color: Colors.blue,
                      ),
                    ],
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }

  // Helper Widget for creating standard sliders
  Widget _buildSlider(
    BuildContext context, {
    required String label,
    required double value,
    required double min,
    required double max,
    int? divisions,
    required ValueChanged<double> onChanged,
    IconData? icon,
    Color? color,
  }) {
    final accentColor = color ?? Colors.pinkAccent;

    return Container(
      margin: const EdgeInsets.only(
        bottom: 10,
      ), // Further reduced from 16 to 10
      padding: const EdgeInsets.all(8), // Further reduced from 12 to 8
      decoration: BoxDecoration(
        color: Colors.grey[850],
        borderRadius: BorderRadius.circular(10), // Reduced corner radius
        border: Border.all(color: accentColor.withValues(alpha: 0.3), width: 1),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  if (icon != null) ...[
                    Container(
                      padding: const EdgeInsets.all(
                        3,
                      ), // Further reduced icon container
                      decoration: BoxDecoration(
                        color: accentColor.withValues(alpha: 0.2),
                        borderRadius: BorderRadius.circular(5),
                      ),
                      child: Icon(
                        icon,
                        color: accentColor,
                        size: 12,
                      ), // Further reduced icon size
                    ),
                    const SizedBox(width: 6), // Further reduced spacing
                  ],
                  Text(
                    label,
                    style: const TextStyle(
                      fontSize: 13, // Further reduced font size
                      fontWeight: FontWeight.w600,
                      color: Colors.white,
                    ),
                  ),
                ],
              ),
              Container(
                padding: const EdgeInsets.symmetric(
                  horizontal: 6, // Further reduced padding
                  vertical: 3,
                ),
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      accentColor.withValues(alpha: 0.8),
                      accentColor.withValues(alpha: 0.6),
                    ],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                  ),
                  borderRadius: BorderRadius.circular(
                    6,
                  ), // Reduced corner radius
                  boxShadow: [
                    BoxShadow(
                      color: accentColor.withValues(alpha: 0.3),
                      blurRadius: 2, // Further reduced shadow
                      offset: const Offset(0, 1),
                    ),
                  ],
                ),
                child: Text(
                  value.toStringAsFixed(1),
                  style: const TextStyle(
                    fontSize: 11, // Further reduced font size
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: 4), // Further reduced spacing from 8 to 4
          SliderTheme(
            data: SliderTheme.of(context).copyWith(
              activeTrackColor: accentColor,
              inactiveTrackColor: Colors.grey[700],
              thumbColor: accentColor,
              overlayColor: accentColor.withValues(alpha: 0.2),
              thumbShape: const RoundSliderThumbShape(
                enabledThumbRadius: 6, // Further reduced thumb size
              ),
              trackHeight: 3, // Further reduced track height
              overlayShape: const RoundSliderOverlayShape(
                overlayRadius: 12, // Further reduced overlay
              ),
            ),
            child: Slider(
              value: value,
              min: min,
              max: max,
              divisions: divisions,
              onChanged: onChanged,
            ),
          ),
        ],
      ),
    );
  }
}