import { useState } from 'react'
import { motion } from 'framer-motion'
import { FaEnvelope, FaMapMarkerAlt } from 'react-icons/fa'
import { useNotification } from '../context/notification-context'

const Contact = () => {
  const { showNotification } = useNotification()
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    service: '',
    message: ''
  })

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (isSubmitting) return
    setIsSubmitting(true)

    try {
      const response = await fetch('/api/contact', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      })

      const data = await response.json()

      if (data.success) {
        showNotification('Message sent successfully!', 'success')
        setFormData({ name: '', email: '', service: '', message: '' })
      } else {
        showNotification(data.message || 'Failed to send message', 'error')
      }
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : 'An error occurred. Please try again later.'
      showNotification(errorMessage, 'error')
    } finally {
      setTimeout(() => {
        setIsSubmitting(false)
      }, 1000)
    }
  }

  const contactInfo = [
    {
      icon: <FaEnvelope className="text-2xl sm:text-3xl" />,
      title: 'Email',
      content: 'contact@deafgain.com'
    },
    {
      icon: <FaMapMarkerAlt className="text-2xl sm:text-3xl" />,
      title: 'Location',
      content: 'Montana, United States'
    }
  ]

  return (
    <div className="min-h-screen bg-accent-snow">
      <div className="max-w-7xl mx-auto px-4 py-12 sm:py-20">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="text-center mb-8 sm:mb-16"
        >
          <h1 className="text-3xl sm:text-4xl font-bold text-secondary mb-4">Get in Touch</h1>
          <p className="text-accent-mountain text-base sm:text-lg max-w-2xl mx-auto px-4">
            We're here to help and answer any questions you might have
          </p>
        </motion.div>

        <div className="grid sm:grid-cols-2 gap-6 mb-12 max-w-2xl mx-auto">
          {contactInfo.map((info, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.2 }}
              className="bg-white p-6 rounded-lg shadow-lg text-center"
            >
              <div className="text-primary mb-4">{info.icon}</div>
              <h3 className="text-lg sm:text-xl font-semibold mb-2">{info.title}</h3>
              <p className="text-accent-mountain">{info.content}</p>
            </motion.div>
          ))}
        </div>

        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.4 }}
          className="max-w-2xl mx-auto bg-white rounded-lg shadow-lg p-6 sm:p-8"
        >
          <form onSubmit={handleSubmit} className="space-y-6">
            <div>
              <label htmlFor="name" className="block text-accent-mountain mb-2 text-sm sm:text-base">
                Name
              </label>
              <input
                type="text"
                id="name"
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                className="w-full px-4 py-3 border border-accent-lake rounded-lg focus:outline-none focus:border-primary
                         text-base sm:text-lg"
                required
                minLength={2}
                maxLength={50}
              />
            </div>

            <div>
              <label htmlFor="email" className="block text-accent-mountain mb-2 text-sm sm:text-base">
                Email
              </label>
              <input
                type="email"
                id="email"
                value={formData.email}
                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                className="w-full px-4 py-3 border border-accent-lake rounded-lg focus:outline-none focus:border-primary
                         text-base sm:text-lg"
                required
                pattern="[^@\s]+@[^@\s]+\.[^@\s]+"
              />
            </div>

            <div>
              <label htmlFor="service" className="block text-accent-mountain mb-2 text-sm sm:text-base">
                Service Interested In
              </label>
              <select
                id="service"
                value={formData.service}
                onChange={(e) => setFormData({ ...formData, service: e.target.value })}
                className="w-full px-4 py-3 border border-accent-lake rounded-lg focus:outline-none focus:border-primary
                         text-base sm:text-lg bg-white"
                required
              >
                <option value="">Select a service</option>
                <option value="ADA-Compliant Transcripts">ADA-Compliant Transcripts</option>
                <option value="Universal Website Design">Universal Website Design</option>
                <option value="Board Communication">Board Communication</option>
                <option value="Training & Workshops">Training & Workshops</option>
              </select>
            </div>

            <div>
              <label htmlFor="message" className="block text-accent-mountain mb-2 text-sm sm:text-base">
                Message
              </label>
              <textarea
                id="message"
                value={formData.message}
                onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                className="w-full px-4 py-3 border border-accent-lake rounded-lg focus:outline-none focus:border-primary
                         text-base sm:text-lg min-h-[120px] sm:min-h-[150px]"
                required
                minLength={10}
                maxLength={1000}
              />
            </div>

            <motion.button
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
              type="submit"
              disabled={isSubmitting}
              className={`w-full py-4 rounded-lg font-semibold text-base sm:text-lg transition-colors
                ${isSubmitting 
                  ? 'bg-accent-mountain text-accent-snow cursor-not-allowed'
                  : 'bg-primary text-accent-snow hover:bg-secondary active:bg-secondary'
                }`}
            >
              {isSubmitting ? 'Sending...' : 'Send Message'}
            </motion.button>
          </form>
        </motion.div>
      </div>
    </div>
  )
}

export default Contact
