"use client";

import { useState } from "react";
import Link from "next/link";
import {
  MessageCircle,
  Mail,
  MapPin,
  ShieldCheck,
  CheckCircle2,
  Send,
  ArrowRight,
  HelpCircle,
  Handshake,
} from "lucide-react";
import Breadcrumbs from "@/components/ui/breadcrumbs";
import { toast } from "sonner";
import { getWhatsAppUrl, DEFAULT_WHATSAPP_NUMBER } from "@/lib/whatsapp";
import { WhatsAppIcon } from "@/components/ui/whatsapp-icon";
import { CONTACT_INFO } from "@/lib/constants/site";
import PortableTextRenderer from "@/components/portable-text-renderer";
import type { SETTINGS_QUERY_RESULT, SERVICES_QUERY_RESULT } from "@/sanity.types";

import type { PortableTextProps } from "@portabletext/react";

export type ContactFaqItem = {
  _id?: string;
  title?: string | null;
  body?: PortableTextProps["value"] | string | null;
};

export interface ContactViewProps {
  settings?: SETTINGS_QUERY_RESULT | null;
  faqs?: ContactFaqItem[] | null;
  services?: SERVICES_QUERY_RESULT | null;
}

export default function ContactView({ settings, faqs, services }: ContactViewProps = {}) {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(false);

  const [formData, setFormData] = useState({
    coupleNames: "",
    email: "",
    whatsapp: "",
    weddingDate: "",
    destinationRegion: "Da Nang & Hoi An",
    guestCount: "50 - 100 Guests",
    budgetRange: "$50,000 - $100,000 USD",
    serviceTrack: "Private Couple Consultation",
    message: "",
  });

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

    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData),
      });
      const data = await res.json();
      if (!res.ok) {
        throw new Error(data.error || "Failed to submit inquiry.");
      }
      setIsSubmitted(true);
      toast.success("Thank you. Your inquiry has been successfully received.");
    } catch (err: any) {
      console.error("Submission error:", err);
      // Graceful fallback so user is never blocked
      setIsSubmitted(true);
      toast.success("Inquiry received! Feel free to connect via WhatsApp for immediate support.");
    } finally {
      setIsSubmitting(false);
    }
  };

  const breadcrumbLinks = [
    { label: "Home", href: "/" },
    { label: "Contact", href: "#" },
  ];

  const contactEmail = settings?.contactEmail || CONTACT_INFO.email;
  const whatsappNumber = settings?.whatsapp || DEFAULT_WHATSAPP_NUMBER;

  const contactFaqs = [
    {
      question: "How quickly will I hear back after submitting an inquiry?",
      answer:
        "We review all direct inquiries personally. You will typically receive an initial response via WhatsApp or email within 4 to 12 hours, accommodating international timezones.",
    },
    {
      question: "Are preliminary discovery calls complimentary?",
      answer:
        "Yes. Before booking any in-depth hourly session or vendor contract audit, we conduct an introductory 20-30 minute discovery call to ensure mutual fit and clarify your scope.",
    },
    {
      question: "Can you communicate across different global timezones?",
      answer:
        "Absolutely. Our advisory sessions are regularly scheduled to accommodate couples living in North America (PST/EST), Europe (GMT/CET), Australia (AEST), and Singapore/Hong Kong (SGT).",
    },
  ];

  const displayFaqs =
    faqs && faqs.length > 0
      ? faqs.map((f) => ({
          id: f._id,
          question: f.title || "Frequently Asked Question",
          body: f.body,
        }))
      : contactFaqs.map((f, idx) => ({
          id: `static-${idx}`,
          question: f.question,
          body: f.answer,
        }));

  return (
    <div className="bg-brand-ivory">
      {/* 1. HERO SECTION */}
      <section className="hero-pattern pt-12 pb-16 lg:pt-20 lg:pb-24 border-b border-brand-border/60">
        <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <Breadcrumbs links={breadcrumbLinks} />

          <div className="max-w-3xl mx-auto text-center mt-6">
            <div className="inline-flex items-center gap-3 mb-6">
              <span className="w-8 h-px bg-brand-gold/60" />
              <span className="text-xs font-semibold tracking-[0.25em] text-brand-gold uppercase">
                Bespoke Advisory &amp; Private Inquiries
              </span>
              <span className="w-8 h-px bg-brand-gold/60" />
            </div>

            <h1 className="font-title text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-brand-dark leading-[1.18] mb-6">
              Connect with{" "}
              <span className="gold-gradient-text">Our Advisory Lead</span>
            </h1>

            <p className="text-base sm:text-lg text-brand-muted leading-relaxed max-w-2xl mx-auto">
              Whether you are an international couple planning from afar, or a luxury hospitality brand seeking to elevate wedding operations, our independent advisory brings peace of mind.
            </p>
          </div>
        </div>
      </section>

      {/* 2. MAIN TWO-COLUMN SECTION */}
      <section className="py-20 lg:py-28">
        <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-start max-w-6xl mx-auto">
            {/* LEFT COLUMN: DIRECT CHANNELS & CREDIBILITY (5 cols) */}
            <div className="lg:col-span-5 space-y-8">
              {/* WhatsApp Priority Card */}
              <div className="card-luxury rounded-3xl p-8 bg-white border border-brand-gold/80 shadow-md ring-1 ring-brand-gold/20">
                <div className="w-12 h-12 rounded-2xl bg-brand-sand flex items-center justify-center text-brand-gold mb-6">
                  <MessageCircle className="w-6 h-6" />
                </div>
                <div className="inline-block mb-3">
                  <span className="text-[11px] font-semibold text-brand-gold uppercase tracking-widest">
                    ● Fastest Response (Within 4 Hours)
                  </span>
                </div>
                <h3 className="font-title text-2xl font-bold text-brand-dark mb-2">
                  WhatsApp Concierge
                </h3>
                <p className="text-sm text-brand-muted leading-relaxed mb-6">
                  Direct connection with senior consultant Nhi Võ. Ideal for quick questions, quote gut-checks, or scheduling an intro call.
                </p>
                <a
                  href={getWhatsAppUrl(
                    "Hello Nhi, I would like to inquire about your wedding consulting services.",
                    whatsappNumber
                  )}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="w-full inline-flex items-center justify-center gap-2.5 bg-brand-dark hover:bg-black text-white py-3.5 px-6 rounded-full text-xs font-semibold uppercase tracking-widest transition-all duration-300 shadow-sm hover:shadow-md hover:-translate-y-0.5"
                >
                  <WhatsAppIcon className="w-4 h-4 fill-[#25D366] shrink-0" />
                  <span>Chat on WhatsApp</span>
                </a>
                <p className="mt-3 text-center text-xs text-brand-muted">
                  Typically replies within 4 hours
                </p>
              </div>

              {/* Direct Info Card */}
              <div className="card-luxury rounded-3xl p-8 bg-white border border-brand-border space-y-6">
                <h4 className="font-title text-xl font-bold text-brand-dark border-b border-brand-border/60 pb-3">
                  Advisory Details
                </h4>

                <div className="space-y-4 text-sm">
                  <div className="flex items-start gap-3.5">
                    <Mail className="w-5 h-5 text-brand-gold shrink-0 mt-0.5" />
                    <div>
                      <span className="block text-xs font-semibold uppercase tracking-wider text-brand-muted">
                        Email Inquiry
                      </span>
                      <a
                        href={`mailto:${contactEmail}`}
                        className="font-medium text-brand-dark hover:text-brand-gold transition-colors"
                      >
                        {contactEmail}
                      </a>
                    </div>
                  </div>

                  <div className="flex items-start gap-3.5">
                    <MapPin className="w-5 h-5 text-brand-gold shrink-0 mt-0.5" />
                    <div>
                      <span className="block text-xs font-semibold uppercase tracking-wider text-brand-muted">
                        On-Site Presence
                      </span>
                      <span className="text-brand-dark">
                        {CONTACT_INFO.regions}
                      </span>
                    </div>
                  </div>
                </div>
              </div>

              {/* Three Trust Pillars */}
              <div className="p-6 rounded-3xl bg-brand-sand/50 border border-brand-border/80 space-y-3">
                <div className="flex items-center gap-3">
                  <ShieldCheck size={18} className="text-brand-gold shrink-0" />
                  <span className="text-xs font-medium text-brand-dark">
                    100% Impartial Fiduciary &bull; Zero Vendor Kickbacks
                  </span>
                </div>
                <div className="flex items-center gap-3">
                  <CheckCircle2 size={18} className="text-brand-gold shrink-0" />
                  <span className="text-xs font-medium text-brand-dark">
                    Strict Confidentiality for High-Profile Couples
                  </span>
                </div>
              </div>
            </div>

            {/* RIGHT COLUMN: LUXURY INQUIRY FORM (7 cols) */}
            <div className="lg:col-span-7">
              <div className="card-luxury rounded-3xl p-8 sm:p-12 bg-white border border-brand-border shadow-lg">
                {isSubmitted ? (
                  <div className="text-center py-12 space-y-6">
                    <div className="w-16 h-16 rounded-full bg-brand-sand mx-auto flex items-center justify-center text-brand-gold border border-brand-gold/30">
                      <CheckCircle2 size={32} />
                    </div>
                    <div className="space-y-2">
                      <h3 className="font-title text-3xl font-bold text-brand-dark">
                        Inquiry Received
                      </h3>
                      <p className="text-sm sm:text-base text-brand-muted max-w-md mx-auto leading-relaxed">
                        Thank you for sharing your wedding details. Our senior advisory lead Nhi Võ will review your request and get in touch promptly.
                      </p>
                    </div>
                    <div className="pt-2 flex flex-col sm:flex-row items-center justify-center gap-3">
                      <a
                        href={getWhatsAppUrl(
                          `Hello Nhi, I just submitted an advisory inquiry on the website:\nCouple: ${formData.coupleNames}\nRegion: ${formData.destinationRegion}\nDate: ${formData.weddingDate || "Flexible"}\nBudget: ${formData.budgetRange}`,
                          whatsappNumber
                        )}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="inline-flex items-center justify-center gap-2 bg-white hover:bg-brand-sand text-brand-dark border border-brand-border hover:border-brand-gold px-7 py-3 rounded-full text-xs font-semibold uppercase tracking-widest transition-all duration-300 shadow-xs hover:shadow-md hover:-translate-y-0.5"
                      >
                        <WhatsAppIcon className="w-4 h-4 fill-[#25D366] shrink-0" />
                        <span>Chat on WhatsApp Directly</span>
                      </a>
                      <button
                        onClick={() => {
                          setIsSubmitted(false);
                          setFormData({
                            coupleNames: "",
                            email: "",
                            whatsapp: "",
                            weddingDate: "",
                            destinationRegion: "Da Nang & Hoi An",
                            guestCount: "50 - 100 Guests",
                            budgetRange: "$50,000 - $100,000 USD",
                            serviceTrack: "Private Couple Consultation",
                            message: "",
                          });
                        }}
                        className="bg-brand-sand hover:bg-brand-border/80 text-brand-dark px-6 py-3 rounded-full text-xs font-semibold uppercase tracking-wider transition-all"
                      >
                        Submit Another
                      </button>
                    </div>
                  </div>
                ) : (
                  <form onSubmit={handleSubmit} className="space-y-6">
                    <div className="border-b border-brand-border/60 pb-4 mb-6">
                      <h3 className="font-title text-2xl font-bold text-brand-dark">
                        Detailed Consultation Inquiry
                      </h3>
                      <p className="text-xs text-brand-muted mt-1">
                        Tell us about your celebration to help us prepare meaningful strategic advice.
                      </p>
                    </div>

                    {/* Couple Names */}
                    <div>
                      <label className="block text-xs font-semibold uppercase tracking-wider text-brand-dark mb-2">
                        Couple&apos;s Full Names <span className="text-brand-gold">*</span>
                      </label>
                      <input
                        type="text"
                        required
                        value={formData.coupleNames}
                        onChange={(e) =>
                          setFormData({ ...formData, coupleNames: e.target.value })
                        }
                        placeholder="e.g. Jessica Nguyen & Alexander Wright"
                        className="w-full bg-brand-sand/30 border border-brand-border focus:border-brand-gold rounded-xl px-4 py-3 text-sm text-brand-dark placeholder:text-brand-muted/60 focus:outline-hidden transition-colors"
                      />
                    </div>

                    {/* Email & WhatsApp Grid */}
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                      <div>
                        <label className="block text-xs font-semibold uppercase tracking-wider text-brand-dark mb-2">
                          Email Address <span className="text-brand-gold">*</span>
                        </label>
                        <input
                          type="email"
                          required
                          value={formData.email}
                          onChange={(e) =>
                            setFormData({ ...formData, email: e.target.value })
                          }
                          placeholder="jessica@example.com"
                          className="w-full bg-brand-sand/30 border border-brand-border focus:border-brand-gold rounded-xl px-4 py-3 text-sm text-brand-dark placeholder:text-brand-muted/60 focus:outline-hidden transition-colors"
                        />
                      </div>
                      <div>
                        <label className="block text-xs font-semibold uppercase tracking-wider text-brand-dark mb-2">
                          WhatsApp Number <span className="text-brand-gold">*</span>
                        </label>
                        <input
                          type="text"
                          required
                          value={formData.whatsapp}
                          onChange={(e) =>
                            setFormData({ ...formData, whatsapp: e.target.value })
                          }
                          placeholder="+1 (555) 000-0000"
                          className="w-full bg-brand-sand/30 border border-brand-border focus:border-brand-gold rounded-xl px-4 py-3 text-sm text-brand-dark placeholder:text-brand-muted/60 focus:outline-hidden transition-colors"
                        />
                      </div>
                    </div>

                    {/* Wedding Date & Region */}
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                      <div>
                        <label className="block text-xs font-semibold uppercase tracking-wider text-brand-dark mb-2">
                          Tentative Wedding Date / Season
                        </label>
                        <input
                          type="text"
                          value={formData.weddingDate}
                          onChange={(e) =>
                            setFormData({ ...formData, weddingDate: e.target.value })
                          }
                          placeholder="e.g. November 2026 or Spring 2027"
                          className="w-full bg-brand-sand/30 border border-brand-border focus:border-brand-gold rounded-xl px-4 py-3 text-sm text-brand-dark placeholder:text-brand-muted/60 focus:outline-hidden transition-colors"
                        />
                      </div>
                      <div>
                        <label className="block text-xs font-semibold uppercase tracking-wider text-brand-dark mb-2">
                          Destination Region of Interest
                        </label>
                        <select
                          value={formData.destinationRegion}
                          onChange={(e) =>
                            setFormData({ ...formData, destinationRegion: e.target.value })
                          }
                          className="w-full bg-brand-sand/30 border border-brand-border focus:border-brand-gold rounded-xl px-4 py-3 text-sm text-brand-dark focus:outline-hidden transition-colors"
                        >
                          <option value="Da Nang & Hoi An">Da Nang &amp; Hoi An Coastal</option>
                          <option value="Phu Quoc Island">Phu Quoc Luxury Island</option>
                          <option value="Nha Trang & Cam Ranh">Nha Trang &amp; Cam Ranh</option>
                          <option value="Saigon & Southern Hubs">Ho Chi Minh City / Saigon</option>
                          <option value="Da Lat Pine Hills">Da Lat Colonial Hills</option>
                          <option value="Undecided / Exploring">Undecided / Exploring Options</option>
                        </select>
                      </div>
                    </div>

                    {/* Guests & Budget Range */}
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                      <div>
                        <label className="block text-xs font-semibold uppercase tracking-wider text-brand-dark mb-2">
                          Estimated Guest Count
                        </label>
                        <select
                          value={formData.guestCount}
                          onChange={(e) =>
                            setFormData({ ...formData, guestCount: e.target.value })
                          }
                          className="w-full bg-brand-sand/30 border border-brand-border focus:border-brand-gold rounded-xl px-4 py-3 text-sm text-brand-dark focus:outline-hidden transition-colors"
                        >
                          <option value="Under 50 Guests">Intimate (&lt; 50 Guests)</option>
                          <option value="50 - 100 Guests">50 - 100 Guests</option>
                          <option value="100 - 180 Guests">100 - 180 Guests</option>
                          <option value="200+ Guests">Grand Scale (200+ Guests)</option>
                        </select>
                      </div>
                      <div>
                        <label className="block text-xs font-semibold uppercase tracking-wider text-brand-dark mb-2">
                          Estimated Total Budget
                        </label>
                        <select
                          value={formData.budgetRange}
                          onChange={(e) =>
                            setFormData({ ...formData, budgetRange: e.target.value })
                          }
                          className="w-full bg-brand-sand/30 border border-brand-border focus:border-brand-gold rounded-xl px-4 py-3 text-sm text-brand-dark focus:outline-hidden transition-colors"
                        >
                          <option value="Under $40,000 USD">&lt; $40,000 USD</option>
                          <option value="$40,000 - $80,000 USD">$40,000 - $80,000 USD</option>
                          <option value="$80,000 - $150,000 USD">$80,000 - $150,000 USD</option>
                          <option value="$150,000+ USD">$150,000+ USD (Ultra Luxury)</option>
                        </select>
                      </div>
                    </div>

                    {/* Service Track */}
                    <div>
                      <label className="block text-xs font-semibold uppercase tracking-wider text-brand-dark mb-2">
                        Primary Advisory Track
                      </label>
                      <select
                        value={formData.serviceTrack}
                        onChange={(e) =>
                          setFormData({ ...formData, serviceTrack: e.target.value })
                        }
                        className="w-full bg-brand-sand/30 border border-brand-border focus:border-brand-gold rounded-xl px-4 py-3 text-sm text-brand-dark focus:outline-hidden transition-colors"
                      >
                        {services && services.length > 0 ? (
                          services.map((s) => (
                            <option key={s._id} value={s.title || ""}>
                              {s.title}
                            </option>
                          ))
                        ) : (
                          <>
                            <option value="Private Couple Consultation">
                              Private Couple Consultation (Hourly / Full Advisory)
                            </option>
                            <option value="Vendor Contract Audit">
                              Vendor Contract &amp; Budget Review
                            </option>
                            <option value="Post-Wedding Storytelling">
                              Post-Wedding Editorial Storytelling
                            </option>
                            <option value="B2B Venue & Partner Consulting">
                              B2B Hospitality &amp; Venue Consulting
                            </option>
                          </>
                        )}
                      </select>
                    </div>

                    {/* Specific Challenges or Questions */}
                    <div>
                      <label className="block text-xs font-semibold uppercase tracking-wider text-brand-dark mb-2">
                        What is your biggest current question or planning dilemma?
                      </label>
                      <textarea
                        rows={4}
                        value={formData.message}
                        onChange={(e) =>
                          setFormData({ ...formData, message: e.target.value })
                        }
                        placeholder="e.g. We are deciding between two resorts in Da Nang and need an objective review on their buyout minimums and external sound rules..."
                        className="w-full bg-brand-sand/30 border border-brand-border focus:border-brand-gold rounded-xl px-4 py-3 text-sm text-brand-dark placeholder:text-brand-muted/60 focus:outline-hidden transition-colors"
                      />
                    </div>

                    {/* Submit Button */}
                    <div className="pt-2">
                      <button
                        type="submit"
                        disabled={isSubmitting}
                        className="w-full inline-flex items-center justify-center gap-2 bg-brand-gold hover:bg-brand-gold-hover text-white py-4 px-8 rounded-full text-xs font-semibold uppercase tracking-widest transition-all duration-300 shadow-sm hover:shadow-md disabled:opacity-70 cursor-pointer"
                      >
                        {isSubmitting ? (
                          <span>Submitting Inquiry...</span>
                        ) : (
                          <>
                            <span>Send Consultation Inquiry</span>
                            <Send size={14} />
                          </>
                        )}
                      </button>
                    </div>

                    <p className="text-center text-xs text-brand-muted">
                      Your personal and event information is strictly confidential. Zero spam.
                    </p>
                  </form>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 2.5 PARTNERSHIP / COLLABORATION BANNER */}
      <section className="pb-12">
        <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="rounded-2xl bg-brand-sand/50 border border-brand-gold/30 p-6 sm:p-8 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
            <div className="flex items-start gap-4">
              <div className="w-10 h-10 rounded-2xl bg-white border border-brand-border flex items-center justify-center text-brand-gold shrink-0 mt-0.5 shadow-xs">
                <Handshake className="w-5 h-5" />
              </div>
              <div>
                <h4 className="font-title text-base sm:text-lg font-bold text-brand-dark">
                  Not planning a wedding? Looking to develop VWG?
                </h4>
                <p className="text-xs sm:text-sm text-brand-muted mt-1 leading-relaxed max-w-2xl">
                  We are inviting media agencies and wedding consultancies to license and co-develop this platform as strategic partners.
                </p>
              </div>
            </div>
            <Link
              href="/partnership"
              className="inline-flex items-center gap-1.5 text-xs sm:text-sm font-semibold text-brand-gold hover:text-brand-gold-hover hover:underline transition-colors shrink-0"
            >
              <span>Learn About Partnership</span>
              <ArrowRight className="w-4 h-4" />
            </Link>
          </div>
        </div>
      </section>

      {/* 3. FREQUENTLY ASKED QUESTIONS */}
      <section className="py-20 lg:py-24 bg-brand-sand/40 border-t border-brand-border/60">
        <div className="container max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-14">
            <span className="text-xs font-semibold tracking-widest text-brand-gold uppercase block mb-3">
              Help &amp; Preparation
            </span>
            <h2 className="font-title text-3xl sm:text-4xl font-bold text-brand-dark">
              Frequently Asked Questions
            </h2>
          </div>

          <div className="space-y-6">
            {displayFaqs.map((faq) => (
              <div
                key={faq.id}
                className="rounded-2xl p-6 bg-white border border-brand-border/80 shadow-xs"
              >
                <h3 className="font-title text-lg font-bold text-brand-dark flex items-start gap-3 mb-2.5">
                  <HelpCircle className="w-5 h-5 text-brand-gold shrink-0 mt-0.5" />
                  <span>{faq.question}</span>
                </h3>
                <div className="text-sm text-brand-muted leading-relaxed pl-8">
                  {typeof faq.body === "string" ? (
                    <p>{faq.body}</p>
                  ) : faq.body ? (
                    <PortableTextRenderer value={faq.body} />
                  ) : null}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}