Frontend/src/views/dashboards/farm/cropZoning/CropZoningWrapper.tsx

'use client'

import { useState, useCallback, useEffect } from 'react'
import dynamic from 'next/dynamic'
import { useTranslations } from 'next-intl'
import Box from '@mui/material/Box'
import CircularProgress from '@mui/material/CircularProgress'
import Button from '@mui/material/Button'
import CropZoningMap from './CropZoningMap'
import ZoneLegend from './ZoneLegend'
import LayerControl from './LayerControl'
import ZoneDetailPanel from './ZoneDetailPanel'
import CropZoningWeatherSection from './CropZoningWeatherSection'
import { createGridFromPolygon } from './cropZoningUtils'
import { cropZoningService, type Product, type ZoneInitialData, type ZoneDetailData } from '@/libs/api/services/cropZoningService'
import type { LayerType } from './cropZoningTypes'
import type { MapDrawGeoJSON } from './CropZoningMap'

const MapComponent = dynamic(() => Promise.resolve(CropZoningMap), {
  ssr: false,
  loading: () => (
    <Box className='flex items-center justify-center bs-full min-bs-[400px] rounded-xl bg-action-hover'>
      <CircularProgress size={48} />
    </Box>
  )
})

function isPolygon(geojson: MapDrawGeoJSON): geojson is MapDrawGeoJSON & { geometry: { type: 'Polygon'; coordinates: unknown[] } } {
  return !!geojson?.geometry && (geojson.geometry as { type: string }).type === 'Polygon'
}

export default function CropZoningWrapper() {
  const t = useTranslations('cropZoning')
  const [areaGeoJson, setAreaGeoJson] = useState<MapDrawGeoJSON>(null)
  const [areaLoading, setAreaLoading] = useState(true)
  const [zonesData, setZonesData] = useState<ZoneInitialData[] | null>(null)
  const [products, setProducts] = useState<Product[]>([])
  const [productsLoading, setProductsLoading] = useState(true)
  const [zonesLoading, setZonesLoading] = useState(false)
  const [activeLayer, setActiveLayer] = useState<LayerType>('crops')
  const [selectedZone, setSelectedZone] = useState<ZoneDetailData | null>(null)
  const [panelOpen, setPanelOpen] = useState(false)
  const [zoneDetailLoading, setZoneDetailLoading] = useState(false)
  const [optimizationKey, setOptimizationKey] = useState(0)

  const productLabels = Object.fromEntries(products.map(p => [p.id, p.label]))

  useEffect(() => {
    cropZoningService
      .getProducts()
      .then(res => setProducts(res.products))
      .catch(() => setProducts([]))
      .finally(() => setProductsLoading(false))
  }, [])

  useEffect(() => {
    setAreaLoading(true)
    cropZoningService
      .getArea()
      .then(res => setAreaGeoJson(res.area as unknown as MapDrawGeoJSON))
      .catch(() => setAreaGeoJson(null))
      .finally(() => setAreaLoading(false))
  }, [])

  const fetchZones = useCallback((geojson: MapDrawGeoJSON) => {
    if (!isPolygon(geojson)) {
      setZonesData(null)
      return
    }
    setZonesLoading(true)
    const grid = createGridFromPolygon(geojson as unknown as import('geojson').Feature<import('geojson').Polygon>)
    cropZoningService
      .getZonesInitial({ zones: grid })
      .then(res => setZonesData(res.zones))
      .catch(() => setZonesData(null))
      .finally(() => setZonesLoading(false))
  }, [])

  useEffect(() => {
    if (isPolygon(areaGeoJson)) {
      fetchZones(areaGeoJson)
    } else {
      setZonesData(null)
    }
  }, [areaGeoJson, optimizationKey, fetchZones])

  const handleAreaChange = useCallback((geojson: MapDrawGeoJSON) => {
    setAreaGeoJson(geojson)
  }, [])

  const handleZoneClick = useCallback((zone: ZoneInitialData) => {
    setZoneDetailLoading(true)
    setPanelOpen(true)
    setSelectedZone(null)
    cropZoningService
      .getZoneDetails(zone.zoneId)
      .then(details => setSelectedZone(details))
      .catch(() => setSelectedZone(null))
      .finally(() => setZoneDetailLoading(false))
  }, [])

  const handleOptimize = useCallback(() => {
    setOptimizationKey(k => k + 1)
  }, [])

  return (
    <Box className='flex flex-col gap-6 is-full'>
      <Box className='relative min-bs-[400px] rounded-xl overflow-hidden' sx={{ height: 'min(60vh, 500px)' }}>
        <Box className='absolute inset-0 z-0'>
          {areaGeoJson ? (
            <MapComponent
              key='crop-zoning-map'
              center={[35.6892, 51.389]}
              zoom={13}
              height='100%'
              activeLayer={activeLayer}
              onAreaChange={handleAreaChange}
              onZoneClick={handleZoneClick}
              optimizationKey={optimizationKey}
              className='min-bs-[400px]'
              initialAreaGeoJson={areaGeoJson}
              zonesData={zonesData}
              productLabels={productLabels}
              readOnly
            />
          ) : (
            <Box className='flex items-center justify-center bs-full min-bs-[400px] rounded-xl bg-action-hover' />
          )}
        </Box>

        {(areaLoading || zonesLoading) && (
          <Box
            className='absolute inset-0 z-[500] flex items-center justify-center bg-white/60 dark:bg-gray-900/60'
            sx={{ borderRadius: 12 }}
          >
            <CircularProgress size={48} />
          </Box>
        )}

        <LayerControl activeLayer={activeLayer} onLayerChange={setActiveLayer} />

        <ZoneLegend products={products} loading={productsLoading} />

        {areaGeoJson && (
          <Box className='absolute top-16 end-4 z-[1000]'>
            <Button
                variant='contained'
                color='primary'
                size='medium'
                startIcon={<i className='tabler-refresh text-xl' />}
                onClick={handleOptimize}
                disabled={zonesLoading}
                className='rounded-xl shadow-lg'
            >
              {t('optimizeAgain')}
            </Button>
          </Box>
        )}
      </Box>

      <ZoneDetailPanel
        open={panelOpen}
        onClose={() => setPanelOpen(false)}
        zone={selectedZone}
        products={products}
        loading={zoneDetailLoading}
      />

      <CropZoningWeatherSection />
    </Box>
  )
}