import { Helmet } from "react-helmet-async";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { useToast } from "@/hooks/use-toast";
import LoadingSpinner from "@/components/ui/loading-spinner";
import { Mail, Phone, MapPin, Clock } from "lucide-react";
import { useEffect, useState } from "react";
import { useSearchParams } from "react-router-dom";
import { z } from "zod";
import { supabase } from "@/integrations/supabase/client";

const contactSchema = z.object({
  firstName: z.string().trim().min(1, "Name is required").max(100, "Name must be less than 100 characters"),
  contactNumber: z.string().trim().min(1, "Contact number is required").max(20, "Contact number must be less than 20 characters"),
  email: z.string().trim().email("Invalid email address").max(255, "Email must be less than 255 characters"),
  company: z.string().trim().max(100, "Company name must be less than 100 characters").optional(),
  service: z.string().trim().max(120, "Service must be less than 120 characters").optional(),
  message: z.string().trim().min(1, "Message is required").max(1000, "Message must be less than 1000 characters")
});

const Contact = () => {
  const { toast } = useToast();
  const [searchParams] = useSearchParams();
  const preselectedService = searchParams.get("service") || "";
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [formData, setFormData] = useState({
    firstName: '',
    contactNumber: '',
    email: '',
    company: '',
    service: preselectedService,
    message: preselectedService
      ? `I'd like to enquire about your ${preselectedService} service. `
      : ''
  });

  useEffect(() => {
    if (preselectedService) {
      setFormData((prev) => ({
        ...prev,
        service: preselectedService,
        message: prev.message || `I'd like to enquire about your ${preselectedService} service. `,
      }));
    }
  }, [preselectedService]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    
    try {
      // Validate form data
      const validatedData = contactSchema.parse(formData);

      // Tag the message with the service of interest so it travels with the lead
      const taggedMessage = validatedData.service
        ? `[Service: ${validatedData.service}]\n\n${validatedData.message}`
        : validatedData.message;

      const { error } = await supabase.from('contact_submissions').insert({
        first_name: validatedData.firstName,
        contact_number: validatedData.contactNumber,
        email: validatedData.email,
        company: validatedData.company || null,
        message: taggedMessage,
        source: 'website',
      });

      if (error) {
        console.error('Supabase insert error:', error);
        throw new Error(error.message);
      }

      // Fire-and-forget sync to Google Sheet (don't block UX if it fails)
      supabase.functions.invoke('sync-lead-to-sheet', {
        body: {
          firstName: validatedData.firstName,
          contactNumber: validatedData.contactNumber,
          email: validatedData.email,
          company: validatedData.company || '',
          service: validatedData.service || '',
          message: taggedMessage,
          source: 'website',
        },
      }).catch((err) => console.error('Sheet sync error:', err));

      toast({
        title: "Message Sent Successfully!",
        description: "We'll get back to you within 24 hours.",
      });

      // Reset form on success
      setFormData({
        firstName: '',
        contactNumber: '',
        email: '',
        company: '',
        service: preselectedService,
        message: ''
      });
      
    } catch (error) {
      console.error('Form submission error:', error);
      
      if (error instanceof z.ZodError) {
        const firstError = error.errors[0];
        toast({
          title: "Validation Error",
          description: firstError.message,
          variant: "destructive",
        });
      } else {
        toast({
          title: "Submission Failed",
          description: "Please try again or contact us directly.",
          variant: "destructive",
        });
      }
    } finally {
      setIsSubmitting(false);
    }
  };

  const contactInfo = [
    {
      icon: Mail,
      title: "Email Us",
      details: "marketingnutshyd@gmail.com",
      description: "Get in touch via email"
    },
    {
      icon: Phone,
      title: "Call Us",
      details: "+91 7801006833",
      description: "Mon-Fri, 9AM-6PM EST"
    },
    {
      icon: MapPin,
      title: "Visit Us - Hyderabad",
      details: "Langer Houz, Hyderabad 500008",
      description: "Our main office location"
    },
    {
      icon: MapPin,
      title: "Visit Us - Siddipet",
      details: "Siddipet, Telangana 502103",
      description: "Our branch office location"
    },
    {
      icon: Clock,
      title: "Business Hours",
      details: "Monday - Friday",
      description: "9:00 AM - 6:00 PM EST"
    }
  ];

  return (
    <section id="contact" className="py-12 bg-gradient-subtle">
      <Helmet>
        <title>MarketingNuts - Digital Marketing Agency</title>
      </Helmet>
      
      <div className="container mx-auto px-4">
        <div className="text-center mb-8">
          <h2 className="text-4xl md:text-5xl font-bold mb-6">
            Let's <span className="bg-gradient-primary bg-clip-text text-transparent">Get Started</span>
          </h2>
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
            Ready to accelerate business growth? Contact our digital marketing experts for a strategy consultation.
          </p>
        </div>
        
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
          {/* Contact Form */}
          <Card className="shadow-elegant">
            <CardHeader>
              <CardTitle className="text-2xl">Send us a message</CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              <form id="contact-form" onSubmit={handleSubmit}>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                  <div className="space-y-2">
                    <Label htmlFor="firstName">First Name</Label>
                    <Input 
                      id="firstName" 
                      placeholder="John"
                      value={formData.firstName}
                      onChange={(e) => setFormData({...formData, firstName: e.target.value})}
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="contactNumber">Contact Number</Label>
                    <Input 
                      id="contactNumber" 
                      type="tel"
                      placeholder="+1 (555) 123-4567"
                      value={formData.contactNumber}
                      onChange={(e) => setFormData({...formData, contactNumber: e.target.value})}
                      required
                    />
                  </div>
                </div>
                
                <div className="space-y-2 mb-4">
                  <Label htmlFor="email">Email</Label>
                  <Input 
                    id="email" 
                    type="email" 
                    placeholder="john@company.com"
                    value={formData.email}
                    onChange={(e) => setFormData({...formData, email: e.target.value})}
                    required
                  />
                </div>
                
                <div className="space-y-2 mb-4">
                  <Label htmlFor="company">Company</Label>
                  <Input 
                    id="company" 
                    placeholder="Your Company Name"
                    value={formData.company}
                    onChange={(e) => setFormData({...formData, company: e.target.value})}
                  />
                </div>

                <div className="space-y-2 mb-4">
                  <Label htmlFor="service">Service Interested In</Label>
                  <Input
                    id="service"
                    placeholder="e.g. SEO, PPC, Web Design"
                    value={formData.service}
                    onChange={(e) => setFormData({...formData, service: e.target.value})}
                  />
                </div>
                
                <div className="space-y-2 mb-6">
                  <Label htmlFor="message">Message</Label>
                  <Textarea 
                    id="message" 
                    placeholder="Tell us about your project and goals..."
                    className="min-h-[120px]"
                    value={formData.message}
                    onChange={(e) => setFormData({...formData, message: e.target.value})}
                    required
                  />
                </div>
                
                <Button type="submit" variant="default" size="lg" className="w-full" disabled={isSubmitting}>
                  {isSubmitting ? (
                    <>
                      <LoadingSpinner size="sm" className="mr-2" />
                      Submitting...
                    </>
                  ) : (
                    "Send Message"
                  )}
                </Button>
              </form>
            </CardContent>
          </Card>

          {/* Contact Information */}
          <div className="space-y-6">
            <div className="mb-8">
              <h3 className="text-2xl font-bold mb-4">Get in touch</h3>
              <p className="text-muted-foreground leading-relaxed">
                We're here to help you succeed. Reach out to us through any of the following channels and we'll get back to you within 24 hours.
              </p>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
              {contactInfo.map((info, index) => {
                const IconComponent = info.icon;
                return (
                  <Card key={index} className="p-4 hover:shadow-card transition-spring">
                    <CardContent className="p-0">
                      <div className="flex items-center space-x-3 mb-2">
                        <div className="w-10 h-10 bg-gradient-primary rounded-lg flex items-center justify-center">
                          <IconComponent className="w-5 h-5 text-primary-foreground" />
                        </div>
                        <div>
                          <h4 className="font-semibold">{info.title}</h4>
                        </div>
                      </div>
                      <p className="text-foreground font-medium mb-1">{info.details}</p>
                      <p className="text-sm text-muted-foreground">{info.description}</p>
                    </CardContent>
                  </Card>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Contact;