import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import '../main.dart';
import '../services/storage_service.dart';
import '../theme/app_colors.dart';
import '../widgets/car_card.dart';

/// The "My Garage" screen — shows a collection's cars in a grid.
class GarageScreen extends StatefulWidget {
  final String collectionId;
  final String collectionName;
  final bool isOwner;

  const GarageScreen({
    super.key,
    required this.collectionId,
    required this.collectionName,
    this.isOwner = true,
  });

  @override
  State<GarageScreen> createState() => GarageScreenState();
}

class GarageScreenState extends State<GarageScreen> {
  List<Map<String, dynamic>> _cars = [];
  bool _isLoading = true;
  String? _error;
  String _searchQuery = '';
  final _searchController = TextEditingController();

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

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

  /// Public method so other screens can trigger a refresh.
  void refresh() => _loadCars();

  Future<void> _loadCars() async {
    setState(() {
      _isLoading = true;
      _error = null;
    });

    try {
      final data = await supabase
          .from('hotwheels')
          .select()
          .eq('collection_id', widget.collectionId)
          .order('created_at', ascending: false);

      if (!mounted) return;
      setState(() {
        _cars = List<Map<String, dynamic>>.from(data);
        _isLoading = false;
      });
    } catch (e) {
      if (!mounted) return;
      setState(() {
        _error = e.toString();
        _isLoading = false;
      });
    }
  }

  List<Map<String, dynamic>> get _filteredCars {
    if (_searchQuery.isEmpty) return _cars;
    final q = _searchQuery.toLowerCase();
    return _cars.where((car) {
      final id = (car['hw_id'] as String? ?? '').toLowerCase();
      final name = (car['name'] as String? ?? '').toLowerCase();
      final series = (car['series'] as String? ?? '').toLowerCase();
      return id.contains(q) || name.contains(q) || series.contains(q);
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          // ── Header ──
          SliverAppBar(
            expandedHeight: 140,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              titlePadding:
                  const EdgeInsets.only(left: 20, bottom: 16),
              title: Text(
                widget.collectionName,
                style: TextStyle(
                  fontFamily: 'Poppins',
                  fontWeight: FontWeight.w700,
                  fontSize: 22,
                  color: Colors.white,
                  shadows: [
                    Shadow(
                      color: Colors.black.withValues(alpha: 0.3),
                      blurRadius: 4,
                    ),
                  ],
                ),
              ),
              background: Container(
                decoration: const BoxDecoration(
                  gradient: AppColors.brandGradient,
                ),
                child: Align(
                  alignment: Alignment.centerRight,
                  child: Padding(
                    padding: const EdgeInsets.only(right: 24),
                    child: Icon(
                      Icons.directions_car_filled,
                      size: 72,
                      color: Colors.white.withValues(alpha: 0.15),
                    ),
                  ),
                ),
              ),
            ),
          ),

          // ── Stats bar ──
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.fromLTRB(16, 16, 16, 4),
              child: Row(
                children: [
                  _StatChip(
                    icon: Icons.directions_car,
                    label: '${_cars.length}',
                    subtitle: 'Total Cars',
                  ),
                  const SizedBox(width: 12),
                  _StatChip(
                    icon: Icons.new_releases,
                    label: _recentCount(),
                    subtitle: 'This Week',
                  ),
                ],
              ),
            ),
          ),

