Function NewFieldDialog

src/components/NewFieldDialog.tsx:78–308

({ coordinates, mapToken, existingFieldColors, onSave, onCancel }: NewFieldDialogProps)

}

const NewFieldDialog = ({ coordinates, mapToken, existingFieldColors, onSave, onCancel }: NewFieldDialogProps) => {
  const [name, setName] = useState("");
  const [regionType, setRegionType] = useState<"rural" | "urban">("rural");
  const [detecting, setDetecting] = useState(true);
  const [guessingCrop, setGuessingCrop] = useState(false);
  const [crop, setCrop] = useState("Wheat");
  const [urbanLandUse, setUrbanLandUse] = useState("Residential");
  const [color, setColor] = useState(() => getNextAutoColor(existingFieldColors || []));
  const [group, setGroup] = useState("");
  const [location, setLocation] = useState("");
  const [cropSearch, setCropSearch] = useState("");
  const [showCropDropdown, setShowCropDropdown] = useState(false);

  const estimatedAcres = calculateAreaAcres(coordinates);
  const estimatedHa = Math.round((estimatedAcres / 2.47105) * 10) / 10;

  // Auto-detect region type using GEE land use + reverse geocode (server-proxied)
  useEffect(() => {
    const detect = async () => {
      setDetecting(true);

      const center = coordinates.reduce(
        (acc, c) => [acc[0] + c[0] / coordinates.length, acc[1] + c[1] / coordinates.length], [0, 0]
      );

      // Parallel: reverse geocode (via edge proxy) + GEE land use
      const geocodePromise = callBackend("mapbox-geocode", { mode: "reverse", lng: center[0], lat: center[1], limit: 1 })
        .then(r => r.data).catch(() => null);

      const geePromise = callBackend("gee-analytics", { polygon: coordinates, analyses: ["land_use"] }).then(r => r.data).catch(() => null);

      const [geoData, geeData] = await Promise.all([geocodePromise, geePromise]);

      // Set location from geocode
      if (geoData?.features?.[0]) {
        setLocation(geoData.features[0].place_name);
      }

      // Determine region type from GEE land use data
      let isUrban = false;
      if (geeData?.land_use) {
        const builtUp = geeData.land_use["Built-up"] || 0;
        isUrban = builtUp >= 30;
      } else if (geoData?.features?.[0]) {
        // Fallback: check Mapbox place type
        const placeType = geoData.features[0].place_type?.[0] || "";
        const placeName = (geoData.features[0].place_name || "").toLowerCase();
        isUrban = ["place", "locality", "neighborhood", "address"].includes(placeType) ||
          ["city", "town", "metro", "urban", "suburb", "downtown"].some(k => placeName.includes(k));
      }

      setRegionType(isUrban ? "urban" : "rural");
      setDetecting(false);

      if (!isUrban) {
        setGuessingCrop(true);
        try {
          const cropNames = CROP_OPTIONS.map(c => c.name);