import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:playmaker/controllers/placar_controller.dart';
import 'package:playmaker/utils/size_extension.dart';
import 'package:playmaker/classe/theme.dart'; 
import 'dart:math' as math;

import 'package:playmaker/zone_map_dialog.dart';

// ============================================================================
// 1. PLACAR SUPERIOR (CRONÓMETRO E RESULTADO) - TAMANHO REDUZIDO
// ============================================================================
class TopScoreboard extends StatelessWidget {
  final PlacarController controller;
  final double sf;
  
  const TopScoreboard({super.key, required this.controller, required this.sf});

  @override
  Widget build(BuildContext context) {
    return Container(
      // 👇 Reduzido padding vertical e horizontal
      padding: EdgeInsets.symmetric(vertical: 6 * sf, horizontal: 20 * sf),
      decoration: BoxDecoration(
        color: AppTheme.placarDarkSurface, 
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(22 * sf), 
          bottomRight: Radius.circular(22 * sf)
        ), 
        border: Border.all(color: Colors.white, width: 2.0 * sf), 
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min, 
        children: [
          _buildTeamSection(controller.myTeam, controller.myScore, controller.myFouls, controller.myTimeoutsUsed, AppTheme.myTeamBlue, false, sf), 
          SizedBox(width: 20 * sf), // 👇 Reduzido espaçamento central
          Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                padding: EdgeInsets.symmetric(horizontal: 14 * sf, vertical: 4 * sf), // 👇 Reduzido
                decoration: BoxDecoration(
                  color: AppTheme.placarTimerBg, 
                  borderRadius: BorderRadius.circular(9 * sf)
                ),
                child: Text(
                  controller.formatTime(), 
                  style: TextStyle(color: Colors.white, fontSize: 24 * sf, fontWeight: FontWeight.w900, fontFamily: 'monospace', letterSpacing: 1.5 * sf) // 👇 Fonte reduzida
                ),
              ),
              SizedBox(height: 4 * sf),
              Text(
                "PERÍODO ${controller.currentQuarter}", 
                style: TextStyle(color: AppTheme.warningAmber, fontSize: 12 * sf, fontWeight: FontWeight.w900) // 👇 Fonte reduzida
              ),
            ],
          ),
          SizedBox(width: 20 * sf), // 👇 Reduzido espaçamento central
          _buildTeamSection(controller.opponentTeam, controller.opponentScore, controller.opponentFouls, controller.opponentTimeoutsUsed, AppTheme.oppTeamRed, true, sf), 
        ],
      ),
    );
  }

  Widget _buildTeamSection(String name, int score, int fouls, int timeouts, Color color, bool isOpp, double sf) {
    int displayFouls = fouls > 5 ? 5 : fouls;

    final timeoutIndicators = Row(
      mainAxisSize: MainAxisSize.min,
      children: List.generate(3, (index) => Container(
        margin: EdgeInsets.symmetric(horizontal: 2.5 * sf), // 👇 Reduzido
        width: 10 * sf, height: 10 * sf, // 👇 Bolas de timeout menores
        decoration: BoxDecoration(
          shape: BoxShape.circle, 
          color: index < timeouts ? AppTheme.warningAmber : Colors.grey.shade600, 
          border: Border.all(color: Colors.white54, width: 1.0 * sf)
        ),
      )),
    );
    
    List<Widget> content = [
      Column(
        children: [
          _scoreBox(score, color, sf), 
          SizedBox(height: 5 * sf), // 👇 Reduzido
          timeoutIndicators
        ]
      ),
      SizedBox(width: 12 * sf), // 👇 Reduzido
      Column(
        crossAxisAlignment: isOpp ? CrossAxisAlignment.start : CrossAxisAlignment.end,
        children: [
          Text(
            name.toUpperCase(), 
            style: TextStyle(color: Colors.white, fontSize: 16 * sf, fontWeight: FontWeight.w900, letterSpacing: 1.0 * sf) // 👇 Fonte reduzida
          ),
          SizedBox(height: 3 * sf), // 👇 Reduzido
          Text(
            "FALTAS: $displayFouls", 
            style: TextStyle(color: displayFouls >= 5 ? AppTheme.actionMiss : AppTheme.warningAmber, fontSize: 11 * sf, fontWeight: FontWeight.bold) // 👇 Fonte reduzida
          ),
        ],
      )
    ];

    return Row(crossAxisAlignment: CrossAxisAlignment.center, children: isOpp ? content : content.reversed.toList());
  }

  Widget _scoreBox(int score, Color color, double sf) => Container(
    width: 45 * sf, height: 35 * sf, // 👇 Caixa de pontuação menor
    alignment: Alignment.center,
    decoration: BoxDecoration(color: color, borderRadius: BorderRadius.circular(6 * sf)),
    child: Text(score.toString(), style: TextStyle(color: Colors.white, fontSize: 20 * sf, fontWeight: FontWeight.w900)), // 👇 Fonte reduzida
  );
}

// ============================================================================
// 2. BANCO DE SUPLENTES (DRAG & DROP) - TAMANHO REDUZIDO
// ============================================================================
class BenchPlayersList extends StatelessWidget {
  final PlacarController controller;
  final bool isOpponent;
  final double sf;
  
  const BenchPlayersList({super.key, required this.controller, required this.isOpponent, required this.sf});

