import 'package:flutter/material.dart';
import 'package:notas/theme/app_palette.dart';

class SearchAppBar extends StatefulWidget {
  const SearchAppBar({
    super.key,
    this.onMenuPressed,
    this.onLeadingPressed,
    this.leadingIcon = Icons.menu,
    this.leadingTooltip = 'Menú',
    this.leadingWidget,
    this.trailingWidget,
    this.onSearchChanged,
    this.searchHint = 'Buscar notas...',
    this.showSearch = true,
    this.titleText,
  });

  final VoidCallback? onMenuPressed;
  final VoidCallback? onLeadingPressed;
  final IconData leadingIcon;
  final String leadingTooltip;
  final Widget? leadingWidget;
  final Widget? trailingWidget;
  final ValueChanged<String>? onSearchChanged;
  final String searchHint;
  final bool showSearch;
  final String? titleText;

  @override
  State<SearchAppBar> createState() => _SearchAppBarState();
}

class _SearchAppBarState extends State<SearchAppBar> {
  late TextEditingController _searchController;
  void _onSearchChanged() {
    setState(() {});
  }

  @override
  void initState() {
    super.initState();
    _searchController = TextEditingController()..addListener(_onSearchChanged);
  }

  @override
  void dispose() {
    _searchController.removeListener(_onSearchChanged);
    _searchController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final AppPalette palette = Theme.of(context).extension<AppPalette>()!;

    return Container(
      decoration: BoxDecoration(
        color: palette.transparent,
        border: Border(bottom: BorderSide(color: palette.border, width: 0.5)),
      ),
      padding: const EdgeInsets.only(left: 8, right: 20, top: 7, bottom: 7),
      child: Row(
        children: [
          IconButton(
            onPressed: widget.onLeadingPressed ?? widget.onMenuPressed,
            icon: Icon(
              widget.leadingIcon,
              color: palette.textSecondary,
              size: 20,
            ),
            tooltip: widget.leadingTooltip,
            splashRadius: 18,
            constraints: const BoxConstraints(minWidth: 40, minHeight: 40),
          ),
          if (widget.leadingWidget != null) ...[
            const SizedBox(width: 8),
            Center(child: widget.leadingWidget!),
          ],
          const SizedBox(width: 8),
          Expanded(
            child: widget.showSearch
                ? Center(
                    child: ConstrainedBox(
                      constraints: const BoxConstraints(maxWidth: 600),
                      child: TextField(
                        controller: _searchController,
                        onChanged: widget.onSearchChanged,
                        style: TextStyle(
                          color: palette.textPrimary,
                          fontSize: 13,
                        ),
                        cursorColor: palette.textSecondary,
                        decoration: InputDecoration(
                          hintText: widget.searchHint,
                          hintStyle: TextStyle(
                            color: palette.textSecondary.withOpacity(0.6),
                          ),
                          suffixIcon: _searchController.text.isNotEmpty
                              ? IconButton(
                                  icon: Icon(
                                    Icons.clear,
                                    color: palette.textSecondary,
                                    size: 18,
                                  ),
                                  onPressed: () {
                                    _searchController.clear();
                                    widget.onSearchChanged?.call('');
                                  },
                                  constraints: const BoxConstraints(
                                    minWidth: 36,
                                    minHeight: 36,
                                  ),
                                )
                              : Padding(
                                  padding: const EdgeInsets.only(right: 8),
                                  child: Icon(
                                    Icons.search,
                                    color: palette.textSecondary,
                                    size: 18,
                                  ),
                                ),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(8),
                            borderSide: BorderSide(
                              color: palette.border,
                              width: 0.5,
                            ),
                          ),
                          enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(8),
                            borderSide: BorderSide(
                              color: palette.border,
                              width: 0.5,
                            ),
                          ),
                          focusedBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(8),
                            borderSide: BorderSide(
                              color: palette.accent,
                              width: 0.6,
                            ),
                          ),
                          filled: true,
                          fillColor: palette.fill,
                          contentPadding: const EdgeInsets.symmetric(
                            horizontal: 12,
                            vertical: 8,
                          ),
                          isDense: true,
                        ),
                      ),
                    ),
                  )
                : Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      widget.titleText ?? '',
                      style: TextStyle(
                        color: palette.textPrimary,
                        fontSize: 18,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
          ),
          if (widget.trailingWidget != null) ...[
            const SizedBox(width: 16),
            Center(child: widget.trailingWidget!),
          ],
        ],
      ),
    );
  }
}