'use client';

import * as React from 'react';
import { Modal } from './Modal';
import { Copy, Check, Share2 } from 'lucide-react';
import { useState } from 'react';

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

export function ShareModal({ isOpen, onClose, url, qrCodeData }: ShareModalProps) {
  const [copied, setCopied] = useState(false);

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

  const handleNativeShare = async () => {
    if (navigator.share) {
      try {
        await navigator.share({
          title: 'Meine Projekt-Konfiguration',
          url: url
        });
      } catch (e) {
        console.error("Share failed", e);
      }
    }
  };

  return (
    <Modal isOpen={isOpen} onClose={onClose} title="Konfiguration teilen">
      <div className="space-y-8">
        <p className="text-slate-500 leading-relaxed">
          Speichern Sie diesen Link, um Ihre Konfiguration später fortzusetzen oder teilen Sie ihn mit anderen.
        </p>

        {qrCodeData && (
          <div className="flex flex-col items-center gap-4 p-8 bg-slate-50 rounded-[2rem]">
            <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">
            <input
              type="text"
              readOnly
              value={url}
              className="w-full p-6 pr-20 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-mono text-slate-600 focus:outline-none"
            />
            <button
              onClick={handleCopy}
              className="absolute right-2 top-2 bottom-2 px-4 bg-white border border-slate-100 rounded-xl text-slate-900 hover:bg-slate-900 hover:text-white transition-all flex items-center gap-2"
            >
              {copied ? <Check size={18} /> : <Copy size={18} />}
              <span className="text-xs font-bold uppercase tracking-wider">{copied ? 'Kopiert' : 'Kopieren'}</span>
            </button>
          </div>

          {typeof navigator !== 'undefined' && !!navigator.share && (
            <button
              onClick={handleNativeShare}
              className="w-full p-6 bg-slate-900 text-white rounded-2xl font-bold flex items-center justify-center gap-3 hover:bg-slate-800 transition-all"
            >
              <Share2 size={20} />
              <span>System-Dialog öffnen</span>
            </button>
          )}
        </div>
      </div>
    </Modal>
  );
}
