import { useStore } from '@nanostores/preact';
import { $syncLog } from '../../stores/fleetDashboardStore';
import AnimatedDataTable from '../ui/AnimatedDataTable';

function rowStyle(status) {
    if (status === 'success') return 'text-emerald-700';
    if (status === 'failed') return 'text-red-700';
    return 'text-amber-700';
}

function formatDate(value) {
    if (!value) return '-';
    const date = new Date(value);
    if (Number.isNaN(date.getTime())) return '-';
    return new Intl.DateTimeFormat('hr-HR', {
        day: '2-digit',
        month: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
    }).format(date);
}

export default function SyncLogPanel() {
    const rows = useStore($syncLog);
    const syncColumns = [
        { key: 'time', label: 'Vrijeme', className: 'px-4 py-2' },
        { key: 'status', label: 'Status', className: 'px-4 py-2' },
        { key: 'type', label: 'Tip', className: 'px-4 py-2' },
        { key: 'detail', label: 'Detalj', className: 'px-4 py-2' },
    ];

    return (
        <article className="overflow-hidden rounded-xl border border-border-hairline bg-canvas-elevated shadow-sm">
            <div className="border-b border-border-hairline px-4 py-3">
                <h3 className="font-semibold text-text-main">Status sinkronizacije</h3>
                <p className="text-xs text-text-muted">Što je poslano, što je ostalo u redu čekanja i što nije uspjelo.</p>
            </div>

            <AnimatedDataTable
                columns={syncColumns}
                rows={rows}
                rowKey={(item) => item.id}
                emptyMessage="Još nema zapisa sinkronizacije."
                wrapperClassName="max-h-72 overflow-auto"
                renderRow={(item) => (
                    <>
                        <td className="px-4 py-2 text-text-muted">{formatDate(item.created_at)}</td>
                        <td className={`px-4 py-2 font-semibold ${rowStyle(item.status)}`}>{item.status}</td>
                        <td className="px-4 py-2 text-text-main">{item.entity}</td>
                        <td className="px-4 py-2 text-text-muted">{item.detail || '-'}</td>
                    </>
                )}
            />
        </article>
    );
}