From 106f15205c86cd480060409248d2075847edb66f Mon Sep 17 00:00:00 2001
From: syoul <syoul@librezo.fr>
Date: Sun, 23 Nov 2025 11:33:08 +0100
Subject: [PATCH] =?UTF-8?q?Am=C3=A9lioration=20du=20composant=20QRCodeDisp?=
 =?UTF-8?q?lay=20avec=20zone=20de=20texte?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Zone de texte sélectionnable pour le lien
- Boutons Copier et Sélectionner
- Alerte de confirmation
- Instructions claires pour l'utilisateur
---
 components/admin/QRCodeDisplay.tsx | 88 ++++++++++++++++++++++++++++--
 1 file changed, 84 insertions(+), 4 deletions(-)

diff --git a/components/admin/QRCodeDisplay.tsx b/components/admin/QRCodeDisplay.tsx
index 915e857..4edf520 100644
--- a/components/admin/QRCodeDisplay.tsx
+++ b/components/admin/QRCodeDisplay.tsx
@@ -1,6 +1,9 @@
 "use client";
 
+import { useState } from "react";
 import { QRCodeSVG } from "qrcode.react";
+import { Button } from "@/components/ui/button";
+import { Copy, Check } from "lucide-react";
 
 interface QRCodeDisplayProps {
   url: string;
@@ -8,12 +11,89 @@ interface QRCodeDisplayProps {
 }
 
 export default function QRCodeDisplay({ url, size = 200 }: QRCodeDisplayProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopied(true);
+      alert(`✅ Lien copié !\n\n${url}\n\nVous pouvez maintenant le coller (Ctrl+V) pour le partager avec votre client.`);
+      setTimeout(() => setCopied(false), 3000);
+    } catch (err) {
+      console.error("Erreur lors de la copie:", err);
+      const textArea = document.createElement("textarea");
+      textArea.value = url;
+      textArea.style.position = "fixed";
+      textArea.style.left = "-999999px";
+      document.body.appendChild(textArea);
+      textArea.select();
+      try {
+        const successful = document.execCommand("copy");
+        if (successful) {
+          setCopied(true);
+          alert(`✅ Lien copié !\n\n${url}\n\nVous pouvez maintenant le coller (Ctrl+V) pour le partager avec votre client.`);
+          setTimeout(() => setCopied(false), 3000);
+        } else {
+          alert(`Copiez ce lien manuellement:\n\n${url}`);
+        }
+      } catch (e) {
+        alert(`Copiez ce lien manuellement:\n\n${url}`);
+      }
+      document.body.removeChild(textArea);
+    }
+  };
+
   return (
-    <div className="flex flex-col items-center gap-4 p-4 bg-white rounded-2xl border border-gray-200">
+    <div className="flex flex-col items-center gap-4 p-6 bg-white rounded-2xl border border-gray-200">
       <QRCodeSVG value={url} size={size} level="H" />
-      <p className="text-xs text-gray-600 text-center break-all max-w-xs">
-        {url}
-      </p>
+      
+      <div className="w-full space-y-3">
+        <p className="text-sm font-medium text-gray-700">Lien unique :</p>
+        <textarea
+          readOnly
+          value={url}
+          onClick={(e) => e.currentTarget.select()}
+          onFocus={(e) => e.currentTarget.select()}
+          className="w-full p-3 text-sm font-mono text-primary bg-secondary border-2 border-primary rounded-lg resize-none"
+          rows={3}
+          style={{ cursor: 'text' }}
+        />
+        <div className="flex gap-2">
+          <Button
+            size="sm"
+            onClick={handleCopyLink}
+            className={`flex-1 ${copied ? "bg-green-600 hover:bg-green-700" : ""}`}
+          >
+            {copied ? (
+              <>
+                <Check className="h-4 w-4 mr-2" />
+                Copié !
+              </>
+            ) : (
+              <>
+                <Copy className="h-4 w-4 mr-2" />
+                Copier
+              </>
+            )}
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={() => {
+              const textarea = document.querySelector('textarea[readonly]') as HTMLTextAreaElement;
+              if (textarea) {
+                textarea.select();
+              }
+            }}
+            className="flex-1"
+          >
+            Sélectionner
+          </Button>
+        </div>
+        <p className="text-xs text-gray-500 text-center">
+          💡 Cliquez sur le lien pour le sélectionner, puis Ctrl+C pour copier
+        </p>
+      </div>
     </div>
   );
 }