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

import '../../../core/l10n/app_localizations.dart';
import '../../../core/theme/app_colors.dart';

class GoogleAuthScreen extends StatelessWidget {
  const GoogleAuthScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final cs = Theme.of(context).colorScheme;
    final isDark = Theme.of(context).brightness == Brightness.dark;
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        leading: IconButton(
          icon: Icon(Icons.chevron_left, size: 28),
          onPressed: () => context.pop(),
        ),
        title: Text(
          AppLocalizations.of(context)!.authenticator,
          style: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.w600,
          ),
        ),
        centerTitle: true,
      ),
      body: Column(
        children: [
          Expanded(
            child: SingleChildScrollView(
              padding: const EdgeInsets.all(20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // ── 步骤标题 ────────────────────────────────
                  Text(
                    AppLocalizations.of(context)!.googleAuthStep1,
                    style: TextStyle(
                      color: cs.onSurface,
                      fontSize: 16,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  const SizedBox(height: 8),
                  Text(
                    AppLocalizations.of(context)!.googleAuthDownloadHint,
                    style: TextStyle(
                      color: cs.onSurface.withAlpha(153),
                      fontSize: 13,
                      height: 1.5,
                    ),
                  ),
                  const SizedBox(height: 20),
                  Text(
                    AppLocalizations.of(context)!.recommendDownload,
                    style: TextStyle(
                      color: cs.onSurface.withAlpha(153),
                      fontSize: 13,
                    ),
                  ),
                  const SizedBox(height: 12),

                  // ── App 推荐列表 ─────────────────────────────
                  Container(
                    decoration: BoxDecoration(
                      color: isDark ? AppColors.darkBgSecondary : AppColors.lightBgSecondary,
                      borderRadius: BorderRadius.circular(12),
                    ),
                    child: Column(
                      children: [
                        _AuthAppItem(
                          color: const Color(0xFF0078D4),
                          letter: 'M',
                          name: 'Microsoft Authenticator',
                        ),
                        Divider(height: 1, indent: 68, color: cs.outline),
                        _AuthAppItem(
                          color: const Color(0xFF4285F4),
                          letter: 'G',
                          name: 'Google Authenticator',
                          letterColor: Colors.white,
                        ),
                        Divider(height: 1, indent: 68, color: cs.outline),
                        _AuthAppItem(
                          color: const Color(0xFFe53935),
                          letter: '2',
                          name: '2FA Authenticator（2FAS）',
                          isLast: true,
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),

          // ── 底部按钮 ─────────────────────────────────────
          Padding(
            padding: const EdgeInsets.fromLTRB(20, 0, 20, 32),
            child: SizedBox(
              width: double.infinity,
              height: 50,
              child: ElevatedButton(
                onPressed: () => context.push('/user/security/google-auth/bind'),
                style: ElevatedButton.styleFrom(
                  backgroundColor: AppColors.brand,
                  foregroundColor: Colors.black,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10),
                  ),
                ),
                child: Text(
                  AppLocalizations.of(context)!.alreadyDownloaded,
                  style: const TextStyle(fontSize: 15, fontWeight: FontWeight.w600),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class _AuthAppItem extends StatelessWidget {
  const _AuthAppItem({
    required this.color,
    required this.letter,
    required this.name,
    this.letterColor = Colors.white,
    this.isLast = false,
  });

  final Color color;
  final String letter;
  final String name;
  final Color letterColor;
  final bool isLast;

  @override
  Widget build(BuildContext context) {
    final cs = Theme.of(context).colorScheme;
    return InkWell(
      onTap: () {},
      borderRadius: isLast
          ? const BorderRadius.vertical(bottom: Radius.circular(12))
          : BorderRadius.zero,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
        child: Row(
          children: [
            Container(
              width: 40,
              height: 40,
              decoration: BoxDecoration(
                color: color,
                borderRadius: BorderRadius.circular(10),
              ),
              child: Center(
                child: Text(
                  letter,
                  style: TextStyle(
                    color: letterColor,
                    fontSize: 20,
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ),
            ),
            const SizedBox(width: 14),
            Text(
              name,
              style: TextStyle(
                color: cs.onSurface,
                fontSize: 15,
                fontWeight: FontWeight.w500,
              ),
            ),
          ],
        ),
      ),
    );
  }
}