"use client";

import { useMemo, useState } from "react";
import type { Lang } from "@/i18n/types";
import type { Dict } from "@/i18n/dictionaries";

type Status = "idle" | "loading" | "success" | "error";

export function ContactForm({ lang, dict }: { lang: Lang; dict: Dict }) {
  const labels = dict.contact.form;
  const [status, setStatus] = useState<Status>("idle");
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");

  const disabled = useMemo(
    () =>
      status === "loading" ||
      name.trim().length < 2 ||
      !email.includes("@") ||
      message.trim().length < 10,
    [status, name, email, message],
  );

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (disabled) return;
    setStatus("loading");

    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ name, email, message, lang }),
      });

      if (!res.ok) throw new Error("Request failed");

      setStatus("success");
      setName("");
      setEmail("");
      setMessage("");
    } catch {
      setStatus("error");
    }
  }

  return (
    <form onSubmit={onSubmit} className="mt-10 grid gap-4">
      <div className="grid gap-4 sm:grid-cols-2">
        <label className="grid gap-2">
          <span className="text-xs font-semibold text-appMuted">
            {labels.name}
          </span>
          <input
            value={name}
            onChange={(e) => setName(e.target.value)}
            className="h-12 rounded-2xl border border-appBorder bg-white/3 px-4 text-sm text-appText outline-none ring-0 placeholder:text-appMuted/60 focus:border-accent/60"
            placeholder={labels.name}
            autoComplete="name"
          />
        </label>
        <label className="grid gap-2">
          <span className="text-xs font-semibold text-appMuted">
            {labels.email}
          </span>
          <input
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            className="h-12 rounded-2xl border border-appBorder bg-white/3 px-4 text-sm text-appText outline-none ring-0 placeholder:text-appMuted/60 focus:border-accent/60"
            placeholder={labels.email}
            autoComplete="email"
            inputMode="email"
          />
        </label>
      </div>

      <label className="grid gap-2">
        <span className="text-xs font-semibold text-appMuted">
          {labels.message}
        </span>
        <textarea
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          className="min-h-40 resize-y rounded-2xl border border-appBorder bg-white/3 px-4 py-3 text-sm leading-7 text-appText outline-none placeholder:text-appMuted/60 focus:border-accent/60"
          placeholder={labels.message}
        />
      </label>

      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <button className="btn btn-primary disabled:opacity-60" disabled={disabled}>
          {status === "loading"
            ? lang === "ar"
              ? "جارٍ الإرسال..."
              : "Sending..."
            : dict.cta.send}
        </button>

        <a
          className="btn btn-secondary"
          href="https://wa.me/966544666050"
          target="_blank"
          rel="noopener noreferrer"
        >
          {dict.cta.whatsapp}
        </a>
      </div>

      <p className="text-xs text-appMuted">{labels.note}</p>

      {status === "success" ? (
        <div className="rounded-2xl border border-appBorder bg-white/3 px-4 py-3 text-sm text-appText">
          {labels.success}
        </div>
      ) : null}

      {status === "error" ? (
        <div className="rounded-2xl border border-appBorder bg-white/3 px-4 py-3 text-sm text-appText">
          {labels.error}
        </div>
      ) : null}
    </form>
  );
}