Flutter WebSocket Implementation for Real-Time Betting Odds

// websocket_service.dart
import 'dart:convert';
import 'package:web_socket_channel/web_socket_channel.dart';
import '../config/api_config.dart'; // Importing your configuration file

class PropWebSocketService {
  WebSocketChannel? _channel;

  /// Opens connection to server and returns a data stream.
  /// The [matchId] is the ID of the game you want to monitor.
  Stream connect(String matchId) {
    // 1. Build URL using your centralized settings
    final url = "${ApiConfig.wsUrl}?apiKey=${ApiConfig.apiKey}&";
    
    // 2. Establish physical connection
    _channel = WebSocketChannel.connect(Uri.parse(url));

    // 3. Prepare subscription message according to documentation
    // This tells the server: "I want to receive updates for this specific game"
    final subscribeMsg = {
      "action": "subscribe",
      "params": {
        "event_ids": [matchId],
        "markets": ["player_props"]
      }
    };

    // 4. Send subscription message immediately after connecting
    _channel!.sink.add(jsonEncode(subscribeMsg));

    // Return message stream for the Screen to listen to
    return _channel!.stream;
  }

  /// Closes connection and cleans up resources. 
  /// Should be called in your Screen's dispose().
  void disconnect() {
    _channel?.sink.close();
    _channel = null;
  }
}

// market_list_screen.dart (Screen where show me the odds and markets)
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:sysbetv2/services/prop_service.dart';
import 'package:sysbetv2/services/websocket_service.dart';
import 'package:sysbetv2/utils/normalization_helper.dart';
import '../models/match_model.dart';
import '../models/prop_model.dart';
import '../models/ev_metrics.dart';

class MarketListScreen extends StatefulWidget {
  final MatchModel match;
  const MarketListScreen({super.key, required this.match});

  @override
  State<MarketListScreen> createState() => _MarketListScreenState();
}

class _MarketListScreenState extends State<MarketListScreen> {
  final PropsService _propsService = PropsService();
  final PropWebSocketService _wsService = PropWebSocketService();
  
  // Cache that keeps the odds alive on screen for WebSocket to update
  Map<String, List<PlayerProp>> _cachedData = {};
  bool _isLoading = true;

  final List<String> referenceBooks = ['Pinnacle', 'DraftKings', 'FanDuel'];
  bool _sortByOpportunity = true;
  String _searchQuery = "";
  final TextEditingController _searchController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _initDataFlow();
  }

  @override
  void dispose() {
    _wsService.disconnect();
    _searchController.dispose();
    super.dispose();
  }

  // --- DATA LOGIC (HTTP + WEBSOCKET) ---

  Future<void> _initDataFlow() async {
    try {
      // 1. Initial snapshot via HTTP
      final initialData = await _propsService.getPlayerProps(widget.match.id);
      setState(() {
        _cachedData = initialData;
        _isLoading = false;
      });
      // 2. Connect WebSocket for real-time updates
      _startWsListening();
    } catch (e) {
      setState(() => _isLoading = false);
    }
  }

