import { useEffect, useRef, useState } from 'react';
import QRCode from 'qrcode';
import { BaseModal } from './base/BaseModal';
import { Button } from './ui/button';
import { Copy, Check, Share2 } from 'lucide-react';

interface ShareModalProps {
  isOpen: boolean;
  onClose: () => void;
  campaignTitle: string;
  depositUrl: string;
}

export default function ShareModal({ 
  isOpen, 
  onClose, 
  campaignTitle, 
  depositUrl 
}: ShareModalProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [copied, setCopied] = useState(false);
  const [qrCodeError, setQrCodeError] = useState<string | null>(null);
  const [qrCodeLoading, setQrCodeLoading] = useState(false);
  const [qrCodeDataUrl, setQrCodeDataUrl] = useState<string | null>(null);

  useEffect(() => {
    if (isOpen && depositUrl) {
      setQrCodeLoading(true);
      setQrCodeError(null);
      setQrCodeDataUrl(null);

      // Essayer d'abord de générer en tant que Data URL
      QRCode.toDataURL(depositUrl, {
        width: 300,
        margin: 2,
        color: {
          dark: '#000000',
          light: '#FFFFFF'
        },
        errorCorrectionLevel: 'M'
      }).then((dataUrl) => {
        console.log('QR code généré avec succès (DataURL) pour:', depositUrl);
        setQrCodeDataUrl(dataUrl);
        setQrCodeLoading(false);
      }).catch((err) => {
        console.error('Erreur lors de la génération du QR code (DataURL):', err);
        
        // Fallback: essayer avec le canvas
        if (canvasRef.current) {
          const canvas = canvasRef.current;
          const ctx = canvas.getContext('2d');
          if (ctx) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
          }

          QRCode.toCanvas(canvas, depositUrl, {
            width: 300,
            margin: 2,
            color: {
              dark: '#000000',
              light: '#FFFFFF'
            },
            errorCorrectionLevel: 'M'
          }).then(() => {
            console.log('QR code généré avec succès (Canvas) pour:', depositUrl);
            setQrCodeLoading(false);
          }).catch((canvasErr) => {
            console.error('Erreur lors de la génération du QR code (Canvas):', canvasErr);
            setQrCodeError('Erreur lors de la génération du QR code');
            setQrCodeLoading(false);
          });
        } else {
          setQrCodeError('Erreur lors de la génération du QR code');
          setQrCodeLoading(false);
        }
      });
    }
  }, [isOpen, depositUrl]);

  const handleCopyLink = async () => {
    try {
      await navigator.clipboard.writeText(depositUrl);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error('Erreur lors de la copie:', err);
    }
  };

  const retryQrCode = () => {
    if (depositUrl) {
      setQrCodeLoading(true);
      setQrCodeError(null);
      setQrCodeDataUrl(null);

      QRCode.toDataURL(depositUrl, {
        width: 300,
        margin: 2,
        color: {
          dark: '#000000',
          light: '#FFFFFF'
        },
        errorCorrectionLevel: 'M'
      }).then((dataUrl) => {
        setQrCodeDataUrl(dataUrl);
        setQrCodeLoading(false);
      }).catch((err) => {
        console.error('Erreur lors de la génération du QR code:', err);
        setQrCodeError('Erreur lors de la génération du QR code');
        setQrCodeLoading(false);
      });
    }
  };

  return (
    <BaseModal
      isOpen={isOpen}
      onClose={onClose}
      title={
        <div className="flex items-center gap-2">
          <Share2 className="w-5 h-5 text-blue-600" />
          Partager le lien de dépôt
        </div>
      }
      description={`Pour partager le lien de dépôt public de propositions pour la campagne "${campaignTitle}"`}
      maxWidth="sm:max-w-[600px]"
      maxHeight="max-h-[90vh]"
    >
      <div className="space-y-6">
        {/* Lien de dépôt */}
        <div className="space-y-3">
          <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
            Lien de dépôt public
          </h3>
          <div className="flex items-center gap-2 p-3 bg-slate-50 dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700">
            <div className="flex-1 text-sm font-mono text-slate-700 dark:text-slate-300 break-all">
              {depositUrl}
            </div>
            <Button
              variant="outline"
              size="sm"
              onClick={handleCopyLink}
              className="shrink-0"
            >
              {copied ? (
                <>
                  <Check className="w-4 h-4 mr-2" />
                  Copié !
                </>
              ) : (
                <>
                  <Copy className="w-4 h-4 mr-2" />
                  Copier
                </>
              )}
            </Button>
          </div>
        </div>

        {/* QR Code */}
        <div className="space-y-3">
          <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
            QR Code
          </h3>
          <div className="flex justify-center p-6 bg-white dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-700">
            {qrCodeLoading && (
              <div className="flex items-center justify-center w-[300px] h-[300px]">
                <div className="text-slate-500">Génération du QR code...</div>
              </div>
            )}
            {qrCodeError && (
              <div className="flex items-center justify-center w-[300px] h-[300px]">
                <div className="text-red-500 text-center">
                  <div className="text-sm">{qrCodeError}</div>
                  <Button 
                    variant="outline" 
                    size="sm" 
                    className="mt-2"
                    onClick={retryQrCode}
                  >
                    Réessayer
                  </Button>
                </div>
              </div>
            )}
            {qrCodeDataUrl && !qrCodeLoading && !qrCodeError && (
              <img 
                src={qrCodeDataUrl}
                alt="QR Code pour le lien de dépôt"
                className="border border-slate-200 dark:border-slate-600 rounded-lg"
                width={300}
                height={300}
              />
            )}
            <canvas 
              ref={canvasRef}
              width={300}
              height={300}
              className={`border border-slate-200 dark:border-slate-600 rounded-lg ${qrCodeDataUrl || qrCodeLoading || qrCodeError ? 'hidden' : 'block'}`}
            />
          </div>
          <p className="text-sm text-slate-600 dark:text-slate-400 text-center">
            Scannez ce QR code pour accéder directement au formulaire de dépôt
          </p>
        </div>

        {/* Instructions */}
        <div className="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
          <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">
            Comment partager ?
          </h4>
          <ul className="text-sm text-blue-800 dark:text-blue-200 space-y-1">
            <li>• Copiez le lien ci-dessus pour le partager par email, SMS ou message</li>
            <li>• Imprimez ou affichez le QR code pour un accès rapide</li>
            <li>• Partagez l'image du QR code sur les réseaux sociaux</li>
          </ul>
        </div>
      </div>
    </BaseModal>
  );
}