import 'package:flutter/material.dart';
import 'dart:html' as html;
import 'dart:convert';
import 'dart:js_util' as js_util;

void main() {
  runApp(const BrowserTabManagerApp());
  // ☝️ STATEMENT: Command that starts the app
}

class BrowserTabManagerApp extends StatelessWidget {
  // This is a STATELESS widget - no changing data
  
  const BrowserTabManagerApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // STATEMENT: Return/create a MaterialApp widget
      
      title: 'Browser Tab Manager',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: const Color(0xFF0175C2),
          brightness: Brightness.light,
        ),
        useMaterial3: true,
      ),
      darkTheme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: const Color(0xFF0175C2),
          brightness: Brightness.dark,
        ),
        useMaterial3: true,
      ),
      home: const TabManagerHome(),
    );
  }
}

class TabData {
  // This is a DATA MODEL - holds information about a tab
  
  String id;        // STATEMENT: Declare a variable
  String title;     // STATEMENT: Declare a variable
  String url;       // STATEMENT: Declare a variable
  String favicon;
  DateTime lastAccessed;
  bool isPinned;
  String type;
  int? visitCount;
  String? folder;

  TabData({
    required this.id,
    required this.title,
    required this.url,
    this.favicon = '',
    DateTime? lastAccessed,
    this.isPinned = false,
    this.type = 'tab',
    this.visitCount,
    this.folder,
  }) : lastAccessed = lastAccessed ?? DateTime.now();
  // ☝️ STATEMENT: Constructor that creates TabData objects

  factory TabData.fromJson(Map<String, dynamic> json) => TabData(
    // ☝️ STATEMENT: Factory method to create TabData from JSON
        id: json['id'].toString(),
        title: json['title'] ?? 'Untitled',
        url: json['url'] ?? '',
        favicon: json['favicon'] ?? json['favIconUrl'] ?? '',
        lastAccessed: json['lastAccessed'] != null
            ? DateTime.parse(json['lastAccessed'])
            : (json['lastVisitTime'] != null
                ? DateTime.parse(json['lastVisitTime'])
                : (json['dateAdded'] != null
                    ? DateTime.parse(json['dateAdded'])
                    : (json['timestamp'] != null
                        ? DateTime.parse(json['timestamp'])
                        : DateTime.now()))),
        isPinned: json['isPinned'] ?? false,
        type: json['type'] ?? 'tab',
        visitCount: json['visitCount'],
        folder: json['folder'],
      );
}

class TabManagerHome extends StatefulWidget {
  // This is a STATEFUL widget - has changing data (STATE)
  
  const TabManagerHome({super.key});

  @override
  State<TabManagerHome> createState() => _TabManagerHomeState();
  // STATEMENT: Create the state object
}

class _TabManagerHomeState extends State<TabManagerHome> {
  // This class holds all the STATE (changing data)
  
  List<TabData> allItems = [];
  // 🔴 STATE: List of all tabs/bookmarks/history
  // When this changes, UI rebuilds to show new data
  
  List<TabData> filteredItems = [];
  // 🔴 STATE: Filtered/searched items currently displayed
  
  final TextEditingController searchController = TextEditingController();
  // 🔴 STATE: Controls search text field
  
  bool isGridView = true;
  // 🔴 STATE: Whether showing grid or list view
  
  String sortBy = 'recent';
  // 🔴 STATE: Current sort method
  
  String filterType = 'all';
  // 🔴 STATE: Current filter (all, tabs, bookmarks, history)
  
  bool isLoading = true;
  // 🔴 STATE: Whether data is loading
  
  bool extensionConnected = false;
  // 🔴 STATE: Whether browser extension is connected
  
  bool extensionMode = false;
  // 🔴 STATE: Whether in extension tracking mode

  @override
  void initState() {
    // STATEMENT: Method that runs when widget is created
    
    super.initState();
    // STATEMENT: Call parent's initState
    
    _setupExtensionListener();
    // STATEMENT: Call function to setup listener
    
    _loadAllData();
    // STATEMENT: Call function to load data
    
    searchController.addListener(_filterItems);
    // STATEMENT: Add listener to search field
  }

