'use client'

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

type BarState ='hidden'|'synced'|'syncing'|'pending'|'failed'|'offline'

/**
 * Compact status bar for the app header / footer area.
 * Shows sync state and provides a manual retry button.
 * Hides entirely when everything is synced and online.
 */
export default function SyncStatusBar() {
 const isOnline = useIsOnline()
 const {
 pendingCount,
 failedCount,
 isSyncing,
 lastSyncAt,
 lastSyncResult,
 triggerSync,
 triggerRetry,
 } = useSyncStatus()

 // Determine bar state (priority: offline > syncing > failed > pending > synced > hidden)
 let state: BarState ='hidden'
 if (!isOnline) state ='offline'
 else if (isSyncing) state ='syncing'
 else if (failedCount > 0) state ='failed'
 else if (pendingCount > 0) state ='pending'
 else if (lastSyncAt) state ='synced'

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

 // Auto-hide"synced"bar after 4 s is handled by the parent if needed;
 // here we just show it until something changes.

 return (
 <div
 className={`flex items-center gap-2 px-3 h-8 text-[12px] font-medium transition-colors ${barStyle(state)}`}
 role="status"
 aria-live="polite"
 >
 {/* Icon */}
 <span className="shrink-0">
 {state ==='offline'&& <WifiOff size={13} />}
 {state ==='syncing'&& <RefreshCw size={13} className="animate-spin"/>}
 {state ==='failed'&& <AlertTriangle size={13} />}
 {state ==='pending'&& <RefreshCw size={13} />}
 {state ==='synced'&& <CheckCircle size={13} />}
 </span>

 {/* Label */}
 <span className="flex-1 truncate">
 {state ==='offline'&&'Offline — Änderungen werden lokal gespeichert'}
 {state ==='syncing'&&'Wird synchronisiert\u2026'}
 {state ==='failed'&& (
 <>
 {failedCount === 1
 ?'1 Änderung konnte nicht synchronisiert werden'
 : `${failedCount} Änderungen konnten nicht synchronisiert werden`}
 </>
 )}
 {state ==='pending'&& (
 <>
 {pendingCount === 1
 ?'1 Änderung ausstehend'
 : `${pendingCount} Änderungen ausstehend`}
 </>
 )}
 {state ==='synced'&& (
 <>
 Synchronisiert
 {lastSyncResult && (lastSyncResult.pushed > 0 || lastSyncResult.conflicts > 0) && (
 <span className="opacity-70 ml-1">
 ({lastSyncResult.pushed} übertragen
 {lastSyncResult.conflicts > 0 && `, ${lastSyncResult.conflicts} Konflikte`})
 </span>
 )}
 </>
 )}
 </span>

 {/* Action button */}
 {state ==='failed'&& (
 <button
 onClick={triggerRetry}
 disabled={isSyncing}
 className="shrink-0 h-6 px-2 rounded-md bg-card/20 hover:bg-card/30 transition-colors text-[11px] font-semibold disabled:opacity-50"
 >
 Erneut versuchen
 </button>
 )}
 {state ==='pending'&& isOnline && (
 <button
 onClick={triggerSync}
 disabled={isSyncing}
 className="shrink-0 h-6 px-2 rounded-md bg-card/20 hover:bg-card/30 transition-colors text-[11px] font-semibold disabled:opacity-50"
 >
 Jetzt synchronisieren
 </button>
 )}
 </div>
 )
}

function barStyle(state: BarState): string {
 switch (state) {
 case'offline': return'bg-[#1E293B] text-white'
 case'syncing': return'bg-primary text-white'
 case'failed': return'bg-destructive text-white'
 case'pending': return'bg-status-yellow text-white'
 case'synced': return'bg-status-green text-white'
 default: return''
 }
}