import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:doublefeel_flutter/l10n/l10n_extensions.dart';

class WatchThemeRenameDialog extends StatefulWidget {
  const WatchThemeRenameDialog({super.key, required this.initialValue});

  final String initialValue;

  @override
  State<WatchThemeRenameDialog> createState() => _WatchThemeRenameDialogState();
}

class _WatchThemeRenameDialogState extends State<WatchThemeRenameDialog> {
  late final TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController(text: widget.initialValue);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Dialog(
      backgroundColor: Colors.transparent,
      insetPadding: EdgeInsets.zero,
      child: Container(
        width: 300,
        padding: const EdgeInsets.fromLTRB(24, 24, 24, 20),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(24),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              context.l10n.watchThemeRenameStatus,
              style: const TextStyle(
                color: Color(0xFF141414),
                fontSize: 18,
                fontWeight: FontWeight.w600,
              ),
            ),
            const SizedBox(height: 16),
            ValueListenableBuilder<TextEditingValue>(
              valueListenable: _controller,
              builder: (context, value, _) {
                return Container(
                  height: 52,
                  width: 252,
                  padding: const EdgeInsets.symmetric(horizontal: 22),
                  decoration: BoxDecoration(
                    color: const Color(0xFFF3F3F3),
                    borderRadius: BorderRadius.circular(27),
                  ),
                  child: Row(
                    children: [
                      Expanded(
                        child: TextField(
                          controller: _controller,
                          maxLength: 4,
                          decoration: InputDecoration(
                            counterText: '',
                            hintText: context.l10n.watchThemeEnterNickname,
                            hintStyle:
                                const TextStyle(color: Color(0xFFB0B0B6)),
                            border: InputBorder.none,
                            isCollapsed: true,
                          ),
                          style: const TextStyle(fontSize: 16),
                        ),
                      ),
                      Text(
                        '${value.text.characters.length}/4',
                        style: const TextStyle(
                          color: Color(0xFFD9D9D9),
                          fontSize: 16,
                        ),
                      ),
                    ],
                  ),
                );
              },
            ),
            const SizedBox(height: 24),
            ValueListenableBuilder<TextEditingValue>(
              valueListenable: _controller,
              builder: (context, value, _) {
                final enabled = value.text.trim().isNotEmpty;
                return Opacity(
                  opacity: enabled ? 1 : 0.4,
                  child: GestureDetector(
                    onTap: enabled ? () => Get.back(result: value.text) : null,
                    child: Container(
                      width: 220,
                      height: 48,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        color: const Color(0xFF845EEE),
                        borderRadius: BorderRadius.circular(24),
                      ),
                      child: Text(
                        context.l10n.watchThemeSave,
                        style: const TextStyle(
                          color: Colors.white,
                          fontSize: 14,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    ),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

class WatchThemeConfirmDialog extends StatelessWidget {
  const WatchThemeConfirmDialog({
    super.key,
    required this.title,
    required this.message,
    required this.primaryText,
    required this.secondaryText,
  });

  final String title;
  final String message;
  final String primaryText;
  final String secondaryText;

  @override
  Widget build(BuildContext context) {
    return Dialog(
      backgroundColor: Colors.transparent,
      insetPadding: EdgeInsets.zero,
      child: Container(
        width: 300,
        padding: const EdgeInsets.fromLTRB(24, 24, 24, 20),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(24),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              title,
              style: const TextStyle(
                color: Color(0xFF141414),
                fontSize: 18,
                fontWeight: FontWeight.w600,
              ),
            ),
            const SizedBox(height: 16),
            Text(
              message,
              textAlign: TextAlign.center,
              style: const TextStyle(
                color: Color(0xFF6E6D80),
                fontSize: 15,
                height: 1.35,
              ),
            ),
            const SizedBox(height: 20),
            GestureDetector(
              onTap: () => Get.back(result: true),
              child: Container(
                width: 220,
                height: 48,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  color: const Color(0xFF845EEE),
                  borderRadius: BorderRadius.circular(24),
                ),
                child: Text(
                  primaryText,
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 14,
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ),
            ),
            const SizedBox(height: 4),
            GestureDetector(
              onTap: () => Get.back(result: false),
              child: SizedBox(
                width: 220,
                height: 48,
                child: Center(
                  child: Text(
                    secondaryText,
                    style: const TextStyle(
                      color: Color(0xFF6E6D80),
                      fontSize: 14,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}