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

class ZipcodeSearchFilter extends StatelessWidget {
  final Function(String) onSearch;
  final Function(String?) onSidoChanged;
  final Function(String?) onGuChanged;
  final List<String> sidoList;
  final List<String> guList;
  final String? selectedSido;
  final String? selectedGu;

  const ZipcodeSearchFilter({
    super.key,
    required this.onSearch,
    required this.onSidoChanged,
    required this.onGuChanged,
    required this.sidoList,
    required this.guList,
    this.selectedSido,
    this.selectedGu,
  });

  void _onSidoChanged(String? value) {
    final actualValue = (value == '' || value == '전체') ? null : value;
    onSidoChanged(actualValue);
  }

  void _onGuChanged(String? value) {
    final actualValue = (value == '' || value == '전체') ? null : value;
    onGuChanged(actualValue);
  }

  Widget _buildDisabledPlaceholder(String text, ShadThemeData theme) {
    return Container(
      height: 38,
      alignment: Alignment.centerLeft,
      padding: const EdgeInsets.symmetric(horizontal: 12),
      decoration: BoxDecoration(
        border: Border.all(color: theme.colorScheme.border),
        borderRadius: BorderRadius.circular(6),
      ),
      child: Text(text, style: theme.textTheme.muted),
    );
  }

  @override
  Widget build(BuildContext context) {
    final theme = ShadTheme.of(context);

    return Column(
      children: [
        // 첫 번째 행: 2개 드롭다운
        Row(
          children: [
            // 시도 드롭다운
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '시도',
                    style: theme.textTheme.small.copyWith(
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  const SizedBox(height: 6),
                  sidoList.isEmpty 
                    ? _buildDisabledPlaceholder('로딩 중...', theme)
                    : SizedBox(
                        width: double.infinity,
                        child: ShadSelect<String>(
                          placeholder: const Text('시도 선택'),
                          maxHeight: 400,
                          shrinkWrap: true,
                          showScrollToBottomChevron: true,
                          showScrollToTopChevron: true,
                          onChanged: _onSidoChanged,
                          options: [
                            const ShadOption(
                              value: '전체',
                              child: Text('전체'),
                            ),
                            ...sidoList.map((sido) => ShadOption(
                              value: sido,
                              child: Text(sido),
                            )),
                          ],
                          selectedOptionBuilder: (context, value) {
                            if (value == '전체') {
                              return const Text('전체');
                            }
                            return Text(value);
                          },
                        ),
                      ),
                ],
              ),
            ),
            
            const SizedBox(width: 16),
            
            // 구/군 드롭다운
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '구/군',
                    style: theme.textTheme.small.copyWith(
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  const SizedBox(height: 6),
                  selectedSido == null
                    ? _buildDisabledPlaceholder('시도를 먼저 선택하세요', theme)
                    : SizedBox(
                        width: double.infinity,
                        child: ShadSelect<String>(
                          placeholder: const Text('구/군 선택'),
                          maxHeight: 400,
                          shrinkWrap: true,
                          showScrollToBottomChevron: true,
                          showScrollToTopChevron: true,
                          onChanged: _onGuChanged,
                          options: [
                            const ShadOption(
                              value: '전체',
                              child: Text('전체'),
                            ),
                            ...guList.map((gu) => ShadOption(
                              value: gu,
                              child: Text(gu),
                            )),
                          ],
                          selectedOptionBuilder: (context, value) {
                            if (value == '전체') {
                              return const Text('전체');
                            }
                            return Text(value);
                          },
                        ),
                      ),
                ],
              ),
            ),
          ],
        ),
        
        const SizedBox(height: 16),
        
        // 두 번째 행: 텍스트 검색
        Row(
          children: [
            Icon(
              Icons.search,
              size: 18,
              color: theme.colorScheme.mutedForeground,
            ),
            const SizedBox(width: 12),
            Expanded(
              child: ShadInputFormField(
                placeholder: const Text('동/읍/면, 상세주소 검색'),
                onChanged: onSearch, // 실시간 검색 (디바운스 없음)
              ),
            ),
          ],
        ),
      ],
    );
  }
}