"use client";

import { useLocale, useTranslations } from "next-intl";
import { Send } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input, Textarea, Select } from "@/components/ui/input";
import { Accordion } from "@/components/ui/accordion";
import { FadeIn } from "@/components/magicui/fade-in";
import { submitLead } from "@/app/actions/submit-lead";
import type { FaqItem } from "@/data/localized-data";

function FaqContact({ faqItems }: { faqItems: FaqItem[] }) {
  const locale = useLocale();
  const tFaq = useTranslations("faq");
  const tContact = useTranslations("contact");

  return (
    <section id="contact" className="bg-cream py-20 sm:py-24">
      <div className="mx-auto max-w-[1400px] px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 gap-12 lg:grid-cols-12">
          {/* Left: FAQ */}
          <FadeIn direction="left" className="lg:col-span-6">
            <div className="space-y-6">
              <h2 className="mb-8 font-serif text-2xl font-bold text-ink sm:text-3xl">
                {tFaq("title")}
              </h2>

              <Accordion items={faqItems} />
            </div>
          </FadeIn>

          {/* Right: Inquiry Form */}
          <FadeIn direction="right" delay={200} className="lg:col-span-6">
            <div className="relative flex flex-col gap-6 overflow-hidden rounded-lg border border-black/5 bg-white p-6 shadow-md sm:p-10 md:flex-row">
              <div className="flex-grow space-y-6">
                <div className="space-y-2">
                  <h2 className="font-serif text-2xl font-bold leading-tight text-ink sm:text-3xl">
                    {tContact("title")} {tContact("title2")}
                  </h2>
                  <p className="text-xs text-muted">
                    {tContact("subtitle")}
                  </p>
                </div>

                <form
                  className="space-y-4 text-xs font-medium"
                  onSubmit={(e) => {
                    e.preventDefault();
                    const formData = new FormData(e.currentTarget);
                    formData.set("locale", locale);
                    void submitLead(formData);
                    const name = formData.get("name") || "";
                    const company = formData.get("company") || "";
                    const product = formData.get("product") || "";
                    const email = formData.get("email") || "";
                    const phone = formData.get("phone") || "";
                    const country = formData.get("country") || "";
                    const message = formData.get("message") || "";
                    
                    const text = `Hello OriginalNest, I would like to inquire about an export order.
                    
Name: ${name}
Company: ${company}
Email: ${email}
Phone/WA: ${phone}
Country: ${country}
Interested Product: ${product}

Message:
${message}`;
                    
                    const waUrl = `https://wa.me/6281388888181?text=${encodeURIComponent(text)}`;
                    window.open(waUrl, "_blank");
                  }}
                >
                  <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <Input name="name" type="text" placeholder={tContact("name")} required />
                    <Input name="company" type="text" placeholder={tContact("company")} />
                  </div>
                  <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <Select name="product" required defaultValue="">
                      <option value="" disabled>
                        {tContact("product")}
                      </option>
                      <option value="white-house">{locale === "zh" ? "白燕盏" : locale === "id" ? "Sarang Walet Putih" : "White House Nest"}</option>
                      <option value="golden">{locale === "zh" ? "黄燕盏" : locale === "id" ? "Sarang Walet Emas" : "Golden Nest"}</option>
                      <option value="cup">{locale === "zh" ? "白燕杯" : locale === "id" ? "Sarang Walet Mangkok" : "White Cup"}</option>
                      <option value="broken">{locale === "zh" ? "碎燕" : locale === "id" ? "Sarang Walet Hancur" : "Broken Nest"}</option>
                      <option value="powder">{locale === "zh" ? "燕窝粉" : locale === "id" ? "Bubuk Sarang Walet" : "Nest Powder"}</option>
                    </Select>
                    <Input name="email" type="email" placeholder={tContact("email")} required />
                  </div>
                  <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <Input name="phone" type="tel" placeholder={tContact("phone")} required />
                    <Select name="country" required defaultValue="">
                      <option value="" disabled>
                        {tContact("country")}
                      </option>
                      <option value="SG">{locale === "zh" ? "新加坡" : locale === "id" ? "Singapura" : "Singapore"}</option>
                      <option value="MY">{locale === "zh" ? "马来西亚" : locale === "id" ? "Malaysia" : "Malaysia"}</option>
                      <option value="CN">{locale === "zh" ? "中国大陆" : locale === "id" ? "Tiongkok" : "China"}</option>
                      <option value="HK">{locale === "zh" ? "中国香港" : locale === "id" ? "Hong Kong" : "Hong Kong"}</option>

                      <option value="AE">{locale === "zh" ? "阿联酋" : locale === "id" ? "UEA" : "UAE"}</option>
                      <option value="US">{locale === "zh" ? "美国" : locale === "id" ? "Amerika Serikat" : "USA"}</option>
                      <option value="OTHER">{locale === "zh" ? "其他国家" : locale === "id" ? "Lainnya" : "Other"}</option>
                    </Select>
                  </div>
                  <Textarea name="message" placeholder={tContact("message")} rows={3} />
                  <input type="text" name="website2" tabIndex={-1} autoComplete="off" aria-hidden="true" className="hidden" />
                  <Button type="submit" className="w-full">
                    <Send className="h-3.5 w-3.5" />
                    {tContact("send")}
                  </Button>
                </form>
              </div>
            </div>
          </FadeIn>
        </div>
      </div>
    </section>
  );
}

export { FaqContact };