import React, { useEffect, useRef } from "react";
import { PmsGrid } from "./index";
import { initPopover } from "./GridService";
import PmsHeaderOption from "./PmsHeaderOption";

/**
 * CIVIL BOQ / INVENTORY DEMO DATA
 * Each row = BOQ item, grouped by "Category"
 */
const boqData = [
  {
    id: 1,
    category: "Concrete Works",
    itemCode: "C-001",
    description: "M20 Concrete for foundation",
    unit: "Cum",
    quantity: 120,
    rate: 5200,
    site: "Green City - Tower A",
    vendor: "UltraTech",
    status: "Completed",
  },
  {
    id: 2,
    category: "Concrete Works",
    itemCode: "C-002",
    description: "M25 Concrete for columns",
    unit: "Cum",
    quantity: 80,
    rate: 5600,
    site: "Green City - Tower B",
    vendor: "ACC",
    status: "In Progress",
  },
  {
    id: 3,
    category: "Steel Reinforcement",
    itemCode: "S-101",
    description: "TMT Bars Fe500 (10mm)",
    unit: "MT",
    quantity: 15,
    rate: 64000,
    site: "Skyline Heights - Wing C",
    vendor: "JSW Steel",
    status: "Pending",
  },
  {
    id: 4,
    category: "Steel Reinforcement",
    itemCode: "S-102",
    description: "TMT Bars Fe500 (16mm)",
    unit: "MT",
    quantity: 25,
    rate: 64500,
    site: "Skyline Heights - Wing D",
    vendor: "TATA Steel",
    status: "In Progress",
  },
  {
    id: 5,
    category: "Masonry Works",
    itemCode: "M-001",
    description: "Brick Masonry 230mm thick wall",
    unit: "Sqm",
    quantity: 280,
    rate: 900,
    site: "Sunshine Plaza",
    vendor: "Shree Bricks",
    status: "Completed",
  },
  {
    id: 6,
    category: "Masonry Works",
    itemCode: "M-002",
    description: "Block Masonry AAC 200mm wall",
    unit: "Sqm",
    quantity: 240,
    rate: 1100,
    site: "Green City",
    vendor: "Ambuja Blocks",
    status: "Pending",
  },
  {
    id: 7,
    category: "Plastering Works",
    itemCode: "P-001",
    description: "Internal Plaster 12mm thick",
    unit: "Sqm",
    quantity: 1200,
    rate: 250,
    site: "Skyline Heights",
    vendor: "L&T Finishes",
    status: "Completed",
  },
  {
    id: 8,
    category: "Plastering Works",
    itemCode: "P-002",
    description: "External Plaster 20mm thick",
    unit: "Sqm",
    quantity: 800,
    rate: 320,
    site: "Sunshine Plaza",
    vendor: "Hindustan Plaster",
    status: "In Progress",
  },
  {
    id: 9,
    category: "Flooring Works",
    itemCode: "F-001",
    description: "Vitrified Tiles 600x600mm",
    unit: "Sqm",
    quantity: 600,
    rate: 650,
    site: "Green City - Clubhouse",
    vendor: "Kajaria",
    status: "Pending",
  },
  {
    id: 10,
    category: "Flooring Works",
    itemCode: "F-002",
    description: "Granite Flooring 20mm thick",
    unit: "Sqm",
    quantity: 300,
    rate: 1250,
    site: "Skyline Heights - Lobby",
    vendor: "Classic Stone",
    status: "Completed",
  },
  {
    id: 11,
    category: "Electrical Works",
    itemCode: "E-001",
    description: "PVC Conduit 25mm dia",
    unit: "Mtr",
    quantity: 1500,
    rate: 45,
    site: "Eco Towers",
    vendor: "Finolex",
    status: "In Progress",
  },
  {
    id: 12,
    category: "Electrical Works",
    itemCode: "E-002",
    description: "Copper Wire 4 sqmm",
    unit: "Mtr",
    quantity: 2000,
    rate: 65,
    site: "Skyline Heights",
    vendor: "Polycab",
    status: "Completed",
  },
  {
    id: 13,
    category: "Plumbing Works",
    itemCode: "PL-001",
    description: "CPVC Pipe 25mm dia",
    unit: "Mtr",
    quantity: 1000,
    rate: 120,
    site: "Green City - Tower C",
    vendor: "Astral Pipes",
    status: "Pending",
  },
  {
    id: 14,
    category: "Plumbing Works",
    itemCode: "PL-002",
    description: "UPVC Pipe 40mm dia",
    unit: "Mtr",
    quantity: 800,
    rate: 100,
    site: "Sunshine Plaza",
    vendor: "Supreme Industries",
    status: "In Progress",
  },
  {
    id: 15,
    category: "Painting Works",
    itemCode: "PA-001",
    description: "Interior Emulsion Paint",
    unit: "Ltr",
    quantity: 500,
    rate: 180,
    site: "Skyline Heights",
    vendor: "Asian Paints",
    status: "Completed",
  },
  {
    id: 16,
    category: "Painting Works",
    itemCode: "PA-002",
    description: "Exterior Weatherproof Paint",
    unit: "Ltr",
    quantity: 400,
    rate: 220,
    site: "Green City - Tower D",
    vendor: "Berger Paints",
    status: "Pending",
  },
  {
    id: 17,
    category: "Waterproofing Works",
    itemCode: "W-001",
    description: "Cementitious Coating 2 layers",
    unit: "Sqm",
    quantity: 350,
    rate: 480,
    site: "Sunshine Plaza",
    vendor: "Dr. Fixit",
    status: "Completed",
  },
  {
    id: 18,
    category: "Waterproofing Works",
    itemCode: "W-002",
    description:
      "Polyurethane Waterproofing Membrane Polyurethane Waterproofing Membrane",
    unit: "Sqm",
    quantity: 200,
    rate: 850,
    site: "Green City - Podium",
    vendor: "Pidilite",
    status: "In Progress",
  },
  {
    id: 19,
    category: "HVAC Works",
    itemCode: "H-001",
    description: "Ducting for AHU system",
    unit: "Sqm",
    quantity: 250,
    rate: 2100,
    site: "Skyline Heights - Basement",
    vendor: "Blue Star",
    status: "Pending",
  },
  {
    id: 20,
    category: "HVAC Works",
    itemCode: "H-002",
    description: "VRF Indoor Unit Installation",
    unit: "Nos",
    quantity: 30,
    rate: 42000,
    site: "Eco Towers",
    vendor: "Daikin",
    status: "Completed",
  },
  {
    id: 21,
    category: "Plumbing Works",
    itemCode: "PL-003",
    description: "CP Fittings - Wash Basin Mixer",
    unit: "Nos",
    quantity: 50,
    rate: 950,
    site: "Skyline Heights",
    vendor: "Jaquar",
    status: "Completed",
  },
  {
    id: 22,
    category: "Electrical Works",
    itemCode: "E-003",
    description: "LED Downlight 12W",
    unit: "Nos",
    quantity: 120,
    rate: 750,
    site: "Green City - Tower B",
    vendor: "Philips",
    status: "Pending",
  },
  {
    id: 23,
    category: "Flooring Works",
    itemCode: "F-003",
    description: "Wooden Flooring 12mm laminate",
    unit: "Sqm",
    quantity: 150,
    rate: 1450,
    site: "Sunshine Plaza - Office",
    vendor: "Pergo",
    status: "In Progress",
  },
  {
    id: 24,
    category: "Concrete Works",
    itemCode: "C-003",
    description: "PCC 1:4:8 flooring",
    unit: "Cum",
    quantity: 60,
    rate: 4800,
    site: "Eco Towers",
    vendor: "RMC Readymix",
    status: "Completed",
  },
  {
    id: 25,
    category: "Masonry Works",
    itemCode: "M-003",
    description: "Stone masonry in foundation",
    unit: "Cum",
    quantity: 45,
    rate: 3500,
    site: "Green City - Tower C",
    vendor: "Shree Bricks",
    status: "In Progress",
  },
  {
    id: 26,
    category: "Carpentry Works",
    itemCode: "CP-001",
    description: "Flush Door with Laminate Finish",
    unit: "Nos",
    quantity: 80,
    rate: 6500,
    site: "Skyline Heights",
    vendor: "Greenply",
    status: "Completed",
  },
  {
    id: 27,
    category: "Carpentry Works",
    itemCode: "CP-002",
    description: "Modular Kitchen Cabinets",
    unit: "Set",
    quantity: 25,
    rate: 42000,
    site: "Sunshine Plaza",
    vendor: "Godrej Interio",
    status: "Pending",
  },
  {
    id: 28,
    category: "Glazing Works",
    itemCode: "G-001",
    description: "Aluminium Window Frame with Glass",
    unit: "Sqm",
    quantity: 180,
    rate: 1850,
    site: "Green City - Tower D",
    vendor: "Saint Gobain",
    status: "In Progress",
  },
  {
    id: 29,
    category: "Glazing Works",
    itemCode: "G-002",
    description: "Toughened Glass Door 12mm",
    unit: "Sqm",
    quantity: 60,
    rate: 2750,
    site: "Skyline Heights - Lobby",
    vendor: "Modiguard",
    status: "Completed",
  },
  {
    id: 30,
    category: "External Development",
    itemCode: "ED-001",
    description: "Paver Block 60mm thick",
    unit: "Sqm",
    quantity: 950,
    rate: 380,
    site: "Sunshine Plaza",
    vendor: "Ultra Pavers",
    status: "Pending",
  },
  {
    id: 31,
    category: "External Development",
    itemCode: "ED-002",
    description: "Kerb Stone 300x300mm",
    unit: "Rm",
    quantity: 200,
    rate: 240,
    site: "Green City - Parking Area",
    vendor: "L&T Infra",
    status: "Completed",
  },
  {
    id: 32,
    category: "Electrical Works",
    itemCode: "E-004",
    description: "Distribution Board with MCB",
    unit: "Nos",
    quantity: 25,
    rate: 6200,
    site: "Skyline Heights",
    vendor: "Legrand",
    status: "In Progress",
  },
  {
    id: 33,
    category: "Plastering Works",
    itemCode: "P-003",
    description: "Ceiling POP Finish",
    unit: "Sqm",
    quantity: 950,
    rate: 210,
    site: "Green City - Tower A",
    vendor: "L&T Finishes",
    status: "Completed",
  },
  {
    id: 34,
    category: "Painting Works",
    itemCode: "PA-003",
    description: "Metal Primer + Enamel Paint",
    unit: "Ltr",
    quantity: 350,
    rate: 160,
    site: "Sunshine Plaza - Basement",
    vendor: "Nerolac Paints",
    status: "In Progress",
  },
  {
    id: 35,
    category: "HVAC Works",
    itemCode: "H-003",
    description: "Duct Insulation 50mm thick",
    unit: "Sqm",
    quantity: 120,
    rate: 540,
    site: "Eco Towers",
    vendor: "Blue Star",
    status: "Pending",
  },
  {
    id: 36,
    category: "Plumbing Works",
    itemCode: "PL-004",
    description: "Overhead Water Tank Installation",
    unit: "Nos",
    quantity: 3,
    rate: 45000,
    site: "Green City - Tower B",
    vendor: "Sintex",
    status: "Completed",
  },
  {
    id: 37,
    category: "Electrical Works",
    itemCode: "E-005",
    description: "Earthing Pit with GI Plate",
    unit: "Nos",
    quantity: 6,
    rate: 9500,
    site: "Skyline Heights",
    vendor: "KEI",
    status: "Completed",
  },
  {
    id: 38,
    category: "Concrete Works",
    itemCode: "C-004",
    description: "M30 Concrete for beams",
    unit: "Cum",
    quantity: 95,
    rate: 5800,
    site: "Eco Towers - Basement",
    vendor: "RMC Readymix",
    status: "In Progress",
  },
  {
    id: 39,
    category: "Masonry Works",
    itemCode: "M-004",
    description: "Cement Mortar 1:4 plaster backing",
    unit: "Sqm",
    quantity: 700,
    rate: 180,
    site: "Skyline Heights - Wing E",
    vendor: "Ambuja Blocks",
    status: "Completed",
  },
  {
    id: 40,
    category: "Flooring Works",
    itemCode: "F-004",
    description: "Marble Flooring 20mm thick",
    unit: "Sqm",
    quantity: 260,
    rate: 2100,
    site: "Green City - Tower D",
    vendor: "Classic Stone",
    status: "Pending",
  },
  {
    id: 41,
    category: "Carpentry Works",
    itemCode: "CP-003",
    description: "Wardrobe with Laminate Finish",
    unit: "Nos",
    quantity: 40,
    rate: 18500,
    site: "Sunshine Plaza",
    vendor: "Durian",
    status: "Completed",
  },
  {
    id: 42,
    category: "Glazing Works",
    itemCode: "G-003",
    description: "Spider Glass Façade System",
    unit: "Sqm",
    quantity: 150,
    rate: 3550,
    site: "Eco Towers",
    vendor: "Saint Gobain",
    status: "In Progress",
  },
  {
    id: 43,
    category: "Waterproofing Works",
    itemCode: "W-003",
    description: "Bituminous Membrane Layer 3mm",
    unit: "Sqm",
    quantity: 400,
    rate: 620,
    site: "Skyline Heights - Terrace",
    vendor: "Dr. Fixit",
    status: "Completed",
  },
  {
    id: 44,
    category: "External Development",
    itemCode: "ED-003",
    description: "RCC Drain Construction",
    unit: "Rm",
    quantity: 180,
    rate: 950,
    site: "Green City - Service Road",
    vendor: "L&T Infra",
    status: "In Progress",
  },
  {
    id: 45,
    category: "Electrical Works",
    itemCode: "E-006",
    description: "Street Light Pole 9m",
    unit: "Nos",
    quantity: 25,
    rate: 18500,
    site: "Sunshine Plaza - Entry Road",
    vendor: "Polycab",
    status: "Pending",
  },
  {
    id: 46,
    category: "Painting Works",
    itemCode: "PA-004",
    description: "Texture Finish Coating",
    unit: "Sqm",
    quantity: 320,
    rate: 480,
    site: "Green City - Clubhouse",
    vendor: "Asian Paints",
    status: "In Progress",
  },
  {
    id: 47,
    category: "Flooring Works",
    itemCode: "F-005",
    description: "Epoxy Flooring 3mm thick",
    unit: "Sqm",
    quantity: 150,
    rate: 850,
    site: "Skyline Heights - Basement",
    vendor: "Pidilite",
    status: "Completed",
  },
  {
    id: 48,
    category: "Plumbing Works",
    itemCode: "PL-005",
    description: "Bathroom CP fittings set",
    unit: "Set",
    quantity: 40,
    rate: 5400,
    site: "Eco Towers",
    vendor: "Hindware",
    status: "Completed",
  },
  {
    id: 49,
    category: "Concrete Works",
    itemCode: "C-005",
    description: "Ready Mix M40 Concrete",
    unit: "Cum",
    quantity: 60,
    rate: 6100,
    site: "Green City - Tower E",
    vendor: "ACC",
    status: "Pending",
  },
  {
    id: 50,
    category: "External Development",
    itemCode: "ED-004",
    description: "Compound Wall RCC Precast",
    unit: "Rm",
    quantity: 300,
    rate: 1750,
    site: "Sunshine Plaza - Boundary",
    vendor: "UltraTech",
    status: "Completed",
  },
];

