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

const TYPES = [
  "unifamilial",
  "plex",
  "condo_ou_multi",
  "chalet",
  "maison_mobile",
  "terrain",
] as const;

export default function EstimateForm() {
  const { t } = useLang();
  const router = useRouter();
  const [municipality, setMunicipality] = useState("");
  const [typeProp, setTypeProp] = useState<string>("unifamilial");
  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 });
    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, Lévis…"
        />
      </label>
      <label className="flex flex-col gap-1.5">
        <span className="klabel pl-0.5">{t("propertyType")} *</span>
        <select
          value={typeProp}
          onChange={(e) => setTypeProp(e.target.value)}
          className="vp-input"
        >
          {TYPES.map((ty) => (
            <option key={ty} value={ty}>
              {t(ty)}
            </option>
          ))}
        </select>
      </label>
      <label className="flex flex-col gap-1.5">
        <span className="klabel pl-0.5">{t("floorArea")}</span>
        <input
          type="number"
          min={10}
          max={5000}
          value={floorArea}
          onChange={(e) => setFloorArea(e.target.value)}
          className="vp-input"
          placeholder="120"
        />
      </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="1985"
        />
      </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="500"
        />
      </label>
      <div className="flex items-end">
        <button type="submit" className="btn btn-primary w-full">
          {t("estimateBtn")} →
        </button>
      </div>
    </form>
  );
}