"use client"

import { Loader2, RefreshCw } from "lucide-react"
import { Button } from "@/components/ui/button"
import { ApiRequestError } from "@/lib/api/client"
import { CONTACTS_MUTED_TEXT } from "@/lib/contacts-chrome-classes"
import { cn } from "@/lib/utils"

interface ContactsLoadStateProps {
  isLoading: boolean
  isError: boolean
  error: unknown
  onRetry: () => void
  className?: string
}

function errorMessage(error: unknown): string {
  if (error instanceof ApiRequestError) {
    if (error.code === "contacts_unavailable") {
      return "Connexion au carnet d'adresses indisponible. Réessayez dans quelques secondes."
    }
    if (error.code === "auth.unavailable") {
      return "Service d'authentification indisponible. Vérifiez que le backend est démarré."
    }
    return error.message
  }
  if (error instanceof Error) return error.message
  return "Impossible de charger les contacts."
}

export function ContactsLoadState({
  isLoading,
  isError,
  error,
  onRetry,
  className,
}: ContactsLoadStateProps) {
  if (isLoading) {
    return (
      <div className={cn("flex items-center justify-center gap-2 py-12 text-sm", CONTACTS_MUTED_TEXT, className)}>
        <Loader2 className="h-4 w-4 animate-spin" />
        Chargement des contacts…
      </div>
    )
  }

  if (!isError) return null

  return (
    <div className={cn("flex flex-col items-center gap-3 px-6 py-12 text-center", className)}>
      <p className={cn("text-sm", CONTACTS_MUTED_TEXT)}>{errorMessage(error)}</p>
      <Button type="button" variant="outline" size="sm" className="rounded-full" onClick={onRetry}>
        <RefreshCw className="mr-1.5 h-4 w-4" />
        Réessayer
      </Button>
    </div>
  )
}