          // ── Search bar ──
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.fromLTRB(16, 12, 16, 8),
              child: TextField(
                controller: _searchController,
                onChanged: (v) => setState(() => _searchQuery = v),
                decoration: InputDecoration(
                  hintText: 'Search by ID, name, or series…',
                  prefixIcon: const Icon(Icons.search),
                  suffixIcon: _searchQuery.isEmpty
                      ? null
                      : IconButton(
                          icon: const Icon(Icons.clear),
                          onPressed: () {
                            _searchController.clear();
                            setState(() => _searchQuery = '');
                          },
                        ),
                ),
              ),
            ),
          ),

          // ── Content ──
          if (_isLoading)
            const SliverFillRemaining(
              child: Center(child: CircularProgressIndicator()),
            )
          else if (_error != null)
            SliverFillRemaining(
              child: _ErrorView(
                message: _error!,
                onRetry: _loadCars,
              ),
            )
          else if (_filteredCars.isEmpty)
            SliverFillRemaining(
              child: _EmptyGarage(hasSearch: _searchQuery.isNotEmpty),
            )
          else
            SliverPadding(
              padding: const EdgeInsets.fromLTRB(8, 4, 8, 100),
              sliver: SliverGrid(
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  childAspectRatio: 0.72,
                  mainAxisSpacing: 4,
                  crossAxisSpacing: 0,
                ),
                delegate: SliverChildBuilderDelegate(
                  (context, index) {
                    final car = _filteredCars[index];
                    return CarCard(
                      hwId: car['hw_id'] as String? ?? '???',
                      name: car['name'] as String?,
                      series: car['series'] as String?,
                      year: car['year'] as int?,
                      color: car['color'] as String?,
                      imageUrl: car['image_url'] as String?,
                      addedAt: car['created_at'] != null
                          ? DateTime.tryParse(car['created_at'])
                          : null,
                      onTap: () => _showCarDetails(car),
                    );
                  },
                  childCount: _filteredCars.length,
                ),
              ),
            ),
        ],
      ),
    );
  }

  String _recentCount() {
    final weekAgo = DateTime.now().subtract(const Duration(days: 7));
    final count = _cars.where((c) {
      final ts = c['created_at'];
      if (ts == null) return false;
      final d = DateTime.tryParse(ts.toString());
      return d != null && d.isAfter(weekAgo);
    }).length;
    return '$count';
  }

  void _showCarDetails(Map<String, dynamic> car) {
    final hwId = car['hw_id'] as String? ?? '???';
    final name = car['name'] as String?;
    final series = car['series'] as String?;
    final year = car['year'] as int?;
    final notes = car['notes'] as String?;
    final imageUrl = car['image_url'] as String?;

    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
      ),
      builder: (_) => DraggableScrollableSheet(
        initialChildSize: 0.55,
        minChildSize: 0.3,
        maxChildSize: 0.85,
        expand: false,
        builder: (context, scrollController) => ListView(
          controller: scrollController,
          padding: const EdgeInsets.all(24),
          children: [
            // Drag handle
            Center(
              child: Container(
                width: 40,
                height: 4,
                margin: const EdgeInsets.only(bottom: 20),
                decoration: BoxDecoration(
                  color: Colors.grey.shade300,
                  borderRadius: BorderRadius.circular(2),
                ),
              ),
            ),

            // ── Car image ──
            ClipRRect(
              borderRadius: BorderRadius.circular(16),
              child: AspectRatio(
                aspectRatio: 16 / 10,
                child: imageUrl != null && imageUrl.isNotEmpty
                    ? Image.network(
                        imageUrl,
                        fit: BoxFit.cover,
                        errorBuilder: (context, error, stackTrace) => _imagePlaceholder(),
                      )
                    : _imagePlaceholder(),
              ),
            ),
            const SizedBox(height: 8),

            // Change / Add photo button
            Align(
              alignment: Alignment.centerRight,
              child: TextButton.icon(
                onPressed: () => _updatePhoto(car, context),
                icon: Icon(
                  imageUrl != null ? Icons.camera_alt : Icons.add_a_photo,
                  size: 18,
                ),
                label: Text(imageUrl != null ? 'Change Photo' : 'Add Photo'),
              ),
            ),

            const SizedBox(height: 4),

            // ID badge
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                padding: const EdgeInsets.symmetric(
                    horizontal: 12, vertical: 6),
                decoration: BoxDecoration(
                  gradient: AppColors.brandGradient,
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Text(
                  hwId,
                  style: const TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.w700,
                    fontSize: 18,
                    letterSpacing: 1.5,
                  ),
                ),
              ),
            ),

            if (name != null && name.isNotEmpty) ...[
              const SizedBox(height: 16),
              Text(
                name,
                style: Theme.of(context).textTheme.headlineSmall?.copyWith(
                      fontWeight: FontWeight.w600,
                    ),
              ),
            ],

            const SizedBox(height: 12),
            const Divider(),
            const SizedBox(height: 8),

            if (series != null && series.isNotEmpty)
              _DetailRow(icon: Icons.collections, label: 'Series', value: series),
            if (year != null)
              _DetailRow(icon: Icons.calendar_today, label: 'Year', value: '$year'),
            if (notes != null && notes.isNotEmpty)
              _DetailRow(icon: Icons.notes, label: 'Notes', value: notes),

            const SizedBox(height: 24),

            // Edit & Delete buttons
            Row(
              children: [
                Expanded(
                  child: ElevatedButton.icon(
                    onPressed: () => _editCar(car, context),
                    icon: const Icon(Icons.edit, size: 18),
                    label: const Text('Edit Details'),
                  ),
                ),
                const SizedBox(width: 12),
                Expanded(
                  child: OutlinedButton.icon(
                    onPressed: () => _deleteCar(car, context),
                    icon: const Icon(Icons.delete_outline, color: AppColors.error),
                    label: const Text('Remove',
                        style: TextStyle(color: AppColors.error)),
                    style: OutlinedButton.styleFrom(
                      side: const BorderSide(color: AppColors.error),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _imagePlaceholder() {
    final isDark = Theme.of(context).brightness == Brightness.dark;
    return Container(
      color: isDark ? AppColors.surfaceDark : AppColors.backgroundLight,
      child: Center(
        child: Icon(
          Icons.directions_car_filled,
          size: 48,
          color: isDark
              ? Colors.white.withValues(alpha: 0.15)
              : AppColors.orange.withValues(alpha: 0.25),
        ),
      ),
    );
  }

  /// Take a new photo and update the image_url for this car.
  Future<void> _updatePhoto(
      Map<String, dynamic> car, BuildContext sheetContext) async {
    final picker = ImagePicker();
    final xFile = await picker.pickImage(
      source: ImageSource.camera,
      maxWidth: 800,
      maxHeight: 800,
      imageQuality: 60,
    );
    if (xFile == null) return;

    showGlobalSnackBar('Uploading photo…');

    final oldImageUrl = car['image_url'] as String?;
    final url = await StorageService.uploadCarImage(
      file: File(xFile.path),
      oldImageUrl: oldImageUrl,
    );

    if (url == null) {
      showGlobalSnackBar('Failed to upload photo.', isError: true);
      return;
    }

    try {
      await supabase
          .from('hotwheels')
          .update({'image_url': url})
          .eq('id', car['id']);

      showGlobalSnackBar('Photo updated!');
      if (sheetContext.mounted) Navigator.pop(sheetContext);
      _loadCars(); // refresh grid
    } catch (e) {
      showGlobalSnackBar('Failed to save: $e', isError: true);
    }
  }

  /// Open an edit dialog for this car, then update Supabase.
  Future<void> _editCar(
      Map<String, dynamic> car, BuildContext sheetContext) async {
    final updated = await showDialog<Map<String, dynamic>>(
      context: sheetContext,
      builder: (_) => _EditCarDialog(car: car),
    );
    if (updated == null) return;

    try {
      await supabase
          .from('hotwheels')
          .update(updated)
          .eq('id', car['id']);

      showGlobalSnackBar('Car updated!');
      if (sheetContext.mounted) Navigator.pop(sheetContext);
      _loadCars();
    } catch (e) {
      showGlobalSnackBar('Failed to update: $e', isError: true);
    }
  }

  Future<void> _deleteCar(
      Map<String, dynamic> car, BuildContext sheetContext) async {
    if (!sheetContext.mounted) return;
    final confirmed = await showDialog<bool>(
      context: sheetContext,
      builder: (_) => AlertDialog(
        title: const Text('Remove Car?'),
        content: Text(
            'Remove ${car['hw_id']} from your garage? This cannot be undone.'),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(sheetContext, false),
            child: const Text('Cancel'),
          ),
          ElevatedButton(
            onPressed: () => Navigator.pop(sheetContext, true),
            style: ElevatedButton.styleFrom(backgroundColor: AppColors.error),
            child: const Text('Remove'),
          ),
        ],
      ),
    );

    if (confirmed != true) return;

    try {
      // Delete image from storage first (best-effort).
      await StorageService.deleteCarImage(car['image_url'] as String?);

      await supabase
          .from('hotwheels')
          .delete()
          .eq('id', car['id']);

      if (!mounted) return;
      if (sheetContext.mounted) {
        Navigator.pop(sheetContext); // close bottom sheet
      }
      showGlobalSnackBar('${car['hw_id']} removed from your garage.');
      _loadCars();
    } catch (e) {
      showGlobalSnackBar('Failed to remove: $e', isError: true);
    }
  }
}

// ── Helper widgets ──────────────────────────────────────────────────

class _StatChip extends StatelessWidget {
  final IconData icon;
  final String label;
  final String subtitle;
  const _StatChip({
    required this.icon,
    required this.label,
    required this.subtitle,
  });

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
        decoration: BoxDecoration(
          color: Theme.of(context).cardTheme.color,
          borderRadius: BorderRadius.circular(14),
          boxShadow: const [
            BoxShadow(
              color: Colors.black12,
              blurRadius: 6,
              offset: Offset(0, 2),
            ),
          ],
        ),
        child: Row(
          children: [
            Container(
              padding: const EdgeInsets.all(8),
              decoration: BoxDecoration(
                color: AppColors.orange.withValues(alpha: 0.12),
                borderRadius: BorderRadius.circular(10),
              ),
              child: Icon(icon, size: 20, color: AppColors.orange),
            ),
            const SizedBox(width: 12),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  label,
                  style: const TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.w700,
                  ),
                ),
                Text(
                  subtitle,
                  style: const TextStyle(
                    fontSize: 11,
                    color: AppColors.textSecondary,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class _EmptyGarage extends StatelessWidget {
  final bool hasSearch;
  const _EmptyGarage({required this.hasSearch});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(40),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(
              hasSearch ? Icons.search_off : Icons.garage_outlined,
              size: 64,
              color: AppColors.textHint,
            ),
            const SizedBox(height: 16),
            Text(
              hasSearch ? 'No cars match your search' : 'Your garage is empty',
              style: const TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.w600,
                color: AppColors.textSecondary,
              ),
            ),
            const SizedBox(height: 8),
            Text(
              hasSearch
                  ? 'Try a different search term'
                  : 'Scan your first Hot Wheels car to get started!',
              textAlign: TextAlign.center,
              style: const TextStyle(color: AppColors.textHint),
            ),
          ],
        ),
      ),
    );
  }
}

