iptek-web/app/contact/ContactForm.tsx

"use client";

import { useState, useEffect, useCallback } from "react";
import { sendContactEmail, type ContactPayload } from "@/app/actions/sendContact";
import { useLang } from "@/context/LanguageContext";
import { t } from "@/lib/translations";

function generateCaptcha() {
  const a = Math.floor(Math.random() * 9) + 1;
  const b = Math.floor(Math.random() * 9) + 1;
  return { a, b, answer: a + b };
}

const inputClass =
  "w-full px-4 py-3 rounded-lg border border-outline-variant bg-surface focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all text-on-surface placeholder:text-on-surface-variant/50";

export default function ContactForm() {
  const { lang } = useLang();
  const tr = t[lang].contact;

  const [formData, setFormData] = useState<Omit<ContactPayload, never>>({
    name: "",
    email: "",
    company: "",
    phone: "",
    topic: "",
    message: "",
  });
  const [captcha, setCaptcha] = useState({ a: 0, b: 0, answer: 0 });
  const [captchaInput, setCaptchaInput] = useState("");
  const [captchaError, setCaptchaError] = useState(false);
  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
  const [errorMsg, setErrorMsg] = useState("");

  const refreshCaptcha = useCallback(() => {
    setCaptcha(generateCaptcha());
    setCaptchaInput("");
    setCaptchaError(false);
  }, []);

  useEffect(() => {
    refreshCaptcha();
  }, [refreshCaptcha]);

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

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();

    if (parseInt(captchaInput, 10) !== captcha.answer) {
      setCaptchaError(true);
      refreshCaptcha();
      return;
    }

    setStatus("loading");
    const result = await sendContactEmail(formData);

    if (result.ok) {
      setStatus("success");
    } else {
      setStatus("error");
      setErrorMsg(result.error);
      refreshCaptcha();
    }
  }

  function handleReset() {
    setFormData({ name: "", email: "", company: "", phone: "", topic: "", message: "" });
    setStatus("idle");
    setErrorMsg("");
    refreshCaptcha();
  }

  if (status === "success") {
    return (
      <div className="flex flex-col items-center justify-center h-full text-center py-16">
        <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mb-6">
          <span
            className="material-symbols-outlined text-green-600 text-4xl"
            style={{ fontVariationSettings: "'FILL' 1" }}
          >
            check_circle
          </span>
        </div>
        <h3 className="font-headline text-2xl font-bold text-on-surface mb-3">{tr.successTitle}</h3>
        <p className="text-on-surface-variant max-w-sm">
          {tr.successDesc}{" "}
          <strong>{formData.email}</strong>.
        </p>
        <button onClick={handleReset} className="mt-8 text-primary font-bold hover:underline">
          {tr.sendAnother}
        </button>
      </div>
    );
  }

  return (
    <>
      <h2 className="font-headline text-2xl font-bold text-on-surface mb-8">{tr.formTitle}</h2>
      <form onSubmit={handleSubmit} className="space-y-6" noValidate>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label className="block text-sm font-semibold text-on-surface mb-2">
              {tr.nameLabel} <span className="text-error">*</span>
            </label>
            <input
              type="text"
              name="name"
              required
              value={formData.name}
              onChange={handleChange}
              placeholder="John Doe"
              className={inputClass}
            />
          </div>
          <div>
            <label className="block text-sm font-semibold text-on-surface mb-2">
              {tr.emailLabel} <span className="text-error">*</span>
            </label>
            <input
              type="email"
              name="email"
              required
              value={formData.email}
              onChange={handleChange}
              placeholder="john@company.com"
              className={inputClass}
            />
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label className="block text-sm font-semibold text-on-surface mb-2">{tr.companyLabel}</label>
            <input
              type="text"
              name="company"
              value={formData.company}
              onChange={handleChange}
              placeholder={tr.companyPlaceholder}
              className={inputClass}
            />
          </div>
          <div>
            <label className="block text-sm font-semibold text-on-surface mb-2">
              {tr.phoneLabel}
            </label>
            <input
              type="tel"
              name="phone"
              value={formData.phone}
              onChange={handleChange}
              placeholder="+62 812-xxxx-xxxx"
              className={inputClass}
            />
          </div>
        </div>

        <div>
          <label className="block text-sm font-semibold text-on-surface mb-2">
            {tr.topicLabel} <span className="text-error">*</span>
          </label>
          <select
            name="topic"
            required
            value={formData.topic}
            onChange={handleChange}
            className={inputClass}
          >
            <option value="">{tr.topicPlaceholder}</option>
            {tr.topics.map((topic) => (
              <option key={topic} value={topic}>
                {topic}
              </option>
            ))}
          </select>
        </div>

        <div>
          <label className="block text-sm font-semibold text-on-surface mb-2">
            {tr.messageLabel} <span className="text-error">*</span>
          </label>
          <textarea
            name="message"
            required
            rows={5}
            value={formData.message}
            onChange={handleChange}
            placeholder={tr.messagePlaceholder}
            className={`${inputClass} resize-none`}
          />
        </div>

        {/* CAPTCHA */}
        <div className="bg-surface-container-low border border-outline-variant rounded-xl p-5">
          <div className="flex items-center gap-3 mb-3">
            <span
              className="material-symbols-outlined text-primary"
              style={{ fontVariationSettings: "'FILL' 1" }}
            >
              security
            </span>
            <p className="text-sm font-semibold text-on-surface">{tr.captchaLabel}</p>
          </div>
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-3">
              <div className="bg-primary/10 text-primary font-black text-2xl font-headline px-4 py-2 rounded-lg select-none tracking-widest">
                {captcha.a} + {captcha.b}
              </div>
              <span className="text-on-surface-variant font-bold text-xl">=</span>
              <input
                type="number"
                inputMode="numeric"
                value={captchaInput}
                onChange={(e) => {
                  setCaptchaInput(e.target.value);
                  setCaptchaError(false);
                }}
                placeholder="?"
                required
                className={`w-20 px-3 py-2 rounded-lg border text-center font-bold text-lg focus:outline-none focus:ring-2 transition-all ${
                  captchaError
                    ? "border-error bg-error-container/30 text-error focus:ring-error/20"
                    : "border-outline-variant bg-surface focus:border-primary focus:ring-primary/20 text-on-surface"
                }`}
              />
            </div>
            <button
              type="button"
              onClick={refreshCaptcha}
              className="ml-auto text-on-surface-variant hover:text-primary transition-colors"
              title={lang === "id" ? "Ganti soal" : "New question"}
            >
              <span className="material-symbols-outlined">refresh</span>
            </button>
          </div>
          {captchaError && (
            <p className="text-error text-sm mt-2 flex items-center gap-1">
              <span className="material-symbols-outlined text-base" style={{ fontVariationSettings: "'FILL' 1" }}>error</span>
              {tr.captchaError}
            </p>
          )}
        </div>

        {status === "error" && (
          <div className="bg-error-container text-on-error-container px-4 py-3 rounded-lg text-sm flex items-center gap-2">
            <span className="material-symbols-outlined text-base shrink-0" style={{ fontVariationSettings: "'FILL' 1" }}>error</span>
            {errorMsg}
          </div>
        )}

        <button
          type="submit"
          disabled={status === "loading"}
          className="w-full bg-gradient-to-br from-primary to-primary-container text-on-primary py-4 rounded-lg font-bold text-base shadow-lg hover:opacity-90 transition-all active:scale-[0.99] disabled:opacity-60 disabled:cursor-not-allowed flex items-center justify-center gap-2"
        >
          {status === "loading" ? (
            <>
              <span className="material-symbols-outlined animate-spin text-base">progress_activity</span>
              {tr.sendingBtn}
            </>
          ) : (
            <>
              <span className="material-symbols-outlined text-base">send</span>
              {tr.submitBtn}
            </>
          )}
        </button>
      </form>
    </>
  );
}