  @override
  void dispose() {
    // STATEMENT: Method that runs when widget is destroyed
    
    searchController.dispose();
    // STATEMENT: Clean up resources
    
    super.dispose();
    // STATEMENT: Call parent's dispose
  }

  void _setupExtensionListener() {
    // STATEMENT: Function declaration
    
    html.window.onMessage.listen((event) {
      // STATEMENT: Start listening for messages
      
      final data = event.data;
      // STATEMENT: Get data from event
      
      if (data is Map && data['source'] == 'tab-tracker-extension') {
        // STATEMENT: Conditional check
        
        _handleExtensionMessage(Map<String, dynamic>.from(data));
        // STATEMENT: Call function with data
      }
    });
  }

  void _handleExtensionMessage(Map<String, dynamic> data) {
    print('Received from extension: $data');
    // STATEMENT: Print to console
    
    if (data['action'] == 'updateTabs') {
      // STATEMENT: Check if action is updateTabs
      
      setState(() {
        // 🔥 SPECIAL STATEMENT: Updates STATE and rebuilds UI
        // Everything inside this block changes STATE
        
        final extensionTabs = (data['tabs'] as List).map((tab) {
          tab['type'] = 'tab';
          return TabData.fromJson(tab);
        }).toList();
        // STATEMENT: Transform data
        
        allItems = extensionTabs;
        // 🔴 STATE CHANGE: Update the list
        
        extensionConnected = true;
        // 🔴 STATE CHANGE: Mark extension as connected
        
        extensionMode = true;
        // 🔴 STATE CHANGE: Enable extension mode
        
        _filterItems();
        // STATEMENT: Call filter function
      });
      // After setState finishes, Flutter rebuilds the UI automatically
      
    } else if (data['action'] == 'clear') {
      // STATEMENT: Check another condition
      
      if (extensionMode) {
        setState(() {
          extensionMode = false;
          // 🔴 STATE CHANGE: Disable extension mode
          
          _loadAllData();
          // STATEMENT: Reload data
        });
      }
    } else if (data['response'] != null) {
      final response = data['response'];
      if (response['status'] == 'started') {
        setState(() {
          extensionMode = true;
          extensionConnected = true;
        });
      } else if (response['status'] == 'stopped') {
        setState(() {
          extensionMode = false;
          _loadAllData();
        });
      }
    }
  }

  void _sendToExtension(Map<String, dynamic> message) {
    // STATEMENT: Function to send message
    
    html.window.postMessage({
      'source': 'tab-tracker-webapp',
      ...message
    }, '*');
    // STATEMENT: Post message to window
  }

  void _startExtensionTracking() {
    _sendToExtension({'action': 'startTracking'});
    // STATEMENT: Send message to extension
    
    setState(() {
      // 🔥 UPDATE STATE
      
      extensionMode = true;
      // 🔴 STATE CHANGE
      
      allItems.clear();
      // 🔴 STATE CHANGE: Clear the list
    });
  }

  void _stopExtensionTracking() {
    _sendToExtension({'action': 'stopTracking'});
    // STATEMENT: Send stop message
    
    setState(() {
      extensionMode = false;
      // 🔴 STATE CHANGE
    });
    
    _loadAllData();
    // STATEMENT: Reload data
  }