  @override
  Widget build(BuildContext context) {
    final bench = isOpponent ? controller.oppBench : controller.myBench;
    final teamColor = isOpponent ? AppTheme.oppTeamRed : AppTheme.myTeamBlue; 
    final prefix = isOpponent ? "bench_opp_" : "bench_my_";

    return Column(
      mainAxisSize: MainAxisSize.min,
      children: bench.map((playerName) {
        final num = controller.playerNumbers[playerName] ?? "0";
        final int fouls = controller.playerStats[playerName]?["fls"] ?? 0;
        final bool isFouledOut = fouls >= 5; 

        Widget avatarUI = Container(
          margin: EdgeInsets.only(bottom: 5 * sf), // 👇 Reduzido
          decoration: BoxDecoration(
            shape: BoxShape.circle, 
            border: Border.all(color: Colors.white, width: 1.5 * sf), // 👇 Reduzido
            boxShadow: [BoxShadow(color: Colors.black45, blurRadius: 4 * sf, offset: Offset(0, 2.0 * sf))]
          ),
          child: CircleAvatar(
            radius: 18 * sf, // 👇 Avatar do banco menor
            backgroundColor: isFouledOut ? Colors.grey.shade800 : teamColor, 
            child: Text(
              num, 
              style: TextStyle(
                color: isFouledOut ? Colors.red.shade300 : Colors.white, 
                fontSize: 14 * sf, // 👇 Fonte reduzida
                fontWeight: FontWeight.bold, 
                decoration: isFouledOut ? TextDecoration.lineThrough : TextDecoration.none
              )
            ),
          ),
        );

        if (isFouledOut) {
          return GestureDetector(
            onTap: () => ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('🛑 $playerName não pode voltar (Expulso).'), backgroundColor: AppTheme.actionMiss)), 
            child: avatarUI
          );
        }

        return Draggable<String>(
          data: "$prefix$playerName", 
          feedback: Material(
            color: Colors.transparent, 
            child: CircleAvatar(
              radius: 22 * sf, // 👇 Avatar ao arrastar menor
              backgroundColor: teamColor, 
              child: Text(num, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16 * sf))
            )
          ),
          childWhenDragging: Opacity(opacity: 0.5, child: SizedBox(width: 36 * sf, height: 36 * sf)), // 👇 Placeholder menor
          child: avatarUI,
        );
      }).toList(),
    );
  }
}

// ============================================================================
// 3. CARTÃO DO JOGADOR NO CAMPO - TAMANHO REDUZIDO
// ============================================================================
class PlayerCourtCard extends StatelessWidget {
  final PlacarController controller;
  final String name;
  final bool isOpponent;
  final double sf; 
  
  const PlayerCourtCard({super.key, required this.controller, required this.name, required this.isOpponent, required this.sf}); 

