import React, { useEffect, useState } from "react";
import FeatureLayer from "@arcgis/core/layers/FeatureLayer";

import {
  Box,
  Button,
  MenuItem,
  Paper,
  Select,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Typography
} from "@mui/material";

import {
  Download,
  FileText,
  RefreshCcw,
  BarChart3
} from "lucide-react";

import * as XLSX from "xlsx";
import jsPDF from "jspdf";
import "jspdf-autotable";

import "./styles.css";


/* =========================================================
   STATUS CONFIGURATION
   ========================================================= */

const STATUS_MAP: Record<string, string> = {
  "01": "Active",
  "02": "Inactive"
};


/* =========================================================
   LAYER CONFIGURATION
   ========================================================= */

const LAYER_CONFIG: Record<string, any> = {

  "Disposal Location": {
    url:
      "https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/WaterInundationLayers/FeatureServer/3",
    zoneField: "zone",
    statusField: "status"
  },

  "NDRF": {
    url:
      "https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/WaterInundationLayers/FeatureServer/7",
    zoneField: "zone_no"
  },

  "Police Station": {
    url:
      "https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/WaterInundationLayers/FeatureServer/8",
    zoneField: "zone_no"
  },

  "Fire Station": {
    url:
      "https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/WaterInundationLayers/FeatureServer/4",
    zoneField: "zone_no"
  },

  "CMWSSB": {
    url:
      "https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/WaterInundationLayers/FeatureServer/2",
    zoneField: "zone_no"
  },

  "Amma Unavagam": {
    url:
      "https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/WaterInundationLayers/FeatureServer/0",
    zoneField: "zone_no"
  },

  "SWD": {
    url:
      "https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/SWD_OLD/FeatureServer/0",
    zoneField: "zone",
    statusField: "operational_status"
  },

  "Motor Location": {
    url:
      "https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/WaterInundationLayers/FeatureServer/6",
    zoneField: "zone",
    statusField: "operational_status"
  },

  "Boat Location": {
    url:
      "https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/WaterInundationLayers/FeatureServer/1",
    zoneField: "zone",
    statusField: "operational_status"
  },

  "Cooking Center": {
    url:
      "https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/WaterInundationLayers/FeatureServer/5",
    zoneField: "zone_no",
    statusField: "status"
  },

  "Relief Center": {
    url:
      "https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/WaterInundationLayers/FeatureServer/9",
    zoneField: "zone",
    statusField: "status"
  },

  "Water Inundation Point": {
    url:
      "https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/VULNERABLE_INUNDATION/FeatureServer/1",
    zoneField: "zone",
    statusField: "operational_status"
  },

  "Water Inundation Line": {
    url:
      "https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/WaterInundationLayers/FeatureServer/12",
    zoneField: "zone",
    statusField: "operational_status"
  },

  "Vulnerable Point": {
    url:
      "https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/VULNERABLE_INUNDATION/FeatureServer/0",
    zoneField: "new_zone",
    statusField: "operational_status"
  },

  "Vulnerable Line": {
    url:
      "https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/WaterInundationLayers/FeatureServer/11",
    zoneField: "new_zone",
    statusField: "operational_status"
  },

  "Sump": {
    url:
      "https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/Sump_and_Pump_Location/FeatureServer/0",
    zoneField: "zone",
    statusField: "operational_status"
  }
};


const LAYERS = Object.keys(LAYER_CONFIG);


/* =========================================================
   TYPES
   ========================================================= */

interface LayerStatus {
  Active: number;
  Inactive: number;
  Blank: number;
  Total: number;
}

interface ZoneSummary {
  zone: string;
  layers: Record<string, LayerStatus>;
  active: number;
  inactive: number;
  blank: number;
  total: number;
}


/* =========================================================
   EMPTY LAYER
   ========================================================= */

const emptyLayerStatus = (): LayerStatus => ({
  Active: 0,
  Inactive: 0,
  Blank: 0,
  Total: 0
});