/**
 * COLUMN DEFINITIONS
 */
const boqColumns = [
  {
    key: "itemCode",
    title: "Item Code",
    sortable: true,
    pinned: "left",
    className: "text-start",
  },
  {
    key: "description",
    title: "Description",
    sortable: true,
    width: 300,
    className: "text-start",
  },
  {
    key: "category",
    title: "Category",
    sortable: true,
    className: "text-start",
  },
  { key: "unit", title: "Unit", width: 80, className: "text-ceter" },
  {
    key: "quantity",
    title: "Qty",
    sortable: true,
    width: 100,
    className: "text-cnter px-2",
  },
  {
    key: "rate",
    title: "Rate (₹)",
    sortable: true,
    width: 120,
    className: "text-end",
    render: (r) => <span>₹{r.rate.toLocaleString()}</span>,
  },
  {
    key: "amount",
    title: "Amount (₹)",
    sortable: true,
    width: 130,
    className: "text-end",
    render: (r) => (
      <span className="fw-semibold text-end px-2 py-12">
        ₹{(r.quantity * r.rate).toLocaleString()}
      </span>
    ),
    aggregate: (vals) =>
      "₹" + vals.reduce((sum, val) => sum + val, 0).toLocaleString(),
  },
  {
    key: "vendor",
    title: "Vendor",
    sortable: true,
    width: 180,
    className: "text-start",
  },
  {
    key: "site",
    title: "Site Location",
    sortable: true,
    width: 200,
    className: "text-start",
  },
  {
    key: "status",
    title: "Status",
    sortable: true,
    width: 120,
    className: "text-center",
    render: (r) => (
      <span
        className={`badge bg-label-${
          r.status === "Completed"
            ? "success"
            : r.status === "Pending"
            ? "warning"
            : "info"
        }`}
      >
        {r.status}
      </span>
    ),
  },
];

