import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.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;
    final Color primary = Theme.of(context).colorScheme.primary;
    return AnimatedContainer(
      duration: const Duration(milliseconds: 300),
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16),
        gradient: widget.enabled
            ? LinearGradient(
                colors: [primary, primary.withOpacity(0.8)],
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
              )
            : null,
        color: widget.enabled ? null : Colors.white,
        border: widget.enabled ? null : Border.all(color: Colors.grey.shade200),
        boxShadow: widget.enabled
            ? [
                BoxShadow(
                  color: primary.withOpacity(0.3),
                  blurRadius: 10,
                  offset: const Offset(0, 4),
                ),
              ]
            : null,
      ),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Container(
                    width: 40,
                    height: 40,
                    decoration: BoxDecoration(
                      color: widget.enabled
                          ? Colors.white.withOpacity(0.2)
                          : primary.withOpacity(0.1),
                      borderRadius: BorderRadius.circular(12),
                    ),
                    child: Icon(
                      LucideIcons.zap,
                      color: widget.enabled ? Colors.white : primary,
                      size: 20,
                    ),
                  ),
                  const SizedBox(width: 12),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        i18n.title,
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: widget.enabled ? Colors.white : const Color(0xFF0F172A),
                        ),
                      ),
                      Text(
                        widget.enabled ? i18n.finding_shifts : i18n.get_matched,
                        style: TextStyle(
                          fontSize: 12,
                          color: widget.enabled ? const Color(0xFFF8E08E) : Colors.grey.shade500,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
              Switch(
                value: widget.enabled,
                onChanged: widget.onToggle,
                activeThumbColor: Colors.white,
                activeTrackColor: Colors.white.withValues(alpha: 0.3),
                inactiveThumbColor: Colors.white,
                inactiveTrackColor: Colors.grey.shade300,
              ),
            ],
          ),
          AnimatedSize(
            duration: const Duration(milliseconds: 300),
            child: widget.enabled
                ? Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const SizedBox(height: 16),
                      Container(
                        height: 1,
                        color: Colors.white.withValues(alpha: 0.2),
                      ),
                      const SizedBox(height: 16),
                      Text(
                        i18n.matching_based_on,
                        style: const TextStyle(
                          color: Color(0xFFF8E08E),
                          fontSize: 12,
                        ),
                      ),
                      const SizedBox(height: 12),
                      Wrap(
                        spacing: 8,
                        children: [
                          _buildChip(LucideIcons.mapPin, i18n.chips.location),
                          _buildChip(
                            LucideIcons.clock,
                            i18n.chips.availability,
                          ),
                          _buildChip(LucideIcons.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: Colors.white.withValues(alpha: 0.2),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(icon, size: 12, color: Colors.white),
          const SizedBox(width: 4),
          Text(
            label,
            style: const TextStyle(color: Colors.white, fontSize: 12),
          ),
        ],
      ),
    );
  }
}
