story-research-zapwall/components/CacheUpdateManager.tsx

import { useState } from 'react'
import { useRouter } from 'next/router'
import { nostrAuthService } from '@/lib/nostrAuth'
import { objectCache } from '@/lib/objectCache'
import { syncUserContentToCache } from '@/lib/userContentSync'

async function updateCache(): Promise<void> {
  const state = nostrAuthService.getState()
  if (!state.connected || !state.pubkey) {
    throw new Error('Vous devez être connecté pour mettre à jour le cache')
  }

      await Promise.all([
        objectCache.clear('author'),
        objectCache.clear('series'),
        objectCache.clear('publication'),
        objectCache.clear('review'),
        objectCache.clear('purchase'),
        objectCache.clear('sponsoring'),
        objectCache.clear('review_tip'),
      ])

  await syncUserContentToCache(state.pubkey)
}

function ErrorMessage({ error }: { error: string }): React.ReactElement {
  return (
    <div className="bg-red-900/20 border border-red-400/50 rounded-lg p-4 mb-4">
      <p className="text-red-400">{error}</p>
    </div>
  )
}

function SuccessMessage(): React.ReactElement {
  return (
    <div className="bg-green-900/20 border border-green-400/50 rounded-lg p-4 mb-4">
      <p className="text-green-400">Cache mis à jour avec succès</p>
    </div>
  )
}

function NotConnectedMessage(): React.ReactElement {
  return (
    <div className="bg-yellow-900/20 border border-yellow-400/50 rounded-lg p-4 mb-4">
      <p className="text-yellow-400">Vous devez être connecté pour mettre à jour le cache</p>
    </div>
  )
}

function createUpdateHandler(
  setUpdating: (value: boolean) => void,
  setError: (value: string | null) => void,
  setSuccess: (value: boolean) => void,
  router: ReturnType<typeof useRouter>
): () => Promise<void> {
  return async (): Promise<void> => {
    try {
      setUpdating(true)
      setError(null)
      setSuccess(false)
      await updateCache()
      setSuccess(true)
      // Wait a bit to show success message, then reload page
      setTimeout(() => {
        router.reload()
      }, 1000)
    } catch (e) {
      const errorMessage = e instanceof Error ? e.message : 'Erreur lors de la mise à jour du cache'
      setError(errorMessage)
      console.error('Error updating cache:', e)
      setUpdating(false)
    }
  }
}

function Spinner(): React.ReactElement {
  return (
    <div className="inline-block animate-spin rounded-full h-4 w-4 border-2 border-neon-cyan border-t-transparent mr-2"></div>
  )
}

export function CacheUpdateManager(): React.ReactElement {
  const router = useRouter()
  const [updating, setUpdating] = useState(false)
  const [success, setSuccess] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const handleUpdateCache = createUpdateHandler(setUpdating, setError, setSuccess, router)
  const state = nostrAuthService.getState()
  const isConnected = state.connected && state.pubkey

  return (
    <div className="bg-cyber-darker border border-neon-cyan/30 rounded-lg p-6">
      <h2 className="text-2xl font-bold text-neon-cyan mb-4">Mise à jour du cache</h2>

      <p className="text-cyber-accent mb-4 text-sm">
        Videz et re-synchronisez le cache IndexedDB avec les données depuis les relais Nostr.
        Cela permet de récupérer les dernières versions de vos publications, séries et profil.
      </p>

      {error && <ErrorMessage error={error} />}
      {success && <SuccessMessage />}
      {!isConnected && <NotConnectedMessage />}

      <button
        onClick={() => {
          void handleUpdateCache()
        }}
        disabled={updating || !isConnected}
        className="w-full py-3 px-6 bg-neon-cyan/20 hover:bg-neon-cyan/30 text-neon-cyan rounded-lg font-medium transition-all border border-neon-cyan/50 hover:shadow-glow-cyan disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
      >
        {updating && <Spinner />}
        {updating ? 'Mise à jour en cours...' : 'Mettre à jour le cache'}
      </button>
    </div>
  )
}