import React, { useState } from 'react';
import axios from 'axios';
import { Mail, Phone, MapPin, Clock, Send } from 'lucide-react';
import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input';
import { Textarea } from '../components/ui/textarea';
import { Label } from '../components/ui/label';
import { toast } from 'sonner';

const API = `${process.env.REACT_APP_BACKEND_URL}/api`;

const Contact = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    subject: '',
    message: ''
  });
  const [submitting, setSubmitting] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSubmitting(true);

    try {
      await axios.post(`${API}/contact`, formData);
      toast.success('Message sent successfully! We will get back to you soon.');
      setFormData({ name: '', email: '', subject: '', message: '' });
    } catch (error) {
      toast.error('Failed to send message. Please try again.');
    } finally {
      setSubmitting(false);
    }
  };

  const contactInfo = [
    {
      icon: MapPin,
      title: 'Address',
      content: '123 Tech Street, Silicon Valley, CA 94000',
    },
    {
      icon: Phone,
      title: 'Phone',
      content: '+1 (234) 567-890',
      link: 'tel:+1234567890',
    },
    {
      icon: Mail,
      title: 'Email',
      content: 'info@techzone.com',
      link: 'mailto:info@techzone.com',
    },
    {
      icon: Clock,
      title: 'Business Hours',
      content: 'Mon - Sat: 9AM - 7PM',
    },
  ];

  return (
    <div className="min-h-screen py-12 md:py-16">
      <div className="max-w-7xl mx-auto px-4 md:px-8">
        {/* Header */}
        <div className="text-center mb-12 md:mb-16">
          <h1 className="text-4xl md:text-5xl font-bold font-['Outfit'] mb-4">
            Get in Touch
          </h1>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
            Have questions? We'd love to hear from you. Send us a message 
            and we'll respond as soon as possible.
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
          {/* Contact Info */}
          <div className="lg:col-span-1 space-y-6">
            <h2 className="text-xl font-semibold font-['Outfit'] mb-6">
              Contact Information
            </h2>
            
            {contactInfo.map((info, idx) => {
              const Icon = info.icon;
              const Content = info.link ? (
                <a 
                  href={info.link} 
                  className="text-muted-foreground hover:text-foreground transition-colors"
                >
                  {info.content}
                </a>
              ) : (
                <span className="text-muted-foreground">{info.content}</span>
              );
              
              return (
                <div 
                  key={idx} 
                  className="flex items-start gap-4 p-4 rounded-xl border border-border bg-card"
                  data-testid={`contact-info-${idx}`}
                >
                  <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                    <Icon className="h-5 w-5 text-primary" />
                  </div>
                  <div>
                    <h3 className="font-medium text-sm mb-1">{info.title}</h3>
                    {Content}
                  </div>
                </div>
              );
            })}

            {/* Map placeholder */}
            <div className="aspect-video rounded-xl overflow-hidden border border-border bg-muted">
              <img
                src="https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1?w=800"
                alt="Location Map"
                className="w-full h-full object-cover"
                data-testid="contact-map"
              />
            </div>
          </div>

          {/* Contact Form */}
          <div className="lg:col-span-2">
            <div className="border border-border rounded-2xl bg-card p-6 md:p-8">
              <h2 className="text-xl font-semibold font-['Outfit'] mb-6">
                Send us a Message
              </h2>

              <form onSubmit={handleSubmit} className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="space-y-2">
                    <Label htmlFor="name">Full Name</Label>
                    <Input
                      id="name"
                      placeholder="John Doe"
                      value={formData.name}
                      onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                      required
                      data-testid="contact-name"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="email">Email Address</Label>
                    <Input
                      id="email"
                      type="email"
                      placeholder="john@example.com"
                      value={formData.email}
                      onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                      required
                      data-testid="contact-email"
                    />
                  </div>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="subject">Subject</Label>
                  <Input
                    id="subject"
                    placeholder="How can we help you?"
                    value={formData.subject}
                    onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
                    required
                    data-testid="contact-subject"
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="message">Message</Label>
                  <Textarea
                    id="message"
                    placeholder="Your message..."
                    rows={6}
                    value={formData.message}
                    onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                    required
                    data-testid="contact-message"
                  />
                </div>

                <Button 
                  type="submit" 
                  size="lg" 
                  className="rounded-full gap-2 btn-press"
                  disabled={submitting}
                  data-testid="contact-submit"
                >
                  {submitting ? (
                    'Sending...'
                  ) : (
                    <>
                      Send Message
                      <Send className="h-4 w-4" />
                    </>
                  )}
                </Button>
              </form>
            </div>
          </div>
        </div>

        {/* FAQ Section */}
        <section className="mt-16 md:mt-24">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold font-['Outfit'] mb-4">
              Frequently Asked Questions
            </h2>
            <p className="text-muted-foreground">
              Quick answers to common questions
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
            {[
              {
                q: 'What are your business hours?',
                a: 'We are open Monday through Saturday, 9AM to 7PM. We are closed on Sundays.'
              },
              {
                q: 'Do you offer warranty on repairs?',
                a: 'Yes, all our repairs come with a 30-day warranty covering the parts and labor.'
              },
              {
                q: 'How long does a typical repair take?',
                a: 'Most repairs are completed within 1-2 hours. Complex repairs may take 1-2 days.'
              },
              {
                q: 'Do you offer pickup and delivery?',
                a: 'Yes, we offer free pickup and delivery for repairs within a 10-mile radius.'
              }
            ].map((faq, idx) => (
              <div 
                key={idx} 
                className="p-6 rounded-xl border border-border bg-card"
                data-testid={`faq-${idx}`}
              >
                <h3 className="font-semibold mb-2 font-['Outfit']">{faq.q}</h3>
                <p className="text-sm text-muted-foreground">{faq.a}</p>
              </div>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
};

export default Contact;