  Future<void> _loadAllData() async {
    // STATEMENT: Async function declaration
    
    if (extensionMode) return;
    // STATEMENT: Early return if in extension mode
    
    setState(() {
      isLoading = true;
      // 🔴 STATE CHANGE: Show loading spinner
    });

    try {
      // STATEMENT: Try block for error handling
      
      final tabs = await _getTabs();
      // STATEMENT: Wait for tabs to load
      
      final bookmarks = await _getBookmarks();
      // STATEMENT: Wait for bookmarks to load
      
      final history = await _getHistory();
      // STATEMENT: Wait for history to load

      setState(() {
        // 🔥 UPDATE STATE
        
        allItems = [...tabs, ...bookmarks, ...history];
        // 🔴 STATE CHANGE: Combine all items
        
        _filterItems();
        // STATEMENT: Filter items
        
        isLoading = false;
        // 🔴 STATE CHANGE: Hide loading spinner
      });
      
      _checkExtensionConnection();
      // STATEMENT: Check extension
      
    } catch (e) {
      // STATEMENT: Catch errors
      
      print('Error loading data: $e');
      // STATEMENT: Print error
      
      setState(() {
        isLoading = false;
        // 🔴 STATE CHANGE: Hide loading spinner
      });
    }
  }

  void _checkExtensionConnection() {
    _sendToExtension({'action': 'getStatus'});
    // STATEMENT: Request status
    
    Future.delayed(const Duration(milliseconds: 500), () {
      // STATEMENT: Wait 500ms
      
      if (mounted) {
        // STATEMENT: Check if widget still exists
        
        setState(() {
          // 🔥 UPDATE STATE (even if empty, triggers rebuild)
        });
      }
    });
  }

  Future<List<TabData>> _getTabs() async {
    // STATEMENT: Function that returns Future
    
    try {
      final result = await _callBrowserAPI('getTabs');
      // STATEMENT: Call browser API
      
      if (result != null) {
        // STATEMENT: Check if got result
        
        final List<dynamic> data = json.decode(result);
        // STATEMENT: Parse JSON
        
        return data.map((item) {
          // STATEMENT: Transform each item
          
          item['type'] = 'tab';
          // STATEMENT: Set type
          
          return TabData.fromJson(item);
          // STATEMENT: Create TabData object
        }).toList();
      }
    } catch (e) {
      print('Error getting tabs: $e');
      // STATEMENT: Print error
    }
    
    return [];
    // STATEMENT: Return empty list
  }

  Future<List<TabData>> _getBookmarks() async {
    try {
      final result = await _callBrowserAPI('getBookmarks');
      if (result != null) {
        final List<dynamic> data = json.decode(result);
        return data.map((item) {
          item['type'] = 'bookmark';
          return TabData.fromJson(item);
        }).toList();
      }
    } catch (e) {
      print('Error getting bookmarks: $e');
    }
    return [];
  }

  Future<List<TabData>> _getHistory() async {
    try {
      final result = await _callBrowserAPI('getHistory', [100]);
      if (result != null) {
        final List<dynamic> data = json.decode(result);
        return data.map((item) {
          item['type'] = 'history';
          return TabData.fromJson(item);
        }).toList();
      }
    } catch (e) {
      print('Error getting history: $e');
    }
    return [];
  }

  Future<String?> _callBrowserAPI(String method, [List<dynamic>? args]) async {
    try {
      if (!js_util.hasProperty(html.window, 'BrowserAPI')) {
        // STATEMENT: Check if API exists
        
        print('BrowserAPI not found - running in development mode');
        return null;
        // STATEMENT: Return null
      }

      final browserAPI = js_util.getProperty(html.window, 'BrowserAPI');
      // STATEMENT: Get API object
      
      final function = js_util.getProperty(browserAPI, method);
      // STATEMENT: Get function
      
      final result = args == null
          ? await js_util.promiseToFuture(js_util.callMethod(function, 'call', [browserAPI]))
          : await js_util.promiseToFuture(js_util.callMethod(function, 'call', [browserAPI, ...args]));
      // STATEMENT: Call function and wait for result
      
      return json.encode(result);
      // STATEMENT: Convert to JSON string
      
    } catch (e) {
      print('Error calling $method: $e');
      return null;
    }
  }

