'use client'

import { useState } from 'react'
import { XMarkIcon, LinkIcon } from '@heroicons/react/24/outline'
import { CheckIcon } from '@heroicons/react/24/solid'

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

export default function ShareDialog({ isOpen, onClose }: ShareDialogProps) {
  const [copied, setCopied] = useState(false)

  const shareData = {
    x: {
      name: 'X (Twitter)',
      logo: '𝕏',
      color: 'from-black to-gray-800',
      url: 'https://x.com/intent/tweet',
      text: 'Just discovered @bookwiz_ai - an AI-powered book writing tool that\'s changing how I write! 🚀📚',
      hashtags: 'AI,Writing,Bookwiz'
    },
    linkedin: {
      name: 'LinkedIn',
      logo: 'in',
      color: 'from-blue-600 to-blue-700',
      url: 'https://www.linkedin.com/sharing/share-offsite',
      text: 'Excited to share Bookwiz - an AI-powered book writing platform that\'s revolutionizing content creation. Perfect for authors, creators, and anyone who wants to write better books faster.',
      hashtags: 'AI,Writing,ContentCreation'
    }
  }

  const handleShare = (platform: 'x' | 'linkedin') => {
    const data = shareData[platform]
    const url = 'https://bookwiz.io'
    
    if (platform === 'x') {
      const twitterUrl = `${data.url}?text=${encodeURIComponent(data.text)}&url=${encodeURIComponent(url)}&hashtags=${data.hashtags}`
      window.open(twitterUrl, '_blank', 'width=600,height=400')
    } else if (platform === 'linkedin') {
      const linkedinUrl = `${data.url}/?url=${encodeURIComponent(url)}&title=${encodeURIComponent('Bookwiz - AI-Powered Book Writing')}&summary=${encodeURIComponent(data.text)}`
      window.open(linkedinUrl, '_blank', 'width=600,height=400')
    }
  }

  const handleCopyLink = async () => {
    try {
      await navigator.clipboard.writeText('https://bookwiz.io')
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    } catch (err) {
      console.error('Failed to copy link:', err)
    }
  }

  if (!isOpen) return null

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      {/* Backdrop */}
      <div 
        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
        onClick={onClose}
      />
      
      {/* Dialog */}
      <div className="relative w-full max-w-md bg-black/80 backdrop-blur-2xl border border-white/10 rounded-3xl p-6 shadow-2xl">
        {/* Close button */}
        <button
          onClick={onClose}
          className="absolute top-4 right-4 p-2 rounded-xl text-gray-400 hover:text-white hover:bg-white/10 transition-all duration-200"
        >
          <XMarkIcon className="h-5 w-5" />
        </button>

        {/* Header */}
        <div className="text-center mb-6">
          <h2 className="text-2xl font-bold text-white mb-2">Share Bookwiz</h2>
          <p className="text-gray-400 text-sm">
            Help others discover the future of AI-powered book writing
          </p>
        </div>

        {/* Share buttons */}
        <div className="space-y-3 mb-6">
          {/* X.com */}
          <button
            onClick={() => handleShare('x')}
            className="w-full group relative flex items-center p-4 rounded-2xl bg-gradient-to-r from-black to-gray-800 border border-gray-700 hover:border-gray-600 transition-all duration-200"
          >
            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-black to-gray-800 flex items-center justify-center mr-4 shadow-lg">
              <span className="text-white text-lg font-bold">𝕏</span>
            </div>
            <div className="flex-1 text-left">
              <div className="text-white font-semibold">Share on X</div>
              <div className="text-gray-400 text-sm">Spread the word on Twitter</div>
            </div>
            <div className="w-2 h-2 bg-gray-600 rounded-full group-hover:bg-gray-500 transition-colors" />
          </button>

          {/* LinkedIn */}
          <button
            onClick={() => handleShare('linkedin')}
            className="w-full group relative flex items-center p-4 rounded-2xl bg-gradient-to-r from-blue-600/20 to-blue-700/20 border border-blue-600/30 hover:border-blue-500/50 transition-all duration-200"
          >
            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-600 to-blue-700 flex items-center justify-center mr-4 shadow-lg">
              <span className="text-white text-lg font-bold">in</span>
            </div>
            <div className="flex-1 text-left">
              <div className="text-white font-semibold">Share on LinkedIn</div>
              <div className="text-gray-400 text-sm">Connect with professionals</div>
            </div>
            <div className="w-2 h-2 bg-blue-600 rounded-full group-hover:bg-blue-500 transition-colors" />
          </button>
        </div>

        {/* Copy link */}
        <button
          onClick={handleCopyLink}
          className="w-full group relative flex items-center p-4 rounded-2xl bg-gradient-to-r from-purple-600/20 to-pink-600/20 border border-purple-600/30 hover:border-purple-500/50 transition-all duration-200"
        >
          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-600 to-pink-600 flex items-center justify-center mr-4 shadow-lg">
            {copied ? (
              <CheckIcon className="w-5 h-5 text-white" />
            ) : (
              <LinkIcon className="w-5 h-5 text-white" />
            )}
          </div>
          <div className="flex-1 text-left">
            <div className="text-white font-semibold">
              {copied ? 'Link copied!' : 'Copy link'}
            </div>
            <div className="text-gray-400 text-sm">
              {copied ? 'Paste it anywhere' : 'bookwiz.io'}
            </div>
          </div>
          <div className={`w-2 h-2 rounded-full transition-colors ${
            copied ? 'bg-green-500' : 'bg-purple-600 group-hover:bg-purple-500'
          }`} />
        </button>
      </div>
    </div>
  )
}