/**
 * @ai-summary Vehicle roster card component for dashboard fleet grid
 * Displays vehicle image, health status, attention items, and odometer
 */

import React from 'react';
import { clsx } from 'clsx';
import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
import { VehicleImage } from '../../vehicles/components/VehicleImage';
import { getVehicleLabel } from '../../../core/utils/vehicleDisplay';
import { VehicleRosterData, AttentionItem } from '../types';

interface VehicleRosterCardProps {
  data: VehicleRosterData;
  onClick: (vehicleId: string) => void;
}

const getHealthBadgeClass = (health: VehicleRosterData['health']): string => {
  switch (health) {
    case 'green':
      return 'bg-emerald-500';
    case 'yellow':
      return 'bg-amber-500';
    case 'red':
      return 'bg-red-500';
  }
};

const getAttentionItemClass = (urgency: AttentionItem['urgency']): string => {
  switch (urgency) {
    case 'overdue':
      return 'text-red-600 dark:text-red-400';
    case 'due-soon':
      return 'text-amber-600 dark:text-amber-400';
    case 'upcoming':
      return 'text-slate-500 dark:text-titanio';
  }
};

const formatAttentionStatus = (item: AttentionItem): string => {
  if (item.urgency === 'overdue') {
    return 'OVERDUE';
  }
  return `${item.daysUntilDue} days`;
};

export const VehicleRosterCard: React.FC<VehicleRosterCardProps> = ({
  data,
  onClick,
}) => {
  const { vehicle, health, attentionItems } = data;
  const displayedItems = attentionItems.slice(0, 3);

  return (
    <GlassCard onClick={() => onClick(vehicle.id)}>
      {/* Top row: Image, Label, Health Badge */}
      <div className="flex items-center gap-3 mb-3">
        {/* Vehicle image container - clips the built-in mb-2 margin */}
        <div className="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0">
          <VehicleImage vehicle={vehicle} height={48} borderRadius={2} />
        </div>

        {/* Vehicle label */}
        <div className="flex-1 min-w-0">
          <div className="text-base font-semibold text-slate-800 dark:text-avus truncate">
            {getVehicleLabel(vehicle)}
          </div>
        </div>

        {/* Health badge */}
        <div
          className={clsx(
            'w-3 h-3 rounded-full flex-shrink-0',
            getHealthBadgeClass(health)
          )}
        />
      </div>

      {/* Attention items */}
      <div className="mb-3 space-y-1">
        {displayedItems.length === 0 ? (
          <div className="text-sm text-emerald-600 dark:text-emerald-400">
            All clear
          </div>
        ) : (
          displayedItems.map((item, index) => (
            <div
              key={index}
              className={clsx('text-sm', getAttentionItemClass(item.urgency))}
            >
              {item.label} - {formatAttentionStatus(item)}
            </div>
          ))
        )}
      </div>

      {/* Odometer */}
      <div className="text-sm text-slate-500 dark:text-titanio">
        {vehicle.odometerReading.toLocaleString()} mi
      </div>
    </GlassCard>
  );
};