import 'package:flutter/material.dart';

import '../theme/app_theme.dart';

/// Row of command buttons: Screen, Navigate, Photo, Clear (+ Help in text mode).
class CommandBar extends StatelessWidget {
  final VoidCallback onScreen;
  final VoidCallback onNavigate;
  final VoidCallback onPhoto;
  final VoidCallback onClear;
  final VoidCallback? onHelp;
  final bool showHelp;

  const CommandBar({
    super.key,
    required this.onScreen,
    required this.onNavigate,
    required this.onPhoto,
    required this.onClear,
    this.onHelp,
    this.showHelp = false,
  });

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

    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
      decoration: BoxDecoration(
        color: isDark ? AppColors.darkSurface : AppColors.lightSurface,
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          _CommandButton(
            icon: Icons.screenshot_monitor,
            label: 'Screen',
            onTap: onScreen,
          ),
          _CommandButton(
            icon: Icons.explore,
            label: 'Navigate',
            onTap: onNavigate,
          ),
          _CommandButton(
            icon: Icons.attach_file,
            label: 'Attach',
            onTap: onPhoto,
          ),
          _CommandButton(
            icon: Icons.delete_sweep,
            label: 'Clear',
            onTap: onClear,
          ),
          if (showHelp && onHelp != null)
            _CommandButton(
              icon: Icons.help_outline,
              label: 'Help',
              onTap: onHelp!,
            ),
        ],
      ),
    );
  }
}

class _CommandButton extends StatelessWidget {
  final IconData icon;
  final String label;
  final VoidCallback onTap;

  const _CommandButton({
    required this.icon,
    required this.label,
    required this.onTap,
  });

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

    return InkWell(
      onTap: onTap,
      borderRadius: BorderRadius.circular(8),
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(
              icon,
              size: 22,
              color: isDark ? AppColors.darkTextSecondary : AppColors.lightTextSecondary,
            ),
            const SizedBox(height: 2),
            Text(
              label,
              style: TextStyle(
                fontSize: 10,
                color: isDark ? AppColors.darkTextTertiary : Colors.grey.shade600,
              ),
            ),
          ],
        ),
      ),
    );
  }
}