'use client'

import { useState, useEffect } from 'react'
import { 
  XMarkIcon, 
  EnvelopeIcon, 
  ClipboardDocumentIcon,
  CheckIcon
} from '@heroicons/react/24/outline'

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

export default function ContactDialog({ isOpen, onClose }: ContactDialogProps) {
  const [copied, setCopied] = useState(false)
  
  const email = 'hello@bookwiz.io'
  const discordLink = 'https://discord.gg/3QjkcjsKkn'
  
  const copyEmail = async () => {
    try {
      await navigator.clipboard.writeText(email)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    } catch (err) {
      console.error('Failed to copy email:', err)
    }
  }

  // Handle escape key
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        onClose()
      }
    }

    if (isOpen) {
      document.addEventListener('keydown', handleEscape)
      document.body.style.overflow = 'hidden'
    }

    return () => {
      document.removeEventListener('keydown', handleEscape)
      document.body.style.overflow = 'auto'
    }
  }, [isOpen, onClose])

  if (!isOpen) return null

  return (
    <div className="fixed inset-0 z-50 overflow-y-auto">
      {/* Backdrop */}
      <div 
        className="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity"
        onClick={onClose}
      />
      
      {/* Dialog */}
      <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
        <div className="relative transform overflow-hidden rounded-lg bg-slate-800 border border-slate-700/50 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-md sm:p-6">
          <div>
            {/* Header */}
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-lg font-semibold text-white">
                Contact Us
              </h3>
              <button
                onClick={onClose}
                className="rounded-md text-slate-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-teal-500"
              >
                <XMarkIcon className="h-6 w-6" />
              </button>
            </div>

            {/* Content */}
            <div className="space-y-6">
              {/* Email Contact */}
              <div className="bg-slate-700/30 rounded-lg p-4">
                <div className="flex items-center space-x-3 mb-3">
                  <EnvelopeIcon className="h-5 w-5 text-teal-400" />
                  <span className="text-sm font-medium text-white">Email Support</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-slate-300 text-sm">{email}</span>
                  <button
                    onClick={copyEmail}
                    className="flex items-center space-x-1 px-2 py-1 text-xs bg-slate-600 hover:bg-slate-500 text-white rounded transition-colors duration-200"
                  >
                    {copied ? (
                      <>
                        <CheckIcon className="h-3 w-3" />
                        <span>Copied!</span>
                      </>
                    ) : (
                      <>
                        <ClipboardDocumentIcon className="h-3 w-3" />
                        <span>Copy</span>
                      </>
                    )}
                  </button>
                </div>
              </div>

              {/* Discord Community */}
              <div className="bg-slate-700/30 rounded-lg p-4">
                <div className="flex items-center space-x-3 mb-3">
                  <div className="h-5 w-5">
                    <svg viewBox="0 0 24 24" fill="currentColor" className="text-indigo-400">
                      <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.120.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
                    </svg>
                  </div>
                  <span className="text-sm font-medium text-white">Discord Community</span>
                </div>
                <p className="text-slate-300 text-sm mb-3">
                  Join our community for quick help, tips, and discussions with other writers.
                </p>
                <a
                  href={discordLink}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center px-3 py-2 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 rounded-md transition-colors duration-200"
                >
                  Join Discord
                </a>
              </div>

              {/* Response Time Info */}
              <div className="text-center text-xs text-slate-400">
                We typically respond within 24 hours
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}