'use client';

import { Vehicle } from '@/lib/api';
import { getVehicleDisplayStatus } from '@/lib/utils';
import { Car, Clock, Signal, Layers } from 'lucide-react';
import { clsx } from 'clsx';

interface VehicleListProps {
    vehicles: Vehicle[];
}

export function VehicleList({ vehicles }: VehicleListProps) {
    return (
        <div className="bg-zinc-900/50 backdrop-blur-md border border-zinc-800 rounded-xl p-6 shadow-xl">
            <h2 className="text-xl font-semibold text-white mb-4 flex items-center gap-2">
                <Car className="w-5 h-5 text-indigo-400" />
                Fleet Overview
            </h2>
            <div className="overflow-x-auto">
                <table className="w-full text-left">
                    <thead>
                        <tr className="border-b border-zinc-800 text-zinc-400 text-sm">
                            <th className="pb-3 pl-2">VIN</th>
                            <th className="pb-3">Group</th>
                            <th className="pb-3">Status</th>
                            <th className="pb-3">Version</th>
                            <th className="pb-3">Last Heartbeat</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-zinc-800/50">
                        {vehicles.map((vehicle) => {
                            // Calculate status: Offline if no heartbeat for 5s
                            const displayStatus = getVehicleDisplayStatus(vehicle);

                            return (
                                <tr key={vehicle.vin} className="text-zinc-300 hover:bg-zinc-800/30 transition-colors">
                                    <td className="py-3 pl-2 font-mono text-sm">{vehicle.vin}</td>
                                    <td className="py-3">
                                        <span className="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full bg-zinc-800 text-zinc-400">
                                            <Layers className="w-3 h-3" />
                                            {vehicle.group?.name || 'Unassigned'}
                                        </span>
                                    </td>
                                    <td className="py-3">
                                        <span className={clsx(
                                            "inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium",
                                            displayStatus === 'Online' && "bg-emerald-500/10 text-emerald-400 border border-emerald-500/20",
                                            displayStatus === 'Offline' && "bg-red-500/10 text-red-400 border border-red-500/20",
                                            displayStatus === 'Updating' && "bg-amber-500/10 text-amber-400 border border-amber-500/20 animate-pulse"
                                        )}>
                                            <Signal className="w-3 h-3" />
                                            {displayStatus}
                                        </span>
                                    </td>
                                    <td className="py-3">
                                        <span className="font-mono text-zinc-400 bg-zinc-900 px-2 py-1 rounded border border-zinc-800">
                                            v{vehicle.currentVersion}
                                        </span>
                                    </td>
                                    <td className="py-3 text-sm text-zinc-500 flex items-center gap-1.5">
                                        <Clock className="w-3 h-3" />
                                        {new Date(vehicle.lastHeartbeat).toLocaleTimeString()}
                                    </td>
                                </tr>
                            )
                        })}
                        {vehicles.length === 0 && (
                            <tr>
                                <td colSpan={5} className="text-center py-8 text-zinc-500">
                                    No vehicles registered yet.
                                </td>
                            </tr>
                        )}
                    </tbody>
                </table>
            </div>
        </div>
    );
}