"use client";

import { useState, useEffect, useRef } from "react";
import { Mail, Phone, MapPin, MessageCircle, Loader2 } from "lucide-react";
import Link from "next/link";
import { publicContactApi } from "@/lib/api/public";
import type { Contact } from "@/types/contact";
import type { Faq } from "@/types/faq";

export default function ContactSection() {
  const [activeFAQ, setActiveFAQ] = useState<number | null>(null);
  const [isVisible, setIsVisible] = useState(false);
  const [contact, setContact] = useState<Contact | null>(null);
  const [faqs, setFaqs] = useState<Faq[]>([]);
  const [loading, setLoading] = useState(true);
  const sectionRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) setIsVisible(true); },
      { threshold: 0.1 }
    );
    if (sectionRef.current) observer.observe(sectionRef.current);
    return () => { if (sectionRef.current) observer.unobserve(sectionRef.current); };
  }, []);

  useEffect(() => {
    Promise.allSettled([
      publicContactApi.getContact(),
      publicContactApi.getFaqs(),
    ]).then(([contactResult, faqsResult]) => {
      if (contactResult.status === "fulfilled") setContact(contactResult.value.data);
      if (faqsResult.status === "fulfilled") setFaqs(faqsResult.value.data);
      setLoading(false);
    });
  }, []);

  const contactItems = [
    contact?.email
      ? { icon: Mail, text: contact.email, href: `mailto:${contact.email}` }
      : null,
    contact?.phone
      ? { icon: Phone, text: contact.phone, href: `https://wa.me/${contact.phone.replace(/\D/g, "")}` }
      : null,
    contact?.address
      ? { icon: MapPin, text: contact.address, href: `https://maps.google.com/?q=${encodeURIComponent(contact.address)}` }
      : null,
  ].filter(Boolean) as { icon: typeof Mail; text: string; href: string }[];

  const whatsappHref = contact?.phone
    ? `https://wa.me/${contact.phone.replace(/\D/g, "")}`
    : "#";

  return (
    <section
      ref={sectionRef}
      className="py-16 px-6 sm:px-6 md:px-20 lg:px-36 bg-gray-50"
      id="kontak"
    >
      <div className="max-w-10xl mx-auto">
        <div
          className={`text-center mb-12 md:mb-16 transition-all duration-700 ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
            }`}
        >
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-main mb-4">
            Kontak <span className="text-brand">Kami</span>
          </h2>
          <div className="w-24 h-1 bg-brand mx-auto mb-6"></div>
          <p className="text-lg md:text-xl text-sec max-w-3xl mx-auto">
            Kami siap membantu dan menjawab pertanyaan Anda tentang PTBMMKI
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
          <div
            className={`transition-all duration-700 ${isVisible ? "opacity-100 translate-x-0" : "opacity-0 -translate-x-8"
              }`}
          >
            <div className="bg-white rounded-2xl shadow-xl p-6 md:p-8 border border-gray-200 h-full flex flex-col">
              <div className="mb-8 flex-shrink-0">
                <div className="inline-block bg-brand text-white px-4 py-1 rounded-full text-sm font-semibold mb-3">
                  FAQ
                </div>
                <h3 className="text-2xl md:text-3xl font-bold text-main">
                  Pertanyaan yang Sering Diajukan
                </h3>
                <p className="text-gray-600 mt-2">
                  Temukan jawaban untuk pertanyaan umum seputar PTBMMKI
                </p>
              </div>

              {loading ? (
                <div className="flex items-center justify-center flex-grow gap-2 text-gray-400">
                  <Loader2 className="w-4 h-4 animate-spin" />
                  <span className="text-sm">Memuat FAQ...</span>
                </div>
              ) : faqs.length === 0 ? (
                <p className="text-gray-400 italic text-sm flex-grow">Belum ada FAQ tersedia.</p>
              ) : (
                <div className="flex-grow overflow-y-auto pr-2 space-y-4">
                  {faqs.map((faq, index) => (
                    <div
                      key={faq.id}
                      className={`border border-gray-200 rounded-xl overflow-hidden transition-all duration-500 ${isVisible ? "opacity-100 translate-x-0" : "opacity-0 -translate-x-8"
                        }`}
                      style={{ transitionDelay: `${index * 100}ms` }}
                    >
                      <button
                        onClick={() => setActiveFAQ(activeFAQ === index ? null : index)}
                        className="w-full flex items-center justify-between p-4 md:p-5 text-left hover:bg-gray-50 transition-colors duration-200 cursor-pointer"
                      >
                        <span className="text-base md:text-lg font-semibold text-gray-800 pr-4">
                          {faq.question}
                        </span>
                        <svg
                          className={`w-5 h-5 text-gray-500 flex-shrink-0 transition-transform duration-200 ${activeFAQ === index ? "rotate-180" : ""
                            }`}
                          fill="none"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
                        </svg>
                      </button>
                      <div
                        className={`overflow-hidden transition-all duration-300 ${activeFAQ === index ? "max-h-96" : "max-h-0"
                          }`}
                      >
                        <div className="p-4 md:p-5 pt-0">
                          <p className="text-gray-600 leading-relaxed">{faq.answer}</p>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>

          <div className="space-y-8 h-full">
            <div
              className={`transition-all duration-700 delay-150 ${isVisible ? "opacity-100 translate-x-0" : "opacity-0 translate-x-8"
                }`}
            >
              <div className="bg-white rounded-2xl shadow-xl p-6 md:p-8 border border-gray-200">
                <div className="mb-8">
                  <div className="inline-block bg-brand text-white px-4 py-1 rounded-full text-sm font-semibold mb-3">
                    Hubungi Kami
                  </div>
                  <h3 className="text-2xl md:text-3xl font-bold text-main mb-3">
                    Kami Siap Membantu Anda
                  </h3>
                  <p className="text-gray-600">
                    PTBMMKI memiliki lebih dari 30 tahun pengalaman dalam bidang kegawatdaruratan
                    medis dan penanganan bencana. Kami berkomitmen untuk menjadi mitra yang
                    memberikan solusi dan dampak nyata bagi masyarakat.
                  </p>
                </div>

                {loading ? (
                  <div className="flex items-center gap-2 text-gray-400 mb-8">
                    <Loader2 className="w-4 h-4 animate-spin" />
                    <span className="text-sm">Memuat kontak...</span>
                  </div>
                ) : (
                  <div className="space-y-4 mb-8">
                    {contactItems.map((item, index) => (
                      <Link
                        key={index}
                        href={item.href}
                        target="_blank"
                        rel="noopener noreferrer"
                        className={`flex items-center gap-2 py-2 rounded-xl hover:bg-gray-50 transition-all duration-200 group ${isVisible ? "opacity-100 translate-x-0" : "opacity-0 translate-x-8"
                          }`}
                        style={{ transitionDelay: `${150 + index * 100}ms` }}
                      >
                        <div className="w-10 h-10 rounded-lg flex items-center justify-center text-brand bg-gray-50 group-hover:bg-white transition-colors duration-200">
                          <item.icon className="w-5 h-5" />
                        </div>
                        <p className="text-gray-800 font-medium group-hover:text-brand transition-colors duration-200 flex-1">
                          {item.text}
                        </p>
                      </Link>
                    ))}
                  </div>
                )}

                <Link
                  href={whatsappHref}
                  target="_blank"
                  rel="noopener noreferrer"
                  className={`inline-flex items-center gap-3 bg-brand text-white px-6 py-3 rounded-lg font-semibold hover:bg-[#E67817] transition-all duration-300 hover:scale-105 shadow-md hover:shadow-lg ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
                    }`}
                  style={{ transitionDelay: "450ms" }}
                >
                  <MessageCircle className="w-5 h-5" />
                  Hubungi via WhatsApp
                </Link>
              </div>
            </div>

            <div
              className={`transition-all duration-700 delay-300 ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
                }`}
            >
              <div className="bg-white rounded-2xl shadow-xl p-0 overflow-hidden border border-gray-200">
                <div className="p-4 md:p-6 border-b border-gray-200">
                  <h4 className="text-lg md:text-xl font-semibold text-gray-800">
                    Lokasi Sekretariat PTBMMKI
                  </h4>
                </div>
                <div className="h-64 md:h-80 relative">
                  <div className="absolute inset-0 bg-gradient-to-br from-gray-300 to-gray-400 flex items-center justify-center">
                    <div className="text-center p-6">
                      <MapPin className="w-12 h-12 text-gray-600 mx-auto mb-4" />
                      <div className="text-gray-700 font-bold text-lg">Peta Lokasi</div>
                      <div className="text-gray-600 text-sm mt-2">Gedung Sekretariat PTBMMKI</div>
                    </div>
                  </div>
                  <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3972.2407417139557!2d105.2158317118265!3d-5.380221653785251!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e40d009f12fee47%3A0xee154d63d1e7f1cc!2sUniversitas%20Malahayati!5e0!3m2!1sid!2sid!4v1769613557524!5m2!1sid!2sid"
                    className="absolute inset-0 w-full h-full border-0"
                    allowFullScreen
                    loading="lazy"
                    referrerPolicy="no-referrer-when-downgrade"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}