import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';
import '../../auth/cubit/auth_cubit.dart';
import '../../auth/cubit/auth_state.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final center = const LatLng(31.9539, 35.9106); // عمّان
    return Scaffold(
      appBar: AppBar(
        title: const Text('Tripz'),
        actions: [
          IconButton(
            icon: const Icon(Icons.logout),
            onPressed: () => context.read<AuthCubit>().logout(),
          ),
        ],
      ),
      body: Stack(
        children: [
          FlutterMap(
            options: MapOptions(initialCenter: center, initialZoom: 13),
            children: [
              // TODO: استبدال بلاطات انطلق (Martin) بدل OSM
              TileLayer(
                urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                userAgentPackageName: 'com.mobileapp.store.ride',
              ),
              MarkerLayer(markers: [
                Marker(
                  point: center,
                  width: 40,
                  height: 40,
                  child: const Icon(Icons.location_pin, color: Colors.red, size: 40),
                ),
              ]),
            ],
          ),
          Positioned(
            left: 16,
            right: 16,
            bottom: 24,
            child: Card(
              child: Padding(
                padding: const EdgeInsets.all(16),
                child: BlocBuilder<AuthCubit, AuthState>(
                  builder: (context, state) {
                    final name = state.user?.name ?? state.user?.phone ?? '';
                    return Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        Text('مرحباً $name',
                            style: Theme.of(context).textTheme.titleMedium),
                        const SizedBox(height: 12),
                        FilledButton.icon(
                          onPressed: () {},
                          icon: const Icon(Icons.local_taxi),
                          label: const Text('اطلب رحلة (قريباً)'),
                        ),
                      ],
                    );
                  },
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}