class _ErrorView extends StatelessWidget {
  final String message;
  final VoidCallback onRetry;
  const _ErrorView({required this.message, required this.onRetry});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(40),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Icon(Icons.error_outline, size: 56, color: AppColors.error),
            const SizedBox(height: 16),
            Text(message,
                textAlign: TextAlign.center,
                style: const TextStyle(color: AppColors.textSecondary)),
            const SizedBox(height: 16),
            ElevatedButton.icon(
              onPressed: onRetry,
              icon: const Icon(Icons.refresh),
              label: const Text('Retry'),
            ),
          ],
        ),
      ),
    );
  }
}

// ── Edit Car Dialog ─────────────────────────────────────────────────
class _EditCarDialog extends StatefulWidget {
  final Map<String, dynamic> car;
  const _EditCarDialog({required this.car});

  @override
  State<_EditCarDialog> createState() => _EditCarDialogState();
}

class _EditCarDialogState extends State<_EditCarDialog> {
  late final TextEditingController _nameCtrl;
  late final TextEditingController _seriesCtrl;
  late final TextEditingController _yearCtrl;
  late final TextEditingController _notesCtrl;

  @override
  void initState() {
    super.initState();
    _nameCtrl = TextEditingController(text: widget.car['name'] as String? ?? '');
    _seriesCtrl =
        TextEditingController(text: widget.car['series'] as String? ?? '');
    final year = widget.car['year'];
    _yearCtrl = TextEditingController(text: year != null ? '$year' : '');
    _notesCtrl =
        TextEditingController(text: widget.car['notes'] as String? ?? '');
  }

