/**
 * =============================================================================
 * Job·Ka — Groupe KA
 * Auteur  : Simon-Pierre Boucher
 * Contact : contact@spboucher.ai
 * Fichier : frontend/src/pages/Employeurs.tsx
 * Rôle    : Page « Publier une offre » — dépôt direct par les employeurs
 *           (POST /api/employeurs/offres, modération avant publication)
 * Créé    : 2026-08-18   Modifié : 2026-08-22
 * =============================================================================
 */
import { FormEvent, useEffect, useState } from "react";

interface FormState {
  employer: string;
  contact_email: string;
  title: string;
  city: string;
  url: string;
  salary_label: string;
  employment_type: string;
  work_mode: string;
  description: string;
  website: string; // pot de miel anti-robots (doit rester vide)
}

const EMPTY: FormState = {
  employer: "", contact_email: "", title: "", city: "", url: "",
  salary_label: "", employment_type: "", work_mode: "", description: "",
  website: "",
};

export default function EmployeursPage() {
  const [form, setForm] = useState<FormState>(EMPTY);
  const [sending, setSending] = useState(false);
  const [done, setDone] = useState<string | null>(null);
  const [err, setErr] = useState<string | null>(null);

  useEffect(() => {
    document.title = "Publier une offre | Job-Ka — Un service Groupe KA";
    window.scrollTo(0, 0);
  }, []);

  const set = (k: keyof FormState) =>
    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) =>
      setForm((f) => ({ ...f, [k]: e.target.value }));

  const submit = (e: FormEvent) => {
    e.preventDefault();
    setSending(true);
    setErr(null);
    fetch("/api/employeurs/offres", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        ...form,
        employment_type: form.employment_type || null,
        work_mode: form.work_mode || null,
      }),
    })
      .then(async (r) => {
        if (!r.ok) {
          const body = await r.json().catch(() => null);
          throw new Error(body?.detail?.[0]?.msg ?? body?.detail ?? `Erreur ${r.status}`);
        }
        return r.json();
      })
      .then((d) => {
        setDone(d.message ?? "Offre reçue — merci !");
        setForm(EMPTY);
      })
      .catch((ex) => setErr(String(ex?.message ?? ex)))
      .finally(() => setSending(false));
  };

  return (
    <div className="container contact-page">
      <span className="kicker">Employeurs</span>
      <h1>
        Publiez votre offre <span className="hl">directement</span>
      </h1>
      <p className="lede">
        Job-Ka référence les offres à la source : pages carrières des
        employeurs québécois d'abord, portails ensuite. Vous êtes un employeur
        sans page carrière connectée ? Déposez votre offre ici — elle est
        vérifiée par notre équipe avant publication, puis affichée avec le
        badge « Offre directe employeur ». C'est gratuit.
      </p>

      <ul className="muted" style={{ lineHeight: 1.8, marginBottom: 24 }}>
        <li>Votre offre reste <b>traçable</b> : elle renvoie vers votre site si vous fournissez un lien.</li>
        <li>Si votre entreprise utilise un ATS (Workday, Lever, Njoyn, Taleo…), écrivez-nous :
          nous pouvons <b>connecter votre page carrière</b> et synchroniser toutes vos offres automatiquement.</li>
        <li>Le courriel de contact sert uniquement à la modération — il n'est jamais affiché.</li>
      </ul>

      {done ? (
        <div className="card" style={{ padding: 24 }}>
          <h3 style={{ marginTop: 0 }}>Offre reçue ✓</h3>
          <p>{done}</p>
          <button className="btn" type="button" onClick={() => setDone(null)}>
            Déposer une autre offre
          </button>
        </div>
      ) : (
        <form onSubmit={submit} className="card depot-form"
              style={{ padding: 24, display: "grid", gap: 14, maxWidth: 760 }}>
          <div className="depot-grid">
            <label>Entreprise *
              <input required minLength={2} maxLength={120}
                     value={form.employer} onChange={set("employer")} />
            </label>
            <label>Courriel de contact *
              <input required type="email" maxLength={160}
                     value={form.contact_email} onChange={set("contact_email")} />
            </label>
            <label>Titre du poste *
              <input required minLength={3} maxLength={160}
                     value={form.title} onChange={set("title")} />
            </label>
            <label>Ville
              <input maxLength={80} value={form.city} onChange={set("city")} />
            </label>
            <label>Lien vers l'offre (votre site)
              <input type="url" placeholder="https://…" maxLength={400}
                     value={form.url} onChange={set("url")} />
            </label>
            <label>Salaire (texte libre)
              <input maxLength={120} placeholder="ex. 25 $ à 30 $/h"
                     value={form.salary_label} onChange={set("salary_label")} />
            </label>
            <label>Type d'emploi
              <select value={form.employment_type} onChange={set("employment_type")}>
                <option value="">—</option>
                <option value="temps_plein">Temps plein</option>
                <option value="temps_partiel">Temps partiel</option>
                <option value="contractuel">Contractuel</option>
                <option value="stage">Stage</option>
                <option value="saisonnier">Saisonnier</option>
              </select>
            </label>
            <label>Mode de travail
              <select value={form.work_mode} onChange={set("work_mode")}>
                <option value="">—</option>
                <option value="presentiel">Présentiel</option>
                <option value="hybride">Hybride</option>
                <option value="teletravail">Télétravail</option>
              </select>
            </label>
          </div>
          <label>Description du poste * <span className="muted">(30 caractères minimum)</span>
            <textarea required minLength={30} maxLength={20000} rows={10}
                      value={form.description} onChange={set("description")} />
          </label>
          {/* pot de miel : caché aux humains, rempli par les robots */}
          <input type="text" name="website" value={form.website}
                 onChange={set("website")} autoComplete="off" tabIndex={-1}
                 style={{ position: "absolute", left: "-9999px" }} aria-hidden="true" />
          {err && <p style={{ color: "var(--danger, #b3423a)" }}>{err}</p>}
          <div>
            <button className="btn btn-primary" type="submit" disabled={sending}>
              {sending ? "Envoi…" : "Soumettre l'offre pour modération"}
            </button>
          </div>
          <p className="muted" style={{ fontSize: 13, margin: 0 }}>
            En soumettant, vous confirmez être autorisé à publier cette offre.
            Les offres sont vérifiées manuellement avant d'apparaître sur Job-Ka.
          </p>
        </form>
      )}
    </div>
  );
}