/**
 * DEMO COMPONENT
 */
export default function DemoBOQGrid() {
  useEffect(() => {
    initPopover();
  }, []);
  const wrapperRef = useRef();
  useEffect(() => {
    if (!wrapperRef.current) return;
    const ps = new PerfectScrollbar(wrapperRef.current, {
      wheelPropagation: false,
      suppressScrollX: false,
    });
    return () => ps.destroy();
  }, []);

  const container = document.getElementById("mainContainer");
  const trigger = document.getElementById("dropdownBtn");
  const dropdown = document.getElementById("dropdownMenu");

  return (
    <div className="container-fluid py-3">
      <div className="card p-3">
        <div id="mainContainer" class="container-box">
          <button id="dropdownBtn" class="btn">
            Open Dropdown
          </button>

          <div id="dropdownMenu" class="dropdown-menu">
            <div>Option 1</div>
            <div>Option 2</div>
            <div>Option 3</div>
          </div>
        </div>

        <PmsGrid
          data={boqData.map((r) => ({
            ...r,
            amount: r.quantity * r.rate,
          }))}
          columns={boqColumns}
          features={{
            search: true,
            selection: true,
            pagination: true,
            export: true,
            pinning: true,
            resizing: true,
            reorder: true,
            columnVisibility: true,
            pageSizeSelector: true,
            groupByKey: "status",
            aggregation: true,
            expand: true,
            maxHeight: "70vh",
            actions: [
              {
                label: "Edit",
                icon: "bx-edit ",
                onClick: (row,ind,column) => console.log("Edit", row,ind,column),
              },
              {
                label: "Delete",
                icon: "bx-trash text-danger",
                onClick: (row) => console.log("Delete", row),
              },
            ],
          }}
          renderExpanded={(row) => (
            <div className="p-3 bg-light border rounded">
              <h6 className="fw-semibold mb-2">Item Details</h6>
              <div className="row small">
                <div className="col-md-4 mb-2">
                  <strong>Item Code:</strong> {row.itemCode}
                </div>
                <div className="col-md-4 mb-2">
                  <strong>Category:</strong> {row.category}
                </div>
                <div className="col-md-4 mb-2">
                  <strong>Unit:</strong> {row.unit}
                </div>
                <div className="col-md-4 mb-2">
                  <strong>Quantity:</strong> {row.quantity}
                </div>
                <div className="col-md-4 mb-2">
                  <strong>Rate:</strong> ₹{row.rate.toLocaleString()}
                </div>
                <div className="col-md-4 mb-2">
                  <strong>Total Amount:</strong>{" "}
                  <span className="text-success fw-semibold">
                    ₹{(row.quantity * row.rate).toLocaleString()}
                  </span>
                </div>
                <div className="col-md-6 mb-2">
                  <strong>Vendor:</strong> {row.vendor}
                </div>
                <div className="col-md-6 mb-2">
                  <strong>Site Location:</strong> {row.site}
                </div>
                <div className="col-md-12">
                  <strong>Status:</strong>{" "}
                  <span
                    className={`badge bg-${
                      row.status === "Completed"
                        ? "success"
                        : row.status === "Pending"
                        ? "warning"
                        : "info"
                    }`}
                  >
                    {row.status}
                  </span>
                </div>
              </div>
            </div>
          )}
        />
      </div>
    </div>
  );
}
