import 'package:flutter/material.dart';
import '../control_plane_status_client.dart';
import 'nodes_panel_sections.dart';

class NodesPanel extends StatelessWidget {
  final List<FleetEdgeView> edges;
  final String? selectedEdgeId;
  final EdgeStatusResponseView? selectedEdgeStatus;
  final bool isLoading;
  final String? error;
  final ValueChanged<String> onSelectEdge;
  final VoidCallback onRefresh;

  const NodesPanel({
    super.key,
    required this.edges,
    required this.selectedEdgeId,
    required this.selectedEdgeStatus,
    required this.isLoading,
    required this.error,
    required this.onSelectEdge,
    required this.onRefresh,
  });

  @override
  Widget build(BuildContext context) {
    if (edges.isEmpty) {
      return const Center(
        child: Text(
          'Please connect and register at least one Edge first.',
          style: TextStyle(color: Color(0xFF94A3B8), fontSize: 14),
        ),
      );
    }

    final currentEdgeId = selectedEdgeId ?? edges.first.edgeId;
    final hasCurrentEdge = edges.any((e) => e.edgeId == currentEdgeId);
    final dropdownValue = hasCurrentEdge
        ? currentEdgeId
        : (edges.isNotEmpty ? edges.first.edgeId : null);

    return Container(
      padding: const EdgeInsets.all(24),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              const Expanded(
                child: Text(
                  'Nodes View',
                  style: TextStyle(
                    fontSize: 22,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                  overflow: TextOverflow.ellipsis,
                ),
              ),
              const SizedBox(width: 16),
              if (edges.isNotEmpty && dropdownValue != null) ...[
                const Text(
                  'Active Edge: ',
                  style: TextStyle(color: Color(0xFF94A3B8)),
                ),
                const SizedBox(width: 8),
                DropdownButton<String>(
                  value: dropdownValue,
                  dropdownColor: const Color(0xFF1E293B),
                  style: const TextStyle(color: Colors.white),
                  underline: const SizedBox(),
                  items: edges.map((e) {
                    return DropdownMenuItem<String>(
                      value: e.edgeId,
                      child: Text(
                        e.edgeName.isNotEmpty ? e.edgeName : e.edgeId,
                      ),
                    );
                  }).toList(),
                  onChanged: (val) {
                    if (val != null) onSelectEdge(val);
                  },
                ),
              ],
              const SizedBox(width: 8),
              IconButton(
                icon: const Icon(Icons.refresh, color: Color(0xFF6366F1)),
                onPressed: onRefresh,
              ),
            ],
          ),
          const SizedBox(height: 20),
          Expanded(
            child: NodesPanelContent(
              status: selectedEdgeStatus,
              isLoading: isLoading,
              error: error,
            ),
          ),
        ],
      ),
    );
  }
}