jiu/client/lib/widgets/multi_select_dropdown.dart

import 'package:flutter/material.dart';
import '../core/theme/app_theme.dart';

/// Compact button → dialog with checkboxes for multi-select filtering
class MultiSelectDropdown extends StatelessWidget {
  final String label;
  final List<String> options;
  final Set<String> selected;
  final ValueChanged<Set<String>> onChanged;

  const MultiSelectDropdown({
    super.key,
    required this.label,
    required this.options,
    required this.selected,
    required this.onChanged,
  });

  @override
  Widget build(BuildContext context) {
    final active = selected.isNotEmpty;
    return OutlinedButton(
      onPressed: options.isEmpty ? null : () => _show(context),
      style: OutlinedButton.styleFrom(
        foregroundColor: active ? AppTheme.primary : AppTheme.textSecondary,
        side: BorderSide(color: active ? AppTheme.primary : AppTheme.border),
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
        minimumSize: Size.zero,
        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          const Icon(Icons.filter_list, size: 13),
          const SizedBox(width: 4),
          Text(
            active ? '$label (${selected.length})' : label,
            style: const TextStyle(fontSize: 12),
          ),
          if (active) ...[
            const SizedBox(width: 4),
            GestureDetector(
              onTap: () => onChanged({}),
              child: const Icon(Icons.close, size: 12),
            ),
          ],
        ],
      ),
    );
  }

  void _show(BuildContext context) {
    showDialog(
      context: context,
      barrierColor: Colors.black12,
      builder: (_) => _MultiSelectDialog(
        label: label,
        options: options,
        initial: selected,
        onApply: onChanged,
      ),
    );
  }
}

class _MultiSelectDialog extends StatefulWidget {
  final String label;
  final List<String> options;
  final Set<String> initial;
  final ValueChanged<Set<String>> onApply;

  const _MultiSelectDialog({
    required this.label,
    required this.options,
    required this.initial,
    required this.onApply,
  });

  @override
  State<_MultiSelectDialog> createState() => _MultiSelectDialogState();
}

class _MultiSelectDialogState extends State<_MultiSelectDialog> {
  late Set<String> _selected;

  @override
  void initState() {
    super.initState();
    _selected = Set.from(widget.initial);
  }

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text(widget.label, style: const TextStyle(fontSize: 15)),
      contentPadding: const EdgeInsets.fromLTRB(16, 8, 16, 0),
      content: SizedBox(
        width: 220,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Row(children: [
              TextButton(
                onPressed: () =>
                    setState(() => _selected = Set.from(widget.options)),
                child: const Text('全选', style: TextStyle(fontSize: 12)),
              ),
              TextButton(
                onPressed: () => setState(() => _selected = {}),
                child: const Text('清空', style: TextStyle(fontSize: 12)),
              ),
            ]),
            const Divider(height: 1),
            ...widget.options.map((opt) => CheckboxListTile(
                  title: Text(opt, style: const TextStyle(fontSize: 13)),
                  value: _selected.contains(opt),
                  dense: true,
                  onChanged: (v) => setState(() {
                    if (v == true) {
                      _selected.add(opt);
                    } else {
                      _selected.remove(opt);
                    }
                  }),
                )),
          ],
        ),
      ),
      actions: [
        TextButton(
          onPressed: () => Navigator.of(context).pop(),
          child: const Text('取消'),
        ),
        ElevatedButton(
          onPressed: () {
            widget.onApply(_selected);
            Navigator.of(context).pop();
          },
          child: const Text('应用'),
        ),
      ],
    );
  }
}

/// Column header widget that shows a filter icon on hover.
/// Clicking the icon opens the same multi-select dialog as [MultiSelectDropdown].
/// Use as [DataColumn.label] for filterable columns.
class FilterableColumnHeader extends StatefulWidget {
  final String text;
  final List<String> options;
  final Set<String> selected;
  final ValueChanged<Set<String>> onChanged;

  const FilterableColumnHeader({
    super.key,
    required this.text,
    required this.options,
    required this.selected,
    required this.onChanged,
  });

  @override
  State<FilterableColumnHeader> createState() => _FilterableColumnHeaderState();
}

class _FilterableColumnHeaderState extends State<FilterableColumnHeader> {
  bool _hovered = false;

