"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import AnimatedSection from "@/components/AnimatedSection";
import { Mail, Phone, MapPin, Send } from "lucide-react";
import { useToast } from "@/hooks/use-toast";
import { getStoredLanguage } from "@/lib/language";
import { getTranslation } from "@/src/hooks/useTranslation";
import { sendContactMessage } from "@/lib/api/apis";

export default function Contact() {
  const { toast } = useToast();
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    subject: "",
    message: "",
  });
  const [loading, setLoading] = useState(false);
  const lang = getStoredLanguage();
  const t = getTranslation(lang);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);

    try {
      const payload = new FormData();
      payload.append("full_name", formData.name);
      payload.append("email", formData.email);
      payload.append("phone", formData.phone);
      payload.append("subject", formData.subject);
      payload.append("message", formData.message);

      const res = await sendContactMessage(payload);

      if (res?.status === true) {
        toast({
          title: t.contact.successTitle,
          description: t.contact.successDescription,
        });

        setFormData({
          name: "",
          email: "",
          phone: "",
          subject: "",
          message: "",
        });
      } else {
        throw new Error(res?.message || "Something went wrong");
      }
    } catch (error: any) {
      toast({
        variant: "destructive",
        // title: "Submission Failed",
        description:
          error?.message ?? t.contact.errorDescription,
      });
    } finally {
      setLoading(false);
    }
  };

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
  ) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  return (
    <div className="pt-20">
      <section className="relative py-8 bg-gradient-to-br from-[#FAA631] to-[#FAA631] text-white">
        <div className="container mx-auto px-4">
          <AnimatedSection className="max-w-4xl mx-auto text-center">
            <h1 className="text-5xl md:text-6xl font-bold mb-6">
              {t.contact.heroTitle}
            </h1>
            <p className="text-xl md:text-2xl text-orange-100">
              {t.contact.heroSubtitle}
            </p>
          </AnimatedSection>
        </div>
      </section>

      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <AnimatedSection>
              <h2 className="text-3xl font-bold text-gray-900 mb-6">
                {t.contact.getInTouchTitle}
              </h2>
              <p className="text-lg text-gray-600 mb-8">
                {t.contact.getInTouchDesc}
              </p>

              <div className="space-y-6">
                <Card>
                  <CardContent className="flex items-start space-x-4 pt-6">
                    <div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center flex-shrink-0">
                      <Mail className="w-6 h-6 text-[#FAA631]" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-gray-900 mb-1">
                        {t.contact.emailTitle}
                      </h3>
                      <p className="text-gray-600">info@givegita.com</p>
                      <p className="text-gray-600">support@givegita.com</p>
                    </div>
                  </CardContent>
                </Card>

                <Card>
                  <CardContent className="flex items-start space-x-4 pt-6">
                    <div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center flex-shrink-0">
                      <Phone className="w-6 h-6 text-[#FAA631]" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-gray-900 mb-1">
                        {t.contact.phoneTitle}
                      </h3>
                      <p className="text-gray-600">+1 (555) 123-4567</p>
                      <p className="text-gray-600">+1 (555) 987-6543</p>
                    </div>
                  </CardContent>
                </Card>

                <Card>
                  <CardContent className="flex items-start space-x-4 pt-6">
                    <div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center flex-shrink-0">
                      <MapPin className="w-6 h-6 text-[#FAA631]" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-gray-900 mb-1">
                        {t.contact.addressTitle}
                      </h3>
                      <p className="text-gray-600">
                        123 Spiritual Lane
                        <br />
                        New Delhi, India 110001
                      </p>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </AnimatedSection>

            <AnimatedSection delay={200}>
              <Card className="p-8 shadow-xl">
                <h3 className="text-2xl font-bold text-gray-900 mb-6">
                  {t.contact.sendMessageTitle}
                </h3>
                <form onSubmit={handleSubmit} className="space-y-6">
                  <div>
                    <Label htmlFor="name">{t.contact.fullName} *</Label>
                    <Input
                      id="name"
                      name="name"
                      value={formData.name}
                      onChange={handleChange}
                      placeholder={t.contact.namePlaceholder}
                      required
                      className="mt-2"
                    />
                  </div>

                  <div>
                    <Label htmlFor="email">{t.contact.emailAddress} *</Label>
                    <Input
                      id="email"
                      name="email"
                      type="email"
                      value={formData.email}
                      onChange={handleChange}
                      placeholder={t.contact.emailPlaceholder}
                      required
                      className="mt-2"
                    />
                  </div>

                  <div>
                    <Label htmlFor="phone">{t.contact.phoneNumber} *</Label>
                    <Input
                      id="phone"
                      name="phone"
                      type="tel"
                      value={formData.phone}
                      onChange={handleChange}
                      placeholder={t.contact.phonePlaceholder}
                      className="mt-2"
                    />
                  </div>

                  <div>
                    <Label htmlFor="subject">{t.contact.subject} *</Label>
                    <Input
                      id="subject"
                      name="subject"
                      value={formData.subject}
                      onChange={handleChange}
                      placeholder={t.contact.subjectPlaceholder}
                      required
                      className="mt-2"
                    />
                  </div>

                  <div>
                    <Label htmlFor="message">{t.contact.message} *</Label>
                    <Textarea
                      id="message"
                      name="message"
                      value={formData.message}
                      onChange={handleChange}
                      placeholder={t.contact.messagePlaceholder}
                      rows={5}
                      required
                      className="mt-2"
                    />
                  </div>

                  <Button
                    type="submit"
                    disabled={loading}
                    className="w-full bg-[#FAA631] hover:bg-orange-400 text-lg py-6"
                  >
                    {loading ? (
                      t.contact.sending
                    ) : (
                      <>
                        <Send className="mr-2 w-5 h-5" />
                        {t.contact.send}
                      </>
                    )}
                  </Button>
                </form>
              </Card>
            </AnimatedSection>
          </div>
        </div>
      </section>

      <section className="py-20 bg-gradient-to-br from-orange-50 to-white">
        <div className="mx-auto">
          <AnimatedSection className="text-center h-150">
            {/* <h2 className="text-4xl font-bold text-gray-900 mb-12">
              {t.contact.visitUs}
            </h2> */}
            <div className="w-full h-[30rem] bg-gray-200 overflow-hidden">
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3537.9531217666113!2d77.44239927582835!3d27.532915476283062!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39730f5c68eb8483%3A0x570f5700cb322eca!2sGIVE%20GITALAYA%20GOVARDHAN!5e0!3m2!1sen!2sin!4v1782279243195!5m2!1sen!2sin"
                width="100%"
                height="100%"
                style={{ border: 0 }}
                allowFullScreen
                loading="lazy"
                referrerPolicy="strict-origin-when-cross-origin"
              ></iframe>
            </div>
          </AnimatedSection>
        </div>
      </section>
    </div>
  );
}