  void _filterItems() {
    final query = searchController.text.toLowerCase();
    // STATEMENT: Get search text
    
    setState(() {
      // 🔥 UPDATE STATE
      
      filteredItems = allItems.where((item) {
        // STATEMENT: Filter list
        
        if (filterType != 'all' && item.type != filterType.replaceAll('s', '')) {
          return false;
          // STATEMENT: Exclude item
        }
        
        if (query.isNotEmpty) {
          return item.title.toLowerCase().contains(query) ||
              item.url.toLowerCase().contains(query);
          // STATEMENT: Check if matches search
        }
        
        return true;
        // STATEMENT: Include item
      }).toList();
      
      _sortItems();
      // STATEMENT: Sort the filtered items
    });
  }

  void _sortItems() {
    switch (sortBy) {
      // STATEMENT: Switch based on sortBy value
      
      case 'recent':
        filteredItems.sort((a, b) => b.lastAccessed.compareTo(a.lastAccessed));
        // STATEMENT: Sort by date
        break;
        
      case 'title':
        filteredItems.sort((a, b) => a.title.compareTo(b.title));
        // STATEMENT: Sort alphabetically
        break;
        
      case 'url':
        filteredItems.sort((a, b) => a.url.compareTo(b.url));
        break;
        
      case 'visits':
        filteredItems.sort((a, b) =>
            (b.visitCount ?? 0).compareTo(a.visitCount ?? 0));
        break;
    }
    
    filteredItems.sort((a, b) => b.isPinned ? 1 : (a.isPinned ? -1 : 0));
    // STATEMENT: Keep pinned items at top
  }

  Future<void> _openItem(TabData item) async {
    if (extensionMode) {
      html.window.open(item.url, '_blank');
      // STATEMENT: Open in new tab
    } else {
      if (item.type == 'tab') {
        await _callBrowserAPI('switchToTab', [item.id]);
        // STATEMENT: Switch to tab
      } else {
        await _callBrowserAPI('openTab', [item.url]);
        // STATEMENT: Open new tab
      }
    }
  }

  Future<void> _deleteItem(TabData item) async {
    if (extensionMode) return;
    // STATEMENT: Can't delete in extension mode
    
    if (item.type == 'tab') {
      await _callBrowserAPI('closeTab', [item.id]);
      // STATEMENT: Close tab
    } else if (item.type == 'bookmark') {
      await _callBrowserAPI('removeBookmark', [item.id]);
      // STATEMENT: Delete bookmark
    }
    
    await _loadAllData();
    // STATEMENT: Reload data
  }

  Future<void> _togglePin(TabData item) async {
    if (extensionMode) return;
    
    if (item.type == 'tab') {
      await _callBrowserAPI('togglePinTab', [item.id, !item.isPinned]);
      // STATEMENT: Toggle pin status
      
      await _loadAllData();
      // STATEMENT: Reload data
    }
  }

  String _getIcon(TabData item) {
    // STATEMENT: Function that returns icon emoji
    
    if (item.favicon.isNotEmpty && !item.favicon.contains('data:')) {
      return '🌐';
      // STATEMENT: Return globe icon
    }
    
    switch (item.type) {
      case 'tab':
        return '📑';
      case 'bookmark':
        return '⭐';
      case 'history':
        return '🕐';
      default:
        return '🌐';
    }
  }