void _startWsListening() {
    // Convert ID from int to String using .toString()
    _wsService.connect(widget.match.id.toString()).listen((message) {
      _processWsUpdate(message);
    });
  }

  void _processWsUpdate(dynamic message) {
    try {
      // 1. Check if message is already a Map or needs decoding
      final Map<String, dynamic> data = message is String 
          ? jsonDecode(message.trim()) 
          : message;
      
      // 2. Check if expected structure exists
      if (data.containsKey('action') && data['action'] == 'update') {
        final List<dynamic> updates = data['data'] ?? [];
        
        setState(() {
          for (var update in updates) {
            final bookmakers = update['bookmakers'] ?? [];
            for (var book in bookmakers) {
              final String bookKey = _normalizeBookieName(book['key']);
              final markets = book['markets'] ?? [];

              for (var market in markets) {
                final String rawMarketKey = market['key'];
                final outcomes = market['outcomes'] ?? [];

                for (var outcome in outcomes) {
                  final String label = outcome['description'] ?? outcome['name'] ?? "";
                  final String side = (outcome['name'] as String).toUpperCase();
                  final String price = outcome['price'].toString();
                  final double hdp = (outcome['point'] ?? 0.0).toDouble();

                  final tempProp = PlayerProp.fromLabel(
                    label: label,
                    hdp: hdp,
                    over: side == "OVER" ? price : "-",
                    under: side == "UNDER" ? price : "-",
                    bookmaker: bookKey,
                    b365MarketName: rawMarketKey,
                  );

                  _mergeUpdateIntoCache(tempProp, side, price);
                }
              }
            }
          }
        });
      }
    } catch (e) {
      debugPrint("Error processing WS message: $e");
    }
  }

  void _mergeUpdateIntoCache(PlayerProp update, String side, String price) {
    final marketKey = update.marketName;
    if (!_cachedData.containsKey(marketKey)) return;

    final List<PlayerProp> props = _cachedData[marketKey]!;
    
    int index = props.indexWhere((p) => 
      p.playerName == update.playerName && 
      p.bookmaker == update.bookmaker && 
      p.hdp == update.hdp
    );

    if (index != -1) {
      // If already exists, we use copyWith to update ONLY the odd that changed
      props[index] = props[index].copyWith(
        over: side == "OVER" ? price : null,
        under: side == "UNDER" ? price : null,
      );
    } else {
      // If it's a new line (different HDP), we add it to the list
      props.add(update);
    }
  }

  String _normalizeBookieName(String key) {
    if (key.contains('pinnacle')) return 'Pinnacle';
    if (key.contains('bet365')) return 'Bet365';
    if (key.contains('draftkings')) return 'DraftKings';
    if (key.contains('fanduel')) return 'FanDuel';
    return key;
  }

  // --- GAP AND CALCULATION LOGIC (YOUR BASE) ---

  double _calculateMaxLineGap(List<PlayerProp> props) {
    if (props.isEmpty) return 0.0;
    final lines = props.map((p) => p.hdp).toList();
    final minLine = lines.reduce((a, b) => a < b ? a : b);
    final maxLine = lines.reduce((a, b) => a > b ? a : b);
    return (maxLine - minLine).abs();
  }

  bool _hasAnyPlayerCriticalGap(List<PlayerProp> allProps) {
    Map<String, List<PlayerProp>> playerMap = {};
    for (var p in allProps) {
      playerMap.putIfAbsent(p.playerName, () => []).add(p);
    }
    for (var playerProps in playerMap.values) {
      if (_calculateMaxLineGap(playerProps) >= 2.0) return true;
    }
    return false;
  }

  bool _hasAnyPlayerNormalGap(List<PlayerProp> allProps) {
    Map<String, List<PlayerProp>> playerMap = {};
    for (var p in allProps) {
      playerMap.putIfAbsent(p.playerName, () => []).add(p);
    }
    for (var playerProps in playerMap.values) {
      if (_calculateMaxLineGap(playerProps) >= 0.5) return true;
    }
    return false;
  }

  double _calculateOpportunityScore(List<PlayerProp> props) {
    double maxEv = -999.0;
    for (var p in props) {
      if (p.evData != null && p.evData!.evPercent > maxEv) maxEv = p.evData!.evPercent;
    }
    double gapWeight = 0;
    if (_hasAnyPlayerCriticalGap(props)) gapWeight = 50; 
    else if (_hasAnyPlayerNormalGap(props)) gapWeight = 25;

    return (maxEv * 1000) + gapWeight;
  }

  // --- INTERFACE ---

  @override
  Widget build(BuildContext context) {
    if (_isLoading) {
      return const Scaffold(
        backgroundColor: Color(0xFF0E1621),
        body: Center(child: CircularProgressIndicator(color: Color(0xFF5288C1))),
      );
    }

    // Processed Cache grouping
    final Map<String, List<PlayerProp>> groupedData = {};
    _cachedData.forEach((key, value) {
      String normalizedKey = NormalizationHelper.normalizeMarketName(key);
      if (normalizedKey.isEmpty) return;
      normalizedKey = normalizedKey[0].toUpperCase() + normalizedKey.substring(1);

      bool marketMatches = normalizedKey.toLowerCase().contains(_searchQuery);
      bool anyPlayerMatches = value.any((p) => p.playerName.toLowerCase().contains(_searchQuery));

      if (_searchQuery.isEmpty || marketMatches || anyPlayerMatches) {
        if (groupedData.containsKey(normalizedKey)) {
          groupedData[normalizedKey]!.addAll(value);
        } else {
          groupedData[normalizedKey] = List.from(value);
        }
      }
    });

    var marketKeys = groupedData.keys.toList();
    if (_sortByOpportunity) {
      marketKeys.sort((a, b) => _calculateOpportunityScore(groupedData[b]!).compareTo(_calculateOpportunityScore(groupedData[a]!)));
    } else {
      marketKeys.sort();
    }

    return Scaffold(
      backgroundColor: const Color(0xFF0E1621),
      appBar: AppBar(
        backgroundColor: const Color(0xFF17212B),
        title: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('${widget.match.home} @ ${widget.match.away}', 
                style: const TextStyle(fontSize: 12, color: Colors.white70)),
            const Text("Real Time Markets", style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
          ],
        ),
        bottom: PreferredSize(
          preferredSize: const Size.fromHeight(60),
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
            child: TextField(
              controller: _searchController,
              onChanged: (value) => setState(() => _searchQuery = value.toLowerCase()),
              style: const TextStyle(color: Colors.white),
              decoration: InputDecoration(
                hintText: "Search player or market...",
                hintStyle: const TextStyle(color: Colors.white38, fontSize: 14),
                prefixIcon: const Icon(Icons.search, color: Colors.white38),
                filled: true,
                fillColor: const Color(0xFF0E1621),
                contentPadding: const EdgeInsets.symmetric(vertical: 0),
                border: OutlineInputBorder(borderRadius: BorderRadius.circular(10), borderSide: BorderSide.none),
                suffixIcon: _searchQuery.isNotEmpty 
                  ? IconButton(
                      icon: const Icon(Icons.clear, color: Colors.white38),
                      onPressed: () {
                        _searchController.clear();
                        setState(() => _searchQuery = "");
                      },
                    )
                  : null,
              ),
            ),
          ),
        ),
        actions: [
          IconButton(
            icon: Icon(_sortByOpportunity ? Icons.trending_up : Icons.sort_by_alpha, 
                color: _sortByOpportunity ? Colors.greenAccent : Colors.white),
            onPressed: () => setState(() => _sortByOpportunity = !_sortByOpportunity),
          )
        ],
      ),
      body: marketKeys.isEmpty 
        ? const Center(child: Text("No results found.", style: TextStyle(color: Colors.white38)))
        : ListView.builder(
            itemCount: marketKeys.length,
            itemBuilder: (context, index) {
              final marketName = marketKeys[index];
              final props = groupedData[marketName]!;
              
              var playerEntries = _getOrderedPlayers(props).where((entry) {
                if (_searchQuery.isEmpty) return true;
                return entry.key.toLowerCase().contains(_searchQuery) || marketName.toLowerCase().contains(_searchQuery);
              }).toList();

              if (playerEntries.isEmpty) return const SizedBox.shrink();

              final bestEv = _getBestEvInMarket(props);
              bool isHighValue = (bestEv?.evPercent ?? 0) >= 10.0;

              return _buildMarketCard(marketName, playerEntries, bestEv, isHighValue, props);
            },
          ),
    );
  }

  // --- WIDGET BUILDING (YOUR UI MAINTAINED) ---

  Widget _buildMarketCard(String name, List<MapEntry<String, List<PlayerProp>>> playerEntries, EvMetrics? bestEv, bool isHighValue, List<PlayerProp> allMarketProps) {
    IconData leadingIcon = Icons.lens_blur_rounded;
    Color iconColor = Colors.white24;

    bool hasCritical = _hasAnyPlayerCriticalGap(allMarketProps);
    bool hasNormal = _hasAnyPlayerNormalGap(allMarketProps);

    if (hasCritical) {
      leadingIcon = Icons.local_fire_department;
      iconColor = Colors.redAccent;
    } else if (hasNormal) {
      leadingIcon = Icons.bolt;
      iconColor = Colors.yellowAccent;
    }

    return TweenAnimationBuilder<double>(
      tween: Tween<double>(begin: 0.6, end: 1.0),
      duration: const Duration(milliseconds: 1000),
      builder: (context, opacity, child) {
        return Card(
          color: isHighValue ? const Color(0xFF1B2E25) : const Color(0xFF17212B),
          margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8),
            side: isHighValue 
                ? BorderSide(color: Colors.greenAccent.withOpacity(opacity), width: 2)
                : (hasCritical ? BorderSide(color: Colors.redAccent.withOpacity(0.4), width: 1.5) : BorderSide(color: Colors.white.withOpacity(0.05), width: 0.5)),
          ),
          child: child,
        );
      },
      child: ExpansionTile(
        initiallyExpanded: _searchQuery.isNotEmpty,
        leading: Icon(leadingIcon, color: iconColor),
        title: Row(
          children: [
            Expanded(child: Text(name, style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 13))),
            if (bestEv != null && bestEv.evPercent > 0) _buildEvBadge(bestEv),
          ],
        ),
        children: playerEntries.map((entry) => _buildPlayerComparisonCard(entry.key, entry.value)).toList(),
      ),
    );
  }

  Widget _buildPlayerComparisonCard(String playerName, List<PlayerProp> props) {
    final hdps = props.map((p) => p.hdp).toSet().toList()..sort();
    final b365 = props.where((p) => p.bookmaker == 'Bet365').firstOrNull;
    final playerGap = _calculateMaxLineGap(props);
    bool isHighValuePlayer = (b365?.evData?.evPercent ?? 0) >= 10.0;

    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: isHighValuePlayer ? const Color(0xFF244235) : const Color(0xFF242F3D),
        borderRadius: BorderRadius.circular(10),
        border: isHighValuePlayer 
          ? Border.all(color: Colors.greenAccent, width: 1.5) 
          : (playerGap >= 2.0 ? Border.all(color: Colors.redAccent.withOpacity(0.5), width: 1.5) : null),
      ),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Text(playerName, style: const TextStyle(fontWeight: FontWeight.bold, color: Color(0xFF6AB2F2), fontSize: 14)),
                  if (playerGap >= 2.0) 
                    const Padding(padding: EdgeInsets.only(left: 6), child: Icon(Icons.local_fire_department, color: Colors.redAccent, size: 22))
                  else if (playerGap >= 0.5)
                    const Padding(padding: EdgeInsets.only(left: 6), child: Icon(Icons.bolt, color: Colors.yellowAccent, size: 22)),
                ],
              ),
              if (b365?.evData != null && b365!.evData!.evPercent > 0) _buildEvBadge(b365.evData!),
            ],
          ),
          const SizedBox(height: 16),
          _buildTableHeader(),
          ...hdps.map((hdp) => _buildMarketRowGroup(hdp, props)),
        ],
      ),
    );
  }

  Widget _buildTableHeader() {
    return Padding(
      padding: const EdgeInsets.only(bottom: 10),
      child: Row(
        children: [
          const Expanded(flex: 2, child: SizedBox()),
          ...referenceBooks.map((bn) => Expanded(
            flex: 2, 
            child: Text(bn.length > 3 ? bn.substring(0, 4) : bn, textAlign: TextAlign.center, 
              style: const TextStyle(fontSize: 10, color: Colors.white70, fontWeight: FontWeight.bold))
          )),
          const Expanded(flex: 2, child: Text("B365", textAlign: TextAlign.center, 
              style: TextStyle(fontSize: 11, color: Color(0xFF5288C1), fontWeight: FontWeight.bold))),
          const Expanded(flex: 2, child: Text("AVG", textAlign: TextAlign.center, style: TextStyle(fontSize: 9, color: Colors.white30))),
          const Expanded(flex: 2, child: Text("MIN", textAlign: TextAlign.center, style: TextStyle(fontSize: 9, color: Colors.white30))),
        ],
      ),
    );
  }

  Widget _buildMarketRowGroup(double hdp, List<PlayerProp> props) {
    return Column(
      children: [
        _buildMarketRow("OVER", hdp, props),
        const SizedBox(height: 4),
        _buildMarketRow("UNDER", hdp, props),
        const SizedBox(height: 12),
      ],
    );
  }

  Widget _buildMarketRow(String type, double hdp, List<PlayerProp> playerProps) {
    final baseProps = playerProps.where((p) => referenceBooks.contains(p.bookmaker) && p.hdp == hdp).toList();
    double minOdd = 99.0, sum = 0; int count = 0;
    for (var p in baseProps) {
      double val = double.tryParse(type == "OVER" ? p.over : p.under) ?? 0;
      if (val > 1) { if (val < minOdd) minOdd = val; sum += val; count++; }
    }
    double avg = count > 0 ? sum / count : 0;
    final b365 = playerProps.where((p) => p.bookmaker == 'Bet365' && p.hdp == hdp).firstOrNull;
    bool hasEv = b365?.evData != null && b365!.evData!.side.toUpperCase() == type && b365.evData!.evPercent > 0;

    return Row(
      children: [
        Expanded(flex: 2, child: Text("${type[0]} $hdp", style: TextStyle(fontSize: 11, fontWeight: FontWeight.bold, color: type == "OVER" ? Colors.greenAccent : Colors.redAccent))),
        ...referenceBooks.map((bookie) => _buildCell(bookie, hdp, type, playerProps)),
        _buildCell('Bet365', hdp, type, playerProps, isExecution: true, highlight: hasEv),
        Expanded(flex: 2, child: _buildMetricBox(avg.toStringAsFixed(2), Colors.white38)),
        Expanded(flex: 2, child: _buildMetricBox(minOdd == 99.0 ? "-" : minOdd.toStringAsFixed(2), Colors.white70)),
      ],
    );
  }

  Widget _buildCell(String bookie, double hdp, String type, List<PlayerProp> playerProps, {bool isExecution = false, bool highlight = false}) {
    final p = playerProps.where((p) => p.bookmaker == bookie && p.hdp == hdp).firstOrNull;
    String val = p != null ? (type == "OVER" ? p.over : p.under) : "-";
    return Expanded(
      flex: 2,
      child: Container(
        margin: const EdgeInsets.all(1),
        padding: const EdgeInsets.symmetric(vertical: 8),
        decoration: BoxDecoration(
          color: highlight ? const Color(0xFF2E7D32) : (isExecution ? const Color(0xFF2B3643) : const Color(0xFF17212B)),
          borderRadius: BorderRadius.circular(4),
          border: highlight ? Border.all(color: Colors.greenAccent, width: 1.5) : null,
        ),
        child: Text(val, textAlign: TextAlign.center, style: const TextStyle(color: Colors.white, fontSize: 11, fontWeight: FontWeight.bold)),
      ),
    );
  }

  Widget _buildMetricBox(String value, Color textColor) {
    return Container(
      margin: const EdgeInsets.all(1),
      padding: const EdgeInsets.symmetric(vertical: 8),
      decoration: BoxDecoration(color: Colors.black26, borderRadius: BorderRadius.circular(4)),
      child: Text(value, textAlign: TextAlign.center, style: TextStyle(color: textColor, fontSize: 10, fontWeight: FontWeight.bold)),
    );
  }

  Widget _buildEvBadge(EvMetrics ev) {
    bool isSuperHigh = ev.evPercent >= 10.0;
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
          decoration: BoxDecoration(
            color: isSuperHigh ? Colors.greenAccent : const Color(0xFF2E7D32),
            borderRadius: BorderRadius.circular(6),
          ),
          child: Text("${ev.evPercent.toStringAsFixed(2)}% EV", 
            style: TextStyle(color: isSuperHigh ? Colors.black : Colors.white, fontSize: 13, fontWeight: FontWeight.bold)),
        ),
        const SizedBox(width: 6),
        _unitBadge("U4", ev.u4, Colors.orangeAccent),
        const SizedBox(width: 4),
        _unitBadge("U8", ev.u8, Colors.blueAccent),
      ],
    );
  }

  Widget _unitBadge(String label, double val, Color col) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 7, vertical: 4),
      decoration: BoxDecoration(
        color: col, 
        borderRadius: BorderRadius.circular(6),
        border: Border.all(color: Colors.white.withOpacity(0.2), width: 1),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(label, style: const TextStyle(color: Colors.white, fontSize: 9, fontWeight: FontWeight.bold)),
          Text(val.toStringAsFixed(2), 
            style: const TextStyle(color: Colors.white, fontSize: 12, fontWeight: FontWeight.bold)),
        ],
      ),
    );
  }

  EvMetrics? _getBestEvInMarket(List<PlayerProp> props) {
    EvMetrics? best;
    for (var p in props) {
      if (p.evData != null && (best == null || p.evData!.evPercent > best.evPercent)) best = p.evData;
    }
    return best;
  }

  List<MapEntry<String, List<PlayerProp>>> _getOrderedPlayers(List<PlayerProp> props) {
    Map<String, List<PlayerProp>> map = {};
    for (var p in props) map.putIfAbsent(p.playerName, () => []).add(p);
    var entries = map.entries.toList();

    if (_sortByOpportunity) {
      entries.sort((a, b) {
        final scoreA = _calculateOpportunityScore(a.value);
        final scoreB = _calculateOpportunityScore(b.value);
        return scoreB.compareTo(scoreA);
      });
    }
    return entries;
  }
}