Compagnon-du-Lagon---Marama/components/accueil/WifiCard.tsx

"use client";

import { useState, useEffect } from "react";
import { Wifi, Copy, Check, AlertCircle } from "lucide-react";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { useClientData } from "@/lib/hooks/useClientData";

export default function WifiCard() {
  const { wifiName, wifiPassword, loading } = useClientData();
  const [copied, setCopied] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // Fonction de copie avec fallback pour les navigateurs qui ne supportent pas l'API Clipboard
  const copyToClipboard = async (text: string): Promise<boolean> => {
    // Méthode moderne (nécessite HTTPS ou localhost)
    if (navigator.clipboard && window.isSecureContext) {
      try {
        await navigator.clipboard.writeText(text);
        return true;
      } catch (err) {
        console.error("Erreur avec l'API Clipboard:", err);
      }
    }

    // Fallback pour les navigateurs plus anciens ou contextes non sécurisés
    try {
      const textArea = document.createElement("textarea");
      textArea.value = text;
      textArea.style.position = "fixed";
      textArea.style.left = "-999999px";
      textArea.style.top = "-999999px";
      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();
      
      const successful = document.execCommand("copy");
      document.body.removeChild(textArea);
      
      if (successful) {
        return true;
      } else {
        throw new Error("La commande copy a échoué");
      }
    } catch (err) {
      console.error("Erreur avec la méthode fallback:", err);
      return false;
    }
  };

  const handleCopyPassword = async () => {
    if (!wifiPassword || wifiPassword.trim() === "") {
      setError("Le mot de passe WiFi n'est pas disponible");
      setTimeout(() => setError(null), 3000);
      return;
    }

    setError(null);
    const success = await copyToClipboard(wifiPassword);

    if (success) {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } else {
      setError("Impossible de copier. Veuillez sélectionner manuellement le mot de passe ci-dessous.");
      setTimeout(() => setError(null), 5000);
    }
  };

  // Afficher le mot de passe en cas d'échec de la copie
  const showPasswordFallback = error && error.includes("sélectionner manuellement");

  return (
    <Card className="bg-white">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Wifi className="h-6 w-6 text-primary" />
          Connexion WiFi
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
          <p className="text-sm text-gray-600 mb-1">Nom du réseau</p>
          <p className="text-lg font-semibold text-primary">{wifiName || "Chargement..."}</p>
        </div>

        {showPasswordFallback && wifiPassword && (
          <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-3">
            <p className="text-sm text-yellow-800 font-mono select-all">
              {wifiPassword}
            </p>
          </div>
        )}

        {error && !showPasswordFallback && (
          <div className="bg-red-50 border border-red-200 rounded-xl p-3 flex items-start gap-2">
            <AlertCircle className="h-5 w-5 text-red-600 flex-shrink-0 mt-0.5" />
            <p className="text-sm text-red-800">{error}</p>
          </div>
        )}

        <Button
          onClick={handleCopyPassword}
          disabled={loading || !wifiPassword}
          className="w-full h-14 text-lg"
          size="lg"
        >
          {loading ? (
            <>
              <Copy className="mr-2 h-5 w-5" />
              Chargement...
            </>
          ) : copied ? (
            <>
              <Check className="mr-2 h-5 w-5" />
              Mot de passe copié !
            </>
          ) : (
            <>
              <Copy className="mr-2 h-5 w-5" />
              Copier le mot de passe
            </>
          )}
        </Button>
      </CardContent>
    </Card>
  );
}