"use client";

import { useState } from "react";
import {
  Mail,
  Copy,
  FileCheck,
  ShieldCheck,
  CheckCircle2,
  Loader2,
  Send,
} from "lucide-react";
import { toast } from "sonner";
import { CONTACT_INFO } from "@/lib/constants/site";
import { PARTNERSHIP_TIERS } from "@/lib/constants/partnership";

interface PartnershipInquiryFormProps {
  selectedTier: string;
  setSelectedTier: (tier: string) => void;
  includeUHNW: boolean;
  setIncludeUHNW: (val: boolean | ((prev: boolean) => boolean)) => void;
}

export default function PartnershipInquiryForm({
  selectedTier,
  setSelectedTier,
  includeUHNW,
  setIncludeUHNW,
}: PartnershipInquiryFormProps) {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(false);

  const [formData, setFormData] = useState({
    entityName: "",
    contactPhone: "",
    contactEmail: "",
    vision: "",
  });

  const copyContactEmail = async () => {
    try {
      await navigator.clipboard.writeText(CONTACT_INFO.email);
      toast.success(`Email copied: ${CONTACT_INFO.email}`);
    } catch {
      toast.info(`Direct email: ${CONTACT_INFO.email}`);
    }
  };

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

    try {
      const res = await fetch("/api/partnership", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          entityName: formData.entityName,
          contactEmail: formData.contactEmail,
          contactPhone: formData.contactPhone,
          partnershipTier: selectedTier,
          includeUHNW,
          vision: formData.vision,
        }),
      });

      const data = await res.json();
      if (!res.ok) {
        throw new Error(data.error || "Failed to submit proposal.");
      }

      setIsSubmitted(true);
      toast.success("Thank you. Your strategic proposal has been received.");
    } catch (err: any) {
      console.error("Partnership submission error:", err);
      toast.error(err.message || "Failed to submit proposal. Please try again.");
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <section id="inquiry" className="py-24 bg-brand-dark text-white relative overflow-hidden border-t border-brand-gold/30">
      <div className="container max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
          <div className="lg:col-span-5">
            <span className="text-xs uppercase tracking-widest text-brand-gold font-bold">
              Confidential Discussion
            </span>
            <h2 className="text-3xl sm:text-4xl font-title font-bold text-white mt-2 mb-4">
              Initiate Partnership Discussion
            </h2>
            <p className="text-sm text-stone-400 leading-relaxed mb-8">
              Whether you are an established media group, a boutique consulting agency, or a luxury hospitality alliance, we welcome visionary proposals to expand <strong className="text-white">Vietnam Wedding Guide</strong>.
            </p>

            <div className="space-y-5 text-sm text-stone-300">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-stone-800 flex items-center justify-center text-brand-gold shrink-0 border border-stone-700">
                  <Mail className="w-4 h-4" />
                </div>
                <div>
                  <p className="text-xs text-stone-400">Direct Editorial Contact</p>
                  <button
                    type="button"
                    onClick={copyContactEmail}
                    className="text-brand-gold hover:underline font-mono text-xs sm:text-sm font-semibold flex items-center gap-1.5 cursor-pointer mt-0.5"
                  >
                    <span>{CONTACT_INFO.email}</span>
                    <Copy className="w-3.5 h-3.5" />
                  </button>
                </div>
              </div>

              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-stone-800 flex items-center justify-center text-brand-gold shrink-0 border border-stone-700">
                  <FileCheck className="w-4 h-4" />
                </div>
                <div>
                  <p className="text-xs text-stone-400">Legal Agreement Framework</p>
                  <p className="font-medium text-xs sm:text-sm mt-0.5">
                    Bilingual English &amp; Vietnamese Platform Licensing Agreement
                  </p>
                </div>
              </div>

              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-stone-800 flex items-center justify-center text-brand-gold shrink-0 border border-stone-700">
                  <ShieldCheck className="w-4 h-4" />
                </div>
                <div>
                  <p className="text-xs text-stone-400">Asset Verification</p>
                  <p className="font-medium text-xs sm:text-sm mt-0.5">
                    Clean ownership record and pre-indexed Google search entity
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div className="lg:col-span-7">
            <div className="bg-stone-900 p-8 sm:p-10 rounded-3xl border border-stone-800 shadow-2xl">
              {isSubmitted ? (
                <div className="text-center py-10 px-4 animate-fade-up">
                  <div className="w-16 h-16 rounded-full bg-brand-gold/15 border border-brand-gold/40 text-brand-gold flex items-center justify-center mx-auto mb-6">
                    <CheckCircle2 className="w-8 h-8" />
                  </div>
                  <h3 className="font-title text-2xl sm:text-3xl font-bold text-white mb-3">
                    Proposal Received
                  </h3>
                  <p className="text-sm text-stone-300 max-w-md mx-auto leading-relaxed mb-6">
                    Thank you for your interest in co-developing <span className="text-brand-gold font-medium">Vietnam Wedding Guide</span>. Nhi Võ and our advisory team will review your proposal details and respond within 24–48 hours.
                  </p>
                  <div className="p-4 rounded-2xl bg-stone-800/80 border border-stone-700 max-w-md mx-auto text-left text-xs space-y-1.5 mb-8">
                    <p className="text-stone-400"><strong>Entity:</strong> {formData.entityName}</p>
                    <p className="text-stone-400"><strong>Tier:</strong> {selectedTier}</p>
                    <p className="text-stone-400"><strong>UHNW Advisory:</strong> {includeUHNW ? "Included" : "None"}</p>
                  </div>
                  <button
                    type="button"
                    onClick={() => {
                      setIsSubmitted(false);
                      setFormData({ entityName: "", contactPhone: "", contactEmail: "", vision: "" });
                    }}
                    className="px-6 py-2.5 rounded-full bg-brand-gold hover:bg-brand-gold-hover text-white text-xs font-semibold uppercase tracking-wider transition-all cursor-pointer shadow-sm hover:shadow-md"
                  >
                    Submit Another Proposal
                  </button>
                </div>
              ) : (
                <>
                  <h3 className="text-2xl font-title font-bold text-white mb-2">Submit Partnership Proposal</h3>
                  <p className="text-xs text-stone-400 mb-6">
                    Complete preliminary details to schedule a confidential strategy session.
                  </p>

                  <form onSubmit={handleSubmit} className="space-y-4">
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                      <div>
                        <label className="block text-xs uppercase tracking-wider text-stone-400 font-semibold mb-1.5">
                          Entity / Agency Name *
                        </label>
                        <input
                          type="text"
                          required
                          value={formData.entityName}
                          onChange={(e) => setFormData({ ...formData, entityName: e.target.value })}
                          placeholder="e.g. Indochine Luxury Media"
                          className="w-full px-4 py-3 rounded-xl bg-stone-800 border border-stone-700 text-white text-sm focus:border-brand-gold focus:outline-none placeholder:text-stone-500"
                        />
                      </div>
                      <div>
                        <label className="block text-xs uppercase tracking-wider text-stone-400 font-semibold mb-1.5">
                          Contact Number / WhatsApp *
                        </label>
                        <input
                          type="tel"
                          required
                          value={formData.contactPhone}
                          onChange={(e) => setFormData({ ...formData, contactPhone: e.target.value })}
                          placeholder="+84 908 xxx xxx"
                          className="w-full px-4 py-3 rounded-xl bg-stone-800 border border-stone-700 text-white text-sm focus:border-brand-gold focus:outline-none placeholder:text-stone-500"
                        />
                      </div>
                    </div>

                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                      <div>
                        <label className="block text-xs uppercase tracking-wider text-stone-400 font-semibold mb-1.5">
                          Corporate Email *
                        </label>
                        <input
                          type="email"
                          required
                          value={formData.contactEmail}
                          onChange={(e) => setFormData({ ...formData, contactEmail: e.target.value })}
                          placeholder="partner@domain.com"
                          className="w-full px-4 py-3 rounded-xl bg-stone-800 border border-stone-700 text-white text-sm focus:border-brand-gold focus:outline-none placeholder:text-stone-500"
                        />
                      </div>
                      <div>
                        <label className="block text-xs uppercase tracking-wider text-stone-400 font-semibold mb-1.5">
                          Preferred Partnership Tier
                        </label>
                        <select
                          value={selectedTier}
                          onChange={(e) => setSelectedTier(e.target.value)}
                          className="w-full px-4 py-3 rounded-xl bg-stone-800 border border-stone-700 text-white text-sm focus:border-brand-gold focus:outline-none"
                        >
                          <option value={PARTNERSHIP_TIERS.standard.selectLabel}>
                            Standard: Autonomous Blog ({PARTNERSHIP_TIERS.standard.monthlyPriceDisplay}/mo)
                          </option>
                          <option value={PARTNERSHIP_TIERS.pro.selectLabel}>
                            Pro: Dual-Domain Brand Alliance ({PARTNERSHIP_TIERS.pro.monthlyPriceDisplay}/mo)
                          </option>
                          <option value="Custom Enterprise Consortium">Custom Enterprise Consortium / Joint Venture</option>
                        </select>
                      </div>
                    </div>

                    {/* UHNW Add-on Checkbox */}
                    <div className="p-3.5 rounded-xl bg-stone-800/80 border border-stone-700 flex items-center justify-between">
                      <div className="flex items-center gap-3">
                        <input
                          type="checkbox"
                          id="includeUHNWCheckbox"
                          checked={includeUHNW}
                          onChange={(e) => setIncludeUHNW(e.target.checked)}
                          className="w-4 h-4 rounded text-brand-gold focus:ring-brand-gold bg-stone-900 border-stone-600 accent-brand-gold cursor-pointer"
                        />
                        <label htmlFor="includeUHNWCheckbox" className="text-xs text-stone-300 font-medium cursor-pointer">
                          Include Plus Add-on: UHNW Content &amp; Hospitality Advisory (from $111/hr)
                        </label>
                      </div>
                      <span className="text-[10px] text-brand-gold font-mono uppercase font-semibold">Optional</span>
                    </div>

                    <div>
                      <label className="block text-xs uppercase tracking-wider text-stone-400 font-semibold mb-1.5">
                        Operational Capability &amp; Vision *
                      </label>
                      <textarea
                        rows={3}
                        required
                        value={formData.vision}
                        onChange={(e) => setFormData({ ...formData, vision: e.target.value })}
                        placeholder="Briefly summarize your editorial background, team capacity, and envisioned trajectory for Vietnam Wedding Guide..."
                        className="w-full px-4 py-3 rounded-xl bg-stone-800 border border-stone-700 text-white text-sm focus:border-brand-gold focus:outline-none placeholder:text-stone-500"
                      />
                    </div>

                    <button
                      type="submit"
                      disabled={isSubmitting}
                      className="w-full py-4 rounded-full bg-brand-gold hover:bg-brand-gold-hover text-white font-medium text-xs sm:text-sm uppercase tracking-wider shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 flex items-center justify-center gap-2 cursor-pointer disabled:opacity-70 disabled:cursor-not-allowed"
                    >
                      {isSubmitting ? (
                        <>
                          <Loader2 className="w-4 h-4 animate-spin" />
                          <span>Processing Proposal...</span>
                        </>
                      ) : (
                        <>
                          <Send className="w-4 h-4" />
                          <span>Submit Partnership Application</span>
                        </>
                      )}
                    </button>
                  </form>
                </>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}