mintel.me/apps/web/src/components/ShareModal.tsx

"use client";

import * as React from "react";
import { Modal } from "./Modal";
import { Copy, Check, Share2, Download } from "lucide-react";
import { useState, useEffect } from "react";
import IconBlack from "../assets/logo/Icon-Black-Transparent.svg";

interface ShareModalProps {
  isOpen: boolean;
  onClose: () => void;
  url: string;
  qrCodeData?: string;
  title?: string;
  diagramImage?: string;
}

export function ShareModal({
  isOpen,
  onClose,
  url,
  qrCodeData,
  title,
  diagramImage,
}: ShareModalProps) {
  const [copied, setCopied] = useState(false);
  const [imagePreview, setImagePreview] = useState<string | null>(null);
  const [timestamp] = useState(
    new Date().toLocaleTimeString("de-DE", {
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
    }),
  );

  useEffect(() => {
    if (diagramImage && isOpen) {
      const isDataUrl = diagramImage.startsWith("data:image/");

      if (isDataUrl) {
        // If it's already a Data URL (e.g. from html-to-image), we can display it immediately
        setImagePreview(diagramImage);
      } else {
        // It's probably an SVG string, convert to Data URL
        const svgBlob = new Blob([diagramImage], { type: "image/svg+xml;charset=utf-8" });
        const svgUrl = URL.createObjectURL(svgBlob);
        setImagePreview(svgUrl);
      }

      // Optional: If we want to strictly apply the watermark via Canvas, we would do it here.
      // But for the sake of getting the preview to work reliably first, just setting the imagePreview 
      // directly to the data URL or SVG blob URL is the safest approach. The watermark logic was 
      // likely failing because `IconBlack` wasn't resolving correctly or `img.onload` wasn't firing
      // properly in all environments.

    }
  }, [diagramImage, isOpen]);

  const handleCopy = () => {
    navigator.clipboard.writeText(url);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const handleNativeShare = async () => {
    if (navigator.share) {
      try {
        const shareData: ShareData = {
          title: title || "Mintel Diagramm",
          url: url,
        };

        // If we have a diagram image, try to include it as a file
        if (imagePreview) {
          try {
            // Convert base64 preview back to a File object
            const response = await fetch(imagePreview);
            const blob = await response.blob();
            const file = new File(
              [blob],
              `${title?.replace(/\s+/g, "-").toLowerCase() || "diagram"}.png`,
              { type: "image/png" },
            );

            // Check if sharing files is supported
            if (navigator.canShare && navigator.canShare({ files: [file] })) {
              shareData.files = [file];
            }
          } catch (fileError) {
            console.error("Could not prepare file for sharing", fileError);
          }
        }

        await navigator.share(shareData);
      } catch (_e) {
        console.error("Share failed", _e);
      }
    }
  };

  const handleDownloadImage = () => {
    if (!imagePreview) return;

    const link = document.createElement("a");
    link.download = `${title?.replace(/\s+/g, "-").toLowerCase() || "diagram"}.png`;
    link.href = imagePreview;
    link.click();
  };

  const handleShareX = () => {
    const text = encodeURIComponent(title || "Mintel Diagramm");
    const shareUrl = `https://twitter.com/intent/tweet?text=${text}&url=${encodeURIComponent(url)}`;
    window.open(shareUrl, "_blank", "width=550,height=420");
  };

  const handleShareLinkedIn = () => {
    const shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`;
    window.open(shareUrl, "_blank", "width=550,height=420");
  };

  const modalTitle = diagramImage
    ? "Diagramm teilen"
    : title
      ? "Artikel teilen"
      : "Konfiguration teilen";

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      title={modalTitle}
      maxWidth={diagramImage ? "max-w-3xl" : "max-w-lg"}
    >
      <div className="space-y-4">
        {imagePreview ? (
          <div className="space-y-4">
            {/* Social Post Preview Section */}
            <div className="space-y-2">
              <div className="bg-slate-50/50 rounded-2xl border border-slate-100 shadow-inner">
                <div className="p-4 flex items-center gap-3 border-b border-white/50">
                  <div className="w-8 h-8 rounded-full bg-slate-200 animate-pulse" />
                  <div className="space-y-1">
                    <div className="h-2 w-24 bg-slate-200 rounded animate-pulse" />
                    <div className="h-1.5 w-16 bg-slate-100 rounded animate-pulse" />
                  </div>
                </div>
                <div className="p-4 space-y-4">
                  <div className="space-y-4">
                    <div className="h-2.5 w-full bg-slate-200 rounded animate-pulse" />
                    <div className="h-2.5 w-3/4 bg-slate-200 rounded animate-pulse" />
                  </div>
                  {/* Industrial Blueprint Preview */}
                  <div className="relative group overflow-hidden bg-white border border-slate-200 rounded-xl shadow-sm transition-all duration-500 hover:shadow-md hover:border-slate-300">
                    <div
                      className="absolute inset-0 opacity-[0.03] pointer-events-none"
                      style={{
                        backgroundImage:
                          "radial-gradient(#1e293b 1px, transparent 0)",
                        backgroundSize: "15px 15px",
                      }}
                    />

                    <div className="relative p-2 md:p-6 flex flex-col items-center w-full bg-slate-50/30">
                      <img
                        src={imagePreview}
                        alt={title || "Diagram"}
                        className="w-full max-h-[50vh] object-contain transition-transform duration-700 rounded-xl"
                      />
                    </div>

                    <div className="bg-slate-50/80 border-t border-slate-100 px-3 py-1.5 flex items-center justify-between text-[6px] font-mono text-slate-400 uppercase tracking-widest">
                      <div className="flex items-center gap-2">
                        <span>
                          SYS:{" "}
                          {Math.random()
                            .toString(36)
                            .substring(7)
                            .toUpperCase()}
                        </span>
                        <span className="w-0.5 h-0.5 bg-slate-300 rounded-full" />
                        <span>MINTEL.ME</span>
                      </div>
                      <span>{timestamp}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <p className="text-center text-[10px] font-bold uppercase tracking-[0.3em] text-slate-300 flex items-center justify-center gap-4">
              <span className="w-8 h-px bg-slate-100" />
              Diagramm Vorschau
              <span className="w-8 h-px bg-slate-100" />
            </p>
          </div>
        ) : (
          title && (
            <div className="space-y-3">
              <label className="text-[10px] font-bold uppercase tracking-widest text-slate-400 ml-1">
                Artikel Titel
              </label>
              <p className="text-slate-600 leading-relaxed font-medium bg-slate-50/50 p-5 rounded-2xl border border-slate-100 italic transition-all hover:bg-white hover:shadow-sm">
                "{title}"
              </p>
            </div>
          )
        )}

        {!diagramImage && qrCodeData && (
          <div className="flex flex-col items-center gap-4 p-8 bg-slate-50 rounded-[2rem] border border-slate-100 shadow-inner">
            <img
              src={qrCodeData}
              alt="QR Code"
              className="w-48 h-48 rounded-xl shadow-sm"
            />
            <p className="text-[10px] font-bold uppercase tracking-widest text-slate-400">
              QR-Code scannen
            </p>
          </div>
        )}

        <div className="space-y-4">
          <div className="relative group">
            <div className="absolute -inset-1 bg-gradient-to-r from-slate-200 to-slate-100 rounded-2xl blur opacity-25 group-hover:opacity-100 transition duration-1000 group-focus-within:opacity-100" />
            <div className="relative">
              <input
                type="text"
                readOnly
                value={url}
                className="w-full p-5 pr-32 bg-white border border-slate-200 rounded-2xl text-xs font-mono text-slate-600 focus:outline-none focus:border-slate-400 focus:ring-4 focus:ring-slate-50 transition-all"
              />
              <button
                onClick={handleCopy}
                className="absolute right-1.5 top-1.5 bottom-1.5 px-4 bg-slate-900 border border-slate-800 rounded-xl text-white hover:bg-black transition-all flex items-center gap-2"
              >
                {copied ? <Check size={14} /> : <Copy size={14} />}
                <span className="text-[10px] font-bold uppercase tracking-wider">
                  {copied ? "Kopiert" : "Kopieren"}
                </span>
              </button>
            </div>
          </div>

          <div className="flex flex-col sm:flex-row items-center gap-4 pt-2">
            <div className="flex items-center gap-2">
              <button
                onClick={handleShareX}
                className="w-12 h-12 bg-black text-white rounded-xl flex items-center justify-center hover:bg-slate-900 transition-all border border-slate-800 active:scale-95"
                title="Auf X teilen"
              >
                <svg
                  className="w-5 h-5"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                >
                  <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
                </svg>
              </button>

              <button
                onClick={handleShareLinkedIn}
                className="w-12 h-12 bg-[#0A66C2] text-white rounded-xl flex items-center justify-center hover:bg-[#004182] transition-all active:scale-95"
                title="Auf LinkedIn teilen"
              >
                <svg
                  className="w-5 h-5"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                >
                  <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
                </svg>
              </button>

              {typeof navigator !== "undefined" && !!navigator.share && (
                <button
                  onClick={handleNativeShare}
                  className="w-12 h-12 bg-white border border-slate-200 text-slate-900 rounded-xl flex items-center justify-center hover:bg-slate-50 transition-all active:scale-95"
                  title="System-Dialog öffnen"
                >
                  <Share2 size={20} className="text-slate-400" />
                </button>
              )}
            </div>

            {imagePreview && (
              <button
                onClick={handleDownloadImage}
                className="flex-1 w-full p-3 bg-slate-100 text-slate-900 rounded-xl font-bold flex items-center justify-center gap-3 hover:bg-slate-200 transition-all border border-slate-200 active:scale-[0.98]"
              >
                <Download size={18} />
                <span className="text-xs">Als Bild speichern (PNG)</span>
              </button>
            )}
          </div>
        </div>
      </div>
    </Modal>
  );
}