import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';


import 'package:core_localization/core_localization.dart';

/// Toggle widget for auto-match feature, using design system tokens.
class AutoMatchToggle extends StatefulWidget {
  /// Whether auto-match is enabled.
  final bool enabled;
  /// Callback when toggled.
  final ValueChanged<bool> onToggle;

  /// Creates an [AutoMatchToggle].
  const AutoMatchToggle({super.key, required this.enabled, required this.onToggle});

  @override
  State<AutoMatchToggle> createState() => _AutoMatchToggleState();
}

class _AutoMatchToggleState extends State<AutoMatchToggle>
    with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    final i18n = t.staff.home.auto_match;
    return AnimatedContainer(
      duration: const Duration(milliseconds: 300),
      padding: const EdgeInsets.all(UiConstants.space4),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(UiConstants.radiusBase),
        gradient: widget.enabled
            ? LinearGradient(
                colors: [
                  UiColors.primary,
                  UiColors.primary.withValues(alpha: 0.8),
                ],
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
              )
            : null,
        color: widget.enabled ? null : UiColors.white,
        border:
            widget.enabled ? null : Border.all(color: UiColors.border),
        boxShadow: widget.enabled
            ? [
                BoxShadow(
                  color: UiColors.primary.withValues(alpha: 0.3),
                  blurRadius: 10,
                  offset: const Offset(0, 4),
                ),
              ]
            : null,
      ),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Container(
                    width: UiConstants.space10,
                    height: UiConstants.space10,
                    decoration: BoxDecoration(
                      color: widget.enabled
                          ? UiColors.white.withValues(alpha: 0.2)
                          : UiColors.primary.withValues(alpha: 0.1),
                      borderRadius:
                          BorderRadius.circular(UiConstants.radiusBase),
                    ),
                    child: Icon(
                      UiIcons.zap,
                      color: widget.enabled ? UiColors.white : UiColors.primary,
                      size: 20,
                    ),
                  ),
                  const SizedBox(width: UiConstants.space3),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        i18n.title,
                        style: UiTypography.body1b.copyWith(
                          color: widget.enabled
                              ? UiColors.white
                              : UiColors.textPrimary,
                        ),
                      ),
                      Text(
                        widget.enabled ? i18n.finding_shifts : i18n.get_matched,
                        style: UiTypography.body3r.copyWith(
                          color: widget.enabled
                              ? UiColors.accent
                              : UiColors.textInactive,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
              Switch(
                value: widget.enabled,
                onChanged: widget.onToggle,
                activeThumbColor: UiColors.white,
                activeTrackColor: UiColors.white.withValues(alpha: 0.3),
                inactiveThumbColor: UiColors.white,
                inactiveTrackColor: UiColors.border,
              ),
            ],
          ),
          AnimatedSize(
            duration: const Duration(milliseconds: 300),
            child: widget.enabled
                ? Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const SizedBox(height: UiConstants.space4),
                      Container(
                        height: 1,
                        color: UiColors.white.withValues(alpha: 0.2),
                      ),
                      const SizedBox(height: UiConstants.space4),
                      Text(
                        i18n.matching_based_on,
                        style: UiTypography.body3r.copyWith(
                          color: UiColors.accent,
                        ),
                      ),
                      const SizedBox(height: UiConstants.space3),
                      Wrap(
                        spacing: 8,
                        children: [
                          _buildChip(UiIcons.mapPin, i18n.chips.location),
                          _buildChip(
                            UiIcons.clock,
                            i18n.chips.availability,
                          ),
                          _buildChip(UiIcons.briefcase, i18n.chips.skills),
                        ],
                      ),
                    ],
                  )
                : const SizedBox.shrink(),
          ),
        ],
      ),
    );
  }

  Widget _buildChip(IconData icon, String label) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
      decoration: BoxDecoration(
        color: UiColors.white.withValues(alpha: 0.2),
        borderRadius: BorderRadius.circular(UiConstants.radiusMdValue),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(icon, size: 12, color: UiColors.white),
          const SizedBox(width: 4),
          Text(
            label,
            style: UiTypography.body3r.white,
          ),
        ],
      ),
    );
  }
}
