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

/// A rich, highly-aesthetic overview panel for visualizing IOP Control Plane configuration and status.
class IopConsoleOverview extends StatefulWidget {
  final IopConsoleConfig config;
  final String statusText;
  final VoidCallback? onRefresh;

  const IopConsoleOverview({
    super.key,
    required this.config,
    required this.statusText,
    this.onRefresh,
  });

  @override
  State<IopConsoleOverview> createState() => _IopConsoleOverviewState();
}

class _IopConsoleOverviewState extends State<IopConsoleOverview>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _glowAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    )..repeat(reverse: true);
    _glowAnimation = Tween<double>(
      begin: 4.0,
      end: 12.0,
    ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut));
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  bool get _isConnected =>
      widget.statusText.trim().toLowerCase() == 'connected';

  @override
  Widget build(BuildContext context) {
    final statusColor = _isConnected
        ? const Color(0xFF10B981)
        : const Color(0xFFEF4444);

    return Container(
      color: const Color(0xFF0F172A),
      padding: const EdgeInsets.all(24.0),
      child: Center(
        child: ConstrainedBox(
          constraints: const BoxConstraints(maxWidth: 800),
          child: LayoutBuilder(
            builder: (context, constraints) {
              final isNarrow = constraints.maxWidth < 600;
              return _buildOverviewBody(isNarrow, statusColor);
            },
          ),
        ),
      ),
    );
  }

  // _buildOverviewBody lays out the responsive header over the scrolling
  // endpoints/health/security body. It preserves the exact section order and
  // spacing of the prior single build method.
  Widget _buildOverviewBody(bool isNarrow, Color statusColor) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _buildHeader(isNarrow, statusColor),
        const SizedBox(height: 32),
        Expanded(
          child: ListView(
            children: [
              _buildSectionHeader('SYSTEM ENDPOINTS', Icons.lan_outlined),
              const SizedBox(height: 12),
              _buildEndpointCard(
                title: 'Control Plane HTTP REST API',
                url: widget.config.controlPlaneHttpUrl,
                icon: Icons.http_outlined,
              ),
              const SizedBox(height: 16),
              _buildEndpointCard(
                title: 'Control Plane WebSocket Wire',
                url: widget.config.controlPlaneWireUrl,
                icon: Icons.swap_calls_outlined,
              ),
              const SizedBox(height: 32),
              _buildSectionHeader(
                'WIRE PERFORMANCE & HEALTH',
                Icons.analytics_outlined,
              ),
              const SizedBox(height: 12),
              _buildStatsSection(isNarrow),
              const SizedBox(height: 32),
              _buildSectionHeader(
                'AUTHENTICATION & WIRE SECURITY',
                Icons.security_outlined,
              ),
              const SizedBox(height: 12),
              _buildEndpointCard(
                title: 'Active Auth Token Reference',
                url:
                    widget.config.authTokenReference != null &&
                        widget.config.authTokenReference!.isNotEmpty
                    ? widget.config.authTokenReference!
                    : 'None (Unauthenticated / Public)',
                icon: Icons.key_outlined,
              ),
              const SizedBox(height: 32),
              if (widget.onRefresh != null)
                Align(
                  alignment: Alignment.centerLeft,
                  child: _buildRefreshButton(),
                ),
            ],
          ),
        ),
      ],
    );
  }

  // _buildHeader stacks the title over the status badge when narrow, otherwise
  // spreads them across a row.
  Widget _buildHeader(bool isNarrow, Color statusColor) {
    final headerText = _buildHeaderText();
    final badge = _buildStatusBadge(statusColor);
    return isNarrow
        ? Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [headerText, const SizedBox(height: 16), badge],
          )
        : Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Expanded(child: headerText),
              const SizedBox(width: 24),
              badge,
            ],
          );
  }

  Widget _buildHeaderText() {
    return const Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'IOP CONTROL PLANE',
          style: TextStyle(
            color: Color(0xFF10B981),
            fontSize: 12,
            fontWeight: FontWeight.bold,
            letterSpacing: 2.0,
          ),
        ),
        SizedBox(height: 4),
        Text(
          'Operations Overview',
          style: TextStyle(
            color: Colors.white,
            fontSize: 28,
            fontWeight: FontWeight.w800,
            letterSpacing: -0.5,
          ),
        ),
      ],
    );
  }

  // _buildStatusBadge animates the connection status pill via _glowAnimation.
  Widget _buildStatusBadge(Color statusColor) {
    return AnimatedBuilder(
      animation: _glowAnimation,
      builder: (context, child) {
        return Container(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
          decoration: BoxDecoration(
            color: statusColor.withValues(alpha: 0.1),
            borderRadius: BorderRadius.circular(20),
            border: Border.all(
              color: statusColor.withValues(alpha: 0.5),
              width: 1.5,
            ),
            boxShadow: [
              BoxShadow(
                color: statusColor.withValues(alpha: 0.2),
                blurRadius: _glowAnimation.value,
                spreadRadius: 1,
              ),
            ],
          ),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                width: 8,
                height: 8,
                decoration: BoxDecoration(
                  color: statusColor,
                  shape: BoxShape.circle,
                ),
              ),
              const SizedBox(width: 8),
              Flexible(
                child: Text(
                  widget.statusText.toUpperCase(),
                  overflow: TextOverflow.ellipsis,
                  maxLines: 1,
                  style: TextStyle(
                    color: statusColor,
                    fontSize: 12,
                    fontWeight: FontWeight.w800,
                    letterSpacing: 1.0,
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }

  // _buildStatsSection renders the status/protocol tiles, stacked when narrow.
  Widget _buildStatsSection(bool isNarrow) {
    final statsList = [
      _buildStatTile(
        'Status',
        _isConnected ? 'ACTIVE WIRE' : 'OFFLINE',
        _isConnected ? const Color(0xFF10B981) : const Color(0xFF94A3B8),
      ),
      _buildStatTile('Protocol', 'Proto-Socket / WS', const Color(0xFF3B82F6)),
    ];
    return isNarrow
        ? Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [statsList[0], const SizedBox(height: 16), statsList[1]],
          )
        : Row(
            children: [
              Expanded(child: statsList[0]),
              const SizedBox(width: 16),
              Expanded(child: statsList[1]),
            ],
          );
  }

  Widget _buildSectionHeader(String title, IconData icon) {
    return Row(
      children: [
        Icon(icon, color: const Color(0xFF10B981), size: 18),
        const SizedBox(width: 8),
        Expanded(
          child: Text(
            title,
            overflow: TextOverflow.ellipsis,
            maxLines: 1,
            style: const TextStyle(
              color: Colors.white70,
              fontSize: 13,
              fontWeight: FontWeight.w700,
              letterSpacing: 1.0,
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildEndpointCard({
    required String title,
    required String url,
    required IconData icon,
  }) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: const Color(0xFF1E293B),
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: const Color(0xFF334155), width: 1),
      ),
      child: Row(
        children: [
          Container(
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
              color: const Color(0xFF0F172A),
              borderRadius: BorderRadius.circular(8),
            ),
            child: Icon(icon, color: const Color(0xFF10B981), size: 20),
          ),
          const SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: const TextStyle(
                    color: Colors.white54,
                    fontSize: 12,
                    fontWeight: FontWeight.w500,
                  ),
                ),
                const SizedBox(height: 4),
                Text(
                  url,
                  overflow: TextOverflow.ellipsis,
                  maxLines: 1,
                  style: const TextStyle(
                    color: Colors.white,
                    fontFamily: 'monospace',
                    fontSize: 14,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildStatTile(String label, String value, Color valueColor) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: const Color(0xFF1E293B),
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: const Color(0xFF334155), width: 1),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            label,
            style: const TextStyle(
              color: Colors.white54,
              fontSize: 11,
              fontWeight: FontWeight.w600,
              letterSpacing: 0.5,
            ),
          ),
          const SizedBox(height: 6),
          Text(
            value,
            style: TextStyle(
              color: valueColor,
              fontSize: 16,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildRefreshButton() {
    return Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: widget.onRefresh,
        borderRadius: BorderRadius.circular(12),
        child: Ink(
          decoration: BoxDecoration(
            gradient: const LinearGradient(
              colors: [Color(0xFF10B981), Color(0xFF059669)],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
            borderRadius: BorderRadius.circular(12),
            boxShadow: [
              BoxShadow(
                color: const Color(0xFF10B981).withValues(alpha: 0.3),
                blurRadius: 10,
                offset: const Offset(0, 4),
              ),
            ],
          ),
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 14),
            child: const Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(Icons.refresh_outlined, color: Colors.white, size: 18),
                SizedBox(width: 10),
                Text(
                  'Refresh Connection',
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 14,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
