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

import '../../core/app_colors.dart';
import '../../core/app_design_tokens.dart';
import '../../core/navigation_provider.dart';
import '../../providers/elder_mode_provider.dart';
import '../../widgets/app_toast.dart';

class ElderModePage extends ConsumerWidget {
  const ElderModePage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final state = ref.watch(elderModeProvider);
    final enabled = state.isEnabled;

    ref.listen<String?>(elderModeProvider.select((value) => value.error), (
      previous,
      next,
    ) {
      if (next != null && next != previous) {
        AppToast.show(context, next, type: AppToastType.error);
      }
    });

    return Scaffold(
      backgroundColor: const Color(0xFFF0F1FF),
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        leading: IconButton(
          onPressed: () => popRoute(ref),
          icon: const Icon(Icons.arrow_back_rounded),
        ),
        title: const Text('长辈模式'),
      ),
      body: DecoratedBox(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [Color(0xFFE7ECFF), Color(0xFFF2F1FF)],
          ),
        ),
        child: SafeArea(
          top: false,
          child: Column(
            children: [
              Expanded(
                child: SingleChildScrollView(
                  padding: const EdgeInsets.fromLTRB(20, 18, 20, 20),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      const _ElderHero(),
                      const SizedBox(height: 18),
                      if (enabled)
                        _EnabledPanel(
                          largeTextEnabled: state.preferences.largeTextEnabled,
                          voiceInputEnabled:
                              state.preferences.voiceInputEnabled,
                          saving: state.isSaving,
                          onLargeTextChanged: (value) => ref
                              .read(elderModeProvider.notifier)
                              .setLargeTextEnabled(value),
                          onVoiceInputChanged: (value) => ref
                              .read(elderModeProvider.notifier)
                              .setVoiceInputEnabled(value),
                        )
                      else
                        const _DisabledPanel(),
                    ],
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.fromLTRB(20, 10, 20, 18),
                child: SizedBox(
                  height: 58,
                  width: double.infinity,
                  child: enabled
                      ? OutlinedButton(
                          onPressed: state.isSaving
                              ? null
                              : () => ref
                                    .read(elderModeProvider.notifier)
                                    .disable(),
                          style: OutlinedButton.styleFrom(
                            backgroundColor: Colors.white.withValues(
                              alpha: 0.72,
                            ),
                            foregroundColor: AppColors.textSecondary,
                            side: const BorderSide(color: Color(0xFFD9DDF2)),
                            shape: RoundedRectangleBorder(
                              borderRadius: AppRadius.pillBorder,
                            ),
                          ),
                          child: const Text('关闭长辈模式'),
                        )
                      : ElevatedButton(
                          onPressed: state.isSaving
                              ? null
                              : () => ref
                                    .read(elderModeProvider.notifier)
                                    .enable(),
                          style: ElevatedButton.styleFrom(
                            backgroundColor: const Color(0xFF5B55E7),
                            foregroundColor: Colors.white,
                            shape: RoundedRectangleBorder(
                              borderRadius: AppRadius.pillBorder,
                            ),
                          ),
                          child: const Text('立即开启'),
                        ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class _ElderHero extends StatelessWidget {
  const _ElderHero();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const Text(
          '暖心护长辈\n便捷新体验',
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 34,
            height: 1.25,
            fontWeight: FontWeight.w800,
            color: Color(0xFF252470),
          ),
        ),
        const SizedBox(height: 8),
        SizedBox(
          height: 190,
          child: Stack(
            alignment: Alignment.center,
            children: [
              Container(
                width: 190,
                height: 150,
                decoration: BoxDecoration(
                  color: const Color(0xFFB8B9FF).withValues(alpha: 0.24),
                  shape: BoxShape.circle,
                ),
              ),
              Image.asset(
                'assets/branding/health_login_character_transparent.png',
                height: 182,
                fit: BoxFit.contain,
              ),
              const Positioned(left: 4, top: 92, child: _HeroTag(label: '字更大')),
              const Positioned(
                right: 0,
                top: 118,
                child: _HeroTag(label: '更清楚'),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

class _HeroTag extends StatelessWidget {
  final String label;

  const _HeroTag({required this.label});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 9),
      decoration: BoxDecoration(
        color: const Color(0xFF7B78E8).withValues(alpha: 0.72),
        borderRadius: AppRadius.pillBorder,
        border: Border.all(color: Colors.white.withValues(alpha: 0.72)),
      ),
      child: Text(
        label,
        style: const TextStyle(
          color: Colors.white,
          fontSize: 16,
          fontWeight: FontWeight.w700,
        ),
      ),
    );
  }
}

class _DisabledPanel extends StatelessWidget {
  const _DisabledPanel();

  @override
  Widget build(BuildContext context) {
    return _ModePanel(
      title: '开启长辈模式，操作更清晰',
      child: const Column(
        children: [
          _FeatureRow(
            icon: Icons.text_fields_rounded,
            title: '大字体',
            subtitle: '正文和按钮文字更大',
          ),
          _PanelDivider(),
          _FeatureRow(
            icon: Icons.touch_app_rounded,
            title: '大按钮',
            subtitle: '点击区域更大，不易点错',
          ),
          _PanelDivider(),
          _FeatureRow(
            icon: Icons.grid_view_rounded,
            title: '大图标',
            subtitle: '常用功能更醒目',
          ),
          _PanelDivider(),
          _FeatureRow(
            icon: Icons.mic_rounded,
            title: '语音输入',
            subtitle: '首页默认使用按住说话',
          ),
        ],
      ),
    );
  }
}

class _EnabledPanel extends StatelessWidget {
  final bool largeTextEnabled;
  final bool voiceInputEnabled;
  final bool saving;
  final ValueChanged<bool> onLargeTextChanged;
  final ValueChanged<bool> onVoiceInputChanged;

  const _EnabledPanel({
    required this.largeTextEnabled,
    required this.voiceInputEnabled,
    required this.saving,
    required this.onLargeTextChanged,
    required this.onVoiceInputChanged,
  });

  @override
  Widget build(BuildContext context) {
    return _ModePanel(
      title: '长辈模式已开启',
      subtitle: '大图标和大按钮已启用',
      child: Column(
        children: [
          _FeatureRow(
            icon: Icons.text_fields_rounded,
            title: '大字体',
            subtitle: '文字更大，阅读更轻松',
            trailing: Switch(
              value: largeTextEnabled,
              onChanged: saving ? null : onLargeTextChanged,
              activeTrackColor: const Color(0xFF5B55E7),
            ),
          ),
          const _PanelDivider(),
          _FeatureRow(
            icon: Icons.mic_rounded,
            title: '语音输入',
            subtitle: '进入首页默认按住说话',
            trailing: Switch(
              value: voiceInputEnabled,
              onChanged: saving ? null : onVoiceInputChanged,
              activeTrackColor: const Color(0xFF5B55E7),
            ),
          ),
          const _PanelDivider(),
          const _FeatureRow(
            icon: Icons.touch_app_rounded,
            title: '大按钮大图标',
            subtitle: '操作区域更大、更清楚',
            trailing: Icon(
              Icons.check_circle_rounded,
              color: Color(0xFF5B55E7),
              size: 30,
            ),
          ),
        ],
      ),
    );
  }
}

class _ModePanel extends StatelessWidget {
  final String title;
  final String? subtitle;
  final Widget child;

  const _ModePanel({required this.title, this.subtitle, required this.child});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(18),
      decoration: BoxDecoration(
        color: Colors.white.withValues(alpha: 0.72),
        borderRadius: AppRadius.cardBorder,
        border: Border.all(color: Colors.white),
        boxShadow: AppShadows.soft,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: const TextStyle(
              fontSize: 22,
              fontWeight: FontWeight.w700,
              color: Color(0xFF25244F),
            ),
          ),
          if (subtitle != null) ...[
            const SizedBox(height: 4),
            Text(
              subtitle!,
              style: const TextStyle(
                fontSize: 15,
                color: AppColors.textSecondary,
              ),
            ),
          ],
          const SizedBox(height: 14),
          Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: AppRadius.xlBorder,
            ),
            child: child,
          ),
        ],
      ),
    );
  }
}

class _FeatureRow extends StatelessWidget {
  final IconData icon;
  final String title;
  final String subtitle;
  final Widget? trailing;

  const _FeatureRow({
    required this.icon,
    required this.title,
    required this.subtitle,
    this.trailing,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 17),
      child: Row(
        children: [
          Container(
            width: 46,
            height: 46,
            decoration: BoxDecoration(
              color: const Color(0xFFE8E7FF),
              borderRadius: AppRadius.mdBorder,
            ),
            child: Icon(icon, size: 26, color: const Color(0xFF5B55E7)),
          ),
          const SizedBox(width: 14),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: const TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.w700,
                    color: AppColors.textPrimary,
                  ),
                ),
                const SizedBox(height: 3),
                Text(
                  subtitle,
                  style: const TextStyle(
                    fontSize: 15,
                    color: AppColors.textSecondary,
                  ),
                ),
              ],
            ),
          ),
          if (trailing != null) ...[const SizedBox(width: 8), trailing!],
        ],
      ),
    );
  }
}

class _PanelDivider extends StatelessWidget {
  const _PanelDivider();

  @override
  Widget build(BuildContext context) {
    return const Padding(
      padding: EdgeInsets.only(left: 76),
      child: Divider(height: 1, color: Color(0xFFE9EAF3)),
    );
  }
}