// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { useLang } from "./LangContext";

export default function EstimateForm() {
  const { t } = useLang();
  const router = useRouter();
  const [municipality, setMunicipality] = useState("");
  const [portes, setPortes] = useState("3");
  const [floorArea, setFloorArea] = useState("");
  const [yearBuilt, setYearBuilt] = useState("");
  const [landArea, setLandArea] = useState("");

  const submit = (e: React.FormEvent) => {
    e.preventDefault();
    const p = new URLSearchParams({ municipality, typeProp: "plex", portes });
    if (floorArea) p.set("floorArea", floorArea);
    if (yearBuilt) p.set("yearBuilt", yearBuilt);
    if (landArea) p.set("landArea", landArea);
    router.push(`/estimation/manuelle?${p.toString()}`);
  };

  return (
    <form
      onSubmit={submit}
      className="grid grid-cols-2 gap-3 sm:grid-cols-3 sm:gap-4"
    >
      <label className="col-span-2 flex flex-col gap-1.5 sm:col-span-1">
        <span className="klabel pl-0.5">{t("municipality")} *</span>
        <input
          required
          value={municipality}
          onChange={(e) => setMunicipality(e.target.value)}
          className="vp-input"
          placeholder="Montréal, Québec, Trois-Rivières…"
        />
      </label>
      <label className="flex flex-col gap-1.5">
        <span className="klabel pl-0.5">{t("portes")} *</span>
        <input
          type="number"
          required
          min={2}
          max={40}
          value={portes}
          onChange={(e) => setPortes(e.target.value)}
          className="vp-input"
          placeholder="3"
        />
      </label>
      <label className="flex flex-col gap-1.5">
        <span className="klabel pl-0.5">{t("floorArea")}</span>
        <input
          type="number"
          min={40}
          max={5000}
          value={floorArea}
          onChange={(e) => setFloorArea(e.target.value)}
          className="vp-input"
          placeholder="240"
        />
      </label>
      <label className="flex flex-col gap-1.5">
        <span className="klabel pl-0.5">{t("yearBuilt")}</span>
        <input
          type="number"
          min={1700}
          max={2026}
          value={yearBuilt}
          onChange={(e) => setYearBuilt(e.target.value)}
          className="vp-input"
          placeholder="1955"
        />
      </label>
      <label className="flex flex-col gap-1.5">
        <span className="klabel pl-0.5">{t("landArea")}</span>
        <input
          type="number"
          min={0}
          value={landArea}
          onChange={(e) => setLandArea(e.target.value)}
          className="vp-input"
          placeholder="350"
        />
      </label>
      <div className="flex items-end">
        <button type="submit" className="btn btn-primary w-full">
          {t("estimateBtn")} →
        </button>
      </div>
    </form>
  );
}