import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../services/whatsapp_service.dart';
import '../theme/app_theme.dart';

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

  @override
  Widget build(BuildContext context) {
    final svc = Get.find<WhatsAppService>();

    return Center(
      child: SingleChildScrollView(
        padding: const EdgeInsets.all(24),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Icon(Icons.qr_code_scanner,
                color: AppTheme.primary, size: 64),
            const SizedBox(height: 16),
            Text(
              'Link with your phone',
              style: TextStyle(
                color: AppTheme.textPrimary(context),
                fontSize: 22,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 12),
            Container(
              padding:
                  const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
              decoration: BoxDecoration(
                color: AppTheme.surfaceLight(context),
                borderRadius: BorderRadius.circular(8),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '1. Open WhatsApp on your phone',
                    style: TextStyle(
                        color: AppTheme.textSecondary(context), fontSize: 14),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    '2. Tap Menu (⋮ or ⚙️) → Linked Devices',
                    style: TextStyle(
                        color: AppTheme.textSecondary(context), fontSize: 14),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    '3. Tap "Link a Device" and scan this QR code',
                    style: TextStyle(
                        color: AppTheme.textSecondary(context), fontSize: 14),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 24),
            Obx(() {
              final qr = svc.qrData.value;
              if (qr == null) {
                return const CircularProgressIndicator(color: AppTheme.primary);
              }

              try {
                final base64Image =
                    qr.contains(',') ? qr.split(',')[1] : qr;
                final bytes = base64Decode(base64Image);
                return Container(
                  padding: const EdgeInsets.all(12),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(16),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black.withOpacity(0.15),
                        blurRadius: 12,
                        offset: const Offset(0, 4),
                      )
                    ],
                  ),
                  child: Image.memory(
                    bytes,
                    width: 260,
                    height: 260,
                    fit: BoxFit.contain,
                  ),
                );
              } catch (e) {
                return Column(
                  children: [
                    const Icon(Icons.broken_image,
                        color: Colors.redAccent, size: 48),
                    const SizedBox(height: 8),
                    Text(
                      'Failed to render QR Code: $e',
                      style: TextStyle(
                          color: AppTheme.textSecondary(context)),
                    ),
                  ],
                );
              }
            }),
            const SizedBox(height: 16),
            Text(
              'Waiting for QR Code from WhatsApp...',
              style: TextStyle(
                  color: AppTheme.textSecondary(context), fontSize: 12),
            ),
          ],
        ),
      ),
    );
  }
}