content: // ignore_for_file: deprecated_member_use
  import 'dart:ui';
  import 'package:anymex/controllers/offline/offline_storage_controller.dart';
  import 'package:anymex/models/Offline/Hive/offline_media.dart';
  import 'package:anymex/widgets/common/glow.dart';
  import 'package:anymex/widgets/header.dart';
  import 'package:anymex/widgets/non_widgets/snackbar.dart';
  import 'package:dartotsu_extension_bridge/Models/Source.dart';
  import 'package:flutter/material.dart';
  import 'package:flutter/services.dart';
  import 'package:get/get.dart';
  
  class CustomListsEditor extends StatefulWidget {
    final ItemType type;
    const CustomListsEditor({super.key, required this.type});
  
    @override
    State<CustomListsEditor> createState() => _CustomListsEditorState();
  }
  
  class _CustomListsEditorState extends State<CustomListsEditor> {
    late List<CustomListData> _lists;
  
    bool _isReordering = false;
    int? _expandedIndex;
  
    final offlineStorage = Get.find<OfflineStorageController>();
  
    @override
    void initState() {
      super.initState();
      _lists = offlineStorage.getEditableCustomListData(mediaType: widget.type);
    }
  
    @override
    void dispose() {
      super.dispose();
    }
  
    void _saveListData() =>
        offlineStorage.applyCustomListChanges(_lists, mediaType: widget.type);
  
    @override
    Widget build(BuildContext context) {
      return Glow(
        child: Scaffold(
          backgroundColor: Colors.transparent,
          body: Column(
            children: [
              _buildAppBar(),
              Expanded(
                child: _buildContent(),
              ),
            ],
          ),
          floatingActionButton: _buildFAB(),
        ),
      );
    }
  
    Widget _buildAppBar() {
      final theme = Theme.of(context);
      return Container(
        padding: const EdgeInsets.only(top: 50, left: 20, right: 20, bottom: 20),
        decoration: BoxDecoration(
          color: theme.colorScheme.surface.withValues(alpha: 0.4),
          border: Border(
            bottom: BorderSide(
              color: theme.colorScheme.outline.withOpacity(0.1),
              width: 1,
            ),
          ),
          boxShadow: [
            BoxShadow(
              color: theme.colorScheme.shadow.withOpacity(0.05),
              offset: const Offset(0, 2),
              blurRadius: 8,
            ),
          ],
        ),
        child: Row(
          children: [
            Material(
              color: Colors.transparent,
              child: InkWell(
                onTap: () => Get.back(),
                borderRadius: BorderRadius.circular(16),
                child: Container(
                  padding: const EdgeInsets.all(12),
                  decoration: BoxDecoration(
                    color: theme.colorScheme.surfaceVariant.withOpacity(0.3),
                    borderRadius: BorderRadius.circular(16),
                    border: Border.all(
                      color: theme.colorScheme.outline.withOpacity(0.1),
                    ),
                  ),
                  child: Icon(
                    Icons.arrow_back_ios_rounded,
                    color: theme.colorScheme.onSurface,
                    size: 20,
                  ),
                ),
              ),
            ),
            const SizedBox(width: 16),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'Custom Lists',
                    style: TextStyle(
                      color: theme.colorScheme.onSurface,
                      fontWeight: FontWeight.w700,
                      fontSize: 24,
                      letterSpacing: -0.5,
                    ),
                  ),
                  Text(
                    '${_lists.length} lists • Tap to expand',
                    style: TextStyle(
                      color: theme.colorScheme.onSurface.withOpacity(0.6),
                      fontSize: 14,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ],
              ),
            ),
            Material(
              color: Colors.transparent,
              child: InkWell(
                onTap: _toggleReorderMode,
                borderRadius: BorderRadius.circular(16),
                child: Container(
                  padding: const EdgeInsets.all(12),
                  decoration: BoxDecoration(
                    color: _isReordering
                        ? theme.colorScheme.primary.withOpacity(0.3)
                        : theme.colorScheme.surfaceVariant.withOpacity(0.3),
                    borderRadius: BorderRadius.circular(16),
                    border: Border.all(
                      color: _isReordering
                          ? theme.colorScheme.primary.withOpacity(0.3)
                          : theme.colorScheme.outline.withOpacity(0.1),
                    ),
                  ),
                  child: Icon(
                    _isReordering ? Icons.check_rounded : Icons.swap_vert_rounded,
                    color: _isReordering
                        ? theme.colorScheme.primary
                        : theme.colorScheme.onSurface,
                    size: 20,
                  ),
                ),
              ),
            ),
          ],
        ),
      );
    }
  
    Widget _buildContent() {
      if (_lists.isEmpty) {
        return _buildEmptyState();
      }
  
      return ReorderableListView.builder(
        onReorder: _isReordering ? _onReorder : (a, b) {},
        padding: const EdgeInsets.all(20),
        itemCount: _lists.length,
        buildDefaultDragHandles: false,
        proxyDecorator: (child, index, animation) {
          return AnimatedBuilder(
            animation: animation,
            builder: (context, child) {
              final animValue = Curves.easeInOut.transform(animation.value);
              final elevation = lerpDouble(0, 8, animValue)!;
              final scale = lerpDouble(1, 1.05, animValue)!;
  
              return Transform.scale(
                scale: scale,
                child: Material(
                  elevation: elevation,
                  color: Colors.transparent,
                  shadowColor:
                      Theme.of(context).colorScheme.shadow.withOpacity(0.3),
                  borderRadius: BorderRadius.circular(24),
                  child: child,
                ),
              );
            },
            child: child,
          );
        },
        itemBuilder: (context, index) {
          return _buildListCard(index);
        },
      );
    }
  
    Widget _buildListCard(int index) {
      final theme = Theme.of(context);
      final listData = _lists[index];
      final isExpanded = _expandedIndex == index;
  
      return Card(
        key: ValueKey('list_$index'),
        margin: const EdgeInsets.only(bottom: 16),
        elevation: 0,
        color: theme.colorScheme.surface.withOpacity(0.4),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(24),
          side: BorderSide(
            color: theme.colorScheme.outline.withOpacity(0.1),
          ),
        ),
        child: AnimatedContainer(
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeOutCubic,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(24),
            gradient: isExpanded
                ? LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [
                      theme.colorScheme.primary.withOpacity(0.05),
                      theme.colorScheme.secondary.withOpacity(0.05),
                    ],
                  )
                : null,
          ),
          child: Column(
            children: [
              Material(
                color: Colors.transparent,
                child: InkWell(
                  onTap: () => _toggleExpansion(index),
                  borderRadius: BorderRadius.circular(24),
                  child: Padding(
                    padding: const EdgeInsets.all(20),
                    child: Row(
                      children: [
                        if (_isReordering) ...[
                          ReorderableDragStartListener(
                            index: index,
                            child: Container(
                              padding: const EdgeInsets.all(4),
                              child: Icon(
                                Icons.drag_handle_rounded,
                                color:
                                    theme.colorScheme.onSurface.withOpacity(0.4),
                                size: 24,
                              ),
                            ),
                          ),
                          const SizedBox(width: 16),
                        ],
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                listData.listName,
                                style: TextStyle(
                                  color: theme.colorScheme.onSurface,
                                  fontWeight: FontWeight.w600,
                                  fontSize: 18,
                                  letterSpacing: -0.3,
                                ),
                              ),
                              const SizedBox(height: 4),
                              Text(
                                '${listData.listData.length} items',
                                style: TextStyle(
                                  color: theme.colorScheme.onSurface
                                      .withOpacity(0.6),
                                  fontSize: 14,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),
                            ],
                          ),
                        ),
                        if (!_isReordering) ...[
                          _buildActionButton(
                            icon: Icons.edit_rounded,
                            onTap: () => _showRenameDialog(index),
                            color: theme.colorScheme.primary,
                          ),
                          const SizedBox(width: 8),
                          if (_lists.length != 1)
                            _buildActionButton(
                              icon: Icons.delete_outline_rounded,
                              onTap: () => _showDeleteDialog(index),
                              color: theme.colorScheme.error,
                            ),
                          const SizedBox(width: 8),
                        ],
                        AnimatedRotation(
                          turns: isExpanded ? 0.5 : 0,
                          duration: const Duration(milliseconds: 300),
                          child: Icon(
                            Icons.keyboard_arrow_down_rounded,
                            color: theme.colorScheme.onSurface.withOpacity(0.6),
                            size: 24,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              AnimatedCrossFade(
                firstChild: const SizedBox.shrink(),
                secondChild: _buildExpandedContent(index),
                crossFadeState: isExpanded
                    ? CrossFadeState.showSecond
                    : CrossFadeState.showFirst,
                duration: const Duration(milliseconds: 300),
              ),
            ],
          ),
        ),
      );
    }
  
    Widget _buildExpandedContent(int index) {
      final theme = Theme.of(context);
      final items = _lists[index].listData;
  
      return Container(
        padding: const EdgeInsets.fromLTRB(20, 0, 20, 20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Divider(
              color: theme.colorScheme.outline.withOpacity(0.1),
              height: 1,
            ),
            const SizedBox(height: 16),
            Text(
              'Items in this list',
              style: TextStyle(
                color: theme.colorScheme.onSurface.withOpacity(0.8),
                fontWeight: FontWeight.w600,
                fontSize: 16,
              ),
            ),
            const SizedBox(height: 12),
            ...items.asMap().entries.map((entry) {
              return _buildMediaItem(index, entry.key, entry.value);
            }),
          ],
        ),
      );
    }
  
    Widget _buildMediaItem(int listIndex, int itemIndex, OfflineMedia media) {
      final theme = Theme.of(context);
  
      return Container(
        margin: const EdgeInsets.only(bottom: 8),
        decoration: BoxDecoration(
          color: theme.colorScheme.surfaceVariant.withOpacity(0.3),
          borderRadius: BorderRadius.circular(16),
          border: Border.all(
            color: theme.colorScheme.outline.withOpacity(0.05),
          ),
        ),
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            borderRadius: BorderRadius.circular(16),
            onTap: () {},
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Row(
                children: [
                  NetworkSizedImage(
                    width: 40,
                    radius: 20,
                    height: 40,
                    imageUrl: media.poster ?? media.cover ?? '',
                  ),
                  const SizedBox(width: 12),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          media.name ?? media.jname ?? 'Unknown Title',
                          style: TextStyle(
                            color: theme.colorScheme.onSurface,
                            fontWeight: FontWeight.w600,
                            fontSize: 14,
                          ),
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                        if (media.type != null) ...[
                          const SizedBox(height: 2),
                          Text(
                            media.type!,
                            style: TextStyle(
                              color: theme.colorScheme.onSurface.withOpacity(0.6),
                              fontSize: 12,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                        ],
                      ],
                    ),
                  ),
                  Material(
                    color: Colors.transparent,
                    child: InkWell(
                      borderRadius: BorderRadius.circular(8),
                      onTap: () => _removeMediaItem(listIndex, itemIndex),
                      child: Padding(
                        padding: const EdgeInsets.all(8),
                        child: Icon(
                          Icons.close_rounded,
                          color: theme.colorScheme.error.withOpacity(0.7),
                          size: 18,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      );
    }
  
    Widget _buildActionButton({
      required IconData icon,
      required VoidCallback onTap,
      required Color color,
    }) {
      return Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: onTap,
          borderRadius: BorderRadius.circular(12),
          child: Container(
            padding: const EdgeInsets.all(8),
            decoration: BoxDecoration(
              color: color.withOpacity(0.3),
              borderRadius: BorderRadius.circular(12),
            ),
            child: Icon(
              icon,
              color: color,
              size: 18,
            ),
          ),
        ),
      );
    }
  
    Widget _buildEmptyState() {
      final theme = Theme.of(context);
  
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              padding: const EdgeInsets.all(32),
              decoration: BoxDecoration(
                color: theme.colorScheme.surfaceVariant.withOpacity(0.3),
                shape: BoxShape.circle,
              ),
              child: Icon(
                Icons.playlist_add_rounded,
                size: 64,
                color: theme.colorScheme.onSurface.withOpacity(0.4),
              ),
            ),
            const SizedBox(height: 24),
            Text(
              'No custom lists yet',
              style: TextStyle(
                color: theme.colorScheme.onSurface,
                fontSize: 24,
                fontWeight: FontWeight.w600,
              ),
            ),
            const SizedBox(height: 8),
            Text(
              'Create your first custom list to organize\nyour favorite content',
              textAlign: TextAlign.center,
              style: TextStyle(
                color: theme.colorScheme.onSurface.withOpacity(0.6),
                fontSize: 16,
              ),
            ),
          ],
        ),
      );
    }
  
    Widget _buildFAB() {
      final theme = Theme.of(context);
  
      return FloatingActionButton.extended(
        onPressed: _showCreateListDialog,
        backgroundColor: theme.colorScheme.primary.withOpacity(0.7),
        foregroundColor: theme.colorScheme.onPrimary,
        elevation: 8,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
        ),
        icon: const Icon(Icons.add_rounded),
        label: Text(
          'New List',
          style: TextStyle(
              fontWeight: FontWeight.w600,
              color: Theme.of(context).colorScheme.onPrimary),
        ),
      );
    }
  
    void _toggleReorderMode() {
      setState(() {
        _isReordering = !_isReordering;
        _expandedIndex = null;
      });
      HapticFeedback.lightImpact();
    }
  
    void _toggleExpansion(int index) {
      if (!_isReordering) {
        setState(() {
          _expandedIndex = _expandedIndex == index ? null : index;
        });
        HapticFeedback.selectionClick();
      }
    }
  
    void _onReorder(int oldIndex, int newIndex) {
      if (oldIndex < newIndex) {
        newIndex -= 1;
      }
      setState(() {
        final item = _lists.removeAt(oldIndex);
        _lists.insert(newIndex, item);
      });
      _saveListData();
      HapticFeedback.mediumImpact();
    }
  
    void _removeMediaItem(int listIndex, int itemIndex) {
      setState(() {
        _lists[listIndex].listData.removeAt(itemIndex);
      });
      _saveListData();
      HapticFeedback.lightImpact();
  
      snackBar('Item removed');
    }
  
    void _showRenameDialog(int index) {
      final controller = TextEditingController(text: _lists[index].listName);
      final theme = Theme.of(context);
  
      showDialog(
        context: context,
        builder: (context) => AlertDialog(
          backgroundColor: theme.colorScheme.surface.withOpacity(0.5),
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)),
          title: Text(
            'Rename List',
            style: TextStyle(
              color: theme.colorScheme.onSurface,
              fontWeight: FontWeight.w600,
            ),
          ),
          content: TextField(
            controller: controller,
            style: TextStyle(color: theme.colorScheme.onSurface),
            decoration: InputDecoration(
              hintText: 'Enter list name',
              hintStyle: TextStyle(
                color: theme.colorScheme.onSurface.withOpacity(0.5),
              ),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(16),
                borderSide: BorderSide(
                  color: theme.colorScheme.outline.withOpacity(0.3),
                ),
              ),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(16),
                borderSide: BorderSide(color: theme.colorScheme.primary),
              ),
              filled: true,
              fillColor: theme.colorScheme.surfaceVariant.withOpacity(0.3),
            ),
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: Text(
                'Cancel',
                style: TextStyle(
                    color: theme.colorScheme.onSurface.withOpacity(0.7)),
              ),
            ),
            FilledButton(
              onPressed: () {
                if (controller.text.isNotEmpty &&
                    controller.text != _lists[index].listName) {
                  if (_lists.any((list) => list.listName == controller.text)) {
                    (snackBar(('List name already exists')));
                    return;
                  }
  
                  setState(() {
                    _lists[index].listName = controller.text;
                  });
                  _saveListData();
                  Navigator.pop(context);
                  HapticFeedback.lightImpact();
                }
              },
              style: FilledButton.styleFrom(
                backgroundColor: theme.colorScheme.primary.withOpacity(0.5),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12)),
              ),
              child: const Text('Rename'),
            ),
          ],
        ),
      );
    }
  
    void _showDeleteDialog(int index) {
      final theme = Theme.of(context);
  
      showDialog(
        context: context,
        builder: (context) => AlertDialog(
          backgroundColor: theme.colorScheme.surface.withOpacity(0.5),
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)),
          title: Text(
            'Delete List',
            style: TextStyle(
              color: theme.colorScheme.onSurface,
              fontWeight: FontWeight.w600,
            ),
          ),
          content: Text(
            'Are you sure you want to delete "${_lists[index].listName}"? This action cannot be undone.',
            style: TextStyle(color: theme.colorScheme.onSurface.withOpacity(0.8)),
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: Text(
                'Cancel',
                style: TextStyle(
                    color: theme.colorScheme.onSurface.withOpacity(0.7)),
              ),
            ),
            FilledButton(
              onPressed: () {
                setState(() {
                  _lists.removeAt(index);
                  if (_expandedIndex == index) _expandedIndex = null;
                  _saveListData();
                });
                Navigator.pop(context);
                HapticFeedback.mediumImpact();
              },
              style: FilledButton.styleFrom(
                backgroundColor: theme.colorScheme.error.withOpacity(0.5),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12)),
              ),
              child: const Text('Delete'),
            ),
          ],
        ),
      );
    }
  
    void _showCreateListDialog() {
      final controller = TextEditingController();
      final theme = Theme.of(context);
  
      showDialog(
        context: context,
        builder: (context) => AlertDialog(
          backgroundColor: theme.colorScheme.surface.withOpacity(0.5),
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)),
          title: Text(
            'Create New List',
            style: TextStyle(
              color: theme.colorScheme.onSurface,
              fontWeight: FontWeight.w600,
            ),
          ),
          content: TextField(
            controller: controller,
            style: TextStyle(color: theme.colorScheme.onSurface),
            decoration: InputDecoration(
              hintText: 'Enter list name',
              hintStyle: TextStyle(
                color: theme.colorScheme.onSurface.withOpacity(0.5),
              ),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(16),
                borderSide: BorderSide(
                  color: theme.colorScheme.outline.withOpacity(0.3),
                ),
              ),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(16),
                borderSide: BorderSide(color: theme.colorScheme.primary),
              ),
              filled: true,
              fillColor: theme.colorScheme.surfaceVariant.withOpacity(0.3),
            ),
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: Text(
                'Cancel',
                style: TextStyle(
                    color: theme.colorScheme.onSurface.withOpacity(0.7)),
              ),
            ),
            FilledButton(
              onPressed: () {
                if (controller.text.isNotEmpty) {
                  if (_lists.any((list) => list.listName == controller.text)) {
                    snackBar('List name already exists');
                    return;
                  }
  
                  setState(() {
                    _lists.add(CustomListData(
                      listName: controller.text,
                      listData: [],
                    ));
                  });
                  _saveListData();
                  Navigator.pop(context);
                  HapticFeedback.lightImpact();
                }
              },
              style: FilledButton.styleFrom(
                backgroundColor: theme.colorScheme.primary,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12)),
              ),
              child: Text(
                'Create',
                style: TextStyle(color: Theme.of(context).colorScheme.onPrimary),
              ),
            ),
          ],
        ),
      );
    }
  }
  