"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { WifiOff, Download, Music, RefreshCw } from "lucide-react"
import { Button } from "@/components/ui/button"
import { offlineStorage } from "@/lib/offline-storage"

interface OfflineContentFallbackProps {
  message?: string
  showDownloadsLink?: boolean
}

export function OfflineContentFallback({ 
  message = "Cette section n'est pas disponible hors ligne",
  showDownloadsLink = true 
}: OfflineContentFallbackProps) {
  const [downloadCount, setDownloadCount] = useState(0)
  
  useEffect(() => {
    async function getDownloadCount() {
      if (offlineStorage) {
        try {
          const tracks = await offlineStorage.getAllTracks()
          setDownloadCount(tracks.length)
        } catch (e) {
          // Ignore
        }
      }
    }
    getDownloadCount()
  }, [])

  return (
    <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
      <div className="rounded-full bg-orange-500/10 p-4 mb-4">
        <WifiOff className="h-8 w-8 text-orange-500" />
      </div>
      
      <h3 className="text-lg font-semibold text-foreground mb-2">
        Mode hors ligne
      </h3>
      
      <p className="text-sm text-muted-foreground mb-6 max-w-xs">
        {message}
      </p>
      
      {showDownloadsLink && (
        <div className="space-y-3">
          <Link href="/downloads">
            <Button className="gap-2">
              <Download className="h-4 w-4" />
              Mes telechargements
              {downloadCount > 0 && (
                <span className="ml-1 rounded-full bg-white/20 px-2 py-0.5 text-xs">
                  {downloadCount}
                </span>
              )}
            </Button>
          </Link>
          
          <p className="text-xs text-muted-foreground">
            {downloadCount > 0 
              ? `${downloadCount} titre${downloadCount > 1 ? 's' : ''} disponible${downloadCount > 1 ? 's' : ''} hors ligne`
              : "Telechargez des titres pour les ecouter hors ligne"
            }
          </p>
        </div>
      )}
    </div>
  )
}

export function OfflineRetryButton({ onRetry }: { onRetry: () => void }) {
  const [isOnline, setIsOnline] = useState(true)
  
  useEffect(() => {
    const updateStatus = () => setIsOnline(navigator.onLine)
    updateStatus()
    window.addEventListener("online", updateStatus)
    window.addEventListener("offline", updateStatus)
    return () => {
      window.removeEventListener("online", updateStatus)
      window.removeEventListener("offline", updateStatus)
    }
  }, [])

  if (!isOnline) return null

  return (
    <Button variant="outline" size="sm" onClick={onRetry} className="gap-2">
      <RefreshCw className="h-4 w-4" />
      Reessayer
    </Button>
  )
}

// Check if we're offline
export function useIsOffline() {
  const [isOffline, setIsOffline] = useState(false)

  useEffect(() => {
    const updateStatus = () => setIsOffline(!navigator.onLine)
    updateStatus()
    window.addEventListener("online", updateStatus)
    window.addEventListener("offline", updateStatus)
    return () => {
      window.removeEventListener("online", updateStatus)
      window.removeEventListener("offline", updateStatus)
    }
  }, [])

  return isOffline
}
