import 'package:flutter/material.dart';

import '../../../domain/entities/wall_config.dart';
import '../../blocs/wall/wall_state.dart';
import 'physical_monitor_tile.dart';

/// A collapsible section of the video wall
class WallSectionWidget extends StatelessWidget {
  final WallSection section;
  final WallState wallState;
  final bool isExpanded;
  final VoidCallback onToggleExpanded;
  final Function(int viewerId) onViewerTap;

  const WallSectionWidget({
    super.key,
    required this.section,
    required this.wallState,
    required this.isExpanded,
    required this.onToggleExpanded,
    required this.onViewerTap,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // Section header
        InkWell(
          onTap: onToggleExpanded,
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
            decoration: BoxDecoration(
              color: const Color(0xFF2D3748),
              borderRadius: BorderRadius.circular(4),
            ),
            child: Row(
              children: [
                Icon(
                  isExpanded ? Icons.expand_less : Icons.expand_more,
                  color: Colors.white70,
                  size: 20,
                ),
                const SizedBox(width: 8),
                Text(
                  section.name,
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 14,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const Spacer(),
                Text(
                  '${section.monitors.length} monitors',
                  style: const TextStyle(
                    color: Colors.white54,
                    fontSize: 12,
                  ),
                ),
              ],
            ),
          ),
        ),
        // Monitors grid
        if (isExpanded)
          Padding(
            padding: const EdgeInsets.only(top: 8),
            child: LayoutBuilder(
              builder: (context, constraints) {
                // Calculate tile width based on columns
                final tileWidth =
                    (constraints.maxWidth - (section.columns - 1) * 8) /
                        section.columns;
                final tileHeight = tileWidth * 9 / 16; // 16:9 aspect ratio

                return Wrap(
                  spacing: 8,
                  runSpacing: 8,
                  children: section.monitors.map((monitor) {
                    return SizedBox(
                      width: tileWidth,
                      height: tileHeight + 8, // Extra padding for quad border
                      child: PhysicalMonitorTile(
                        monitor: monitor,
                        wallState: wallState,
                        onViewerTap: onViewerTap,
                      ),
                    );
                  }).toList(),
                );
              },
            ),
          ),
      ],
    );
  }
}
