import { useState } from 'react'
import { useMutation } from '@tanstack/react-query'
import { useToast } from 'sonner'
import { Button } from '@/components/ui/Button'
import { Input } from '@/components/ui/Input'
import { Textarea } from '@/components/ui/Textarea'
import { Select } from '@/components/ui/Select'
import { api } from '@/lib/api'

const Contact = () => {
  const { toast } = useToast()
  const [formState, setFormState] = useState({
    company: '',
    name: '',
    email: '',
    phone: '',
    zip: '',
    message: '',
    service_interest: '',
  })

  const mutation = useMutation({
    mutationFn: (data) => api.post('/leads', data),
    onSuccess: () => {
      toast.success('Thanks! We\'ll be in touch shortly.')
      setFormState({
        company: '',
        name: '',
        email: '',
        phone: '',
        zip: '',
        message: '',
        service_interest: '',
      })
    },
    onError: (error) => {
      toast.error(error.message || 'Failed to submit form. Please try again.')
    },
  })

  const handleSubmit = (e) => {
    e.preventDefault()
    mutation.mutate(formState)
  }

  const handleChange = (e) => {
    const { name, value } = e.target
    setFormState(prev => ({ ...prev, [name]: value }))
  }

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
      {/* Page Hero */}
      <section className="mb-16">
        <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Contact Us</h1>
        <p className="text-xl text-soft-text max-w-3xl">
          Have questions about our services? We're here to help. Fill out the form and we'll get back to you shortly.
        </p>
      </section>

      {/* Contact Form */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
        {/* Left - Info */}
        <div>
          <div className="mb-8">
            <h2 className="text-2xl font-bold text-primary-navy mb-4">Get in Touch</h2>
            <p className="text-soft-text mb-6">
              Our team of communications and infrastructure experts is ready to help you find the right solution for your business needs.
            </p>
            <div className="space-y-4">
              <div>
                <h3 className="font-semibold text-text mb-2">Hours of Operation</h3>
                <p className="text-soft-text">Monday - Friday: 8:00 AM - 6:00 PM CT</p>
              </div>
              <div>
                <h3 className="font-semibold text-text mb-2">Email</h3>
                <p className="text-soft-text">info@queuenorth.com</p>
              </div>
            </div>
          </div>

          <div className="bg-section-alt rounded-lg p-6">
            <h3 className="font-semibold text-primary-navy mb-4">Why Choose Queue North?</h3>
            <ul className="space-y-3">
              {[
                '8x8 Certified Partner with proven expertise',
                '25+ years of industry experience',
                'SMB to Enterprise solutions',
                'Focus on your business outcomes',
              ].map((item, index) => (
                <li key={index} className="flex items-center gap-3 text-text">
                  <svg className="h-5 w-5 text-primary-navy" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                  </svg>
                  {item}
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Right - Form */}
        <div>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div>
              <label htmlFor="company" className="block text-sm font-medium text-text mb-2">
                Company Name <span className="text-red-600">*</span>
              </label>
              <Input
                type="text"
                id="company"
                name="company"
                value={formState.company}
                onChange={handleChange}
                required
                placeholder="Your company name"
              />
            </div>

            <div>
              <label htmlFor="name" className="block text-sm font-medium text-text mb-2">
                Name <span className="text-red-600">*</span>
              </label>
              <Input
                type="text"
                id="name"
                name="name"
                value={formState.name}
                onChange={handleChange}
                required
                placeholder="Your full name"
              />
            </div>

            <div>
              <label htmlFor="email" className="block text-sm font-medium text-text mb-2">
                Email <span className="text-red-600">*</span>
              </label>
              <Input
                type="email"
                id="email"
                name="email"
                value={formState.email}
                onChange={handleChange}
                required
                placeholder="your.email@example.com"
              />
            </div>

            <div>
              <label htmlFor="phone" className="block text-sm font-medium text-text mb-2">
                Phone (Optional)
              </label>
              <Input
                type="tel"
                id="phone"
                name="phone"
                value={formState.phone}
                onChange={handleChange}
                placeholder="(555) 123-4567"
              />
            </div>

            <div>
              <label htmlFor="zip" className="block text-sm font-medium text-text mb-2">
                ZIP Code (Optional)
              </label>
              <Input
                type="text"
                id="zip"
                name="zip"
                value={formState.zip}
                onChange={handleChange}
                placeholder="12345"
              />
            </div>

            <div>
              <label htmlFor="service_interest" className="block text-sm font-medium text-text mb-2">
                Service Interest (Optional)
              </label>
              <Select
                id="service_interest"
                name="service_interest"
                value={formState.service_interest}
                onChange={handleChange}
              >
                <option value="">Select a service...</option>
                <option value="unified-communications">Unified Communications</option>
                <option value="contact-center">Contact Center</option>
                <option value="managed-support">Managed Support</option>
                <option value="consulting-training">Consulting & Training</option>
                <option value="infrastructure-cabling">Infrastructure Cabling</option>
                <option value="wireless-access">Wireless Access</option>
                <option value="local-networking">Local Networking</option>
              </Select>
            </div>

            <div>
              <label htmlFor="message" className="block text-sm font-medium text-text mb-2">
                Message <span className="text-red-600">*</span>
              </label>
              <Textarea
                id="message"
                name="message"
                value={formState.message}
                onChange={handleChange}
                required
                placeholder="Tell us about your needs..."
                rows={5}
              />
            </div>

            <Button
              type="submit"
              className="w-full"
              disabled={mutation.isPending}
            >
              {mutation.isPending ? 'Submitting...' : 'Request Consultation'}
            </Button>
          </form>
        </div>
      </div>
    </div>
  )
}

export default Contact