import 'package:flutter/material.dart';

import 'drawing_controller.dart';
import 'paint_preset.dart';

/// A floating toolbar for drawing controls.
///
/// Provides quick access to:
/// - Paint presets (pens and markers)
/// - Undo/Redo buttons
class DrawingToolbar extends StatelessWidget {
  final DrawingController controller;
  final VoidCallback? onClose;

  const DrawingToolbar({
    super.key,
    required this.controller,
    this.onClose,
  });

  @override
  Widget build(BuildContext context) {
    return ListenableBuilder(
      listenable: controller,
      builder: (context, _) {
        return Container(
          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
          decoration: BoxDecoration(
            color: Theme.of(context).colorScheme.surface,
            borderRadius: BorderRadius.circular(24),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withValues(alpha: 0.2),
                blurRadius: 8,
                offset: const Offset(0, 2),
              ),
            ],
          ),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              // Paint presets
              ...PaintPreset.quickAccess.map((preset) => _buildPresetButton(
                    context,
                    preset,
                    isSelected: !controller.isEraserMode &&
                        controller.currentPreset == preset,
                  )),

              const SizedBox(width: 8),
              _buildDivider(context),
              const SizedBox(width: 8),

              // Eraser button
              _buildEraserButton(
                context,
                isSelected: controller.isEraserMode,
              ),

              const SizedBox(width: 8),
              _buildDivider(context),
              const SizedBox(width: 8),

              // Undo button
              _buildActionButton(
                context,
                icon: Icons.undo,
                onPressed: controller.canUndo ? controller.undo : null,
                tooltip: 'Undo',
              ),

              // Redo button
              _buildActionButton(
                context,
                icon: Icons.redo,
                onPressed: controller.canRedo ? controller.redo : null,
                tooltip: 'Redo',
              ),

              if (onClose != null) ...[
                const SizedBox(width: 8),
                _buildDivider(context),
                const SizedBox(width: 8),
                _buildActionButton(
                  context,
                  icon: Icons.close,
                  onPressed: onClose,
                  tooltip: 'Exit Drawing Mode',
                ),
              ],
            ],
          ),
        );
      },
    );
  }

  Widget _buildPresetButton(
    BuildContext context,
    PaintPreset preset, {
    required bool isSelected,
  }) {
    final isMarker = preset.strokeWidth > 0.01;
    final colorScheme = Theme.of(context).colorScheme;

    return Tooltip(
      message: preset.name,
      child: InkWell(
        onTap: () => controller.setPreset(preset),
        borderRadius: BorderRadius.circular(20),
        child: Container(
          width: 36,
          height: 36,
          margin: const EdgeInsets.symmetric(horizontal: 2),
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: isSelected
                ? Border.all(color: colorScheme.primary, width: 2)
                : null,
          ),
          child: Center(
            child: Container(
              width: isMarker ? 24 : 18,
              height: isMarker ? 12 : 18,
              decoration: BoxDecoration(
                color: preset.color,
                borderRadius: isMarker
                    ? BorderRadius.circular(2)
                    : BorderRadius.circular(9),
                border: preset.color.a < 1
                    ? Border.all(color: Colors.grey.shade400, width: 0.5)
                    : null,
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildEraserButton(
    BuildContext context, {
    required bool isSelected,
  }) {
    final colorScheme = Theme.of(context).colorScheme;

    return Tooltip(
      message: 'Eraser',
      child: InkWell(
        onTap: () => controller.setEraserMode(true),
        borderRadius: BorderRadius.circular(20),
        child: Container(
          width: 36,
          height: 36,
          margin: const EdgeInsets.symmetric(horizontal: 2),
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: isSelected
                ? Border.all(color: colorScheme.primary, width: 2)
                : null,
          ),
          child: Icon(
            Icons.auto_fix_high,
            size: 20,
            color: colorScheme.onSurface,
          ),
        ),
      ),
    );
  }

  Widget _buildActionButton(
    BuildContext context, {
    required IconData icon,
    required VoidCallback? onPressed,
    required String tooltip,
  }) {
    final colorScheme = Theme.of(context).colorScheme;

    return Tooltip(
      message: tooltip,
      child: InkWell(
        onTap: onPressed,
        borderRadius: BorderRadius.circular(20),
        child: Container(
          width: 36,
          height: 36,
          margin: const EdgeInsets.symmetric(horizontal: 2),
          child: Icon(
            icon,
            size: 20,
            color: onPressed != null
                ? colorScheme.onSurface
                : colorScheme.onSurface.withValues(alpha: 0.3),
          ),
        ),
      ),
    );
  }

  Widget _buildDivider(BuildContext context) {
    return Container(
      width: 1,
      height: 24,
      color: Theme.of(context).dividerColor,
    );
  }
}

/// A compact floating action button to toggle paint mode.
class DrawingModeButton extends StatelessWidget {
  final bool isActive;
  final VoidCallback onPressed;

  const DrawingModeButton({
    super.key,
    required this.isActive,
    required this.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton.small(
      onPressed: onPressed,
      backgroundColor: isActive
          ? Theme.of(context).colorScheme.primaryContainer
          : Theme.of(context).colorScheme.surface,
      child: Icon(
        isActive ? Icons.brush : Icons.brush_outlined,
        color: isActive
            ? Theme.of(context).colorScheme.onPrimaryContainer
            : Theme.of(context).colorScheme.onSurface,
      ),
    );
  }
}
