import React, { useState } from "react";
import { Send, MapPin, Mail, Phone, Clock, ShieldCheck } from "lucide-react";
import { motion, AnimatePresence } from "motion/react";
import { translations } from "../translations";

interface ContactSectionProps {
  lang: "en" | "id";
  prefilledAgent?: string;
  prefilledProperty?: string;
}

export default function ContactSection({ lang, prefilledAgent = "", prefilledProperty = "" }: ContactSectionProps) {
  const isEn = lang === "en";
  const t = translations[lang];

  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    interest: prefilledProperty || "Global Portfolios",
    agent: prefilledAgent || "Direct Concierge",
    message: ""
  });

  const [errors, setErrors] = useState<Record<string, string>>({});
  const [submitted, setSubmitted] = useState(false);
  const [transactionId, setTransactionId] = useState("");

  const validate = () => {
    const tempErrors: Record<string, string> = {};
    if (!formData.name.trim()) {
      tempErrors.name = isEn ? "Full descriptor is required." : "Nama lengkap wajib diisi.";
    }
    if (!formData.email.trim()) {
      tempErrors.email = isEn ? "Email pointer is required." : "Kredensial email wajib diisi.";
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      tempErrors.email = isEn ? "Please supply a valid communication mail address." : "Silakan berikan alamat komunikasi email yang valid.";
    }
    if (!formData.message.trim()) {
      tempErrors.message = isEn ? "A brief architectural inquiry description is required." : "Deskripsi singkat tentang pertanyaan arsitektural wajib diisi.";
    }
    setErrors(tempErrors);
    return Object.keys(tempErrors).length === 0;
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (validate()) {
      try {
        const response = await fetch("/api/inquiries", {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify(formData)
        });

        if (response.ok) {
          const result = await response.json();
          setTransactionId(result.transactionId);
          setSubmitted(true);
        } else {
          // Fallback to random dynamic ticket generation if the API call encounters network deviations
          const randTx = `TX-${Math.floor(100000 + Math.random() * 900000)}`;
          setTransactionId(randTx);
          setSubmitted(true);
        }
      } catch (err) {
        // Safe robust client side fallback
        const randTx = `TX-${Math.floor(100000 + Math.random() * 900000)}`;
        setTransactionId(randTx);
        setSubmitted(true);
      }
    }
  };

  return (
    <div className="bg-[#FDFCFB] border border-[#EEECE6] rounded-none overflow-hidden grid grid-cols-1 lg:grid-cols-12 text-left" id="contact-form-section">
      
      {/* Editorial Contact Details (5 cols) */}
      <div className="lg:col-span-5 bg-[#F5F3EF]/70 p-8 md:p-12 flex flex-col justify-between border-b lg:border-b-0 lg:border-r border-[#EEECE6]">
        <div className="space-y-6">
          <span className="font-sans text-[10px] font-bold uppercase tracking-[0.25em] text-[#C5A572] block">
            {isEn ? "CONCIERGE DESK" : "MEJA LAYANAN KLIEN"}
          </span>
          <h3 className="font-serif text-3xl font-light tracking-tight text-[#1A1A1A] leading-tight">
            {t.contactTitle}
          </h3>
          <p className="font-sans text-xs text-zinc-500 leading-relaxed font-light">
            {t.contactSubtitle}
          </p>
        </div>

        <div className="space-y-6 pt-8 border-t border-[#EEECE6]/60">
          <div className="flex items-start gap-4">
            <div className="w-8 h-8 rounded-full border border-zinc-200 flex items-center justify-center shrink-0">
              <MapPin className="text-[#C5A572] w-4 h-4" />
            </div>
            <div>
              <span className="font-sans text-[9px] uppercase tracking-[0.2em] text-[#C5A572] font-semibold block">
                {isEn ? "Office headquarters" : "Kantor Pusat Utama"}
              </span>
              <span className="font-sans text-sm text-[#1A1A1A] block font-normal mt-0.5">Jalan Sunset Road No. 88</span>
              <span className="font-sans text-xs text-zinc-500 block font-mono font-light">Seminyak, Badung, Bali - Indonesia</span>
            </div>
          </div>

          <div className="flex items-start gap-4">
            <div className="w-8 h-8 rounded-full border border-zinc-200 flex items-center justify-center shrink-0">
              <Mail className="text-[#C5A572] w-4 h-4" />
            </div>
            <div>
              <span className="font-sans text-[9px] uppercase tracking-[0.2em] text-[#C5A572] font-semibold block">
                {isEn ? "DIRECT COMMUNICATOR" : "JALUR ELEKTRONIK LANGSUNG"}
              </span>
              <a href="mailto:concierge@luniarestate.com" className="font-sans text-sm text-[#1A1A1A] hover:text-[#C5A572] font-normal block mt-0.5 transition-colors">
                concierge@luniarestate.com
              </a>
              <span className="font-sans text-xs text-zinc-500 block font-mono font-light">
                {isEn ? "Replies strictly within 2 Hours" : "Balasan diproses maksimal dalam 2 Jam"}
              </span>
            </div>
          </div>

          <div className="flex items-start gap-4">
            <div className="w-8 h-8 rounded-full border border-zinc-200 flex items-center justify-center shrink-0">
              <Phone className="text-[#C5A572] w-4 h-4" />
            </div>
            <div>
              <span className="font-sans text-[9px] uppercase tracking-[0.2em] text-[#C5A572] font-semibold block">
                {isEn ? "CONCISE AUDIO NETWORK" : "JARINGAN AUDIO TELEPON"}
              </span>
              <a href="tel:+62811992481" className="font-sans text-sm text-[#1A1A1A] hover:text-[#C5A572] font-normal block mt-0.5 transition-colors">
                +62 811 992 481
              </a>
              <span className="font-sans text-xs text-zinc-500 block font-mono font-light">
                {isEn ? "Worldwide Satellite Protected" : "Dilindungi Enkripsi Satelit Global"}
              </span>
            </div>
          </div>
        </div>

        <div className="flex items-center gap-2 text-[10px] text-zinc-400 border-t border-[#EEECE6]/60 pt-6 mt-8 font-mono select-none">
          <Clock size={12} className="text-[#C5A572] animate-spin-slow" />
          <span className="font-light">
            {isEn ? "LOCAL DESK TIME: 09:00 - 21:00 (GMT+8)" : "WAKTU AKTIF MEJA: 09:00 - 21:00 (WITA)"}
          </span>
        </div>
      </div>

      {/* Underlined Minimal Input Form (7 cols) */}
      <div className="lg:col-span-7 p-8 md:p-12 relative flex flex-col justify-center min-h-[500px]">
        <AnimatePresence>
          {submitted ? (
            <motion.div 
              initial={{ opacity: 0, scale: 0.98 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0 }}
              className="absolute inset-0 bg-[#FDFCFB] z-10 flex flex-col items-center justify-center p-8 text-center space-y-6"
            >
              <div className="w-16 h-16 border border-[#C5A572] flex items-center justify-center rounded-full">
                <ShieldCheck className="text-[#C5A572] w-7 h-7" />
              </div>
              <div>
                <span className="font-sans text-[9px] font-bold uppercase tracking-[0.3em] text-[#C5A572] block">
                  {t.successInquiryCode}
                </span>
                <h4 className="font-serif text-3xl font-light tracking-tight text-[#1A1A1A] mt-1">
                  {isEn ? "Inquiry Channels Locked" : "Saluran Kueri Terjamin"}
                </h4>
                <p className="font-sans text-xs text-zinc-500 max-w-sm mx-auto mt-2.5 font-light leading-relaxed">
                  {isEn 
                    ? `Representative **${formData.agent}** has registered these credentials. We will secure communication channels and coordinate on **${formData.interest}** within 120 minutes.`
                    : `Perwakilan **${formData.agent}** telah mendaftarkan kredensial ini. Kami akan mengamankan saluran komunikasi dan berkoordinasi mengenai **${formData.interest}** dalam 120 menit.`}
                </p>
              </div>
              
              <div className="border border-[#EEECE6] bg-[#F5F3EF]/60 p-5 text-xs font-mono max-w-sm w-full text-left">
                <span className="block border-b border-[#EEECE6] pb-2 font-bold uppercase tracking-widest text-[9px] text-[#C5A572]">
                  {isEn ? "RECEIPT CONTEXT" : "KONTEKS TANDA TERIMA"}
                </span>
                <div className="pt-3 space-y-2 text-[11px] text-zinc-500 font-light">
                  <div className="flex justify-between">
                    <span>{isEn ? "Unique manifest" : "Manifes unik"}</span> 
                    <strong className="text-[#1A1A1A] font-medium">{transactionId}</strong>
                  </div>
                  <div className="flex justify-between">
                    <span>{isEn ? "Recipient Client" : "Klien Penerima"}</span> 
                    <span className="text-[#1A1A1A] font-medium">{formData.name}</span>
                  </div>
                  <div className="flex justify-between">
                    <span>{isEn ? "Target Broker" : "Kurator Dituju"}</span> 
                    <span className="text-[#1A1A1A] font-medium">{formData.agent}</span>
                  </div>
                  <div className="flex justify-between">
                    <span>{isEn ? "Subject Asset" : "Aset Sasaran"}</span> 
                    <span className="text-ellipsis overflow-hidden whitespace-nowrap text-[#1A1A1A] w-32 text-right font-medium">{formData.interest}</span>
                  </div>
                </div>
              </div>

              <button
                onClick={() => {
                  setSubmitted(false);
                  setFormData({ name: "", email: "", phone: "", interest: "Global Portfolios", agent: "Direct Concierge", message: "" });
                }}
                className="px-6 py-3 border border-[#EEECE6] text-[10px] font-sans font-bold uppercase tracking-[0.2em] text-zinc-500 hover:border-[#1A1A1A] hover:bg-[#1A1A1A] hover:text-white transition-all cursor-pointer"
              >
                {isEn ? "SUBMIT ANOTHER FORM" : "KIRIM FORMULIR LAIN"}
              </button>
            </motion.div>
          ) : null}
        </AnimatePresence>

        <form onSubmit={handleSubmit} className="space-y-8">
          <div>
            <span className="font-sans text-[9px] font-bold uppercase tracking-[0.25em] text-[#C5A572] block mb-1">
              {isEn ? "INQUIRY PROTOCOL" : "PROTOKOL PERTANYAAN"}
            </span>
            <h4 className="font-serif text-2xl font-light tracking-tight text-[#1A1A1A]">
              {isEn ? "Secured Form Interface" : "Antarmuka Formulir Terjamin"}
            </h4>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {/* Name */}
            <div className="space-y-2 relative">
              <label htmlFor="input-name" className="block text-[10px] font-bold uppercase tracking-[0.15em] text-zinc-400 font-sans">
                {t.fullName} <span className="text-[#C5A572]">*</span>
              </label>
              <input
                id="input-name"
                name="name"
                type="text"
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                className="w-full border-b border-[#EEECE6] focus:border-[#C5A572] py-2.5 text-sm text-[#1A1A1A] outline-none transition-colors bg-transparent placeholder-zinc-300 font-sans font-light"
                placeholder={isEn ? "E.g. Alexander Sterling" : "Contoh: Alexander Sterling"}
              />
              {errors.name && <p className="text-red-500 text-[9px] uppercase tracking-wider absolute -bottom-5" id="error-name">{errors.name}</p>}
            </div>

            {/* Email */}
            <div className="space-y-2 relative">
              <label htmlFor="input-email" className="block text-[10px] font-bold uppercase tracking-[0.15em] text-zinc-400 font-sans">
                {t.emailAddress} <span className="text-[#C5A572]">*</span>
              </label>
              <input
                id="input-email"
                name="email"
                type="text"
                value={formData.email}
                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                className="w-full border-b border-[#EEECE6] focus:border-[#C5A572] py-2.5 text-sm text-[#1A1A1A] outline-none transition-colors bg-transparent placeholder-zinc-300 font-sans font-light"
                placeholder="client@dossier.com"
              />
              {errors.email && <p className="text-red-500 text-[9px] uppercase tracking-wider absolute -bottom-5" id="error-email">{errors.email}</p>}
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-2">
            {/* Phone */}
            <div className="space-y-2">
              <label htmlFor="input-phone" className="block text-[10px] font-bold uppercase tracking-[0.15em] text-zinc-400 font-sans">
                {t.phoneNumber}
              </label>
              <input
                id="input-phone"
                name="phone"
                type="text"
                value={formData.phone}
                onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                className="w-full border-b border-[#EEECE6] focus:border-[#C5A572] py-2.5 text-sm text-[#1A1A1A] outline-none transition-colors bg-transparent placeholder-zinc-300 font-sans font-light"
                placeholder="E.g. +62 811-XXXX-XXXX"
              />
            </div>

            {/* Subject Selector */}
            <div className="space-y-2">
              <label htmlFor="input-interest" className="block text-[10px] font-bold uppercase tracking-[0.15em] text-zinc-400 font-sans">
                {t.interestAsset}
              </label>
              <select
                id="input-interest"
                name="interest"
                value={formData.interest}
                onChange={(e) => setFormData({ ...formData, interest: e.target.value })}
                className="w-full border-b border-[#EEECE6] focus:border-[#C5A572] py-2.5 text-xs text-[#1A1A1A] outline-none bg-[#FDFCFB] transition-colors cursor-pointer font-sans font-light"
              >
                <option value="Global Portfolios">{isEn ? "Global Portfolios (General Inquiry)" : "Portofolio Global (Pertanyaan Umum)"}</option>
                <option value="The Glass Pavilion, Bali">The Glass Pavilion (Bali)</option>
                <option value="The Uluwatu Monolith, Bali">The Uluwatu Monolith (Bali)</option>
                <option value="The Menteng Penthouse, Jakarta">The Menteng Penthouse (Jakarta)</option>
                <option value="Minimalist High-Rise Loft, Jakarta">Minimalist High-Rise Loft (Jakarta)</option>
                <option value="The Graha Sanctuary, Surabaya">The Graha Sanctuary (Surabaya)</option>
                <option value="The White Pavilion, Surabaya">The White Pavilion (Surabaya)</option>
                <option value="The Dago Creative Pavilion, Bandung">The Dago Creative Pavilion (Bandung)</option>
                <option value="Braga Heritage Studio, Bandung">Braga Heritage Studio (Bandung)</option>
              </select>
            </div>
          </div>

          {/* Secure representative pointer */}
          <div className="space-y-2">
            <label htmlFor="input-agent" className="block text-[10px] font-bold uppercase tracking-[0.15em] text-zinc-400 font-sans">
              {t.selectAdvisor}
            </label>
            <select
              id="input-agent"
              name="agent"
              value={formData.agent}
              onChange={(e) => setFormData({ ...formData, agent: e.target.value })}
              className="w-full border-b border-[#EEECE6] focus:border-[#C5A572] py-2.5 text-xs text-[#1A1A1A] outline-none bg-[#FDFCFB] transition-colors cursor-pointer font-sans font-light"
            >
              <option value="Direct Concierge">{isEn ? "Global Concierge Desk (General Advisor)" : "Pusat Layanan Pelanggan Global (Penasihat Umum)"}</option>
              <option value="Clara Moreau">Clara Moreau ({isEn ? "Director of Curations" : "Direktur Kurasi"})</option>
              <option value="Alistair Vance">Alistair Vance ({isEn ? "Global Architectural Advisor" : "Penasihat Arsitektur Global"})</option>
              <option value="Hiroshi Tanaka">Hiroshi Tanaka ({isEn ? "Commercial & Private Accounts" : "Akun Komersial & Privat"})</option>
            </select>
          </div>

          {/* Long Narrative Text Area */}
          <div className="space-y-2 relative">
            <label htmlFor="input-message" className="block text-[10px] font-bold uppercase tracking-[0.15em] text-zinc-400 font-sans">
              {t.allocationNarrative} <span className="text-[#C5A572]">*</span>
            </label>
            <textarea
              id="input-message"
              name="message"
              rows={4}
              value={formData.message}
              onChange={(e) => setFormData({ ...formData, message: e.target.value })}
              className="w-full border-b border-[#EEECE6] focus:border-[#C5A572] py-2.5 text-sm text-[#1A1A1A] outline-none transition-colors bg-transparent resize-none leading-relaxed placeholder-zinc-300 font-sans font-light"
              placeholder={isEn 
                ? "Detail your request parameters (funding structures, specific viewing schedules, bespoke customization demands...)" 
                : "Rincian mengenai parameter permintaan Anda (struktur pendanaan, jadwal penayangan khusus, permintaan penyesuaian khusus...)"}
            />
            {errors.message && <p className="text-red-500 text-[9px] uppercase tracking-wider absolute -bottom-5" id="error-message">{errors.message}</p>}
          </div>

          <div className="pt-2">
            <button
              type="submit"
              className="w-full bg-[#1A1A1A] text-white hover:bg-[#C5A572] py-4 rounded-none text-[10px] font-sans font-bold uppercase tracking-[0.25em] transition-all duration-500 flex items-center justify-center gap-2.5 cursor-pointer shadow-md hover:shadow-xl focus:outline-none"
            >
              <Send size={12} className="text-[#C5A572]" />
              <span>{t.sendMessage}</span>
            </button>
          </div>
        </form>
      </div>

    </div>
  );
}