import { createContext, useContext, useState, type FormEvent, type ReactNode } from "react";
import { FaIcon } from "./FaIcon";
import { sendContact } from "@/lib/forms";

const Ctx = createContext<{ open: () => void }>({ open: () => {} });
export const useContactModal = () => useContext(Ctx);

const field =
  "mt-1 h-10 w-full border border-primary/40 bg-transparent px-4 text-[15px] text-primary-foreground placeholder:text-muted-foreground focus:border-accent focus:outline-none";

const fields = [
  ["nome", "Nome Completo", "Seu nome", "text"],
  ["email", "E-mail", "Seu melhor e-mail", "email"],
  ["telefone", "Telefone / WhatsApp", "31999999999", "tel"],
  ["empresa", "Empresa", "Nome da sua empresa", "text"],
  ["cidade", "Cidade", "Sua cidade", "text"],
  ["estado", "Estado", "UF", "text"],
] as const;

export function ContactModalProvider({ children }: { children: ReactNode }) {
  const [isOpen, setOpen] = useState(false);
  const [status, setStatus] = useState<"idle" | "sending" | "sent">("idle");
  const [error, setError] = useState("");

  async function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const d = Object.fromEntries(new FormData(e.currentTarget)) as Record<string, string>;
    setError("");
    setStatus("sending");
    try {
      await sendContact({
        nome: d["nome"] ?? "",
        email: d["email"] ?? "",
        telefone: d["telefone"],
        empresa: d["empresa"],
        cidade: d["cidade"],
        estado: d["estado"],
        mensagem: d["mensagem"],
      });
      setStatus("sent");
    } catch (err) {
      setError((err as Error).message);
      setStatus("idle");
    }
  }

  return (
    <Ctx.Provider value={{ open: () => { setStatus("idle"); setError(""); setOpen(true); } }}>
      {children}
      {isOpen && (
        <div
          className="fixed inset-0 z-[100] flex items-center justify-center overflow-y-auto bg-ink/70 p-4"
          onClick={() => setOpen(false)}
        >
          <div
            role="dialog"
            aria-modal="true"
            className="relative w-full max-w-[640px] bg-ink px-6 py-8 shadow-2xl md:px-8"
            onClick={(e) => e.stopPropagation()}
          >
            <button
              aria-label="Fechar"
              onClick={() => setOpen(false)}
              className="absolute right-6 top-5 text-muted-foreground hover:text-primary-foreground"
            >
              <FaIcon name="times" size={14} />
            </button>
            <p className="eyebrow text-[11px] text-accent">Fale com um conselheiro</p>
            <h2 className="mt-3 font-display text-[32px] font-black leading-[1.15] text-primary-foreground md:text-[40px]">
              Conecte sua marca ao futuro do <em className="font-normal text-accent">Winery Ventures</em>
            </h2>
            {status === "sent" ? (
              <p className="mt-8 text-[16px] text-primary-foreground">
                Obrigado! Recebemos sua mensagem e um conselheiro entrará em contato em breve.
              </p>
            ) : (
              <form className="mt-8 grid grid-cols-1 gap-x-[10px] gap-y-4 md:grid-cols-2" onSubmit={onSubmit}>
                {fields.map(([n, l, p, t]) => (
                  <label key={n} className="block text-[15px] text-primary-foreground">
                    {l}
                    <input
                      name={n}
                      type={t}
                      placeholder={p}
                      required={n === "nome" || n === "email"}
                      maxLength={n === "estado" ? 40 : 200}
                      className={field}
                    />
                  </label>
                ))}
                <label className="block text-[15px] text-primary-foreground md:col-span-2">
                  Assunto / Mensagem
                  <textarea name="mensagem" maxLength={5000} placeholder="Como podemos ajudar?" className={`${field} h-[100px] py-3`} />
                </label>
                {error && <p className="text-[14px] text-accent md:col-span-2">{error}</p>}
                <button
                  type="submit"
                  disabled={status === "sending"}
                  className="flex h-[46px] items-center justify-center gap-4 bg-primary font-cond text-[15px] font-semibold uppercase tracking-[0.3em] text-primary-foreground hover:bg-primary/90 disabled:opacity-70 md:col-span-2"
                >
                  {status === "sending" ? "Enviando..." : "Enviar mensagem"} <FaIcon name="arrow-right" size={15} />
                </button>
              </form>
            )}
          </div>
        </div>
      )}
    </Ctx.Provider>
  );
}