// Capability picker — modal dialog for choosing which
// capability a new step should use. Studio provides the
// list (it lives on the hub); the picker is a thin
// searchable list on top.

import 'package:flutter/material.dart';

import '../l10n.dart';
import '../tokens.dart';

class CapabilityPicker extends StatefulWidget {
  final List<String> capabilities;
  final FlowEditorStrings strings;
  const CapabilityPicker({
    super.key,
    required this.capabilities,
    required this.strings,
  });

  static Future<String?> show(
    BuildContext context, {
    required List<String> capabilities,
    required FlowEditorStrings strings,
  }) {
    return showDialog<String>(
      context: context,
      builder: (_) =>
          CapabilityPicker(capabilities: capabilities, strings: strings),
    );
  }

  @override
  State<CapabilityPicker> createState() => _CapabilityPickerState();
}

class _CapabilityPickerState extends State<CapabilityPicker> {
  String _query = '';

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final filtered = _query.isEmpty
        ? widget.capabilities
        : widget.capabilities
              .where((c) => c.toLowerCase().contains(_query.toLowerCase()))
              .toList();
    return Dialog(
      child: SizedBox(
        width: 480,
        height: 520,
        child: Padding(
          padding: const EdgeInsets.all(FaiSpace.md),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Text(
                widget.strings.pickerTitle,
                style: theme.textTheme.titleMedium,
              ),
              const SizedBox(height: FaiSpace.sm),
              TextField(
                autofocus: true,
                decoration: InputDecoration(
                  prefixIcon: const Icon(Icons.search, size: 18),
                  hintText: widget.strings.pickerSearch,
                  isDense: true,
                  border: const OutlineInputBorder(),
                ),
                onChanged: (v) => setState(() => _query = v),
              ),
              const SizedBox(height: FaiSpace.sm),
              Expanded(
                child: filtered.isEmpty
                    ? Center(
                        child: Text(
                          widget.strings.pickerEmpty,
                          style: theme.textTheme.bodySmall?.copyWith(
                            color: theme.colorScheme.onSurfaceVariant,
                          ),
                        ),
                      )
                    : ListView.builder(
                        itemCount: filtered.length,
                        itemBuilder: (_, i) {
                          final cap = filtered[i];
                          return ListTile(
                            dense: true,
                            title: Text(
                              cap,
                              style: const TextStyle(fontFamily: 'monospace'),
                            ),
                            onTap: () => Navigator.pop(context, cap),
                          );
                        },
                      ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}