import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:mobile_scanner/mobile_scanner.dart';
import '../theme/app_theme.dart';
import '../widgets/sake_radar_chart.dart';

class ScanARScreen extends StatefulWidget {
  const ScanARScreen({super.key});

  @override
  State<ScanARScreen> createState() => _ScanARScreenState();
}

class _ScanARScreenState extends State<ScanARScreen> with SingleTickerProviderStateMixin {
  final MobileScannerController _controller = MobileScannerController();
  bool _isScanning = true;

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

  void _onDetect(BarcodeCapture capture) {
    if (!_isScanning) return;

    final List<Barcode> barcodes = capture.barcodes;
    for (final barcode in barcodes) {
      if (barcode.rawValue != null) {
        try {
          final Map<String, dynamic> data = jsonDecode(barcode.rawValue!);
          // Check for key fields to validate it's our QR
          if (data.containsKey('id') && data.containsKey('n')) {
             _isScanning = false; // Stop scanning logic
             // Show Card
             _showDigitalCard(data);
             break; 
          }
        } catch (e) {
          // Not JSON or not our format
        }
      }
    }
  }

  void _showDigitalCard(Map<String, dynamic> data) async {
    // Play sound? (Optional)
    
    await showDialog(
      context: context,
      barrierDismissible: true,
      builder: (context) => _DigitalSakeCardDialog(data: data),
    );

    // Resume scanning after dialog closes
    if (mounted) {
      setState(() {
        _isScanning = true;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          MobileScanner(
            controller: _controller,
            onDetect: _onDetect,
          ),
          // Overlay Design
          Container(
            decoration: BoxDecoration(
              border: Border.symmetric(
                horizontal: BorderSide(color: Colors.black.withValues(alpha: 0.5), width: 100),
                vertical: BorderSide(color: Colors.black.withValues(alpha: 0.5), width: 40),
              ),
            ),
          ),
          Center(
            child: Container(
              width: 280,
              height: 280,
              decoration: BoxDecoration(
                border: Border.all(color: AppTheme.posimaiBlue.withValues(alpha: 0.8), width: 2),
                borderRadius: BorderRadius.circular(16),
                boxShadow: [
                  BoxShadow(
                    color: AppTheme.posimaiBlue.withValues(alpha: 0.4),
                    blurRadius: 20,
                    spreadRadius: 2,
                  ),
                ],
              ),
              child: Stack(
                children: [
                   // Corners
                   Positioned(top: 0, left: 0, child: _Corner(isTop: true, isLeft: true)),
                   Positioned(top: 0, right: 0, child: _Corner(isTop: true, isLeft: false)),
                   Positioned(bottom: 0, left: 0, child: _Corner(isTop: false, isLeft: true)),
                   Positioned(bottom: 0, right: 0, child: _Corner(isTop: false, isLeft: false)),
                   // Center Animation (Scanner line) - simplified
                   Center(
                     child: Container(
                       height: 2,
                       color: Colors.white.withValues(alpha: 0.5),
                     ),
                   )
                ],
              ),
            ),
          ),
          const Positioned(
            top: 60,
            left: 0,
            right: 0,
            child: Text(
              '銘柄カードのQRをスキャン',
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: 18,
                fontWeight: FontWeight.bold,
                shadows: [Shadow(color: Colors.black, blurRadius: 4)],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class _Corner extends StatelessWidget {
  final bool isTop;
  final bool isLeft;

  const _Corner({required this.isTop, required this.isLeft});

  @override
  Widget build(BuildContext context) {
    const double size = 32; // Slightly larger for rounded look
    const double thickness = 4;
    const double radius = 16;
    
    return Container(
      width: size,
      height: size,
      decoration: BoxDecoration(
        color: Colors.transparent,
        borderRadius: BorderRadius.only(
          topLeft: isTop && isLeft ? const Radius.circular(radius) : Radius.zero,
          topRight: isTop && !isLeft ? const Radius.circular(radius) : Radius.zero,
          bottomLeft: !isTop && isLeft ? const Radius.circular(radius) : Radius.zero,
          bottomRight: !isTop && !isLeft ? const Radius.circular(radius) : Radius.zero,
        ),
        border: Border(
          top: isTop ? const BorderSide(color: Colors.white, width: thickness) : BorderSide.none,
          bottom: !isTop ? const BorderSide(color: Colors.white, width: thickness) : BorderSide.none,
          left: isLeft ? const BorderSide(color: Colors.white, width: thickness) : BorderSide.none,
          right: !isLeft ? const BorderSide(color: Colors.white, width: thickness) : BorderSide.none,
        ),
      ),
    );
  }
}

class _DigitalSakeCardDialog extends StatelessWidget {
  final Map<String, dynamic> data;

  const _DigitalSakeCardDialog({required this.data});

  @override
  Widget build(BuildContext context) {
    // Unpack data
    final name = data['n'] ?? '不明';
    final brewery = data['b'] ?? '不明';
    final prefecture = data['p']?.toString() ?? '不明';
    
    // Stats for chart
    final aroma = (data['s'] is num) ? -1 : 3; // 's' is sweetness in my QR?
    // Wait, toQrJson: s=sweetness, y=body, a=alcohol.
    // Radar Chart needs: aroma, bitterness, sweetness, acidity, body.
    // We only have S, Y, A. (Sweetness, Body, Alcohol).
    // We'll map them visually or just show what we have.
    // A proper implementation plan would fetch the full data if available, but offline we only use QR data.
    // Let's map: 
    // Sweetness -> Sweetness
    // Body -> Body
    // Alcohol -> Bitterness? (High alcohol often behaves like dry/bitter) 
    // Aroma -> Default 3
    // Acidity -> Default 3
    // Or just show stars.
    // The user praised the Radar Chart, so let's try to populate it even partially.
    
    final sweetness = (data['s'] as num?)?.toInt() ?? 3;
    final body = (data['y'] as num?)?.toInt() ?? 3;
    final alcohol = (data['a'] as num?)?.toInt() ?? 3;

    final radarData = {
      'aroma': 3,
      'bitterness': alcohol, // Proxy
      'sweetness': sweetness,
      'acidity': 3,
      'body': body,
    };

    return Dialog(
      backgroundColor: Colors.transparent,
      elevation: 0,
      child: TweenAnimationBuilder<double>(
        duration: const Duration(milliseconds: 500),
        curve: Curves.elasticOut,
        tween: Tween(begin: 0.5, end: 1.0),
        builder: (context, scale, child) {
           return Transform.scale(scale: scale, child: child);
        },
        child: Container(
          width: 320,
          padding: const EdgeInsets.all(24),
          decoration: BoxDecoration(
            gradient: const LinearGradient(
               begin: Alignment.topLeft,
               end: Alignment.bottomRight,
               colors: [Color(0xFFE3F2FD), Color(0xFFF3E5F5)], // Light Blue to Light Purple
            ),
            borderRadius: BorderRadius.circular(20),
            boxShadow: [
               BoxShadow(color: Colors.black.withValues(alpha: 0.2), blurRadius: 20, spreadRadius: 5),
            ],
            border: Border.all(color: Colors.white, width: 2),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              // Badge
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                decoration: BoxDecoration(
                   color: AppTheme.posimaiBlue,
                   borderRadius: BorderRadius.circular(20),
                ),
                child: const Text('New Discovery!', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 12)),
              ),
              const SizedBox(height: 16),
              
              // Name
              Text(
                name,
                style: const TextStyle(fontSize: 22, fontWeight: FontWeight.bold, height: 1.2),
                textAlign: TextAlign.center,
              ),
              const SizedBox(height: 8),
              Text(
                '$brewery / $prefecture',
                style: const TextStyle(fontSize: 14, color: Colors.grey),
              ),
               
              const SizedBox(height: 20),
              
              // Chart
              SizedBox(
                height: 180,
                child: SakeRadarChart(
                tasteStats: radarData,
                primaryColor: AppTheme.posimaiBlue,
              ),
              ),
              
              const SizedBox(height: 24),
              
              // Actions
              ElevatedButton.icon(
                onPressed: () => Navigator.pop(context),
                icon: const Icon(Icons.check),
                label: const Text('閉じる'),
                style: ElevatedButton.styleFrom(
                  backgroundColor: AppTheme.posimaiBlue,
                  foregroundColor: Colors.white,
                  minimumSize: const Size(double.infinity, 48),
                   shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}