"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;
  size?: number;
}

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-6 bg-white rounded-2xl border border-gray-200">
      <QRCodeSVG value={url} size={size} level="H" />
      
      <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>
  );
}