import { Card } from '../ui'
import { t } from '@/lib/i18n'
import { useSyncProgressBarController } from './controller'
import { SyncDateRange, SyncErrorBanner, SyncProgressSection, SyncResyncButton, SyncStatusMessage } from './view'

export function SyncProgressBar(): React.ReactElement | null {
  const controller = useSyncProgressBarController()
  if (!controller) {
    return null
  }
  return (
    <Card variant="default" className="bg-cyber-darker mt-6">
      <SyncErrorBanner error={controller.error} onDismiss={controller.dismissError} />
      <div className="flex items-center justify-between mb-2">
        <h3 className="text-lg font-semibold text-neon-cyan">{t('settings.sync.title')}</h3>
        <SyncResyncButton isSyncing={controller.isSyncing} onClick={controller.onResyncClick} />
      </div>
      <SyncDateRange totalDays={controller.totalDays} startDate={controller.startDateLabel} endDate={controller.endDateLabel} />
      <SyncProgressSection isSyncing={controller.isSyncing} syncProgress={controller.syncProgress} progressPercentage={controller.progressPercentage} />
      <SyncStatusMessage isSyncing={controller.isSyncing} totalDays={controller.totalDays} isRecentlySynced={controller.isRecentlySynced} />
    </Card>
  )
}