'use client'

import { Cloud, CloudOff, RefreshCw, AlertCircle } from'lucide-react'
import { useSyncStatus } from'@/lib/offline/sync-hooks'
import { useIsOnline } from'@/lib/offline/connection'

type BadgeState ='synced'|'pending'|'failed'|'syncing'|'offline'

/**
 * Small status badge for the app header.
 * Only renders when there's something worth showing (not when fully synced & online).
 */
export default function SyncStatusBadge() {
 const isOnline = useIsOnline()
 const { pendingCount, failedCount, isSyncing } = useSyncStatus()

 let state: BadgeState ='synced'
 if (!isOnline) state ='offline'
 else if (isSyncing) state ='syncing'
 else if (failedCount > 0) state ='failed'
 else if (pendingCount > 0) state ='pending'

 if (state ==='synced') return null

 const configs: Record<BadgeState, { icon: React.ReactNode; label: string; className: string }> = {
 offline: {
 icon: <CloudOff size={13} />,
 label:'Offline',
 className:'bg-[#F1F5F9] text-muted-foreground',
 },
 syncing: {
 icon: <RefreshCw size={13} className="animate-spin"/>,
 label:'Synchronisiert…',
 className:'bg-[#DBEAFE] text-[#1D4ED8]',
 },
 pending: {
 icon: <RefreshCw size={13} />,
 label: `${pendingCount} ausstehend`,
 className:'bg-[#FEF3C7] text-status-yellow',
 },
 failed: {
 icon: <AlertCircle size={13} />,
 label: `${failedCount} Fehler`,
 className:'bg-[#FEE2E2] text-[#991B1B]',
 },
 synced: {
 icon: <Cloud size={13} />,
 label:'Synchronisiert',
 className:'bg-[#DCFCE7] text-[#14532D]',
 },
 }

 const cfg = configs[state]

 return (
 <div
 className={`flex items-center gap-1 h-6 px-2 rounded-full text-[11px] font-semibold ${cfg.className}`}
 title={cfg.label}
 >
 {cfg.icon}
 <span className="hidden sm:inline">{cfg.label}</span>
 </div>
 )
}