import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../providers.dart';
import '../models/weather_models.dart';
import '../providers/city_provider.dart';
import '../screens/city_management_screen.dart';

class WeatherInfoOverlay extends ConsumerWidget {
  final WeatherModel weather;
  const WeatherInfoOverlay({super.key, required this.weather});

  void _showCitySelector(BuildContext context, WidgetRef ref) {
    final cities = ref.read(cityListProvider);
    final currentCityAsync = ref.read(currentCityProvider);

    showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent,
      builder: (context) => Container(
        decoration: BoxDecoration(
          color: const Color(0xFF1C1C2E),
          borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              margin: const EdgeInsets.only(top: 12, bottom: 8),
              width: 40,
              height: 4,
              decoration: BoxDecoration(
                color: Colors.white.withOpacity(0.3),
                borderRadius: BorderRadius.circular(2),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Row(
                children: [
                  const Text(
                    'Switch City',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const Spacer(),
                  IconButton(
                    icon: const Icon(Icons.add, color: Colors.white),
                    onPressed: () {
                      Navigator.pop(context);
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => const CityManagementScreen(),
                        ),
                      );
                    },
                    tooltip: 'Add city',
                  ),
                ],
              ),
            ),
            Flexible(
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: cities.length,
                itemBuilder: (context, index) {
                  final city = cities[index];
                  return currentCityAsync.when(
                    data: (currentQuery) => ListTile(
                      leading: Icon(
                        city.query == currentQuery
                            ? Icons.location_on
                            : Icons.location_city,
                        color: city.query == currentQuery
                            ? Colors.blueAccent
                            : Colors.white70,
                      ),
                      title: Text(
                        city.name,
                        style: TextStyle(
                          color: Colors.white,
                          fontWeight: city.query == currentQuery
                              ? FontWeight.bold
                              : FontWeight.normal,
                        ),
                      ),
                      subtitle: Text(
                        city.displayName,
                        style: TextStyle(
                          color: Colors.white.withOpacity(0.7),
                          fontSize: 12,
                        ),
                      ),
                      trailing: city.query == currentQuery
                          ? const Icon(Icons.check, color: Colors.blueAccent)
                          : null,
                      onTap: () {
                        ref
                            .read(weatherProvider.notifier)
                            .switchCity(city.query);
                        Navigator.pop(context);
                      },
                    ),
                    loading: () => ListTile(
                      leading: const Icon(
                        Icons.location_city,
                        color: Colors.white70,
                      ),
                      title: Text(
                        city.name,
                        style: const TextStyle(color: Colors.white),
                      ),
                      subtitle: Text(
                        city.displayName,
                        style: TextStyle(
                          color: Colors.white.withOpacity(0.7),
                          fontSize: 12,
                        ),
                      ),
                      onTap: () {
                        ref
                            .read(weatherProvider.notifier)
                            .switchCity(city.query);
                        Navigator.pop(context);
                      },
                    ),
                    error: (_, __) => ListTile(
                      leading: const Icon(
                        Icons.location_city,
                        color: Colors.white70,
                      ),
                      title: Text(
                        city.name,
                        style: const TextStyle(color: Colors.white),
                      ),
                      subtitle: Text(
                        city.displayName,
                        style: TextStyle(
                          color: Colors.white.withOpacity(0.7),
                          fontSize: 12,
                        ),
                      ),
                      onTap: () {
                        ref
                            .read(weatherProvider.notifier)
                            .switchCity(city.query);
                        Navigator.pop(context);
                      },
                    ),
                  );
                },
              ),
            ),
            const SizedBox(height: 16),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final current = weather.current;
    final location = weather.location;
    final forecastDay = weather.forecast.forecastday[0];
    final cities = ref.watch(cityListProvider);

    return SafeArea(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 20.0),
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: GestureDetector(
                    onTap: () => _showCitySelector(context, ref),
                    child: Container(
                      padding: const EdgeInsets.symmetric(
                        horizontal: 16,
                        vertical: 12,
                      ),
                      decoration: BoxDecoration(
                        color: Colors.black.withOpacity(0.3),
                        borderRadius: BorderRadius.circular(16),
                      ),
                      child: Row(
                        children: [
                          const Icon(
                            Icons.location_on,
                            color: Colors.white,
                            size: 20,
                          ),
                          const SizedBox(width: 8),
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  location.name,
                                  style: const TextStyle(
                                    color: Colors.white,
                                    fontSize: 16,
                                    fontWeight: FontWeight.w500,
                                  ),
                                  overflow: TextOverflow.ellipsis,
                                ),
                                Text(
                                  '${cities.length} ${cities.length == 1 ? 'city' : 'cities'}',
                                  style: TextStyle(
                                    color: Colors.white.withOpacity(0.7),
                                    fontSize: 12,
                                  ),
                                ),
                              ],
                            ),
                          ),
                          const Icon(
                            Icons.arrow_drop_down,
                            color: Colors.white,
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
                const SizedBox(width: 8),
                IconButton(
                  icon: const Icon(Icons.location_city, color: Colors.white),
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => const CityManagementScreen(),
                      ),
                    );
                  },
                  tooltip: 'Manage cities',
                ),
              ],
            ),
            const Spacer(flex: 2),
            Text(
              location.name,
              style: const TextStyle(
                color: Colors.white,
                fontSize: 32,
                fontWeight: FontWeight.bold,
                shadows: [Shadow(blurRadius: 4, color: Colors.black38)],
              ),
            ),
            Text(
              '${location.region}, ${location.country}',
              style: TextStyle(
                color: Colors.white.withOpacity(0.9),
                fontSize: 16,
                shadows: const [Shadow(blurRadius: 2, color: Colors.black38)],
              ),
            ),
            const SizedBox(height: 16),
            Text(
              '${current.tempC.round()}°',
              style: const TextStyle(
                color: Colors.white,
                fontSize: 96,
                fontWeight: FontWeight.w200,
                shadows: [Shadow(blurRadius: 6, color: Colors.black38)],
              ),
            ),
            Text(
              current.condition.text,
              style: TextStyle(
                color: Colors.white.withOpacity(0.9),
                fontSize: 20,
                fontWeight: FontWeight.w500,
                shadows: const [Shadow(blurRadius: 2, color: Colors.black38)],
              ),
            ),
            Text(
              'H: ${forecastDay.day.maxtempC.round()}°  L: ${forecastDay.day.mintempC.round()}°',
              style: TextStyle(
                color: Colors.white.withOpacity(0.9),
                fontSize: 18,
                fontWeight: FontWeight.w500,
                shadows: const [Shadow(blurRadius: 2, color: Colors.black38)],
              ),
            ),
            const Spacer(flex: 3),
            const Icon(
              Icons.keyboard_arrow_up,
              color: Colors.white70,
              size: 24,
            ),
            Text(
              'Swipe up for details',
              style: TextStyle(
                color: Colors.white.withOpacity(0.7),
                fontSize: 14,
              ),
            ),
            const SizedBox(height: 60),
          ],
        ),
      ),
    );
  }
}