  @override
  Widget build(BuildContext context) {
    // STATEMENT: Build method that creates UI
    // This method runs every time setState() is called
    
    final stats = {
      'tabs': allItems.where((i) => i.type == 'tab').length,
      'bookmarks': allItems.where((i) => i.type == 'bookmark').length,
      'history': allItems.where((i) => i.type == 'history').length,
    };
    // STATEMENT: Calculate statistics
    // This uses current STATE (allItems) to calculate counts

    return Scaffold(
      // STATEMENT: Return Scaffold widget
      
      appBar: AppBar(
        title: Row(
          children: [
            const Text('Browser Tab Manager'),
            
            if (extensionMode) ...[
              // STATEMENT: Conditionally show badge based on STATE
              
              const SizedBox(width: 12),
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                decoration: BoxDecoration(
                  color: Colors.green,
                  borderRadius: BorderRadius.circular(12),
                ),
                child: const Text(
                  'TRACKING',
                  style: TextStyle(fontSize: 10, color: Colors.white),
                ),
              ),
            ],
          ],
        ),
        actions: [
          if (extensionMode)
            // STATEMENT: Show stop button if in extension mode (based on STATE)
            
            TextButton.icon(
              onPressed: _stopExtensionTracking,
              // STATEMENT: When pressed, call function that changes STATE
              
              icon: const Icon(Icons.stop, color: Colors.white),
              label: const Text('Stop', style: TextStyle(color: Colors.white)),
            )
          else
            TextButton.icon(
              onPressed: extensionConnected ? _startExtensionTracking : null,
              // STATEMENT: Enable button based on STATE
              
              icon: const Icon(Icons.play_arrow, color: Colors.white),
              label: const Text('Track Tabs', style: TextStyle(color: Colors.white)),
            ),
            
          const SizedBox(width: 8),
          
          IconButton(
            icon: const Icon(Icons.refresh),
            onPressed: extensionMode ? null : _loadAllData,
            // STATEMENT: Disable button based on STATE
            
            tooltip: 'Refresh',
          ),
          
          IconButton(
            icon: Icon(isGridView ? Icons.view_list : Icons.grid_view),
            // STATEMENT: Show different icon based on STATE
            
            onPressed: () {
              setState(() {
                // 🔥 UPDATE STATE
                
                isGridView = !isGridView;
                // 🔴 STATE CHANGE: Toggle view mode
              });
            },
            tooltip: isGridView ? 'List View' : 'Grid View',
          ),
          
          PopupMenuButton<String>(
            icon: const Icon(Icons.sort),
            tooltip: 'Sort by',
            onSelected: (value) {
              setState(() {
                // 🔥 UPDATE STATE
                
                sortBy = value;
                // 🔴 STATE CHANGE: Change sort method
                
                _filterItems();
                // STATEMENT: Re-filter with new sort
              });
            },
            itemBuilder: (context) => [
              const PopupMenuItem(value: 'recent', child: Text('Recent')),
              const PopupMenuItem(value: 'title', child: Text('Title')),
              const PopupMenuItem(value: 'url', child: Text('URL')),
              const PopupMenuItem(value: 'visits', child: Text('Most Visited')),
            ],
          ),
        ],
      ),
      
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              children: [
                TextField(
                  controller: searchController,
                  // Uses STATE (searchController)
                  
                  decoration: InputDecoration(
                    hintText: extensionMode 
                        ? 'Search tracked tabs...'
                        : 'Search tabs, bookmarks, and history...',
                    // STATEMENT: Show different hint based on STATE
                    
                    prefixIcon: const Icon(Icons.search),
                    suffixIcon: searchController.text.isNotEmpty
                        ? IconButton(
                            icon: const Icon(Icons.clear),
                            onPressed: () {
                              searchController.clear();
                              // STATEMENT: Clear search (changes STATE)
                            },
                          )
                        : null,
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(12),
                    ),
                  ),
                ),
                
                const SizedBox(height: 12),
                
                if (!extensionMode)
                  // STATEMENT: Show filters only if not in extension mode (based on STATE)
                  
                  SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: Row(
                      children: [
                        FilterChip(
                          label: Text('All (${allItems.length})'),
                          // Uses STATE to show count
                          
                          selected: filterType == 'all',
                          // Uses STATE to show selection
                          
                          onSelected: (selected) {
                            setState(() {
                              // 🔥 UPDATE STATE
                              
                              filterType = 'all';
                              // 🔴 STATE CHANGE
                              
                              _filterItems();
                            });
                          },
                        ),
                        
                        const SizedBox(width: 8),
                        
                        FilterChip(
                          label: Text('Tabs (${stats['tabs']})'),
                          selected: filterType == 'tabs',
                          onSelected: (selected) {
                            setState(() {
                              filterType = 'tabs';
                              _filterItems();
                            });
                          },
                        ),
                        
                        const SizedBox(width: 8),
                        
                        FilterChip(
                          label: Text('Bookmarks (${stats['bookmarks']})'),
                          selected: filterType == 'bookmarks',
                          onSelected: (selected) {
                            setState(() {
                              filterType = 'bookmarks';
                              _filterItems();
                            });
                          },
                        ),
                        
                        const SizedBox(width: 8),
                        
                        FilterChip(
                          label: Text('History (${stats['history']})'),
                          selected: filterType == 'history',
                          onSelected: (selected) {
                            setState(() {
                              filterType = 'history';
                              _filterItems();
                            });
                          },
                        ),
                      ],
                    ),
                  ),
              ],
            ),
          ),
          
          Expanded(
            child: isLoading
                // STATEMENT: Show different UI based on STATE
                
                ? const Center(child: CircularProgressIndicator())
                // If isLoading is true, show spinner
                
                : filteredItems.isEmpty
                    // If filteredItems is empty, show message
                    
                    ? Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Icon(
                              extensionMode ? Icons.track_changes : Icons.search_off,
                              // Different icon based on STATE
                              
                              size: 80,
                              color: Theme.of(context)
                                  .colorScheme
                                  .primary
                                  .withOpacity(0.3),
                            ),
                            const SizedBox(height: 16),
                            Text(
                              extensionMode 
                                  ? 'Waiting for tabs...'
                                  : 'No items found',
                              // Different message based on STATE
                              
                              style: Theme.of(context).textTheme.titleLarge,
                            ),
                            const SizedBox(height: 8),
                            Text(
                              extensionMode
                                  ? 'Open some tabs to see them here'
                                  : 'Try a different search or filter',
                              style: Theme.of(context).textTheme.bodyMedium,
                            ),
                          ],
                        ),
                      )
                      
                    : isGridView
                        // If isGridView is true, show grid
                        
                        ? GridView.builder(
                            padding: const EdgeInsets.all(16),
                            gridDelegate:
                                const SliverGridDelegateWithMaxCrossAxisExtent(
                              maxCrossAxisExtent: 300,
                              childAspectRatio: 1.3,
                              crossAxisSpacing: 16,
                              mainAxisSpacing: 16,
                            ),
                            itemCount: filteredItems.length,
                            // Uses STATE to determine how many items
                            
                            itemBuilder: (context, index) {
                              return ItemCard(
                                item: filteredItems[index],
                                // Passes STATE data to child widget
                                
                                icon: _getIcon(filteredItems[index]),
                                onTap: () => _openItem(filteredItems[index]),
                                onDelete: () => _deleteItem(filteredItems[index]),
                                onTogglePin: () => _togglePin(filteredItems[index]),
                                extensionMode: extensionMode,
                                // Passes STATE to child
                              );
                            },
                          )
                          
                        : ListView.builder(
                            // Otherwise show list
                            
                            padding: const EdgeInsets.all(16),
                            itemCount: filteredItems.length,
                            itemBuilder: (context, index) {
                              return ItemListTile(
                                item: filteredItems[index],
                                icon: _getIcon(filteredItems[index]),
                                onTap: () => _openItem(filteredItems[index]),
                                onDelete: () => _deleteItem(filteredItems[index]),
                                onTogglePin: () => _togglePin(filteredItems[index]),
                                extensionMode: extensionMode,
                              );
                            },
                          ),
          ),
        ],
      ),
    );
  }
}