/* =========================================================
   EMPTY ZONE
   ========================================================= */

const createZone = (zone: string): ZoneSummary => {

  const layers: Record<string, LayerStatus> = {};

  LAYERS.forEach(layer => {
    layers[layer] = emptyLayerStatus();
  });

  return {
    zone,
    layers,
    active: 0,
    inactive: 0,
    blank: 0,
    total: 0
  };
};


/* =========================================================
   COMPONENT
   ========================================================= */

const ZoneSummaryWidget = () => {

  const [zoneOptions, setZoneOptions] =
    useState<string[]>([]);

  const [zoneFilter, setZoneFilter] =
    useState<string>("All");

  const [filteredData, setFilteredData] =
    useState<ZoneSummary[]>([]);

  const [loading, setLoading] =
    useState(false);


  const [overall, setOverall] = useState({

    totalZones: 0,

    totalAssets: 0,

    active: 0,

    inactive: 0,

    blank: 0,

    layerWise: {} as Record<
      string,
      LayerStatus
    >

  });


  /* =========================================================
     LOAD ZONES
     ========================================================= */

  useEffect(() => {

    loadZones();

  }, []);


  const loadZones = async () => {

    const zoneSet = new Set<string>();


    for (const layerName of LAYERS) {

      try {

        const config =
          LAYER_CONFIG[layerName];

        const layer =
          new FeatureLayer({
            url: config.url
          });


        const query =
          layer.createQuery();

        query.where = "1=1";

        query.outFields = [
          config.zoneField
        ];

        query.returnGeometry = false;

        query.returnDistinctValues = true;


        const result =
          await layer.queryFeatures(query);


        result.features.forEach(
          feature => {

            const value =
              feature.attributes[
                config.zoneField
              ];


            if (
              value !== null &&
              value !== undefined &&
              `${value}`.trim() !== ""
            ) {

              zoneSet.add(
                `${value}`
              );

            }

          }
        );

      } catch (error) {

        console.error(
          `Zone loading error - ${layerName}`,
          error
        );

      }

    }


    const zones =
      Array.from(zoneSet).sort(
        (a, b) =>
          Number(a) - Number(b)
      );


    setZoneOptions(zones);

  };


  /* =========================================================
     BUILD WHERE
     ========================================================= */

  const getWhere = (
    layerName: string
  ) => {

    const config =
      LAYER_CONFIG[layerName];


    if (
      zoneFilter === "All" ||
      !zoneFilter
    ) {

      return "1=1";

    }


    return `${config.zoneField} = '${zoneFilter.replace(
      /'/g,
      "''"
    )}'`;

  };


  /* =========================================================
     FETCH SUMMARY
     ========================================================= */

  const fetchSummary = async () => {

    setLoading(true);


    try {

      const zoneData:
        Record<string, ZoneSummary> = {};


      const createIfMissing = (
        zone: string
      ) => {

        if (!zoneData[zone]) {

          zoneData[zone] =
            createZone(zone);

        }

      };


      /* -----------------------------------------------------
         PROCESS EACH LAYER
         ----------------------------------------------------- */

      for (
        const layerName of LAYERS
      ) {

        const config =
          LAYER_CONFIG[layerName];


        try {

          const layer =
            new FeatureLayer({
              url: config.url
            });


          const query =
            layer.createQuery();


          query.where =
            getWhere(layerName);

          query.returnGeometry =
            false;


          /* =================================================
             STATUS LAYER
             ================================================= */

          if (config.statusField) {

            query.outFields = [
              config.zoneField,
              config.statusField
            ];


            query.outStatistics = [
              {
                statisticType: "count",
                onStatisticField: "OBJECTID",
                outStatisticFieldName: "feature_count"
              }
            ];


            query.groupByFieldsForStatistics = [
              config.zoneField,
              config.statusField
            ];


            const result =
              await layer.queryFeatures(query);


            result.features.forEach(
              feature => {

                const attributes =
                  feature.attributes;


                const zoneValue =
                  attributes[
                    config.zoneField
                  ];


                if (
                  zoneValue === null ||
                  zoneValue === undefined
                ) {

                  return;

                }


                const zone =
                  `${zoneValue}`;


                createIfMissing(zone);


                const count =
                  Number(
                    attributes.feature_count
                  ) || 0;


                const rawStatus =
                  attributes[
                    config.statusField
                  ];


                const status =
                  `${rawStatus ?? ""}`.trim();


                let statusName:
                  keyof LayerStatus =
                  "Blank";


                /* Standard operational status */

                if (
                  STATUS_MAP[status]
                ) {

                  statusName =
                    STATUS_MAP[
                      status
                    ] as keyof LayerStatus;

                }

                /* Yes / Newly Added */

                else if (
                  status.toLowerCase() ===
                    "yes" ||
                  status.toLowerCase() ===
                    "newly added"
                ) {

                  statusName =
                    "Active";

                }


                zoneData[zone]
                  .layers[layerName]
                  [statusName] += count;


                zoneData[zone]
                  .layers[layerName]
                  .Total += count;


                if (
                  statusName === "Active"
                ) {

                  zoneData[zone]
                    .active += count;

                }

                else if (
                  statusName === "Inactive"
                ) {

                  zoneData[zone]
                    .inactive += count;

                }

                else {

                  zoneData[zone]
                    .blank += count;

                }


                zoneData[zone]
                  .total += count;

              }
            );

          }


          /* =================================================
             NORMAL TOTAL-ONLY LAYER
             ================================================= */

          else {

            query.outStatistics = [
              {
                statisticType: "count",
                onStatisticField: "OBJECTID",
                outStatisticFieldName: "feature_count"
              }
            ];


            query.groupByFieldsForStatistics = [
              config.zoneField
            ];


            const result =
              await layer.queryFeatures(query);


            result.features.forEach(
              feature => {

                const attributes =
                  feature.attributes;


                const zoneValue =
                  attributes[
                    config.zoneField
                  ];


                if (
                  zoneValue === null ||
                  zoneValue === undefined
                ) {

                  return;

                }


                const zone =
                  `${zoneValue}`;


                createIfMissing(zone);


                const count =
                  Number(
                    attributes.feature_count
                  ) || 0;


                zoneData[zone]
                  .layers[layerName]
                  .Total += count;


                zoneData[zone]
                  .total += count;

              }
            );

          }

        } catch (error) {

          console.error(
            `Error querying ${layerName}`,
            error
          );

        }

      }


      /* =====================================================
         SORT
         ===================================================== */

      const data =
        Object.values(zoneData).sort(
          (a, b) =>
            Number(a.zone) -
            Number(b.zone)
        );


      /* =====================================================
         OVERALL
         ===================================================== */

      const layerWise:
        Record<string, LayerStatus> = {};


      LAYERS.forEach(layer => {

        layerWise[layer] =
          emptyLayerStatus();

      });


      let totalAssets = 0;

      let active = 0;

      let inactive = 0;

      let blank = 0;


      data.forEach(zone => {

        totalAssets += zone.total;

        active += zone.active;

        inactive += zone.inactive;

        blank += zone.blank;


        LAYERS.forEach(layer => {

          layerWise[layer].Active +=
            zone.layers[layer].Active;

          layerWise[layer].Inactive +=
            zone.layers[layer].Inactive;

          layerWise[layer].Blank +=
            zone.layers[layer].Blank;

          layerWise[layer].Total +=
            zone.layers[layer].Total;

        });

      });


      setFilteredData(data);


      setOverall({

        totalZones:
          data.length,

        totalAssets,

        active,

        inactive,

        blank,

        layerWise

      });

    } catch (error) {

      console.error(
        "Summary error:",
        error
      );

    } finally {

      setLoading(false);

    }

  };


  /* =========================================================
     RESET
     ========================================================= */

  const resetDashboard = () => {

    setZoneFilter("All");

    setFilteredData([]);

    setOverall({

      totalZones: 0,

      totalAssets: 0,

      active: 0,

      inactive: 0,

      blank: 0,

      layerWise: {}

    });

  };


  /* =========================================================
     EXCEL
     ========================================================= */

  const exportExcel = () => {

    if (!filteredData.length) {

      return;

    }


    const rows: any[] = [];


    const header = [
      "Zone"
    ];


    LAYERS.forEach(layer => {

      header.push(
        `${layer} Active`
      );

      header.push(
        `${layer} Inactive`
      );

      header.push(
        `${layer} Blank`
      );

      header.push(
        `${layer} Total`
      );

    });


    header.push(
      "Active Total"
    );

    header.push(
      "Inactive Total"
    );

    header.push(
      "Blank Total"
    );

    header.push(
      "Zone Total"
    );


    rows.push(header);


    filteredData.forEach(zone => {

      const row: any[] = [
        zone.zone
      ];


      LAYERS.forEach(layer => {

        const data =
          zone.layers[layer];


        row.push(
          data.Active
        );

        row.push(
          data.Inactive
        );

        row.push(
          data.Blank
        );

        row.push(
          data.Total
        );

      });


      row.push(zone.active);

      row.push(zone.inactive);

      row.push(zone.blank);

      row.push(zone.total);


      rows.push(row);

    });


    const worksheet =
      XLSX.utils.aoa_to_sheet(rows);


    worksheet["!cols"] =
      header.map(() => ({
        wch: 16
      }));


    const workbook =
      XLSX.utils.book_new();


    XLSX.utils.book_append_sheet(
      workbook,
      worksheet,
      "Zone Summary"
    );


    XLSX.writeFile(
      workbook,
      `Zone_Wise_Summary_${zoneFilter}.xlsx`
    );

  };


  /* =========================================================
     PDF
     ========================================================= */

  const exportPDF = () => {

    if (!filteredData.length) {

      return;

    }


    const doc =
      new jsPDF(
        "landscape",
        "mm",
        "a3"
      );


    doc.setFontSize(18);

    doc.text(
      "Zone-wise Operational Summary",
      15,
      15
    );


    doc.setFontSize(9);

    doc.text(
      `Zone: ${zoneFilter}`,
      15,
      22
    );


    const head = [
      [
        "Zone",
        ...LAYERS.flatMap(
          layer => [
            `${layer} A`,
            `${layer} I`,
            `${layer} B`,
            `${layer} T`
          ]
        ),
        "Active",
        "Inactive",
        "Blank",
        "Total"
      ]
    ];


    const body =
      filteredData.map(
        zone => [

          zone.zone,

          ...LAYERS.flatMap(
            layer => {

              const data =
                zone.layers[layer];

              return [
                data.Active,
                data.Inactive,
                data.Blank,
                data.Total
              ];

            }
          ),

          zone.active,
          zone.inactive,
          zone.blank,
          zone.total

        ]
      );


    (doc as any).autoTable({

      head,

      body,

      startY: 28,

      theme: "grid",

      styles: {
        fontSize: 4,
        cellPadding: 1
      },

      headStyles: {
        fontSize: 4,
        fontStyle: "bold"
      }

    });


    doc.save(
      `Zone_Wise_Summary_${zoneFilter}.pdf`
    );

  };


  /* =========================================================
     RENDER
     ========================================================= */

  return (

    <div className="zone-dashboard">


      {/* =====================================================
          TOP HEADER
          ===================================================== */}

      <div className="dashboard-header">

        <div className="header-left">

          <div className="header-icon">

            <BarChart3 size={24} />

          </div>


          <div>

            <div className="dashboard-title">

              Zone-wise Summary

            </div>


            <div className="dashboard-subtitle">

              Operational Asset Monitoring

            </div>

          </div>

        </div>


        <div className="header-layer-count">

          {LAYERS.length} Layers

        </div>

      </div>


      {/* =====================================================
          FILTER BAR
          ===================================================== */}

      <div className="filter-card">

        <div className="filter-title">

          Zone Selection

        </div>


        <Select
          value={zoneFilter}
          onChange={(e) =>
            setZoneFilter(
              e.target.value
            )
          }
          className="modern-zone-select"
          size="small"
        >

          <MenuItem value="All">
            All Zones
          </MenuItem>


          {zoneOptions.map(
            zone => (

              <MenuItem
                key={zone}
                value={zone}
              >

                Zone {zone}

              </MenuItem>

            )
          )}

        </Select>


        <Button
          variant="contained"
          className="modern-fetch-button"
          onClick={fetchSummary}
          disabled={loading}
          startIcon={
            <BarChart3 size={17} />
          }
        >

          {loading
            ? "Loading..."
            : "View Summary"}

        </Button>


        <Button
          variant="outlined"
          className="modern-reset-button"
          onClick={resetDashboard}
          startIcon={
            <RefreshCcw size={16} />
          }
        >

          Reset

        </Button>


        <div className="export-area">

          <Button
            variant="outlined"
            className="excel-button"
            onClick={exportExcel}
            disabled={
              filteredData.length === 0
            }
            startIcon={
              <Download size={16} />
            }
          >

            Excel

          </Button>


          <Button
            variant="outlined"
            className="pdf-button"
            onClick={exportPDF}
            disabled={
              filteredData.length === 0
            }
            startIcon={
              <FileText size={16} />
            }
          >

            PDF

          </Button>

        </div>

      </div>


      {/* =====================================================
          KPI CARDS
          ===================================================== */}

      {filteredData.length > 0 && (

        <div className="kpi-grid">


          <div className="kpi-card kpi-zone">

            <div className="kpi-label">

              Zones

            </div>

            <div className="kpi-value">

              {overall.totalZones}

            </div>

          </div>


          <div className="kpi-card kpi-total">

            <div className="kpi-label">

              Total Assets

            </div>

            <div className="kpi-value">

              {overall.totalAssets.toLocaleString()}

            </div>

          </div>


          <div className="kpi-card kpi-active">

            <div className="kpi-label">

              Active

            </div>

            <div className="kpi-value">

              {overall.active.toLocaleString()}

            </div>

          </div>


          <div className="kpi-card kpi-inactive">

            <div className="kpi-label">

              Inactive

            </div>

            <div className="kpi-value">

              {overall.inactive.toLocaleString()}

            </div>

          </div>


          <div className="kpi-card kpi-blank">

            <div className="kpi-label">

              Blank

            </div>

            <div className="kpi-value">

              {overall.blank.toLocaleString()}

            </div>

          </div>

        </div>

      )}


      {/* =====================================================
          TABLE
          ===================================================== */}

      <div className="table-card">

        <div className="table-title-row">

          <div>

            <div className="table-title">

              Zone-wise Layer Count

            </div>

            <div className="table-subtitle">

              Active, inactive, blank and total
              feature counts

            </div>

          </div>


          <div className="record-count">

            {filteredData.length} Zones

          </div>

        </div>


        <TableContainer
          component={Paper}
          className="modern-table-container"
        >

          <Table
            stickyHeader
            className="modern-table"
          >

            <TableHead>

              <TableRow>

                <TableCell className="zone-header">

                  Zone

                </TableCell>


                {LAYERS.map(
                  layer => (

                    <React.Fragment
                      key={layer}
                    >

                      <TableCell className="active-header">
                        {layer}
                        <span>
                          Active
                        </span>
                      </TableCell>


                      <TableCell className="inactive-header">
                        {layer}
                        <span>
                          Inactive
                        </span>
                      </TableCell>


                      <TableCell className="blank-header">
                        {layer}
                        <span>
                          Blank
                        </span>
                      </TableCell>


                      <TableCell className="total-header">
                        {layer}
                        <span>
                          Total
                        </span>
                      </TableCell>

                    </React.Fragment>

                  )
                )}


                <TableCell className="active-header">
                  Active
                </TableCell>


                <TableCell className="inactive-header">
                  Inactive
                </TableCell>


                <TableCell className="blank-header">
                  Blank
                </TableCell>


                <TableCell className="total-header">
                  Total
                </TableCell>

              </TableRow>

            </TableHead>


            <TableBody>

              {filteredData.map(
                zone => (

                  <TableRow
                    key={zone.zone}
                    className="data-row"
                  >

                    <TableCell className="zone-value">

                      <span className="zone-pill">

                        {zone.zone}

                      </span>

                    </TableCell>


                    {LAYERS.map(
                      layer => {

                        const data =
                          zone.layers[layer];


                        return (

                          <React.Fragment
                            key={layer}
                          >

                            <TableCell className="active-cell">
                              {data.Active}
                            </TableCell>


                            <TableCell className="inactive-cell">
                              {data.Inactive}
                            </TableCell>


                            <TableCell className="blank-cell">
                              {data.Blank}
                            </TableCell>


                            <TableCell className="total-cell">
                              {data.Total}
                            </TableCell>

                          </React.Fragment>

                        );

                      }
                    )}


                    <TableCell className="active-cell main-total">
                      {zone.active}
                    </TableCell>


                    <TableCell className="inactive-cell main-total">
                      {zone.inactive}
                    </TableCell>


                    <TableCell className="blank-cell main-total">
                      {zone.blank}
                    </TableCell>


                    <TableCell className="total-cell main-total">
                      {zone.total}
                    </TableCell>

                  </TableRow>

                )
              )}


              {filteredData.length === 0 && (

                <TableRow>

                  <TableCell
                    colSpan={
                      1 +
                      LAYERS.length * 4 +
                      4
                    }
                    className="empty-table"
                  >

                    <div className="empty-icon">

                      <BarChart3 size={32} />

                    </div>

                    <div>

                      Select a zone and click
                      <strong>
                        {" "}View Summary
                      </strong>

                    </div>

                  </TableCell>

                </TableRow>

              )}

            </TableBody>

          </Table>

        </TableContainer>

      </div>


      {/* =====================================================
          OVERALL SUMMARY
          ===================================================== */}

      {filteredData.length > 0 && (

        <div className="overall-card">

          <div className="overall-header">

            <div>

              <div className="overall-title">

                Overall Summary

              </div>

              <div className="overall-subtitle">

                Consolidated layer-wise operational status

              </div>

            </div>

          </div>


          <div className="layer-summary-grid">

            {LAYERS.map(
              layer => {

                const data =
                  overall.layerWise[
                    layer
                  ] || emptyLayerStatus();


                return (

                  <div
                    className="layer-summary-card"
                    key={layer}
                  >

                    <div className="layer-card-title">

                      {layer}

                    </div>


                    <div className="layer-total">

                      {data.Total.toLocaleString()}

                    </div>


                    {LAYER_CONFIG[
                      layer
                    ].statusField && (

                      <div className="status-mini-row">

                        <span className="mini-active">
                          Active
                          <b>
                            {data.Active}
                          </b>
                        </span>


                        <span className="mini-inactive">
                          Inactive
                          <b>
                            {data.Inactive}
                          </b>
                        </span>


                        <span className="mini-blank">
                          Blank
                          <b>
                            {data.Blank}
                          </b>
                        </span>

                      </div>

                    )}


                    {!LAYER_CONFIG[
                      layer
                    ].statusField && (

                      <div className="total-only-label">

                        Total Features

                      </div>

                    )}

                  </div>

                );

              }
            )}

          </div>

        </div>

      )}

    </div>

  );

};


export default ZoneSummaryWidget;