import 'package:flutter/material.dart';
import 'package:design_system/design_system.dart';
import 'package:lucide_icons/lucide_icons.dart';

class LocationMapPlaceholder extends StatelessWidget {
  final bool isVerified;
  final double? distance;

  const LocationMapPlaceholder({
    super.key,
    required this.isVerified,
    this.distance,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      width: double.infinity,
      decoration: BoxDecoration(
        color: const Color(0xFFE2E8F0),
        borderRadius: BorderRadius.circular(16),
        image: DecorationImage(
          image: const NetworkImage(
            'https://maps.googleapis.com/maps/api/staticmap?center=40.7128,-74.0060&zoom=15&size=600x300&maptype=roadmap&markers=color:red%7C40.7128,-74.0060&key=YOUR_API_KEY',
          ),
          // In a real app with keys, this would verify visually.
          // For now we use a generic placeholder color/icon to avoid broken images.
          fit: BoxFit.cover,
          onError: (_, __) {},
        ),
      ),
      child: Stack(
        children: [
          // Fallback UI if image fails (which it will without key)
          const Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(LucideIcons.mapPin, size: 48, color: UiColors.iconSecondary),
                SizedBox(height: 8),
                Text('Map View (GPS)', style: TextStyle(color: UiColors.textSecondary)),
              ],
            ),
          ),
          
          // Status Overlay
          Positioned(
            bottom: 16,
            left: 16,
            right: 16,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.1),
                    blurRadius: 8,
                    offset: const Offset(0, 4),
                  ),
                ],
              ),
              child: Row(
                children: [
                  Icon(
                    isVerified ? LucideIcons.checkCircle : LucideIcons.alertCircle,
                    color: isVerified ? UiColors.textSuccess : UiColors.destructive,
                    size: 20,
                  ),
                  const SizedBox(width: 12),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          isVerified ? 'Location Verified' : 'Location Check',
                          style: UiTypography.body1b.copyWith(color: UiColors.textPrimary),
                        ),
                        if (distance != null)
                          Text(
                            '${distance!.toStringAsFixed(0)}m from venue',
                            style: UiTypography.body2r.copyWith(color: UiColors.textSecondary),
                          ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
