"use client";

import { useState } from "react";
import { Mail, Phone, MapPin, Send } from "lucide-react";
import { toast } from "sonner";
import { inquiryApi } from "@/lib/api/client";
import { Breadcrumb } from "@/components/ui/breadcrumb";
import { useAuthStore } from "@/lib/store/auth-store";

export default function ContactPage() {
  const language = useAuthStore((s) => s.language);
  const hi = language === "hi";

  const [form, setForm] = useState({
    name: "",
    email: "",
    subject: "",
    message: "",
    website: "", // honeypot — hidden field, humans never fill it
  });
  const [submitting, setSubmitting] = useState(false);

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    setForm((prev) => ({ ...prev, [e.target.name]: e.target.value }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (form.message.trim().length < 10) {
      toast.error(
        hi ? "संदेश कम से कम 10 अक्षरों का हो" : "Message must be at least 10 characters"
      );
      return;
    }
    setSubmitting(true);
    try {
      await inquiryApi.create({
        type: "CONTACT",
        name: form.name.trim(),
        email: form.email.trim(),
        subject: form.subject.trim() || undefined,
        message: form.message.trim(),
        website: form.website,
      });
      toast.success(
        hi
          ? "आपका संदेश भेज दिया गया है। धन्यवाद!"
          : "Your message has been sent. Thank you!"
      );
      setForm({ name: "", email: "", subject: "", message: "", website: "" });
    } catch (err: unknown) {
      const message =
        (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
        (hi ? "भेजने में त्रुटि हुई। पुनः प्रयास करें।" : "Failed to send. Please try again.");
      toast.error(message);
    } finally {
      setSubmitting(false);
    }
  };

  const inputClass =
    "w-full rounded-md border border-gray-300 px-4 py-2.5 text-sm text-gray-900 placeholder-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 transition-colors";

  return (
    <div className="min-h-[60vh] bg-gray-50">
      {/* Header */}
      <section className="bg-indigo-600 py-12 text-white">
        <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
          <Breadcrumb
            items={[
              { label: hi ? "होम" : "Home", href: "/" },
              { label: hi ? "संपर्क" : "Contact" },
            ]}
          />
          <div className="mt-6 text-center">
          <Mail className="mx-auto h-10 w-10 mb-3" />
          <h1 className="text-3xl font-bold">
            {hi ? "संपर्क करें" : "Contact Us"}
          </h1>
          <p className="mt-2 text-indigo-100">
            {hi
              ? "हमसे जुड़ें — हम आपकी सहायता के लिए तत्पर हैं"
              : "Get in touch — we are here to help"}
          </p>
        </div>
        </div>

      </section>

      <div className="mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8">
        <div className="grid gap-8 lg:grid-cols-5">
          {/* Contact Info */}
          <div className="lg:col-span-2 space-y-6">
            <h2 className="text-lg font-semibold text-gray-900">
              {hi ? "संपर्क जानकारी" : "Contact Information"}
            </h2>

            <div className="space-y-4">
              <div className="flex items-start gap-3">
                <Mail className="h-5 w-5 text-indigo-600 mt-0.5 shrink-0" />
                <div>
                  <p className="text-sm font-medium text-gray-900">
                    {hi ? "ईमेल" : "Email"}
                  </p>
                  <p className="text-sm text-gray-600">contact@shodhsanchayan.org</p>
                </div>
              </div>

              <div className="flex items-start gap-3">
                <Phone className="h-5 w-5 text-indigo-600 mt-0.5 shrink-0" />
                <div>
                  <p className="text-sm font-medium text-gray-900">
                    {hi ? "फ़ोन" : "Phone"}
                  </p>
                  <p className="text-sm text-gray-600">+91-XXXX-XXXXXX</p>
                </div>
              </div>

              <div className="flex items-start gap-3">
                <MapPin className="h-5 w-5 text-indigo-600 mt-0.5 shrink-0" />
                <div>
                  <p className="text-sm font-medium text-gray-900">
                    {hi ? "पता" : "Address"}
                  </p>
                  <p className="text-sm text-gray-600">
                    {hi
                      ? "शैक्षणिक परिसर, नई दिल्ली, भारत"
                      : "Academic Campus, New Delhi, India"}
                  </p>
                </div>
              </div>
            </div>
          </div>

          {/* Contact Form */}
          <div className="lg:col-span-3">
            <form
              onSubmit={handleSubmit}
              className="rounded-lg bg-white p-6 shadow-sm border border-gray-200 space-y-5"
            >
              <div className="absolute -left-[9999px] top-auto" aria-hidden="true">
                <input type="text" name="website" tabIndex={-1} autoComplete="off" value={form.website} onChange={handleChange} />
              </div>
              <h2 className="text-lg font-semibold text-gray-900">
                {hi ? "संदेश भेजें" : "Send a Message"}
              </h2>

              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-700">
                  {hi ? "नाम / Name" : "Name / नाम"}
                </label>
                <input
                  type="text"
                  name="name"
                  required
                  value={form.name}
                  onChange={handleChange}
                  placeholder={hi ? "आपका नाम" : "Your name"}
                  className={inputClass}
                />
              </div>

              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-700">
                  {hi ? "ईमेल / Email" : "Email / ईमेल"}
                </label>
                <input
                  type="email"
                  name="email"
                  required
                  value={form.email}
                  onChange={handleChange}
                  placeholder={hi ? "आपका ईमेल" : "Your email"}
                  className={inputClass}
                />
              </div>

              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-700">
                  {hi ? "विषय / Subject" : "Subject / विषय"}
                </label>
                <input
                  type="text"
                  name="subject"
                  required
                  value={form.subject}
                  onChange={handleChange}
                  placeholder={hi ? "संदेश का विषय" : "Message subject"}
                  className={inputClass}
                />
              </div>

              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-700">
                  {hi ? "संदेश / Message" : "Message / संदेश"}
                </label>
                <textarea
                  name="message"
                  required
                  rows={5}
                  value={form.message}
                  onChange={handleChange}
                  placeholder={hi ? "अपना संदेश लिखें..." : "Write your message..."}
                  className={inputClass}
                />
              </div>

              <button
                type="submit"
                disabled={submitting}
                className="inline-flex items-center gap-2 rounded-md bg-indigo-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50 transition-colors"
              >
                <Send className="h-4 w-4" />
                {submitting
                  ? hi
                    ? "भेजा जा रहा है..."
                    : "Sending..."
                  : hi
                    ? "संदेश भेजें"
                    : "Send Message"}
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}