import 'package:flutter/material.dart';
import '../../data/models/player_model.dart';

class VolleyballFieldWidget extends StatelessWidget {
  final List<PlayerModel> teamA; // Obere Hälfte
  final List<PlayerModel> teamB; // Untere Hälfte
  final int fieldNumber;

  const VolleyballFieldWidget({
    super.key,
    required this.teamA,
    required this.teamB,
    required this.fieldNumber,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // Feldnummer
        Text(
          'Feld $fieldNumber',
          style: const TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
        ),
        const SizedBox(height: 16),

        // Das komplette Feld
        Expanded(
          child: Container(
            margin: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Colors.blue.shade800,
              borderRadius: BorderRadius.circular(16),
              border: Border.all(color: Colors.black, width: 4),
            ),
            child: Column(
              children: [
                // Obere Hälfte (Team A)
                Expanded(child: _buildHalfField(teamA, isTop: true)),

                // Netz
                Container(
                  height: 8,
                  color: Colors.white,
                  margin: const EdgeInsets.symmetric(horizontal: 32),
                ),

                // Untere Hälfte (Team B) – gespiegelt
                Expanded(child: _buildHalfField(teamB, isTop: false)),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildHalfField(List<PlayerModel> team, {required bool isTop}) {
    // Reihenfolge der Positionen:
    // Index 0-2: Vorne (am Netz)
    // Index 3-5: Hinten
    // Für untere Hälfte spiegeln wir die Reihenfolge horizontal
    final frontRow = team.length > 3 ? team.sublist(0, 3) : team.sublist(0, team.length.clamp(0, 3));
    final backRow = team.length > 3 ? team.sublist(3, team.length.clamp(3, 6)) : <PlayerModel>[];

    // Spiegelung für untere Hälfte
    if (!isTop) {
      frontRow.reversed.toList();
      backRow.reversed.toList();
    }

    return Column(
      children: [
        // Vorne (am Netz)
        Expanded(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: _buildPlayerPills(isTop ? frontRow : frontRow.reversed.toList()),
          ),
        ),
        // Hinten
        Expanded(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: _buildPlayerPills(isTop ? backRow : backRow.reversed.toList()),
          ),
        ),
      ],
    );
  }

  List<Widget> _buildPlayerPills(List<PlayerModel> players) {
    return List.generate(3, (i) {
      final player = players.length > i ? players[i] : null;
      if (player == null) {
        return const Expanded(
          child: SizedBox(),
        );
      }

      return Expanded(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            decoration: BoxDecoration(
              color: Colors.yellow.shade700,
              borderRadius: BorderRadius.circular(20),
              border: Border.all(color: Colors.black, width: 3),
            ),
            alignment: Alignment.center,
            child: Text(
              player.name,
              style: const TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.bold,
                color: Colors.black,
              ),
              textAlign: TextAlign.center,
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ),
      );
    });
  }
}