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

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

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

  @override
  Widget build(BuildContext context) {
    if (isLoading && edges.isEmpty) {
      return _buildLoadingState();
    }

    if (error != null && edges.isEmpty) {
      return _buildErrorState();
    }

    if (edges.isEmpty) {
      return _buildEmptyState();
    }

    final selectedEdge = edges.firstWhere(
      (e) => e.edgeId == selectedEdgeId,
      orElse: () => edges.first,
    );

    return _buildPopulatedPanel(selectedEdge);
  }

  Widget _buildLoadingState() {
    return const Center(
      child: CircularProgressIndicator(
        valueColor: AlwaysStoppedAnimation<Color>(Color(0xFF6366F1)),
      ),
    );
  }

  Widget _buildErrorState() {
    return Center(
      child: Container(
        padding: const EdgeInsets.all(24),
        margin: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: const Color(0xFF1E293B),
          borderRadius: BorderRadius.circular(12),
          border: Border.all(
            color: const Color(0xFFEF4444).withValues(alpha: 0.3),
          ),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Icon(Icons.error_outline, color: Color(0xFFEF4444), size: 48),
            const SizedBox(height: 16),
            const Text(
              'Failed to Load Edges',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
            const SizedBox(height: 8),
            Text(
              error!,
              style: const TextStyle(color: Color(0xFF94A3B8), fontSize: 13),
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 16),
            ElevatedButton.icon(
              onPressed: onRefresh,
              icon: const Icon(Icons.refresh),
              label: const Text('Retry'),
              style: ElevatedButton.styleFrom(
                backgroundColor: const Color(0xFF6366F1),
                foregroundColor: Colors.white,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildEmptyState() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Icon(Icons.dns_outlined, color: Color(0xFF6366F1), size: 64),
          const SizedBox(height: 16),
          const Text(
            'No Edges Registered',
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
          const SizedBox(height: 8),
          const Text(
            'Connect your edges to the Control Plane to see them here.',
            style: TextStyle(color: Color(0xFF94A3B8), fontSize: 14),
            textAlign: TextAlign.center,
          ),
          const SizedBox(height: 20),
          OutlinedButton.icon(
            onPressed: onRefresh,
            icon: const Icon(Icons.refresh),
            label: const Text('Refresh'),
            style: OutlinedButton.styleFrom(
              foregroundColor: const Color(0xFF6366F1),
              side: const BorderSide(color: Color(0xFF6366F1)),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildPopulatedPanel(FleetEdgeView selectedEdge) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final isMobile = constraints.maxWidth < 600;
        if (isMobile) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Expanded(flex: 2, child: _buildEdgeList(true, selectedEdge)),
              Expanded(flex: 3, child: _buildEdgeDetails(true, selectedEdge)),
            ],
          );
        } else {
          return Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Expanded(flex: 2, child: _buildEdgeList(false, selectedEdge)),
              Expanded(flex: 3, child: _buildEdgeDetails(false, selectedEdge)),
            ],
          );
        }
      },
    );
  }

  Widget _buildEdgeList(bool isMobile, FleetEdgeView selectedEdge) {
    return Container(
      decoration: BoxDecoration(
        border: isMobile
            ? const Border(bottom: BorderSide(color: Color(0xFF334155)))
            : const Border(right: BorderSide(color: Color(0xFF334155))),
      ),
      child: ListView.builder(
        itemCount: edges.length,
        itemBuilder: (context, index) {
          final edge = edges[index];
          final isSelected = edge.edgeId == selectedEdge.edgeId;
          return InkWell(
            onTap: () => onSelectEdge(edge.edgeId),
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
              decoration: BoxDecoration(
                color: isSelected
                    ? const Color(0xFF1E293B)
                    : Colors.transparent,
                border: const Border(
                  bottom: BorderSide(color: Color(0xFF334155), width: 0.5),
                ),
              ),
              child: Row(
                children: [
                  Container(
                    width: 8,
                    height: 8,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: edge.connected
                          ? const Color(0xFF10B981)
                          : const Color(0xFF64748B),
                    ),
                  ),
                  const SizedBox(width: 12),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          edge.edgeName.isNotEmpty
                              ? edge.edgeName
                              : edge.edgeId,
                          style: TextStyle(
                            fontWeight: isSelected
                                ? FontWeight.bold
                                : FontWeight.normal,
                            color: isSelected
                                ? const Color(0xFF6366F1)
                                : Colors.white,
                            fontSize: 15,
                          ),
                        ),
                        const SizedBox(height: 4),
                        Text(
                          'ID: ${edge.edgeId}',
                          style: const TextStyle(
                            color: Color(0xFF94A3B8),
                            fontSize: 12,
                          ),
                        ),
                      ],
                    ),
                  ),
                  const Icon(
                    Icons.chevron_right,
                    color: Color(0xFF64748B),
                    size: 16,
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }

  Widget _buildEdgeDetails(bool isMobile, FleetEdgeView selectedEdge) {
    return Container(
      padding: EdgeInsets.all(isMobile ? 16 : 24),
      child: ListView(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Expanded(
                child: Text(
                  selectedEdge.edgeName.isNotEmpty
                      ? selectedEdge.edgeName
                      : selectedEdge.edgeId,
                  style: TextStyle(
                    fontSize: isMobile ? 18 : 22,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                  overflow: TextOverflow.ellipsis,
                ),
              ),
              Container(
                padding: const EdgeInsets.symmetric(
                  horizontal: 10,
                  vertical: 4,
                ),
                decoration: BoxDecoration(
                  color: selectedEdge.connected
                      ? const Color(0xFF10B981).withValues(alpha: 0.15)
                      : const Color(0xFF64748B).withValues(alpha: 0.15),
                  borderRadius: BorderRadius.circular(20),
                  border: Border.all(
                    color: selectedEdge.connected
                        ? const Color(0xFF10B981)
                        : const Color(0xFF64748B),
                    width: 1.5,
                  ),
                ),
                child: Text(
                  selectedEdge.connected ? 'CONNECTED' : 'DISCONNECTED',
                  style: TextStyle(
                    color: selectedEdge.connected
                        ? const Color(0xFF10B981)
                        : const Color(0xFF94A3B8),
                    fontSize: 11,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: 24),
          _buildDetailRow('Edge ID', selectedEdge.edgeId),
          _buildDetailRow('Version', selectedEdge.version),
          _buildDetailRow('Protocol', selectedEdge.protocol),
          _buildDetailRow(
            'Last Seen',
            selectedEdge.lastSeen.toLocal().toString(),
          ),
          _buildDetailRow('Fleet Health', selectedEdge.health),
          _buildDetailRow('Node Count', selectedEdge.nodeCount.toString()),
          const SizedBox(height: 24),
          const Text(
            'Capabilities',
            style: TextStyle(
              fontSize: 15,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
          const SizedBox(height: 12),
          _buildCapabilities(selectedEdge),
        ],
      ),
    );
  }

  Widget _buildCapabilities(FleetEdgeView selectedEdge) {
    if (selectedEdge.capabilities.isEmpty) {
      return const Text(
        'No capabilities reported',
        style: TextStyle(color: Color(0xFF94A3B8), fontSize: 13),
      );
    }
    return Wrap(
      spacing: 8,
      runSpacing: 8,
      children: selectedEdge.capabilities.map((cap) {
        return Container(
          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
          decoration: BoxDecoration(
            color: const Color(0xFF6366F1).withValues(alpha: 0.1),
            borderRadius: BorderRadius.circular(6),
            border: Border.all(
              color: const Color(0xFF6366F1).withValues(alpha: 0.3),
            ),
          ),
          child: Text(
            cap.kind.isNotEmpty ? cap.kind : cap.toString(),
            style: const TextStyle(
              color: Color(0xFF818CF8),
              fontSize: 12,
              fontWeight: FontWeight.w500,
            ),
          ),
        );
      }).toList(),
    );
  }

  Widget _buildDetailRow(String label, String value) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 14),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            label,
            style: const TextStyle(color: Color(0xFF94A3B8), fontSize: 12),
          ),
          const SizedBox(height: 4),
          Text(
            value.isNotEmpty ? value : '-',
            style: const TextStyle(
              color: Colors.white,
              fontSize: 14,
              fontWeight: FontWeight.w500,
            ),
          ),
          const SizedBox(height: 8),
          const Divider(color: Color(0xFF334155), height: 1),
        ],
      ),
    );
  }
}