  @override
  void dispose() {
    _nameCtrl.dispose();
    _seriesCtrl.dispose();
    _yearCtrl.dispose();
    _notesCtrl.dispose();
    super.dispose();
  }

  void _save() {
    final updates = <String, dynamic>{};

    final name = _nameCtrl.text.trim();
    final series = _seriesCtrl.text.trim();
    final yearStr = _yearCtrl.text.trim();
    final notes = _notesCtrl.text.trim();

    updates['name'] = name.isEmpty ? null : name;
    updates['series'] = series.isEmpty ? null : series;
    updates['year'] = yearStr.isEmpty ? null : int.tryParse(yearStr);
    updates['notes'] = notes.isEmpty ? null : notes;

    Navigator.pop(context, updates);
  }

  @override
  Widget build(BuildContext context) {
    final hwId = widget.car['hw_id'] as String? ?? '???';
    return AlertDialog(
      icon: Container(
        padding: const EdgeInsets.all(12),
        decoration: const BoxDecoration(
          gradient: AppColors.brandGradient,
          shape: BoxShape.circle,
        ),
        child: const Icon(Icons.edit, color: Colors.white, size: 28),
      ),
      title: Text('Edit $hwId'),
      content: SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextField(
              controller: _nameCtrl,
              decoration: const InputDecoration(
                labelText: 'Car Name',
                hintText: "e.g. '70 Dodge Charger",
              ),
            ),
            const SizedBox(height: 12),
            TextField(
              controller: _seriesCtrl,
              decoration: const InputDecoration(
                labelText: 'Series',
                hintText: 'e.g. HW Flames',
              ),
            ),
            const SizedBox(height: 12),
            TextField(
              controller: _yearCtrl,
              keyboardType: TextInputType.number,
              decoration: const InputDecoration(
                labelText: 'Year',
                hintText: 'e.g. 2025',
              ),
            ),
            const SizedBox(height: 12),
            TextField(
              controller: _notesCtrl,
              maxLines: 2,
              decoration: const InputDecoration(
                labelText: 'Notes',
                hintText: 'Any extra info…',
              ),
            ),
          ],
        ),
      ),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: const Text('Cancel'),
        ),
        ElevatedButton(
          onPressed: _save,
          child: const Text('Save'),
        ),
      ],
    );
  }
}

class _DetailRow extends StatelessWidget {
  final IconData icon;
  final String label;
  final String value;
  const _DetailRow({
    required this.icon,
    required this.label,
    required this.value,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 6),
      child: Row(
        children: [
          Icon(icon, size: 18, color: AppColors.textHint),
          const SizedBox(width: 10),
          Text(
            '$label: ',
            style: const TextStyle(
              fontWeight: FontWeight.w500,
              color: AppColors.textSecondary,
            ),
          ),
          Expanded(
            child: Text(value,
                style: const TextStyle(fontWeight: FontWeight.w500)),
          ),
        ],
      ),
    );
  }
}