  @override
  Widget build(BuildContext context) {
    final teamColor = isOpponent ? AppTheme.oppTeamRed : AppTheme.myTeamBlue; 
    final stats = controller.playerStats[name]!;
    final number = controller.playerNumbers[name]!;
    final prefix = isOpponent ? "player_opp_" : "player_my_";

    return Draggable<String>(
      data: "$prefix$name", 
      feedback: Material(
        color: Colors.transparent,
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8), // 👇 Reduzido
          decoration: BoxDecoration(color: teamColor.withOpacity(0.9), borderRadius: BorderRadius.circular(6)),
          child: Text(name, style: const TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.bold)),
        ),
      ),
      childWhenDragging: Opacity(opacity: 0.5, child: _playerCardUI(number, name, stats, teamColor, false, false, sf)),
      child: DragTarget<String>(
        onAcceptWithDetails: (details) {
          final action = details.data; 
          
          if (action == "add_pts_2" || action == "add_pts_3" || action == "miss_2" || action == "miss_3") {
             bool isMake = action.startsWith("add_");
             bool is3Pt = action.endsWith("_3"); 
             
             showDialog(
               context: context,
               builder: (ctx) => ZoneMapDialog(
                 playerName: name,
                 isMake: isMake,
                 is3PointAction: is3Pt, 
                 onZoneSelected: (zone, points, relX, relY) {
                   Navigator.pop(ctx); 
                   controller.registerShotFromPopup(context, action, "$prefix$name", zone, points, relX, relY);
                 },
               ),
             );
          } 
          else if (action.startsWith("add_") || action.startsWith("sub_") || action.startsWith("miss_")) {
             controller.handleActionDrag(context, action, "$prefix$name"); 
          } 
          else if (action.startsWith("bench_")) {
             controller.handleSubbing(context, action, name, isOpponent);
          }
        },
        builder: (context, candidateData, rejectedData) {
          bool isSubbing = candidateData.any((data) => data != null && (data.startsWith("bench_my_") || data.startsWith("bench_opp_")));
          bool isActionHover = candidateData.any((data) => data != null && (data.startsWith("add_") || data.startsWith("sub_") || data.startsWith("miss_")));
          return _playerCardUI(number, name, stats, teamColor, isSubbing, isActionHover, sf);
        },
      ),
    );
  }

  Widget _playerCardUI(String number, String name, Map<String, int> stats, Color teamColor, bool isSubbing, bool isActionHover, double sf) {
    bool isFouledOut = stats["fls"]! >= 5; 
    Color bgColor = isFouledOut ? Colors.red.shade100 : Colors.white;
    Color borderColor = isFouledOut ? AppTheme.actionMiss : Colors.transparent;
    
    if (isSubbing) { 
      bgColor = Colors.blue.shade50; borderColor = AppTheme.myTeamBlue; 
    } else if (isActionHover && !isFouledOut) { 
      bgColor = Colors.orange.shade50; borderColor = AppTheme.actionPoints; 
    }

    int fgm = stats["fgm"]!;
    int fga = stats["fga"]!;
    String fgPercent = fga > 0 ? ((fgm / fga) * 100).toStringAsFixed(0) : "0";
    String displayName = name.length > 12 ? "${name.substring(0, 10)}..." : name;

    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 4), // 👇 Reduzido padding do cartão
      decoration: BoxDecoration(
        color: bgColor, borderRadius: BorderRadius.circular(8), border: Border.all(color: borderColor, width: 1.5), // 👇 Bordas reduzidas
        boxShadow: const [BoxShadow(color: Colors.black26, blurRadius: 4, offset: Offset(0, 2))],
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(6 * sf),
        child: IntrinsicHeight( 
          child: Row(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.stretch, 
            children: [
              Container(
                padding: EdgeInsets.symmetric(horizontal: 10 * sf), // 👇 Padding do número menor
                color: isFouledOut ? Colors.grey[700] : teamColor,
                alignment: Alignment.center,
                child: Text(number, style: TextStyle(color: Colors.white, fontSize: 18 * sf, fontWeight: FontWeight.bold)), // 👇 Fonte do número menor
              ),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 8 * sf, vertical: 4 * sf), // 👇 Padding dos stats menor
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start, 
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text(
                      displayName, 
                      style: TextStyle(fontSize: 14 * sf, fontWeight: FontWeight.bold, color: isFouledOut ? AppTheme.actionMiss : Colors.black87, decoration: isFouledOut ? TextDecoration.lineThrough : TextDecoration.none) // 👇 Nome menor
                    ),
                    SizedBox(height: 1.5 * sf), // 👇 Espaçamento menor
                    Text(
                      "${stats["pts"]} Pts | FG: $fgm/$fga ($fgPercent%)", 
                      style: TextStyle(fontSize: 10 * sf, color: isFouledOut ? AppTheme.actionMiss : Colors.grey[700], fontWeight: FontWeight.w600) // 👇 Stats menores
                    ),
                    Text(
                      "${stats["ast"]} Ast | ${stats["orb"]! + stats["drb"]!} Rbs | ${stats["fls"]} Fls", 
                      style: TextStyle(fontSize: 10 * sf, color: isFouledOut ? AppTheme.actionMiss : Colors.grey[500], fontWeight: FontWeight.w600) // 👇 Stats menores
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// ============================================================================
// 4. PAINEL DE BOTÕES DE AÇÃO - TAMANHO REDUZIDO
// ============================================================================
class ActionButtonsPanel extends StatelessWidget {
  final PlacarController controller;
  final double sf;
  
  const ActionButtonsPanel({super.key, required this.controller, required this.sf});

@override
  Widget build(BuildContext context) {
    // 👇👇 Ajuste para o "Meio-Termo" ideal 👇👇
    final double baseSize = 58 * sf;  // Aumentado de 50 para 58
    final double feedSize = 73 * sf;  // Aumentado de 65 para 73
    final double gap = 5 * sf;        

    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        _columnBtn([
          _dragAndTargetBtn("M1", AppTheme.actionMiss, "miss_1", baseSize, feedSize, sf), 
          _dragAndTargetBtn("1", AppTheme.actionPoints, "add_pts_1", baseSize, feedSize, sf), 
          _dragAndTargetBtn("1", AppTheme.actionPoints, "sub_pts_1", baseSize, feedSize, sf, isX: true),
          _dragAndTargetBtn("STL", AppTheme.actionSteal, "add_stl", baseSize, feedSize, sf), 
        ], gap),
        SizedBox(width: gap * 1),
        _columnBtn([
          _dragAndTargetBtn("M2", AppTheme.actionMiss, "miss_2", baseSize, feedSize, sf),            
          _dragAndTargetBtn("2", AppTheme.actionPoints, "add_pts_2", baseSize, feedSize, sf),             
          _dragAndTargetBtn("2", AppTheme.actionPoints, "sub_pts_2", baseSize, feedSize, sf, isX: true),  
          _dragAndTargetBtn("AST", AppTheme.actionAssist, "add_ast", baseSize, feedSize, sf), 
        ], gap),
        SizedBox(width: gap * 1),
        _columnBtn([
          _dragAndTargetBtn("M3", AppTheme.actionMiss, "miss_3", baseSize, feedSize, sf),            
          _dragAndTargetBtn("3", AppTheme.actionPoints, "add_pts_3", baseSize, feedSize, sf),             
          _dragAndTargetBtn("3", AppTheme.actionPoints, "sub_pts_3", baseSize, feedSize, sf, isX: true),  
          _dragAndTargetBtn("TOV", AppTheme.actionMiss, "add_tov", baseSize, feedSize, sf),
        ], gap),
        SizedBox(width: gap * 1),
        _columnBtn([
          _dragAndTargetBtn("ORB", AppTheme.actionRebound, "add_orb", baseSize, feedSize, sf, icon: Icons.sports_basketball), 
          _dragAndTargetBtn("DRB", AppTheme.actionRebound, "add_drb", baseSize, feedSize, sf, icon: Icons.sports_basketball), 
          _dragAndTargetBtn("BLK", AppTheme.actionBlock, "add_blk", baseSize, feedSize, sf, icon: Icons.front_hand), 
        ], gap),
      ],
    );
  }

  Widget _columnBtn(List<Widget> children, double gap) {
    return Column(
      mainAxisSize: MainAxisSize.min, 
      children: children.map((c) => Padding(padding: EdgeInsets.only(bottom: gap), child: c)).toList()
    );
  }

  Widget _dragAndTargetBtn(String label, Color color, String actionData, double baseSize, double feedSize, double sf, {IconData? icon, bool isX = false}) {
    return Draggable<String>(
      data: actionData, 
      feedback: _circle(label, color, icon, true, baseSize, feedSize, sf, isX: isX),
      childWhenDragging: Opacity(
        opacity: 0.5, 
        child: _circle(label, color, icon, false, baseSize, feedSize, sf, isX: isX)
      ),
      child: DragTarget<String>(
        onAcceptWithDetails: (details) {}, 
        builder: (context, candidateData, rejectedData) {
          bool isHovered = candidateData.any((data) => data != null && data.startsWith("player_"));
          return Transform.scale(
            scale: isHovered ? 1.15 : 1.0, 
            child: Container(
              decoration: isHovered ? BoxDecoration(shape: BoxShape.circle, boxShadow: [BoxShadow(color: Colors.white, blurRadius: 10 * sf, spreadRadius: 3 * sf)]) : null, 
              child: _circle(label, color, icon, false, baseSize, feedSize, sf, isX: isX)
            ),
          );
        }
      ),
    );
  }

  Widget _circle(String label, Color color, IconData? icon, bool isFeed, double baseSize, double feedSize, double sf, {bool isX = false}) {
    double size = isFeed ? feedSize : baseSize;
    Widget content;
    bool isPointBtn = label == "1" || label == "2" || label == "3" || label == "M1" || label == "M2" || label == "M3";
    bool isBlkBtn = label == "BLK";

    if (isPointBtn) {
      content = Stack(
        alignment: Alignment.center,
        children: [
          Container(width: size * 0.75, height: size * 0.75, decoration: const BoxDecoration(color: Colors.black, shape: BoxShape.circle)),
          Icon(Icons.sports_basketball, color: color, size: size * 0.9),
          Stack(
            children: [
              Text(label, style: TextStyle(fontSize: size * 0.38, fontWeight: FontWeight.w900, foreground: Paint()..style = PaintingStyle.stroke..strokeWidth = size * 0.05..color = Colors.white, decoration: TextDecoration.none)),
              Text(label, style: TextStyle(fontSize: size * 0.38, fontWeight: FontWeight.w900, color: Colors.black, decoration: TextDecoration.none)),
            ],
          ),
        ],
      );
    } else if (isBlkBtn) {
      content = Stack(
        alignment: Alignment.center,
        children: [
          Icon(Icons.front_hand, color: const Color.fromARGB(207, 56, 52, 52), size: size * 0.75),
          Stack(
            alignment: Alignment.center,
            children: [
              Text(label, style: TextStyle(fontSize: size * 0.28, fontWeight: FontWeight.w900, foreground: Paint()..style = PaintingStyle.stroke..strokeWidth = size * 0.05..color = Colors.black, decoration: TextDecoration.none)),
              Text(label, style: TextStyle(fontSize: size * 0.28, fontWeight: FontWeight.w900, color: Colors.white, decoration: TextDecoration.none)),
            ],
          ),
        ],
      );
    } else if (icon != null) {
      content = Icon(icon, color: Colors.white, size: size * 0.5);
    } else {
      content = Text(label, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: size * 0.35, decoration: TextDecoration.none));
    }

    return Stack(
      clipBehavior: Clip.none, 
      alignment: Alignment.bottomRight,
      children: [
        Container(
          width: size, height: size,
          decoration: (isPointBtn || isBlkBtn) 
            ? const BoxDecoration(color: Colors.transparent) 
            : BoxDecoration(gradient: RadialGradient(colors: [color.withOpacity(0.7), color], radius: 0.8), shape: BoxShape.circle, boxShadow: [BoxShadow(color: Colors.black38, blurRadius: 6 * sf, offset: Offset(0, 3 * sf))]),
          alignment: Alignment.center, 
          child: content,
        ),
        if (isX) Positioned(top: 0, right: 0, child: Container(decoration: const BoxDecoration(color: Colors.white, shape: BoxShape.circle), child: Icon(Icons.cancel, color: Colors.red, size: size * 0.4))),
      ],
    );
  }
}

// ============================================================================
// 5. PÁGINA DO PLACAR
// ============================================================================
class PlacarPage extends StatefulWidget {
  final String gameId, myTeam, opponentTeam;
  
  const PlacarPage({
    super.key, 
    required this.gameId, 
    required this.myTeam, 
    required this.opponentTeam
  });

  @override
  State<PlacarPage> createState() => _PlacarPageState();
}

class _PlacarPageState extends State<PlacarPage> {
  late PlacarController _controller;

  @override
  void initState() {
    super.initState();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeRight,
      DeviceOrientation.landscapeLeft,
    ]);
    
    _controller = PlacarController(
      gameId: widget.gameId,
      myTeam: widget.myTeam, 
      opponentTeam: widget.opponentTeam,
      onUpdate: () {
        if (mounted) setState(() {});
      }
    );
    _controller.loadPlayers();
  }

  @override
  void dispose() {
    _controller.dispose();
    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
    super.dispose();
  }

  Widget _buildFloatingFoulBtn(String label, Color color, String action, IconData icon, double left, double right, double top, double sf) {
    return Positioned(
      top: top,
      left: left > 0 ? left : null,
      right: right > 0 ? right : null,
      child: Draggable<String>(
        data: action,
        feedback: Material(
          color: Colors.transparent,
          child: CircleAvatar(
            radius: 25 * sf, // 👇 Botão flutuante de falta menor
            backgroundColor: color.withOpacity(0.8), 
            child: Icon(icon, color: Colors.white, size: 25 * sf) 
          ),
        ),
        child: Column(
          children: [
            CircleAvatar(
              radius: 22 * sf, // 👇 Botão flutuante menor
              backgroundColor: color,
              child: Icon(icon, color: Colors.white, size: 22 * sf), 
            ),
            SizedBox(height: 5 * sf), 
            Text(label, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 10 * sf)), // 👇 Texto menor
          ],
        ),
      ),
    );
  }

  Widget _buildCornerBtn({required String heroTag, required IconData icon, required Color color, required VoidCallback onTap, required double size, bool isLoading = false}) {
    return SizedBox(
      width: size, 
      height: size,
      child: FloatingActionButton(
        heroTag: heroTag, 
        backgroundColor: color,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10 * (size / 40))), // 👇 Curvatura ajustada ao novo tamanho
        elevation: 5, 
        onPressed: isLoading ? null : onTap,
        child: isLoading 
            ? SizedBox(width: size * 0.45, height: size * 0.45, child: const CircularProgressIndicator(color: Colors.white, strokeWidth: 2.0)) 
            : Icon(icon, color: Colors.white, size: size * 0.55), 
      ),
    );
  }

  void _showHeatmap(BuildContext context) {
    showDialog(
      context: context,
      builder: (ctx) => HeatmapDialog(
        shots: _controller.matchShots,
        myTeamName: _controller.myTeam,
        oppTeamName: _controller.opponentTeam,
        myPlayers: [..._controller.myCourt, ..._controller.myBench],
        oppPlayers: [..._controller.oppCourt, ..._controller.oppBench],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final double wScreen = MediaQuery.of(context).size.width;
    final double hScreen = MediaQuery.of(context).size.height;
    
    // 👇👇 DICA EXTRA APLICADA AQUI: Aumentei o divisor base para que o sf seja menor por defeito
    final double sf = math.min(wScreen / 1250, hScreen / 800); 
    final double cornerBtnSize = 40 * sf; // 👇 Botões dos cantos (Salvar, Mapa, Banco) menores

    if (_controller.isLoading) {
      return Scaffold(
        backgroundColor: AppTheme.placarDarkSurface, 
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("PREPARANDO O PAVILHÃO", style: TextStyle(color: Colors.white24, fontSize: 45 * sf, fontWeight: FontWeight.bold, letterSpacing: 2)), 
              SizedBox(height: 35 * sf), 
              StreamBuilder(
                stream: Stream.periodic(const Duration(seconds: 3)),
                builder: (context, snapshot) {
                  List<String> frases = [
                    "O Treinador está a desenhar a tática...",
                    "A encher as bolas com ar de campeão...",
                    "O árbitro está a testar o apito...",
                    "A verificar se o cesto está nivelado...",
                    "Os jogadores estão a terminar o aquecimento..."
                  ];
                  String frase = frases[DateTime.now().second % frases.length];
                  return Text(frase, style: TextStyle(color: AppTheme.actionPoints.withOpacity(0.7), fontSize: 26 * sf, fontStyle: FontStyle.italic)); 
                },
              ),
            ],
          ),
        ),
      );
    }

    return Scaffold(
      backgroundColor: AppTheme.placarBackground, 
      body: SafeArea(
        top: false,    
        bottom: false, 
        child: IgnorePointer(
          ignoring: _controller.isSaving, 
          child: Stack(
            children: [
              Container(
                margin: EdgeInsets.only(left: 55 * sf, right: 55 * sf, bottom: 45 * sf), // 👇 Margens reduzidas para dar mais espaço ao campo
                decoration: BoxDecoration(border: Border.all(color: Colors.white, width: 2.5)), 
                child: LayoutBuilder(
                  builder: (context, constraints) {
                    final w = constraints.maxWidth;
                    final h = constraints.maxHeight;

                    return Stack(
                      children: [
                        GestureDetector(
                          onTapDown: (details) {
                            if (_controller.isSelectingShotLocation) {
                              _controller.registerShotLocation(context, details.localPosition, Size(w, h));
                            }
                          },
                          child: Container(
                            decoration: const BoxDecoration(
                              image: DecorationImage(
                                image: AssetImage('assets/campo.png'), 
                                fit: BoxFit.fill, 
                              ),                          
                            ),
                          ),
                        ),

                        if (!_controller.isSelectingShotLocation) ...[
                          Positioned(top: h * 0.25, left: w * 0.02, child: PlayerCourtCard(controller: _controller, name: _controller.myCourt[0], isOpponent: false, sf: sf)),
                          Positioned(top: h * 0.68, left: w * 0.02, child: PlayerCourtCard(controller: _controller, name: _controller.myCourt[1], isOpponent: false, sf: sf)),
                          Positioned(top: h * 0.45, left: w * 0.25, child: PlayerCourtCard(controller: _controller, name: _controller.myCourt[2], isOpponent: false, sf: sf)),
                          Positioned(top: h * 0.15, left: w * 0.20, child: PlayerCourtCard(controller: _controller, name: _controller.myCourt[3], isOpponent: false, sf: sf)),
                          Positioned(top: h * 0.80, left: w * 0.20, child: PlayerCourtCard(controller: _controller, name: _controller.myCourt[4], isOpponent: false, sf: sf)),
                          
                          Positioned(top: h * 0.25, right: w * 0.02, child: PlayerCourtCard(controller: _controller, name: _controller.oppCourt[0], isOpponent: true, sf: sf)), 
                          Positioned(top: h * 0.68, right: w * 0.02, child: PlayerCourtCard(controller: _controller, name: _controller.oppCourt[1], isOpponent: true, sf: sf)), 
                          Positioned(top: h * 0.45, right: w * 0.25, child: PlayerCourtCard(controller: _controller, name: _controller.oppCourt[2], isOpponent: true, sf: sf)), 
                          Positioned(top: h * 0.15, right: w * 0.20, child: PlayerCourtCard(controller: _controller, name: _controller.oppCourt[3], isOpponent: true, sf: sf)), 
                          Positioned(top: h * 0.80, right: w * 0.20, child: PlayerCourtCard(controller: _controller, name: _controller.oppCourt[4], isOpponent: true, sf: sf)), 
                        ],

                        if (!_controller.isSelectingShotLocation) ...[
                          _buildFloatingFoulBtn("FALTA +", AppTheme.actionPoints, "add_foul", Icons.sports, w * 0.39, 0.0, h * 0.31, sf), 
                          _buildFloatingFoulBtn("FALTA -", AppTheme.actionMiss, "sub_foul", Icons.block, 0.0, w * 0.39, h * 0.31, sf), 
                        ],

                        if (!_controller.isSelectingShotLocation)
                          Positioned(
                            top: (h * 0.38) + (30 * sf), // 👇 Ajustado posição
                            left: 0, right: 0, 
                            child: Center(
                              child: GestureDetector(
                                onTap: () => _controller.toggleTimer(context),
                                child: CircleAvatar(
                                  radius: 60 * sf, // 👇 Botão de play/pause menor
                                  backgroundColor: Colors.grey.withOpacity(0.5), 
                                  child: Icon(_controller.isRunning ? Icons.pause : Icons.play_arrow, color: Colors.white, size: 50 * sf)
                                ), 
                              ),
                            ),
                          ),

                        Positioned(top: 0, left: 0, right: 0, child: Center(child: TopScoreboard(controller: _controller, sf: sf))),
                        
                        if (!_controller.isSelectingShotLocation) Positioned(bottom: -5 * sf, left: 0, right: 0, child: ActionButtonsPanel(controller: _controller, sf: sf)),

                        if (_controller.isSelectingShotLocation)
                          Positioned(
                            top: h * 0.4, left: 0, right: 0,
                            child: Center(
                              child: Container(
                                padding: EdgeInsets.symmetric(horizontal: 25 * sf, vertical: 12 * sf), // 👇 Aviso menor
                                decoration: BoxDecoration(color: Colors.black87, borderRadius: BorderRadius.circular(8 * sf), border: Border.all(color: Colors.white, width: 1.5 * sf)), 
                                child: Text("TOQUE NO CAMPO PARA MARCAR O LOCAL DO LANÇAMENTO", style: TextStyle(color: Colors.white, fontSize: 20 * sf, fontWeight: FontWeight.bold)), // 👇 Fonte menor
                              ),
                            ),
                          ),
                      ],
                    );
                  },
                ),
              ),

              Positioned(
                top: 40 * sf, left: 8 * sf, 
                child: _buildCornerBtn(
                  heroTag: 'btn_save_exit', 
                  icon: Icons.save_alt, 
                  color: AppTheme.oppTeamRed, 
                  size: cornerBtnSize, 
                  isLoading: _controller.isSaving, 
                  onTap: () async {
                    await _controller.saveGameStats(context);
                    if (context.mounted) {
                      Navigator.pop(context);
                    }
                  }
                ),
              ),

              Positioned(
                top: 40 * sf, right: 8 * sf, 
                child: _buildCornerBtn(
                  heroTag: 'btn_heatmap', 
                  icon: Icons.local_fire_department, 
                  color: Colors.orange.shade800, 
                  size: cornerBtnSize, 
                  onTap: () => _showHeatmap(context),
                ),
              ),

              Positioned(
                bottom: 45 * sf, left: 8 * sf, 
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    if (_controller.showMyBench) BenchPlayersList(controller: _controller, isOpponent: false, sf: sf),
                    SizedBox(height: 8 * sf), 
                    _buildCornerBtn(heroTag: 'btn_sub_home', icon: Icons.swap_horiz, color: AppTheme.myTeamBlue, size: cornerBtnSize, onTap: () { _controller.showMyBench = !_controller.showMyBench; _controller.onUpdate(); }),
                    SizedBox(height: 8 * sf), 
                    _buildCornerBtn(
                      heroTag: 'btn_to_home', 
                      icon: Icons.timer, 
                      color: _controller.myTimeoutsUsed >= 3 ? Colors.grey : AppTheme.myTeamBlue, 
                      size: cornerBtnSize, 
                      onTap: _controller.myTimeoutsUsed >= 3 
                        ? () => ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: const Text('🛑 A equipa da casa já usou os 3 Timeouts deste período!'), backgroundColor: AppTheme.actionMiss))
                        : () => _controller.useTimeout(false)
                    ),
                  ],
                ),
              ),

              Positioned(
                bottom: 45 * sf, right: 8 * sf, 
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    if (_controller.showOppBench) BenchPlayersList(controller: _controller, isOpponent: true, sf: sf),
                    SizedBox(height: 8 * sf), 
                    _buildCornerBtn(heroTag: 'btn_sub_away', icon: Icons.swap_horiz, color: AppTheme.oppTeamRed, size: cornerBtnSize, onTap: () { _controller.showOppBench = !_controller.showOppBench; _controller.onUpdate(); }), 
                    SizedBox(height: 8 * sf), 
                    _buildCornerBtn(
                      heroTag: 'btn_to_away', 
                      icon: Icons.timer, 
                      color: _controller.opponentTimeoutsUsed >= 3 ? Colors.grey : AppTheme.oppTeamRed, 
                      size: cornerBtnSize, 
                      onTap: _controller.opponentTimeoutsUsed >= 3 
                        ? () => ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: const Text('🛑 A equipa visitante já usou os 3 Timeouts deste período!'), backgroundColor: AppTheme.actionMiss)) 
                        : () => _controller.useTimeout(true)
                    ),
                  ],
                ),
              ),

              if (_controller.isSaving)
                Positioned.fill(
                  child: Container(
                    color: Colors.black.withOpacity(0.4), 
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}

// ============================================================================
// MAPA DE CALOR 
// ============================================================================
class HeatmapDialog extends StatefulWidget {
  final List<ShotRecord> shots;
  final String myTeamName;
  final String oppTeamName;
  final List<String> myPlayers;
  final List<String> oppPlayers;

  const HeatmapDialog({
    super.key, 
    required this.shots,
    required this.myTeamName,
    required this.oppTeamName,
    required this.myPlayers,
    required this.oppPlayers,
  });

  @override
  State<HeatmapDialog> createState() => _HeatmapDialogState();
}

class _HeatmapDialogState extends State<HeatmapDialog> {
  String _selectedTeam = 'Ambas as Equipas';
  String _selectedPlayer = 'Todos os Jogadores';

  @override
  Widget build(BuildContext context) {
    final Color headerColor = const Color(0xFFE88F15);
    final Color yellowBackground = const Color(0xFFDFAB00);

    final double screenHeight = MediaQuery.of(context).size.height;
    final double dialogHeight = screenHeight * 0.95; 
    final double dialogWidth = dialogHeight * 1.0;

    List<ShotRecord> filteredShots = widget.shots.where((shot) {
      if (_selectedTeam == widget.myTeamName && !widget.myPlayers.contains(shot.playerName)) return false;
      if (_selectedTeam == widget.oppTeamName && !widget.oppPlayers.contains(shot.playerName)) return false;
      if (_selectedPlayer != 'Todos os Jogadores' && shot.playerName != _selectedPlayer) return false;
      return true;
    }).toList();

    List<String> teamOptions = ['Ambas as Equipas', widget.myTeamName, widget.oppTeamName];
    List<String> playerOptions = ['Todos os Jogadores'];
    Set<String> activePlayers = widget.shots.map((s) => s.playerName).toSet();

    if (_selectedTeam == 'Ambas as Equipas') {
      playerOptions.addAll(activePlayers);
    } else if (_selectedTeam == widget.myTeamName) {
      playerOptions.addAll(activePlayers.where((p) => widget.myPlayers.contains(p)));
    } else if (_selectedTeam == widget.oppTeamName) {
      playerOptions.addAll(activePlayers.where((p) => widget.oppPlayers.contains(p)));
    }

    if (!playerOptions.contains(_selectedPlayer)) {
      _selectedPlayer = 'Todos os Jogadores';
    }

    return Dialog(
      backgroundColor: yellowBackground,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      clipBehavior: Clip.antiAlias,
      insetPadding: const EdgeInsets.all(10),
      child: SizedBox(
        height: dialogHeight,
        width: dialogWidth,
        child: Column(
          children: [
            Container(
              height: 50, 
              color: headerColor,
              width: double.infinity,
              padding: const EdgeInsets.symmetric(horizontal: 12),
              child: Row(
                children: [
                  const Text("📊 Mapa de Calor", style: TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.bold)),
                  const Spacer(),
                  Container(
                    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
                    decoration: BoxDecoration(color: Colors.black12, borderRadius: BorderRadius.circular(6)),
                    child: DropdownButtonHideUnderline(
                      child: DropdownButton<String>(
                        value: _selectedTeam,
                        dropdownColor: headerColor,
                        icon: const Icon(Icons.arrow_drop_down, color: Colors.white),
                        style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 13),
                        items: teamOptions.map((String team) {
                          return DropdownMenuItem<String>(value: team, child: Text(team));
                        }).toList(),
                        onChanged: (String? newValue) {
                          setState(() { _selectedTeam = newValue!; });
                        },
                      ),
                    ),
                  ),
                  const SizedBox(width: 10),
                  Container(
                    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
                    decoration: BoxDecoration(color: Colors.black12, borderRadius: BorderRadius.circular(6)),
                    child: DropdownButtonHideUnderline(
                      child: DropdownButton<String>(
                        value: _selectedPlayer,
                        dropdownColor: headerColor,
                        icon: const Icon(Icons.arrow_drop_down, color: Colors.white),
                        style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 13),
                        items: playerOptions.map((String player) {
                          return DropdownMenuItem<String>(value: player, child: Text(player));
                        }).toList(),
                        onChanged: (String? newValue) {
                          setState(() { _selectedPlayer = newValue!; });
                        },
                      ),
                    ),
                  ),
                  const SizedBox(width: 15),
                  InkWell(
                    onTap: () => Navigator.pop(context),
                    child: Container(
                      padding: const EdgeInsets.all(6),
                      decoration: const BoxDecoration(color: Colors.white, shape: BoxShape.circle),
                      child: Icon(Icons.close, color: headerColor, size: 18),
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: LayoutBuilder(
                builder: (context, constraints) {
                  return Stack(
                    children: [
                      CustomPaint(
                        size: Size(constraints.maxWidth, constraints.maxHeight),
                        painter: HeatmapCourtPainter(), 
                      ),
                      ...filteredShots.map((shot) => Positioned(
                        left: (shot.relativeX * constraints.maxWidth) - 8, 
                        top: (shot.relativeY * constraints.maxHeight) - 8, 
                        child: CircleAvatar(
                          radius: 8, 
                          backgroundColor: shot.isMake ? Colors.green : Colors.red, 
                          child: Icon(shot.isMake ? Icons.check : Icons.close, size: 10, color: Colors.white)
                        ), 
                      )),
                    ],
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class HeatmapCourtPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final double w = size.width;
    final double h = size.height;
    final double basketX = w / 2;

    final Paint whiteStroke = Paint()..color = Colors.white..style = PaintingStyle.stroke..strokeWidth = 2.0;
    final Paint blackStroke = Paint()..color = Colors.black87..style = PaintingStyle.stroke..strokeWidth = 2.0;

    final double margin = w * 0.10;
    final double length = h * 0.35;
    final double larguraDoArco = (w / 2) - margin;
    final double alturaDoArco = larguraDoArco * 0.30;
    final double totalArcoHeight = alturaDoArco * 4;

    canvas.drawLine(Offset(margin, 0), Offset(margin, length), whiteStroke);
    canvas.drawLine(Offset(w - margin, 0), Offset(w - margin, length), whiteStroke);
    canvas.drawLine(Offset(0, length), Offset(margin, length), whiteStroke);
    canvas.drawLine(Offset(w - margin, length), Offset(w, length), whiteStroke);
    canvas.drawArc(Rect.fromCenter(center: Offset(basketX, length), width: larguraDoArco * 2, height: totalArcoHeight), 0, math.pi, false, whiteStroke);

    double sXL = basketX + (larguraDoArco * math.cos(math.pi * 0.75));
    double sYL = length + ((totalArcoHeight / 2) * math.sin(math.pi * 0.75));
    double sXR = basketX + (larguraDoArco * math.cos(math.pi * 0.25));
    double sYR = length + ((totalArcoHeight / 2) * math.sin(math.pi * 0.25));

    canvas.drawLine(Offset(sXL, sYL), Offset(0, h * 0.85), whiteStroke);
    canvas.drawLine(Offset(sXR, sYR), Offset(w, h * 0.85), whiteStroke);

    final double pW = w * 0.28;
    final double pH = h * 0.38;
    canvas.drawRect(Rect.fromLTWH(basketX - pW / 2, 0, pW, pH), blackStroke);
    
    final double ftR = pW / 2;
    canvas.drawArc(Rect.fromCircle(center: Offset(basketX, pH), radius: ftR), 0, math.pi, false, blackStroke);
    for (int i = 0; i < 10; i++) {
      canvas.drawArc(Rect.fromCircle(center: Offset(basketX, pH), radius: ftR), math.pi + (i * 2 * (math.pi / 20)), math.pi / 20, false, blackStroke);
    }

    canvas.drawLine(Offset(basketX - pW / 2, pH), Offset(sXL, sYL), blackStroke); 
    canvas.drawLine(Offset(basketX + pW / 2, pH), Offset(sXR, sYR), blackStroke); 

    canvas.drawArc(Rect.fromCircle(center: Offset(basketX, h), radius: w * 0.12), math.pi, math.pi, false, blackStroke);
    canvas.drawCircle(Offset(basketX, h * 0.12), w * 0.02, blackStroke);
    canvas.drawLine(Offset(basketX - w * 0.08, h * 0.12 - 5), Offset(basketX + w * 0.08, h * 0.12 - 5), blackStroke);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}