Function FieldDetailView

src/components/FieldDetailView.tsx:216–756

({ field, onBack, onEditBoundary }: FieldDetailViewProps)

const TEXTURE_COLORS = { sand: "#EAB947", silt: "#A0785A", clay: "#854F0B" };

const FieldDetailView = ({ field, onBack, onEditBoundary }: FieldDetailViewProps) => {
  const [weather, setWeather] = useState<FieldWeather | null>(null);
  const [loading, setLoading] = useState(true);
  const [ndviStats, setNdviStats] = useState<NdviStats | null>(null);
  const [ndviLoading, setNdviLoading] = useState(false);
  const [aiAnalysis, setAiAnalysis] = useState<string>("");
  const [aiLoading, setAiLoading] = useState(false);
  const [showAnalysis, setShowAnalysis] = useState(false);
  const [soilData, setSoilData] = useState<SoilData | null>(null);
  const [soilLoading, setSoilLoading] = useState(false);
  const [aqiData, setAqiData] = useState<AqiData | null>(null);
  const [soilMoisture, setSoilMoisture] = useState<number | null>(null);

  const areaAcres = haToAcres(field.area);
  const urban = isUrbanField(field);

  const fieldCenter = useMemo(() => {
    const coords = field.coordinates[0];
    return {
      lat: coords.reduce((s, c) => s + c[1], 0) / coords.length,
      lng: coords.reduce((s, c) => s + c[0], 0) / coords.length,
    };
  }, [field]);

  // Fetch weather + AQI + soil moisture
  useEffect(() => {
    const fetchAll = async () => {
      setLoading(true);
      const { lat, lng } = fieldCenter;
      try {
        const [weatherRes, aqiRes, soilMoistRes] = await Promise.all([
          fetch(`https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lng}&current=temperature_2m,relative_humidity_2m,wind_speed_10m,weather_code`),
          fetch(`https://air-quality-api.open-meteo.com/v1/air-quality?latitude=${lat}&longitude=${lng}&current=pm2_5,pm10,european_aqi,us_aqi`),
          fetch(`https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lng}&hourly=soil_moisture_0_to_7cm&forecast_days=1`),
        ]);
        const [wData, aqData, smData] = await Promise.all([weatherRes.json(), aqiRes.json(), soilMoistRes.json()]);
        setWeather(wData.current || null);
        if (aqData.current) setAqiData(aqData.current);
        if (smData.hourly?.soil_moisture_0_to_7cm) {
          const vals = smData.hourly.soil_moisture_0_to_7cm.filter((v: any) => v != null);
          if (vals.length) setSoilMoisture(Math.round(vals[vals.length - 1] * 1000) / 10);
        }
      } catch { setWeather(null); }
      finally { setLoading(false); }
    };
    fetchAll();
  }, [field, fieldCenter]);

  // Fetch soil data
  useEffect(() => {
    const cached = getFreshLocalCacheValue<SoilData>(SOIL_CACHE_KEY, field.id, QUERY_CACHE_TTL_MS);
    if (cached) { setSoilData(cached); return; }
    const fetchSoil = async () => {
      setSoilLoading(true);
      try {
        const data = await invokeWithRetry<any>(
          "soil-data",
          { lat: fieldCenter.lat, lon: fieldCenter.lng },