import { useOnlineStatus, usePendingPostsCount, useSyncPendingPosts } from '@/hooks/useOfflineCache';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Wifi, WifiOff, Cloud, CloudOff, Loader2 } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useTranslation } from '@/contexts/language';

interface OfflineIndicatorProps {
  className?: string;
  showWhenOnline?: boolean;
}

export function OfflineIndicator({ className, showWhenOnline = false }: OfflineIndicatorProps) {
  const { t } = useTranslation();
  const isOnline = useOnlineStatus();
  const { data: pendingCount } = usePendingPostsCount();
  const { isSyncing } = useSyncPendingPosts();

  // Don't show when online (unless explicitly requested or there are pending posts)
  if (isOnline && !showWhenOnline && !pendingCount && !isSyncing) {
    return null;
  }

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant="ghost"
          size="sm"
          className={cn(
            'gap-2 h-8 px-3 font-medium',
            isOnline
              ? 'text-green-400 hover:text-green-300 hover:bg-green-500/10'
              : 'text-orange-400 hover:text-orange-300 hover:bg-orange-500/10 animate-pulse',
            className
          )}
        >
          {isSyncing ? (
            <Loader2 className="h-4 w-4 animate-spin" />
          ) : isOnline ? (
            <Wifi className="h-4 w-4" />
          ) : (
            <WifiOff className="h-4 w-4" />
          )}
          {!isOnline && <span className="text-xs">{t('miscUi.offline')}</span>}
          {pendingCount !== undefined && pendingCount > 0 && (
            <Badge variant="secondary" className="h-5 px-1.5 text-xs bg-orange-500/20 text-orange-400">
              {pendingCount}
            </Badge>
          )}
        </Button>
      </PopoverTrigger>
      <PopoverContent align="end" className="w-72 bg-black border-gray-700">
        <div className="space-y-4">
          {/* Connection Status */}
          <div className="flex items-center gap-3">
            <div className={cn(
              'w-10 h-10 rounded-full flex items-center justify-center',
              isOnline ? 'bg-green-500/20' : 'bg-orange-500/20'
            )}>
              {isOnline ? (
                <Cloud className="h-5 w-5 text-green-400" />
              ) : (
                <CloudOff className="h-5 w-5 text-orange-400" />
              )}
            </div>
            <div>
              <p className="font-bold text-white">
                {isOnline ? t('miscUi.connected') : t('miscUi.offlineMode')}
              </p>
              <p className="text-xs text-gray-400">
                {isOnline
                  ? t('miscUi.allFeaturesAvailable')
                  : t('miscUi.browsingCachedSpots')}
              </p>
            </div>
          </div>

          {/* Pending Posts */}
          {pendingCount !== undefined && pendingCount > 0 && (
            <div className="p-3 rounded-lg bg-orange-500/10 border border-orange-500/30">
              <div className="flex items-center justify-between">
                <span className="text-sm text-orange-400 font-medium">
                  {t('miscUi.queuedActions', { count: pendingCount })}
                </span>
                {isSyncing && (
                  <Badge className="bg-orange-500 text-white text-xs">
                    <Loader2 className="h-3 w-3 mr-1 animate-spin" />
                    {t('miscUi.syncing')}
                  </Badge>
                )}
              </div>
              <p className="text-xs text-gray-400 mt-1">
                {isOnline
                  ? t('miscUi.publishingWhenStable')
                  : t('miscUi.willPublishOnline')}
              </p>
            </div>
          )}

          {/* Offline Features Info */}
          {!isOnline && (
            <div className="text-xs text-gray-400 space-y-1">
              <p className="font-medium text-gray-300">{t('miscUi.availableOffline')}</p>
              <ul className="list-disc list-inside space-y-0.5">
                <li>{t('miscUi.offlineBrowseSpots')}</li>
                <li>{t('miscUi.offlineViewDetails')}</li>
                <li>{t('miscUi.offlineKeepActing')}</li>
              </ul>
            </div>
          )}
        </div>
      </PopoverContent>
    </Popover>
  );
}