  @override
  Widget build(BuildContext context) {
    final active = widget.selected.isNotEmpty;
    final showIcon = _hovered || active;

    return MouseRegion(
      onEnter: (_) => setState(() => _hovered = true),
      onExit: (_) => setState(() => _hovered = false),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(widget.text),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              AnimatedOpacity(
                opacity: showIcon ? 1.0 : 0.0,
                duration: const Duration(milliseconds: 120),
                child: InkWell(
                  onTap: widget.options.isEmpty ? null : () => _show(context),
                  borderRadius: BorderRadius.circular(4),
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 3),
                    child: Icon(
                      active ? Icons.filter_alt : Icons.filter_alt_outlined,
                      size: 16,
                      color: active ? AppTheme.primary : AppTheme.textSecondary,
                    ),
                  ),
                ),
              ),
              if (active)
                InkWell(
                  onTap: () => widget.onChanged({}),
                  borderRadius: BorderRadius.circular(4),
                  child: const Icon(Icons.cancel, size: 14,
                      color: AppTheme.primary),
                ),
            ],
          ),
        ],
      ),
    );
  }

  void _show(BuildContext context) {
    showDialog(
      context: context,
      barrierColor: Colors.black12,
      builder: (_) => _MultiSelectDialog(
        label: widget.text,
        options: widget.options,
        initial: widget.selected,
        onApply: widget.onChanged,
      ),
    );
  }
}

/// Column definition for column visibility toggle
class ColDef {
  final String key;
  final String label;
  final bool required; // if true, cannot be hidden
  /// Screen width below which this column is automatically hidden
  final double? minWidth;

  const ColDef(this.key, this.label, {this.required = false, this.minWidth});
}

/// Button that lets users toggle column visibility
class ColumnToggleButton extends StatelessWidget {
  final List<ColDef> columns;
  final Set<String> hidden;
  final ValueChanged<Set<String>> onChanged;

  const ColumnToggleButton({
    super.key,
    required this.columns,
    required this.hidden,
    required this.onChanged,
  });

  @override
  Widget build(BuildContext context) {
    return OutlinedButton(
      onPressed: () => _show(context),
      style: OutlinedButton.styleFrom(
        foregroundColor: AppTheme.textSecondary,
        side: const BorderSide(color: AppTheme.border),
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
        minimumSize: Size.zero,
        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
      ),
      child: const Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(Icons.view_column_outlined, size: 13),
          SizedBox(width: 4),
          Text('显示字段', style: TextStyle(fontSize: 12)),
        ],
      ),
    );
  }

  void _show(BuildContext context) {
    showDialog(
      context: context,
      barrierColor: Colors.black12,
      builder: (_) => _ColumnToggleDialog(
        columns: columns,
        initial: hidden,
        onApply: onChanged,
      ),
    );
  }
}

class _ColumnToggleDialog extends StatefulWidget {
  final List<ColDef> columns;
  final Set<String> initial;
  final ValueChanged<Set<String>> onApply;

  const _ColumnToggleDialog({
    required this.columns,
    required this.initial,
    required this.onApply,
  });

  @override
  State<_ColumnToggleDialog> createState() => _ColumnToggleDialogState();
}

class _ColumnToggleDialogState extends State<_ColumnToggleDialog> {
  late Set<String> _hidden;

  @override
  void initState() {
    super.initState();
    _hidden = Set.from(widget.initial);
  }

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: const Text('显示字段', style: TextStyle(fontSize: 15)),
      contentPadding: const EdgeInsets.fromLTRB(16, 8, 16, 0),
      content: SizedBox(
        width: 220,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: widget.columns
              .map((col) => CheckboxListTile(
                    title: Text(col.label,
                        style: const TextStyle(fontSize: 13)),
                    value: !_hidden.contains(col.key),
                    dense: true,
                    onChanged: col.required
                        ? null // required columns cannot be hidden
                        : (v) => setState(() {
                              if (v == true) {
                                _hidden.remove(col.key);
                              } else {
                                _hidden.add(col.key);
                              }
                            }),
                  ))
              .toList(),
        ),
      ),
      actions: [
        TextButton(
          onPressed: () => Navigator.of(context).pop(),
          child: const Text('取消'),
        ),
        ElevatedButton(
          onPressed: () {
            widget.onApply(_hidden);
            Navigator.of(context).pop();
          },
          child: const Text('应用'),
        ),
      ],
    );
  }
}