"use client";

import * as Dialog from '@radix-ui/react-dialog';
import { X, Book, ExternalLink } from 'lucide-react';
import packageJson from '../package.json';

interface AboutStudioModalProps {
  isOpen: boolean;
  onClose: () => void;
}

const AboutStudioModal = ({ isOpen, onClose }: AboutStudioModalProps) => {
  return (
    <Dialog.Root open={isOpen} onOpenChange={onClose}>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50" />
        <Dialog.Content className="fixed left-1/2 top-1/2 w-full max-w-md -translate-x-1/2 -translate-y-1/2 transform rounded-xl bg-white shadow-2xl z-50 border border-gray-200 overflow-hidden">
          {/* Header with gradient */}
          <div className="bg-gradient-to-r from-blue-600 to-purple-600 px-6 py-4 text-white">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center backdrop-blur-sm">
                  <Book className="w-5 h-5 text-white" />
                </div>
                <div>
                  <Dialog.Title className="text-lg font-semibold">
                    EventCatalog Studio
                  </Dialog.Title>
                  <p className="text-sm text-blue-100">Version {packageJson.version}</p>
                </div>
              </div>
              <Dialog.Close asChild>
                <button 
                  className="rounded-full p-1 hover:bg-white/20 transition-colors"
                  onClick={onClose}
                >
                  <X className="h-4 w-4 text-white" />
                </button>
              </Dialog.Close>
            </div>
          </div>

          {/* Content */}
          <div className="p-6 space-y-5">
            {/* License section with upgrade CTA */}
            <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
              <div>
                <p className="text-sm font-medium text-gray-900">Community Edition</p>
                <p className="text-xs text-gray-500">Free for personal use</p>
              </div>
              <a 
                href="https://eventcatalog.dev/pricing" 
                target="_blank" 
                rel="noopener noreferrer"
                className="inline-flex items-center space-x-1 text-xs bg-gradient-to-r from-blue-600 to-purple-600 text-white px-3 py-1.5 rounded-full hover:shadow-lg transition-all transform hover:scale-105"
              >
                <span>Upgrade</span>
                <ExternalLink className="w-3 h-3" />
              </a>
            </div>
            
            {/* Description */}
            <div>
              <p className="text-sm text-gray-600 leading-relaxed">
                {packageJson.description}
              </p>
            </div>
            
         
          </div>
          
          {/* Footer */}
          <div className="px-6 py-4 bg-gray-50 border-t border-gray-200">
            <div className="flex items-center justify-between">
              <p className="text-xs text-gray-500">
                © {new Date().getFullYear()} EventCatalog
              </p>
              <div className="flex space-x-3">
                <a 
                  href={packageJson.repository.url} 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="inline-flex items-center space-x-1 text-xs text-gray-500 hover:text-blue-600 transition-colors"
                >
                  <span>GitHub</span>
                  <ExternalLink className="w-3 h-3" />
                </a>
                <button
                  onClick={onClose}
                  className="text-xs bg-gray-900 text-white px-3 py-1.5 rounded-md hover:bg-gray-800 transition-colors"
                >
                  Close
                </button>
              </div>
            </div>
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
};

export default AboutStudioModal;