'use client';
import React, { useState } from 'react';
import dynamic from 'next/dynamic';
import Link from 'next/link';

// Load LivePreview dynamically since it depends on browser APIs
const LivePreview = dynamic(() => import('@/components/qr-editor/LivePreview'), { ssr: false });

export default function GuestQRGenerator() {
  const [url, setUrl] = useState('https://ck-qr.com');

  const defaultOptions = {
    width: 300,
    height: 300,
    type: 'svg' as const,
    data: url || 'https://ck-qr.com',
    margin: 10,
    qrOptions: {
      typeNumber: 0 as const,
      mode: 'Byte' as const,
      errorCorrectionLevel: 'Q' as const
    },
    imageOptions: {
      hideBackgroundDots: true,
      imageSize: 0.4,
      margin: 5
    },
    dotsOptions: {
      color: '#4f46e5',
      type: 'rounded' as const
    },
    backgroundOptions: {
      color: '#ffffff',
    },
    cornersSquareOptions: {
      color: '#4f46e5',
      type: 'extra-rounded' as const
    }
  };

  const handleDownload = async () => {
    try {
      const QRCodeStyling = (await import('qr-code-styling')).default;
      const qrCode = new QRCodeStyling(defaultOptions);
      qrCode.download({ name: 'Guest-Static-QR', extension: 'png' });
    } catch (err) {
      console.error('Download failed', err);
    }
  };

  return (
    <div className="bg-gray-900 border border-gray-800 p-8 rounded-3xl lg:p-12 shadow-2xl relative overflow-hidden">
      <div className="absolute top-0 right-0 w-64 h-64 bg-indigo-500/10 rounded-full blur-3xl"></div>
      <div className="absolute bottom-0 left-0 w-64 h-64 bg-purple-500/10 rounded-full blur-3xl"></div>
      
      <div className="flex flex-col lg:flex-row gap-12 items-center relative z-10">
        <div className="flex-1 w-full text-center lg:text-left">
          <h2 className="text-3xl lg:text-4xl font-black text-white mb-4">Try it now, for free.</h2>
          <p className="text-gray-400 text-lg mb-8">
            Enter a destination URL below to instantly generate a basic static QR code. No signup required.
          </p>
          
          <div className="mb-6">
            <input 
              type="url" 
              value={url}
              onChange={(e) => setUrl(e.target.value)}
              placeholder="https://yourwebsite.com"
              className="w-full bg-gray-950 border border-gray-700 text-white rounded-xl px-4 py-4 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all font-medium"
            />
          </div>

          <div className="flex flex-col sm:flex-row gap-4 mb-8">
            <button 
              onClick={handleDownload}
              className="flex-1 bg-gray-800 hover:bg-gray-700 border border-gray-700 text-white font-bold py-3 px-6 rounded-xl transition-colors shadow-sm"
            >
              Download PNG
            </button>
            <Link 
              href="/register"
              className="flex-1 bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-3 px-6 rounded-xl transition-colors shadow-lg shadow-indigo-500/25 flex items-center justify-center gap-2"
            >
              Track Scans (Free Trial)
              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" /></svg>
            </Link>
          </div>
          
          <p className="text-sm text-gray-500">
            Static QR codes cannot be edited later and do not track scan analytics. 
            <Link href="/register" className="text-indigo-400 hover:text-indigo-300 font-medium ml-1">Upgrade to track.</Link>
          </p>
        </div>
        
        <div className="w-full lg:w-1/3 flex justify-center">
          <div className="pointer-events-none transform scale-90 sm:scale-100">
            <LivePreview options={defaultOptions} />
          </div>
        </div>
      </div>
    </div>
  );
}
