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

class LocationMapPlaceholder extends StatelessWidget {

  const LocationMapPlaceholder({
    super.key,
    required this.isVerified,
    this.distance,
  });
  final bool isVerified;
  final double? distance;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      width: double.infinity,
      decoration: BoxDecoration(
        color: UiColors.border,
        borderRadius: UiConstants.radiusLg,
        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: <Widget>[
          // Fallback UI if image fails (which it will without key)
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Icon(
                  UiIcons.mapPin,
                  size: 48,
                  color: UiColors.iconSecondary,
                ),
                const SizedBox(height: UiConstants.space2),
                Text('Map View (GPS)', style: UiTypography.body2r.textSecondary),
              ],
            ),
          ),

          // Status Overlay
          Positioned(
            bottom: UiConstants.space4,
            left: UiConstants.space4,
            right: UiConstants.space4,
            child: Container(
              padding: const EdgeInsets.symmetric(
                horizontal: UiConstants.space4,
                vertical: UiConstants.space3,
              ),
              decoration: BoxDecoration(
                color: UiColors.white,
                borderRadius: UiConstants.radiusLg,
                boxShadow: <BoxShadow>[
                  BoxShadow(
                    color: UiColors.black.withValues(alpha: 0.1),
                    blurRadius: 8,
                    offset: const Offset(0, 4),
                  ),
                ],
              ),
              child: Row(
                children: <Widget>[
                  Icon(
                    isVerified ? UiIcons.checkCircle : UiIcons.warning,
                    color: isVerified
                        ? UiColors.textSuccess
                        : UiColors.destructive,
                    size: 20,
                  ),
                  const SizedBox(width: UiConstants.space3),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          isVerified ? 'Location Verified' : 'Location Check',
                          style: UiTypography.body1b.textPrimary,
                        ),
                        if (distance != null)
                          Text(
                            '${distance!.toStringAsFixed(0)}m from venue',
                            style: UiTypography.body2r.textSecondary,
                          ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
