import React, { useEffect, useState } from 'react';
import FeatureLayer from '@arcgis/core/layers/FeatureLayer';
import { Box, Typography } from '@mui/material';

interface ZoneData {
  zone_no: string;
  pendingCount: number;
  toBeVerifiedCount: number;
}

const ZoneIntimationOnly = () => {
  const [zoneData, setZoneData] = useState<ZoneData[]>([]);

  useEffect(() => {
    fetchData();
  }, []);

  const normalizeZone = (zone: any) => {
    if (zone == null) return '';
    const s = String(zone);
    const match = s.match(/\d+/);
    return match ? match[0].padStart(2, '0') : '';
  };

  const fetchData = async () => {
    const BUILDING_LAYER_URL =
      'https://gisgcc.chennaicorporation.gov.in/server/rest/services/Revenue/Building_Updation/FeatureServer/0';

    const buildingLayer = new FeatureLayer({
      url: BUILDING_LAYER_URL
    });

    const query = buildingLayer.createQuery();
    query.outFields = ['zone', 'approval'];
    query.where = '1=1';
    query.returnGeometry = false;
    query.num = 2000;

    let features: any[] = [];
    let offset = 0;

    while (true) {
      query.start = offset;
      const res = await buildingLayer.queryFeatures(query);
      features = features.concat(res.features);
      if (res.features.length < query.num) break;
      offset += query.num;
    }

    const zonePendingMap: Record<string, number> = {};
    const zoneTBVMap: Record<string, number> = {};

    features.forEach(f => {
      const rawZone = f.attributes?.zone ?? '';
      const approval = (f.attributes?.approval ?? '').trim().toLowerCase();

      const zone = normalizeZone(rawZone);
      if (!zone) return;

      if (approval === 'pending') {
        zonePendingMap[zone] = (zonePendingMap[zone] || 0) + 1;
      }

      if (approval === 'to be verified') {
        zoneTBVMap[zone] = (zoneTBVMap[zone] || 0) + 1;
      }
    });

    const allZones = new Set([
      ...Object.keys(zonePendingMap),
      ...Object.keys(zoneTBVMap)
    ]);

    const result: ZoneData[] = Array.from(allZones).map(zone => ({
      zone_no: zone,
      pendingCount: zonePendingMap[zone] || 0,
      toBeVerifiedCount: zoneTBVMap[zone] || 0
    }));

    result.sort((a, b) => parseInt(a.zone_no, 10) - parseInt(b.zone_no, 10));

    setZoneData(result);
  };

  return (
    <Box p={2} sx={{ maxHeight: 300, overflowY: 'auto' }}>
      {zoneData.length === 0 ? (
        <Typography variant="body2" sx={{ color: 'white' }}>
          No Pending or To Be Verified records found.
        </Typography>
      ) : (
        zoneData.map(z => (
          <Typography key={z.zone_no} variant="body2" sx={{ color: 'white', mb: 1 }}>
            <strong>Zone {z.zone_no}</strong> — Pending: 
            <strong> {z.pendingCount} </strong> | To be Verified: 
            <strong> {z.toBeVerifiedCount} </strong>
          </Typography>
        ))
      )}
    </Box>
  );
};

export default ZoneIntimationOnly;