/**
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * Project: Hilmacorp.ai — Web Platform
 * File: components/ContactForm.tsx
 * Description: Client-side contact form with inline validation, posting to /api/contact (light theme)
 */

"use client";

import { useState, type FormEvent } from "react";

interface FormStrings {
  name: string;
  namePlaceholder: string;
  organization: string;
  organizationPlaceholder: string;
  email: string;
  emailPlaceholder: string;
  message: string;
  messagePlaceholder: string;
  submit: string;
  sending: string;
  success: string;
  error: string;
  errName: string;
  errEmail: string;
  errMessage: string;
}

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

const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;

export default function ContactForm({ strings }: { strings: FormStrings }) {
  const [status, setStatus] = useState<Status>("idle");
  const [errors, setErrors] = useState<Record<string, string>>({});

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = event.currentTarget;
    const payload = {
      name: (form.elements.namedItem("name") as HTMLInputElement).value.trim(),
      organization: (form.elements.namedItem("organization") as HTMLInputElement).value.trim(),
      email: (form.elements.namedItem("email") as HTMLInputElement).value.trim(),
      message: (form.elements.namedItem("message") as HTMLTextAreaElement).value.trim(),
    };

    const nextErrors: Record<string, string> = {};
    if (payload.name.length < 2) nextErrors.name = strings.errName;
    if (!EMAIL_RE.test(payload.email)) nextErrors.email = strings.errEmail;
    if (payload.message.length < 10) nextErrors.message = strings.errMessage;
    setErrors(nextErrors);
    if (Object.keys(nextErrors).length > 0) return;

    setStatus("sending");
    try {
      const response = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      setStatus("success");
      form.reset();
    } catch {
      setStatus("error");
    }
  }

  const fieldClass =
    "w-full rounded-xl border border-line-strong bg-card px-4 py-3 text-sm text-ink placeholder:text-ink-faint focus:border-accent focus:outline-none";

  return (
    <form onSubmit={handleSubmit} noValidate className="flex flex-col gap-5">
      <div className="grid gap-5 sm:grid-cols-2">
        <div>
          <label htmlFor="name" className="mb-1.5 block text-sm font-medium text-ink">
            {strings.name}
          </label>
          <input
            id="name"
            name="name"
            type="text"
            autoComplete="name"
            required
            placeholder={strings.namePlaceholder}
            className={fieldClass}
            aria-invalid={Boolean(errors.name)}
          />
          {errors.name ? <p className="mt-1.5 text-xs text-red-700">{errors.name}</p> : null}
        </div>
        <div>
          <label htmlFor="organization" className="mb-1.5 block text-sm font-medium text-ink">
            {strings.organization}
          </label>
          <input
            id="organization"
            name="organization"
            type="text"
            autoComplete="organization"
            placeholder={strings.organizationPlaceholder}
            className={fieldClass}
          />
        </div>
      </div>
      <div>
        <label htmlFor="email" className="mb-1.5 block text-sm font-medium text-ink">
          {strings.email}
        </label>
        <input
          id="email"
          name="email"
          type="email"
          autoComplete="email"
          required
          placeholder={strings.emailPlaceholder}
          className={fieldClass}
          aria-invalid={Boolean(errors.email)}
        />
        {errors.email ? <p className="mt-1.5 text-xs text-red-700">{errors.email}</p> : null}
      </div>
      <div>
        <label htmlFor="message" className="mb-1.5 block text-sm font-medium text-ink">
          {strings.message}
        </label>
        <textarea
          id="message"
          name="message"
          rows={6}
          required
          placeholder={strings.messagePlaceholder}
          className={fieldClass}
          aria-invalid={Boolean(errors.message)}
        />
        {errors.message ? <p className="mt-1.5 text-xs text-red-700">{errors.message}</p> : null}
      </div>

      <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
        <button
          type="submit"
          disabled={status === "sending"}
          className="rounded-full bg-ink px-7 py-3 text-sm font-medium text-paper transition-colors hover:bg-accent-strong disabled:opacity-60"
        >
          {status === "sending" ? strings.sending : strings.submit}
        </button>
        <p aria-live="polite" className="text-sm">
          {status === "success" ? <span className="text-accent-strong">{strings.success}</span> : null}
          {status === "error" ? <span className="text-red-700">{strings.error}</span> : null}
        </p>
      </div>
    </form>
  );
}