"use client";

import { useState } from "react";
import { useTranslation } from "next-i18next";
import { ArrowRight } from "lucide-react";

type FormValues = {
  companyName: string;
  contactPerson: string;
  email: string;
  phone: string;
  businessCategory: string;
  proposedBenefit: string;
  message: string;
};

type Errors = Partial<Record<keyof FormValues, string>>;

export default function PartnershipInquiryForm() {
  const { t } = useTranslation("expat");

  const [values, setValues] = useState<FormValues>({
    companyName: "",
    contactPerson: "",
    email: "",
    phone: "",
    businessCategory: "",
    proposedBenefit: "",
    message: "",
  });
  const [errors, setErrors] = useState<Errors>({});
  const [loading, setLoading] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const [serverError, setServerError] = useState<string | null>(null);

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

  function validate(): Errors {
    const next: Errors = {};
    if (!values.companyName.trim())
      next.companyName = t("benefits.inquiryForm.required");
    if (!values.contactPerson.trim())
      next.contactPerson = t("benefits.inquiryForm.required");
    if (!values.email || !/\S+@\S+\.\S+/.test(values.email))
      next.email = t("benefits.inquiryForm.emailInvalid");
    if (!values.businessCategory.trim())
      next.businessCategory = t("benefits.inquiryForm.required");
    if (!values.message.trim())
      next.message = t("benefits.inquiryForm.required");
    return next;
  }

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setSubmitted(false);
    setServerError(null);

    const validationErrors = validate();
    if (Object.keys(validationErrors).length > 0) {
      setErrors(validationErrors);
      return;
    }

    setLoading(true);
    try {
      const res = await fetch("/api/sendEmail", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          firstName: values.contactPerson,
          lastName: values.companyName,
          phone: values.phone || "-",
          email: values.email,
          message: `[${t("benefits.inquiryForm.businessCategory")}: ${
            values.businessCategory
          }] [${t("benefits.inquiryForm.proposedBenefit")}: ${
            values.proposedBenefit || "-"
          }]\n\n${values.message}`,
        }),
      });
      if (!res.ok) throw new Error(t("benefits.inquiryForm.serverError"));

      setSubmitted(true);
      setValues({
        companyName: "",
        contactPerson: "",
        email: "",
        phone: "",
        businessCategory: "",
        proposedBenefit: "",
        message: "",
      });
    } catch {
      setServerError(t("benefits.inquiryForm.serverError"));
    } finally {
      setLoading(false);
    }
  }

  return (
    <form
      onSubmit={onSubmit}
      className="rounded-2xl border border-border bg-white p-6 shadow-xl sm:p-8"
    >
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <div>
          <label className="block text-sm font-medium text-gray-700">
            {t("benefits.inquiryForm.companyName")}*
          </label>
          <input
            name="companyName"
            value={values.companyName}
            onChange={handleChange}
            placeholder={t("benefits.inquiryForm.companyNamePh")}
            className={`mt-1 h-10 w-full rounded-xl border px-3 text-sm outline-none focus:border-sky-400 ${
              errors.companyName ? "border-red-500" : "border-gray-300"
            }`}
          />
          {errors.companyName && (
            <p className="mt-1 text-xs text-red-600">{errors.companyName}</p>
          )}
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700">
            {t("benefits.inquiryForm.contactPerson")}*
          </label>
          <input
            name="contactPerson"
            value={values.contactPerson}
            onChange={handleChange}
            placeholder={t("benefits.inquiryForm.contactPersonPh")}
            className={`mt-1 h-10 w-full rounded-xl border px-3 text-sm outline-none focus:border-sky-400 ${
              errors.contactPerson ? "border-red-500" : "border-gray-300"
            }`}
          />
          {errors.contactPerson && (
            <p className="mt-1 text-xs text-red-600">{errors.contactPerson}</p>
          )}
        </div>
      </div>

      <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
        <div>
          <label className="block text-sm font-medium text-gray-700">
            {t("benefits.inquiryForm.email")}*
          </label>
          <input
            type="email"
            name="email"
            value={values.email}
            onChange={handleChange}
            placeholder={t("benefits.inquiryForm.emailPh")}
            className={`mt-1 h-10 w-full rounded-xl border px-3 text-sm outline-none focus:border-sky-400 ${
              errors.email ? "border-red-500" : "border-gray-300"
            }`}
          />
          {errors.email && (
            <p className="mt-1 text-xs text-red-600">{errors.email}</p>
          )}
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700">
            {t("benefits.inquiryForm.phone")}
          </label>
          <input
            name="phone"
            value={values.phone}
            onChange={handleChange}
            placeholder={t("benefits.inquiryForm.phonePh")}
            className="mt-1 h-10 w-full rounded-xl border border-gray-300 px-3 text-sm outline-none focus:border-sky-400"
          />
        </div>
      </div>

      <div className="mt-4">
        <label className="block text-sm font-medium text-gray-700">
          {t("benefits.inquiryForm.businessCategory")}*
        </label>
        <input
          name="businessCategory"
          value={values.businessCategory}
          onChange={handleChange}
          placeholder={t("benefits.inquiryForm.businessCategoryPh")}
          className={`mt-1 h-10 w-full rounded-xl border px-3 text-sm outline-none focus:border-sky-400 ${
            errors.businessCategory ? "border-red-500" : "border-gray-300"
          }`}
        />
        {errors.businessCategory && (
          <p className="mt-1 text-xs text-red-600">{errors.businessCategory}</p>
        )}
      </div>

      <div className="mt-4">
        <label className="block text-sm font-medium text-gray-700">
          {t("benefits.inquiryForm.proposedBenefit")}
        </label>
        <input
          name="proposedBenefit"
          value={values.proposedBenefit}
          onChange={handleChange}
          placeholder={t("benefits.inquiryForm.proposedBenefitPh")}
          className="mt-1 h-10 w-full rounded-xl border border-gray-300 px-3 text-sm outline-none focus:border-sky-400"
        />
      </div>

      <div className="mt-4">
        <label className="block text-sm font-medium text-gray-700">
          {t("benefits.inquiryForm.message")}*
        </label>
        <textarea
          name="message"
          rows={4}
          value={values.message}
          onChange={handleChange}
          placeholder={t("benefits.inquiryForm.messagePh")}
          className={`mt-1 w-full rounded-xl border px-3 py-2 text-sm outline-none focus:border-sky-400 ${
            errors.message ? "border-red-500" : "border-gray-300"
          }`}
        />
        {errors.message && (
          <p className="mt-1 text-xs text-red-600">{errors.message}</p>
        )}
      </div>

      {submitted && (
        <div
          className="mt-4 rounded-lg border border-green-300 bg-green-50 px-4 py-2 text-sm text-green-700"
          role="alert"
        >
          {t("benefits.inquiryForm.ok")}
        </div>
      )}
      {serverError && (
        <div
          className="mt-4 rounded-lg border border-red-300 bg-red-50 px-4 py-2 text-sm text-red-700"
          role="alert"
        >
          {serverError}
        </div>
      )}

      <button
        type="submit"
        disabled={loading}
        className="mt-6 inline-flex w-full items-center justify-center gap-2 rounded-xl bg-[#051973] px-5 py-2.5 text-sm font-semibold text-white transition hover:brightness-110 disabled:opacity-60"
      >
        {loading
          ? t("benefits.inquiryForm.sending")
          : t("benefits.inquiryForm.submit")}
        {!loading && <ArrowRight className="h-4 w-4" />}
      </button>
    </form>
  );
}