import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import '../core/models/vehicle.dart';
import '../core/constants/app_constants.dart';
import 'status_badge.dart';

class VehicleCard extends StatelessWidget {
  final Vehicle vehicle;
  final VoidCallback? onTap;

  const VehicleCard({super.key, required this.vehicle, this.onTap});

  @override
  Widget build(BuildContext context) {
    return Card(
      clipBehavior: Clip.antiAlias,
      child: InkWell(
        onTap: onTap,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildImage(),
            Padding(
              padding: const EdgeInsets.all(12),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Expanded(
                        child: Text(
                          vehicle.displayName,
                          style: const TextStyle(
                            fontWeight: FontWeight.w600,
                            fontSize: 15,
                          ),
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                      ),
                      StatusBadge(status: vehicle.status),
                    ],
                  ),
                  const SizedBox(height: 4),
                  Text(
                    vehicle.licensePlate,
                    style: const TextStyle(
                      fontSize: 13,
                      color: Color(0xFF6B7280),
                    ),
                  ),
                  const SizedBox(height: 8),
                  Row(
                    children: [
                      const Icon(Icons.attach_money,
                          size: 16, color: Color(0xFF1A56DB)),
                      Text(
                        '\$${(vehicle.dailyRate / 100).toStringAsFixed(0)}/day',
                        style: const TextStyle(
                          fontWeight: FontWeight.w600,
                          color: Color(0xFF1A56DB),
                        ),
                      ),
                      const Spacer(),
                      Container(
                        padding: const EdgeInsets.symmetric(
                            horizontal: 8, vertical: 3),
                        decoration: BoxDecoration(
                          color: const Color(0xFFF3F4F6),
                          borderRadius: BorderRadius.circular(6),
                        ),
                        child: Text(
                          vehicle.category,
                          style: const TextStyle(
                              fontSize: 11, color: Color(0xFF6B7280)),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildImage() {
    final photo = vehicle.primaryPhoto;
    if (photo == null) {
      return Container(
        height: 150,
        color: const Color(0xFFF3F4F6),
        child: const Center(
          child: Icon(Icons.directions_car, size: 48, color: Color(0xFFD1D5DB)),
        ),
      );
    }
    final url = photo.startsWith('http')
        ? photo
        : '${AppConstants.baseUrl.replaceAll('/api/v1', '')}$photo';
    return CachedNetworkImage(
      imageUrl: url,
      height: 150,
      width: double.infinity,
      fit: BoxFit.cover,
      placeholder: (_, _) => Container(
        height: 150,
        color: const Color(0xFFF3F4F6),
        child: const Center(child: CircularProgressIndicator(strokeWidth: 2)),
      ),
      errorWidget: (_, _, _) => Container(
        height: 150,
        color: const Color(0xFFF3F4F6),
        child: const Center(
          child: Icon(Icons.directions_car, size: 48, color: Color(0xFFD1D5DB)),
        ),
      ),
    );
  }
}
