import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:travel_mate/components/home/create_trip_content.dart';
import '../../providers/user_provider.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Consumer<UserProvider>(
        builder: (context, userProvider, child) {
          final user = userProvider.currentUser;

          return SingleChildScrollView(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // Header de bienvenue
                Text(
                  'Bonjour ${user?.prenom ?? 'Voyageur'} !',
                  style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
                ),
                SizedBox(height: 8),
                Text(
                  'Vos voyages en cours',
                  style: TextStyle(fontSize: 16, color: Colors.grey[600]),
                ),
                SizedBox(height: 20),

                // Liste des groupes/voyages
                _buildTravelCard(
                  context,
                  title: 'Voyage à Paris',
                  location: 'Paris, France',
                  dates: '15-20 Juin 2024',
                  participants: ['Alice', 'Bob', 'Charlie'],
                  budget: 1200.50,
                  imageUrl:
                      'https://images.unsplash.com/photo-1502602898536-47ad22581b52',
                  color: Colors.blue,
                ),

                _buildTravelCard(
                  context,
                  title: 'Road Trip Espagne',
                  location: 'Madrid, Espagne',
                  dates: '10-18 Août 2024',
                  participants: ['Marie', 'Paul', 'Sophie', 'Thomas'],
                  budget: 850.75,
                  imageUrl:
                      'https://images.unsplash.com/photo-1539037116277-4db20889f2d4',
                  color: Colors.orange,
                ),

                _buildTravelCard(
                  context,
                  title: 'Weekend à Amsterdam',
                  location: 'Amsterdam, Pays-Bas',
                  dates: '3-5 Septembre 2024',
                  participants: ['Emma', 'Lucas'],
                  budget: 450.25,
                  imageUrl:
                      'https://images.unsplash.com/photo-1534351450181-ea9f78427fe8',
                  color: Colors.green,
                ),

                // Espacement en bas pour éviter que le FAB cache le contenu
                SizedBox(height: 80),
              ],
            ),
          );
        },
      ),

      // FloatingActionButton intégré directement dans HomeContent
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _showCreateTravelDialog(context);
        },
        backgroundColor: Theme.of(context).colorScheme.primary,
        foregroundColor: Colors.white,
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
    );
  }

  Widget _buildTravelCard(
    BuildContext context, {
    required String title,
    required String location,
    required String dates,
    required List<String> participants,
    required double budget,
    required String imageUrl,
    required Color color,
  }) {
    return Card(
      elevation: 4,
      margin: EdgeInsets.only(bottom: 16),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: InkWell(
        onTap: () {
          // Navigation vers les détails du voyage
          _showTravelDetails(context, title);
        },
        borderRadius: BorderRadius.circular(12),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Image d'en-tête avec titre overlay
            Container(
              height: 150,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.vertical(top: Radius.circular(12)),
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    color.withValues(alpha: 0.7),
                    color.withValues(alpha: 0.9),
                  ],
                ),
              ),
              child: Stack(
                children: [
                  // Image placeholder (vous pouvez utiliser Network.image avec imageUrl)
                  Container(
                    width: double.infinity,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.vertical(
                        top: Radius.circular(12),
                      ),
                      color: color.withValues(alpha: 0.3),
                    ),
                  ),

                  // Titre et localisation
                  Positioned(
                    bottom: 16,
                    left: 16,
                    right: 16,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          title,
                          style: TextStyle(
                            fontSize: 20,
                            fontWeight: FontWeight.bold,
                            color: Colors.white,
                          ),
                        ),
                        SizedBox(height: 4),
                        Row(
                          children: [
                            Icon(
                              Icons.location_on,
                              color: Colors.white,
                              size: 16,
                            ),
                            SizedBox(width: 4),
                            Text(
                              location,
                              style: TextStyle(
                                fontSize: 14,
                                color: Colors.white,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),

            // Contenu de la carte
            Padding(
              padding: EdgeInsets.all(16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // Dates
                  Row(
                    children: [
                      Icon(
                        Icons.calendar_today,
                        size: 16,
                        color: Colors.grey[600],
                      ),
                      SizedBox(width: 8),
                      Text(
                        dates,
                        style: TextStyle(
                          fontSize: 14,
                          color: Colors.grey[600],
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    ],
                  ),

                  SizedBox(height: 12),

                  // Participants
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Icon(Icons.group, size: 16, color: Colors.grey[600]),
                      SizedBox(width: 8),
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              '${participants.length} participant${participants.length > 1 ? 's' : ''}',
                              style: TextStyle(
                                fontSize: 14,
                                color: Colors.grey[600],
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                            SizedBox(height: 4),
                            Wrap(
                              spacing: 4,
                              children: participants
                                  .take(3)
                                  .map(
                                    (name) => Chip(
                                      label: Text(
                                        name,
                                        style: TextStyle(fontSize: 12),
                                      ),
                                      backgroundColor: color.withValues(
                                        alpha: 0.1,
                                      ),
                                      materialTapTargetSize:
                                          MaterialTapTargetSize.shrinkWrap,
                                      visualDensity: VisualDensity.compact,
                                    ),
                                  )
                                  .toList(),
                            ),
                            if (participants.length > 3)
                              Text(
                                '+${participants.length - 3} autres',
                                style: TextStyle(
                                  fontSize: 12,
                                  color: Colors.grey[500],
                                  fontStyle: FontStyle.italic,
                                ),
                              ),
                          ],
                        ),
                      ),
                    ],
                  ),

                  SizedBox(height: 12),

                  // Budget
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        children: [
                          Icon(Icons.euro, size: 16, color: Colors.grey[600]),
                          SizedBox(width: 8),
                          Text(
                            'Budget: ${budget.toStringAsFixed(2)}€',
                            style: TextStyle(
                              fontSize: 14,
                              color: Colors.grey[600],
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                        ],
                      ),

                      // Statut
                      Container(
                        padding: EdgeInsets.symmetric(
                          horizontal: 8,
                          vertical: 4,
                        ),
                        decoration: BoxDecoration(
                          color: Colors.green.withValues(alpha: 0.1),
                          borderRadius: BorderRadius.circular(12),
                        ),
                        child: Text(
                          'En cours',
                          style: TextStyle(
                            fontSize: 12,
                            color: Colors.green[700],
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _showTravelDetails(BuildContext context, String title) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => Scaffold(
          appBar: AppBar(title: Text(title)),
          body: Center(
            child: Text('Détails du voyage: $title\n(À implémenter)'),
          ),
        ),
      ),
    );
  }

  void _showCreateTravelDialog(BuildContext context) {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => CreateTripContent()),
    );
  }
}