import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import '../controllers/placar_controller.dart'; // Ajusta o caminho se for preciso

class HeatmapPage extends StatefulWidget {
  final List<ShotRecord> shots;
  final String teamName;

  const HeatmapPage({super.key, required this.shots, required this.teamName});

  @override
  State<HeatmapPage> createState() => _HeatmapPageState();
}

class _HeatmapPageState extends State<HeatmapPage> {
  
  @override
  void initState() {
    super.initState();
    // Força o ecrã a ficar deitado para vermos bem o campo
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeRight,
      DeviceOrientation.landscapeLeft,
    ]);
  }

  @override
  void dispose() {
    // Volta ao normal quando saímos
    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF16202C),
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        title: Text("Mapa de Lançamentos - ${widget.teamName}", style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
        iconTheme: const IconThemeData(color: Colors.white),
      ),
      body: Center(
        child: AspectRatio(
          aspectRatio: 1150 / 720, // Mantém o campo proporcional
          child: Container(
            margin: const EdgeInsets.only(bottom: 20, left: 20, right: 20),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.white, width: 3),
              image: const DecorationImage(
                image: AssetImage('assets/campo.png'),
                fit: BoxFit.fill,
              ),
            ),
            child: LayoutBuilder(
              builder: (context, constraints) {
                final double w = constraints.maxWidth;
                final double h = constraints.maxHeight;

                return Stack(
                  children: widget.shots.map((shot) {
                    // 👇 Converte de volta de % para Pixels reais do ecrã atual
                    double pixelX = shot.relativeX * w;
                    double pixelY = shot.relativeY * h;

                    return Positioned(
                      left: pixelX - 12, // -12 para centrar a bolinha
                      top: pixelY - 12,
                      child: Tooltip(
                        message: "${shot.playerName}\n${shot.isMake ? 'Cesto' : 'Falha'}",
                        child: CircleAvatar(
                          radius: 12,
                          backgroundColor: shot.isMake ? Colors.green.withOpacity(0.85) : Colors.red.withOpacity(0.85),
                          child: Icon(
                            shot.isMake ? Icons.check : Icons.close,
                            size: 14,
                            color: Colors.white,
                          ),
                        ),
                      ),
                    );
                  }).toList(),
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}