import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import '../../../../core/constants/app_colors.dart';
import '../../../../core/constants/app_typography.dart';

/// 네이버 URL 입력 탭 위젯
class AddRestaurantUrlTab extends StatelessWidget {
  final TextEditingController urlController;
  final bool isLoading;
  final String? errorMessage;
  final VoidCallback onFetchPressed;

  const AddRestaurantUrlTab({
    super.key,
    required this.urlController,
    required this.isLoading,
    this.errorMessage,
    required this.onFetchPressed,
  });

  @override
  Widget build(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;

    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        // 안내 텍스트
        Container(
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            color: isDark
                ? AppColors.darkPrimary.withOpacity(0.1)
                : AppColors.lightPrimary.withOpacity(0.1),
            borderRadius: BorderRadius.circular(8),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Row(
              //   children: [
              //     Icon(
              //       Icons.info_outline,
              //       size: 20,
              //       color: isDark
              //           ? AppColors.darkPrimary
              //           : AppColors.lightPrimary,
              //     ),
              //     const SizedBox(width: 8),
              //     Text(
              //       '네이버 지도에서 맛집 정보 가져오기',
              //       style: AppTypography.body1(
              //         isDark,
              //       ).copyWith(fontWeight: FontWeight.bold),
              //     ),
              //   ],
              // ),
              const SizedBox(height: 8),
              Text(
                '1. 네이버 지도에서 맛집을 검색합니다\n'
                '2. 공유 버튼을 눌러 URL을 복사합니다\n'
                '3. 아래에 붙여넣고 가져오기를 누릅니다',
                style: AppTypography.body2(isDark),
              ),
            ],
          ),
        ),

        const SizedBox(height: 16),

        // URL 입력 필드
        TextField(
          controller: urlController,
          keyboardType: TextInputType.multiline,
          minLines: 1,
          maxLines: 6,
          decoration: InputDecoration(
            labelText: '네이버 지도 URL',
            hintText: kIsWeb
                ? 'https://map.naver.com/...'
                : 'https://naver.me/...',
            prefixIcon: const Icon(Icons.link),
            border: OutlineInputBorder(borderRadius: BorderRadius.circular(8)),
            errorText: errorMessage,
            errorMaxLines: 8,
          ),
          onSubmitted: (_) => onFetchPressed(),
        ),

        const SizedBox(height: 16),

        // 가져오기 버튼
        ElevatedButton.icon(
          onPressed: isLoading ? null : onFetchPressed,
          icon: isLoading
              ? const SizedBox(
                  width: 20,
                  height: 20,
                  child: CircularProgressIndicator(
                    strokeWidth: 2,
                    valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
                  ),
                )
              : const Icon(Icons.download),
          label: Text(isLoading ? '가져오는 중...' : '맛집 정보 가져오기'),
          style: ElevatedButton.styleFrom(
            padding: const EdgeInsets.symmetric(vertical: 16),
          ),
        ),

        const SizedBox(height: 16),

        // 웹 환경 경고
        if (kIsWeb) ...[
          Container(
            padding: const EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: Colors.orange.withOpacity(0.1),
              borderRadius: BorderRadius.circular(8),
              border: Border.all(color: Colors.orange.withOpacity(0.3)),
            ),
            child: Row(
              children: [
                const Icon(
                  Icons.warning_amber_rounded,
                  color: Colors.orange,
                  size: 20,
                ),
                const SizedBox(width: 8),
                Expanded(
                  child: Text(
                    '웹 환경에서는 CORS 정책으로 인해 일부 맛집 정보가 제한될 수 있습니다.',
                    style: AppTypography.caption(
                      isDark,
                    ).copyWith(color: Colors.orange[700]),
                  ),
                ),
              ],
            ),
          ),
        ],
      ],
    );
  }
}
