"use client";

import { useState } from "react";
import { Honeypot } from "@/components/Honeypot";
import { submitContact, type SubmitResult } from "@/lib/submit";

export function ContactForm() {
  const [result, setResult] = useState<SubmitResult>({ state: "idle" });
  const sending = result.state === "sending";

  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    setResult({ state: "sending" });
    setResult(
      await submitContact({
        name: String(data.get("name") ?? ""),
        email: String(data.get("email") ?? ""),
        servers: String(data.get("servers") ?? ""),
        topic: String(data.get("topic") ?? ""),
        message: String(data.get("message") ?? ""),
        website: String(data.get("website") ?? ""),
      })
    );
  }

  if (result.state === "sent") {
    return (
      <div role="status">
        <h2 style={{ fontSize: "var(--s-1)" }}>Message sent.</h2>
        <p style={{ color: "var(--ink-2)", marginTop: "0.5rem" }}>
          We reply within one business day. If it is urgent, email support@hostxtra.co.uk directly.
        </p>
      </div>
    );
  }

  const fieldError = (name: string) => result.fields?.[name];

  return (
    <form className="form" onSubmit={onSubmit} noValidate>
      <Honeypot />

      <div className="field">
        <label htmlFor="c-name">Your name</label>
        <input id="c-name" name="name" type="text" autoComplete="name" required aria-describedby="c-name-err" />
        {fieldError("name") && (
          <small id="c-name-err" className="field__err">
            {fieldError("name")}
          </small>
        )}
      </div>

      <div className="field">
        <label htmlFor="c-email">Work email</label>
        <input id="c-email" name="email" type="email" autoComplete="email" required aria-describedby="c-email-err" />
        {fieldError("email") && (
          <small id="c-email-err" className="field__err">
            {fieldError("email")}
          </small>
        )}
      </div>

      <div className="field">
        <label htmlFor="c-servers">Roughly how many servers?</label>
        <select id="c-servers" name="servers" defaultValue="4–25">
          <option>1–3</option>
          <option>4–25</option>
          <option>26–100</option>
          <option>More than 100</option>
        </select>
      </div>

      <div className="field">
        <label htmlFor="c-topic">What is this about?</label>
        <select id="c-topic" name="topic" defaultValue="Evaluating Vantage">
          <option>Evaluating Vantage</option>
          <option>Self-hosted licensing</option>
          <option>Migrating from something else</option>
          <option>Security disclosure</option>
        </select>
      </div>

      <div className="field">
        <label htmlFor="c-message">What are you trying to solve?</label>
        <textarea
          id="c-message"
          name="message"
          required
          placeholder="We inherit client servers and can never prove who still has access…"
          aria-describedby="c-message-err"
        />
        {fieldError("message") && (
          <small id="c-message-err" className="field__err">
            {fieldError("message")}
          </small>
        )}
      </div>

      <button className="btn btn--solid" type="submit" style={{ alignSelf: "flex-start" }} disabled={sending}>
        {sending ? "Sending…" : "Send message"}
      </button>

      {result.state === "error" && result.message && (
        <p className="field__err" role="alert">
          {result.message}
        </p>
      )}
    </form>
  );
}