// ItemCard and ItemListTile are STATELESS widgets
// They receive data (STATE) from parent and display it
// They don't manage their own STATE

class ItemCard extends StatelessWidget {
  // This widget receives STATE from parent via constructor parameters
  
  final TabData item;          // STATE from parent
  final String icon;           // STATE from parent
  final VoidCallback onTap;    // Function from parent
  final VoidCallback onDelete; // Function from parent
  final VoidCallback onTogglePin; // Function from parent
  final bool extensionMode;    // STATE from parent

  const ItemCard({
    super.key,
    required this.item,
    required this.icon,
    required this.onTap,
    required this.onDelete,
    required this.onTogglePin,
    this.extensionMode = false,
  });

  @override
  Widget build(BuildContext context) {
    // STATEMENT: Build method creates UI
    // This widget doesn't have setState because it's StatelessWidget
    // It just displays the data it receives
    
    return Card(
      clipBehavior: Clip.antiAlias,
      child: InkWell(
        onTap: onTap,
        // STATEMENT: When tapped, call function from parent
        
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              height: 60,
              color: Theme.of(context).colorScheme.primaryContainer,
              child: Center(
                child: item.favicon.isNotEmpty && item.favicon.startsWith('http')
                    ? Image.network(
                        item.favicon,
                        width: 32,
                        height: 32,
                        errorBuilder: (context, error, stackTrace) {
                          return Text(icon, style: const TextStyle(fontSize: 32));
                        },
                      )
                    : Text(icon, style: const TextStyle(fontSize: 32)),
              ),
            ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.all(12.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        if (item.isPinned)
                          // STATEMENT: Show pin icon if item is pinned
                          
                          Icon(
                            Icons.push_pin,
                            size: 14,
                            color: Theme.of(context).colorScheme.primary,
                          ),
                        if (item.isPinned) const SizedBox(width: 4),
                        Container(
                          padding: const EdgeInsets.symmetric(
                            horizontal: 6,
                            vertical: 2,
                          ),
                          decoration: BoxDecoration(
                            color: _getTypeColor(context),
                            borderRadius: BorderRadius.circular(4),
                          ),
                          child: Text(
                            item.type.toUpperCase(),
                            // STATEMENT: Display item type from STATE
                            
                            style: TextStyle(
                              fontSize: 10,
                              color: Theme.of(context).colorScheme.onPrimary,
                            ),
                          ),
                        ),
                      ],
                    ),
                    const SizedBox(height: 6),
                    Expanded(
                      child: Text(
                        item.title,
                        // STATEMENT: Display title from STATE
                        
                        style: Theme.of(context).textTheme.titleSmall,
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                    const SizedBox(height: 4),
                    Text(
                      item.url,
                      // STATEMENT: Display URL from STATE
                      
                      style: Theme.of(context).textTheme.bodySmall?.copyWith(
                            color: Theme.of(context).colorScheme.secondary,
                          ),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                    if (item.visitCount != null) ...[
                      // STATEMENT: Show visit count if it exists
                      
                      const SizedBox(height: 4),
                      Text(
                        '${item.visitCount} visits',
                        // STATEMENT: Display visit count from STATE
                        
                        style: Theme.of(context).textTheme.bodySmall,
                      ),
                    ],
                  ],
                ),
              ),
            ),
            if (!extensionMode)
              // STATEMENT: Show buttons only if not in extension mode (based on STATE)
              
              ButtonBar(
                alignment: MainAxisAlignment.end,
                buttonPadding: EdgeInsets.zero,
                children: [
                  if (item.type == 'tab')
                    // STATEMENT: Show pin button only for tabs
                    
                    IconButton(
                      icon: Icon(
                        item.isPinned ? Icons.push_pin : Icons.push_pin_outlined,
                        // STATEMENT: Different icon based on pin STATE
                        
                        size: 18,
                      ),
                      onPressed: onTogglePin,
                      // STATEMENT: When pressed, call parent's function
                      
                      tooltip: item.isPinned ? 'Unpin' : 'Pin',
                    ),
                  if (item.type != 'history')
                    // STATEMENT: Show delete button for tabs and bookmarks (not history)
                    
                    IconButton(
                      icon: const Icon(Icons.delete_outline, size: 18),
                      onPressed: onDelete,
                      // STATEMENT: When pressed, call parent's delete function
                      
                      tooltip: 'Delete',
                    ),
                ],
              ),
          ],
        ),
      ),
    );
  }

  Color _getTypeColor(BuildContext context) {
    // STATEMENT: Function that returns color based on item type
    
    switch (item.type) {
      // STATEMENT: Check item type (from STATE)
      
      case 'tab':
        return Colors.blue;
        // STATEMENT: Return blue for tabs
        
      case 'bookmark':
        return Colors.orange;
        // STATEMENT: Return orange for bookmarks
        
      case 'history':
        return Colors.purple;
        // STATEMENT: Return purple for history
        
      default:
        return Theme.of(context).colorScheme.primary;
        // STATEMENT: Return theme color as fallback
    }
  }
}

