import React, { useState, useEffect } 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 = () => {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  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: "Belmopan City, Belize",
    },
    {
      icon: Phone,
      title: "Phone",
      content: "(501) 638-6318",
      link: "tel:+5016386318",
    },
    {
      icon: Mail,
      title: "Email",
      content: "prompttechbz@gmail.com",
      link: "mailto:prompttechbz@gmail.com",
    },
    {
      icon: Clock,
      title: "Business Hours",
      content: "Mon-Fri: 8AM-5PM | Sat: 9AM-5PM",
    },
  ];

  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>
              );
            })}

            {/* Google Map - Belmopan City, Belize */}
            <div
              className="aspect-video rounded-xl overflow-hidden border border-border bg-muted relative group"
              data-testid="contact-map"
            >
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30389.40536428!2d-88.7772!3d17.2514!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8f5d0e6c6c6d4e6f%3A0x9f0b8c9e9e9e9e9e!2sBelmopan%2C%20Belize!5e0!3m2!1sen!2sus!4v1706824800000!5m2!1sen!2sus"
                width="100%"
                height="100%"
                style={{ border: 0 }}
                allowFullScreen=""
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                title="PromptTech Solutions Location - Belmopan City, Belize"
                className="w-full h-full"
              />
              {/* Ctrl + Scroll overlay */}
              <div
                className="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
                style={{ pointerEvents: "none" }}
              >
                <div className="bg-background/90 px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2">
                  <kbd className="px-2 py-1 bg-muted rounded text-xs">Ctrl</kbd>
                  <span>+ scroll to zoom</span>
                </div>
              </div>
            </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 to Friday, 8AM to 5PM, and Saturday, 9AM to 5PM. 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 do offer pickups within Belmopan and free delivery within Belmopan. Anything outside Belmopan region must be either with a carrier or with BPMS or Interdistrict Belize covered by the customer.",
              },
            ].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;
