'use client';

import { FirmwareUpdate } from '@/lib/api';
import { Archive, Download, Clock } from 'lucide-react';

interface FirmwareListProps {
    updates: FirmwareUpdate[];
}

export function FirmwareList({ updates }: FirmwareListProps) {
    return (
        <div className="bg-zinc-900/50 backdrop-blur-md border border-zinc-800 rounded-xl p-6 shadow-xl h-full">
            <h2 className="text-xl font-semibold text-white mb-4 flex items-center gap-2">
                <Archive className="w-5 h-5 text-indigo-400" />
                Firmware Versions
            </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">Version</th>
                            <th className="pb-3">Description</th>
                            <th className="pb-3">Uploaded</th>
                            <th className="pb-3 text-right">Action</th>
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-zinc-800/50">
                        {updates.map((fw) => (
                            <tr key={fw.id} className="text-zinc-300 hover:bg-zinc-800/30 transition-colors">
                                <td className="py-3 pl-2">
                                    <span className="font-mono text-indigo-300 bg-indigo-500/10 px-2 py-1 rounded border border-indigo-500/20 text-xs">
                                        v{fw.version}
                                    </span>
                                </td>
                                <td className="py-3 text-sm text-zinc-400">{fw.description || '-'}</td>
                                <td className="py-3 text-sm text-zinc-500">
                                    <div className="flex items-center gap-1.5">
                                        <Clock className="w-3 h-3" />
                                        {new Date(fw.uploadedAt).toLocaleDateString()}
                                    </div>
                                </td>
                                <td className="py-3 text-right">
                                    <a
                                        href={`http://localhost:5000/api/vehicles/updates/${fw.id}/download`}
                                        target="_blank"
                                        className="inline-flex items-center gap-1.5 text-xs bg-zinc-800 hover:bg-zinc-700 text-white px-2 py-1.5 rounded transition-colors"
                                    >
                                        <Download className="w-3 h-3" /> Bin
                                    </a>
                                </td>
                            </tr>
                        ))}
                        {updates.length === 0 && (
                            <tr>
                                <td colSpan={4} className="text-center py-8 text-zinc-500">
                                    No firmware available.
                                </td>
                            </tr>
                        )}
                    </tbody>
                </table>
            </div>
        </div>
    );
}