class ItemListTile extends StatelessWidget {
  // Another STATELESS widget - displays data from parent
  
  final TabData item;          // STATE from parent
  final String icon;           // STATE from parent
  final VoidCallback onTap;    // Function from parent
  final VoidCallback onDelete; // Function from parent
  final VoidCallback onTogglePin; // Function from parent
  final bool extensionMode;    // STATE from parent

  const ItemListTile({
    super.key,
    required this.item,
    required this.icon,
    required this.onTap,
    required this.onDelete,
    required this.onTogglePin,
    this.extensionMode = false,
  });

  @override
  Widget build(BuildContext context) {
    // STATEMENT: Build method creates UI
    
    return Card(
      margin: const EdgeInsets.only(bottom: 8),
      child: ListTile(
        leading: CircleAvatar(
          child: item.favicon.isNotEmpty && item.favicon.startsWith('http')
              ? Image.network(
                  item.favicon,
                  width: 20,
                  height: 20,
                  errorBuilder: (context, error, stackTrace) {
                    return Text(icon, style: const TextStyle(fontSize: 20));
                  },
                )
              : Text(icon, style: const TextStyle(fontSize: 20)),
        ),
        title: Row(
          children: [
            if (item.isPinned) ...[
              // STATEMENT: Show pin icon if pinned
              
              Icon(
                Icons.push_pin,
                size: 14,
                color: Theme.of(context).colorScheme.primary,
              ),
              const SizedBox(width: 4),
            ],
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
              decoration: BoxDecoration(
                color: _getTypeColor(context),
                borderRadius: BorderRadius.circular(4),
              ),
              child: Text(
                item.type.toUpperCase(),
                // STATEMENT: Display type from STATE
                
                style: TextStyle(
                  fontSize: 10,
                  color: Theme.of(context).colorScheme.onPrimary,
                ),
              ),
            ),
            const SizedBox(width: 8),
            Expanded(
              child: Text(
                item.title,
                // STATEMENT: Display title from STATE
                
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ],
        ),
        subtitle: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              item.url,
              // STATEMENT: Display URL from STATE
              
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
            if (item.visitCount != null)
              // STATEMENT: Show visit count if exists
              
              Text('${item.visitCount} visits',
                  style: Theme.of(context).textTheme.bodySmall),
          ],
        ),
        trailing: extensionMode ? null : Row(
          // STATEMENT: Show buttons based on extensionMode STATE
          
          mainAxisSize: MainAxisSize.min,
          children: [
            if (item.type == 'tab')
              // STATEMENT: Pin button only for tabs
              
              IconButton(
                icon: Icon(
                  item.isPinned ? Icons.push_pin : Icons.push_pin_outlined,
                ),
                onPressed: onTogglePin,
                // STATEMENT: Call parent's function
                
                tooltip: item.isPinned ? 'Unpin' : 'Pin',
              ),
            if (item.type != 'history')
              // STATEMENT: Delete button for tabs and bookmarks
              
              IconButton(
                icon: const Icon(Icons.delete_outline),
                onPressed: onDelete,
                // STATEMENT: Call parent's function
                
                tooltip: 'Delete',
              ),
          ],
        ),
        onTap: onTap,
        // STATEMENT: When tapped, call parent's function
      ),
    );
  }

  Color _getTypeColor(BuildContext context) {
    // STATEMENT: Function to get color based on type
    
    switch (item.type) {
      case 'tab':
        return Colors.blue;
      case 'bookmark':
        return Colors.orange;
      case 'history':
        return Colors.purple;
      default:
        return Theme.of(context).colorScheme.primary;
    }
  }
}