"use client";

import { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { submitContactMessage } from "@/app/[locale]/(public)/contact/actions";
import { Send, Lock, Loader2 } from "lucide-react";
import { motion } from "framer-motion";
import { useTranslations } from "next-intl";

const contactSchema = z.object({
  name: z.string().min(1, "Nama wajib diisi"),
  email: z.string().email("Format email tidak valid"),
  phone: z.string().min(1, "Nomor telepon wajib diisi"),
  topic: z.string().min(1, "Topik wajib dipilih"),
  message: z.string().min(1, "Pesan wajib diisi"),
});

type ContactFormValues = z.infer<typeof contactSchema>;

export function ContactForm() {
  const [isSent, setIsSent] = useState(false);
  const [submitError, setSubmitError] = useState<string | null>(null);
  const t = useTranslations("Contact.form");

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors, isSubmitting },
  } = useForm<ContactFormValues>({
    resolver: zodResolver(contactSchema),
  });

  const onSubmit = async (values: ContactFormValues) => {
    setSubmitError(null);
    try {
      await submitContactMessage(values);
      setIsSent(true);
      reset();
    } catch {
      setSubmitError(t('error'));
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <label htmlFor="name" className="mb-2 block text-[13px] font-bold text-slate-900">
            {t('nameLabel')} <span className="text-[#d32f2f]">*</span>
          </label>
          <input
            id="name"
            type="text"
            placeholder={t('namePlaceholder')}
            className="w-full rounded-xl border border-gray-200 px-4 py-3 text-sm transition focus:border-[#d32f2f] focus:outline-none focus:ring-1 focus:ring-[#d32f2f] shadow-sm bg-white"
            {...register("name")}
          />
          {errors.name && (
            <p className="mt-1 text-xs text-red-500">{errors.name.message}</p>
          )}
        </div>

        <div>
          <label htmlFor="email" className="mb-2 block text-[13px] font-bold text-slate-900">
            {t('emailLabel')} <span className="text-[#d32f2f]">*</span>
          </label>
          <input
            id="email"
            type="email"
            placeholder={t('emailPlaceholder')}
            className="w-full rounded-xl border border-gray-200 px-4 py-3 text-sm transition focus:border-[#d32f2f] focus:outline-none focus:ring-1 focus:ring-[#d32f2f] shadow-sm bg-white"
            {...register("email")}
          />
          {errors.email && (
            <p className="mt-1 text-xs text-red-500">{errors.email.message}</p>
          )}
        </div>

        <div>
          <label htmlFor="phone" className="mb-2 block text-[13px] font-bold text-slate-900">
            {t('phoneLabel')} <span className="text-[#d32f2f]">*</span>
          </label>
          <input
            id="phone"
            type="tel"
            placeholder={t('phonePlaceholder')}
            className="w-full rounded-xl border border-gray-200 px-4 py-3 text-sm transition focus:border-[#d32f2f] focus:outline-none focus:ring-1 focus:ring-[#d32f2f] shadow-sm bg-white"
            {...register("phone")}
          />
          {errors.phone && (
            <p className="mt-1 text-xs text-red-500">{errors.phone.message}</p>
          )}
        </div>

        <div>
          <label htmlFor="topic" className="mb-2 block text-[13px] font-bold text-slate-900">
            {t('topicLabel')} <span className="text-[#d32f2f]">*</span>
          </label>
          <select
            id="topic"
            className="w-full rounded-xl border border-gray-200 px-4 py-3 text-sm transition focus:border-[#d32f2f] focus:outline-none focus:ring-1 focus:ring-[#d32f2f] shadow-sm bg-white appearance-none text-gray-500"
            {...register("topic")}
          >
            <option value="">{t('topicPlaceholder')}</option>
            <option value="Pertanyaan Umum">{t('topicOptions.general')}</option>
            <option value="Pemesanan Tour">{t('topicOptions.booking')}</option>
            <option value="Pembatalan/Refund">{t('topicOptions.refund')}</option>
            <option value="Kerja Sama">{t('topicOptions.coop')}</option>
            <option value="Lainnya">{t('topicOptions.other')}</option>
          </select>
          {errors.topic && (
            <p className="mt-1 text-xs text-red-500">{errors.topic.message}</p>
          )}
        </div>
      </div>

      <div>
        <label htmlFor="message" className="mb-2 block text-[13px] font-bold text-slate-900">
          {t('messageLabel')} <span className="text-[#d32f2f]">*</span>
        </label>
        <textarea
          id="message"
          rows={5}
          placeholder={t('messagePlaceholder')}
          className="w-full rounded-xl border border-gray-200 px-4 py-3 text-sm transition focus:border-[#d32f2f] focus:outline-none focus:ring-1 focus:ring-[#d32f2f] shadow-sm bg-white"
          {...register("message")}
        />
        {errors.message && (
          <p className="mt-1 text-xs text-red-500">{errors.message.message}</p>
        )}
      </div>

      {isSent && (
        <p className="rounded-lg bg-green-50 px-4 py-3 text-sm text-green-700 font-medium">
          {t('success')}
        </p>
      )}

      {submitError && (
        <p className="rounded-lg bg-red-50 px-4 py-3 text-sm text-red-600 font-medium">
          {submitError}
        </p>
      )}

        <motion.button
          type="submit"
          whileTap={{ scale: 0.95 }}
          disabled={isSubmitting}
          className="w-full rounded-xl bg-[#b71c1c] bg-gradient-to-r from-[#d32f2f] to-[#b71c1c] px-4 py-3.5 text-[15px] font-bold text-white transition hover:shadow-lg disabled:opacity-60 flex items-center justify-center gap-2"
        >
          {isSubmitting ? (
            <>
              <Loader2 className="w-4 h-4 animate-spin" />
              {t('submittingText')}
            </>
          ) : (
            <>
              {t('submitText')} <Send className="w-4 h-4" />
            </>
          )}
        </motion.button>

      <div className="flex items-center justify-center gap-2 mt-4 text-[11px] text-gray-500">
        <Lock className="w-3.5 h-3.5" />
        <p>{t('privacyNotice')} <span className="font-bold text-[#d32f2f]">Kebijakan Privasi</span> kami.</p>
      </div>
    </form>
  );
}