import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from "react";
import { GridLayout, useContainerWidth, verticalCompactor, type Layout, type LayoutItem } from "react-grid-layout";
import { containerBounds, gridBounds, minMaxSize } from "react-grid-layout/core";
import {
  movePanel,
  panelNavItem,
  resizePanel,
  setPanelVisible,
  type DashboardLayout,
  type DashboardPanel,
  type PanelWidth,
} from "./dashboard-layout";
import {
  applyGridPlacement,
  gridColumnsForContainer,
  placementsForLayout,
  rowsForContent,
  snapGridWidth,
  type GridColumns,
  type GridPlacement,
} from "./dashboard-grid";

const ROW_HEIGHT = 8;
const GRID_MARGIN = 12;
const WIDTHS: PanelWidth[] = [4, 6, 8, 12];

export function DashboardEditor({
  layout,
  onCommit,
  onHide,
  renderPanel,
  panelDomId,
}: {
  layout: DashboardLayout;
  onCommit: (next: DashboardLayout, message: string) => void;
  onHide: (panel: DashboardPanel) => void;
  renderPanel: (panel: DashboardPanel) => ReactNode;
  panelDomId: (panel: DashboardPanel) => string;
}) {
  const { width, containerRef } = useContainerWidth({ initialWidth: 1200 });
  const gridWidth = width > 0 ? width : 1200;
  const columns = gridColumnsForContainer(gridWidth);
  const [heights, setHeights] = useState<Record<string, number>>({});
  const [live, setLive] = useState<GridPlacement[]>(() => placementsForLayout(layout, columns));
  const [restoreOpen, setRestoreOpen] = useState(false);
  const interacting = useRef(false);
  const gridRef = useRef<HTMLDivElement | null>(null);
  const visible = layout.panels.filter((panel) => panel.visible);
  const hidden = layout.panels.filter((panel) => !panel.visible);
  const placementKey = placementsForLayout(layout, columns, heights)
    .map((item) => `${item.i}:${item.x}:${item.y}:${item.w}:${item.h}`)
    .join("|");

  useEffect(() => {
    if (interacting.current) return;
    setLive(placementsForLayout(layout, columns, heights));
  }, [placementKey, columns, heights, layout]);

  useLayoutEffect(() => {
    const root = gridRef.current;
    if (!root) return;
    const next: Record<string, number> = {};
    const items = root.querySelectorAll("[data-panel-id]");
    for (let index = 0; index < items.length; index += 1) {
      const item = items[index];
      if (!(item instanceof HTMLElement)) continue;
      const id = item.dataset.panelId;
      if (!id) continue;
      const tools = item.querySelector(".cw-panel-tools");
      const body = item.querySelector(".cw-panel-body");
      const toolsHeight = tools instanceof HTMLElement ? tools.offsetHeight : 0;
      const bodyHeight = body instanceof HTMLElement ? body.scrollHeight : 0;
      next[id] = rowsForContent(toolsHeight + bodyHeight, ROW_HEIGHT, GRID_MARGIN);
    }
    setHeights((current) => (sameHeights(current, next) ? current : next));
  }, [placementKey]);

  function commit(next: Layout, message: string) {
    interacting.current = false;
    const packed = applyGridPlacement(layout, next, columns);
    setLive(placementsForLayout(packed, columns, heights));
    if (sameLayout(layout, packed)) return;
    onCommit(packed, message);
  }

  return (
    <div ref={containerRef}>
      <p className="cw-layout-hint">Drag a handle to move a panel. Drag either edge to resize it.</p>
      {hidden.length > 0 ? (
        <div className="cw-restore">
          <button type="button" aria-expanded={restoreOpen} onClick={() => setRestoreOpen((open) => !open)}>
            Restore panels
          </button>
          {restoreOpen ? (
            <ul className="cw-hidden-panels" role="menu">
              {hidden.map((panel) => {
                const label = panelNavItem(panel.type).label;
                return (
                  <li key={panel.id} role="none">
                    <button type="button" role="menuitem" onClick={() => onCommit(setPanelVisible(layout, panel.id, true), `${label} restored.`)}>
                      Restore {label}
                    </button>
                  </li>
                );
              })}
            </ul>
          ) : null}
        </div>
      ) : null}
      <div ref={gridRef}>
        <GridLayout
          className="cw-grid"
          width={gridWidth}
          layout={live}
          autoSize
          compactor={verticalCompactor}
          gridConfig={{ cols: columns, rowHeight: ROW_HEIGHT, margin: [GRID_MARGIN, GRID_MARGIN], containerPadding: [0, 0] }}
          dragConfig={{
            enabled: true,
            bounded: true,
            handle: ".cw-grip",
            cancel: ".cw-hide, a, input, select, textarea, .cw-chart",
            threshold: 3,
          }}
          resizeConfig={{ enabled: columns > 1, handles: ["e", "w"] }}
          constraints={[
            gridBounds,
            minMaxSize,
            containerBounds,
            {
              name: "causewise-widths",
              constrainSize(item, proposed, _height, _handle, context) {
                return { w: snapGridWidth(proposed, columns, Math.max(1, context.cols - item.x)), h: item.h };
              },
            },
          ]}
          onDragStart={() => {
            interacting.current = true;
          }}
          onResizeStart={() => {
            interacting.current = true;
          }}
          onLayoutChange={(next) => {
            if (interacting.current) setLive(toPlacements(next));
          }}
          onDragStop={(next) => commit(next, "Layout updated.")}
          onResizeStop={(next) => commit(next, "Layout updated.")}
        >
          {visible.map((panel) => {
            const label = panelNavItem(panel.type).label;
            return (
              <div key={panel.id} className="cw-panel" data-panel={panel.type} data-panel-id={panel.id} data-grid-w={panel.w} id={panelDomId(panel)}>
                <div className="cw-panel-tools">
                  <button
                    type="button"
                    className="cw-grip"
                    aria-label={`Reorder ${label}`}
                    onKeyDown={(event) => {
                      if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key)) return;
                      event.preventDefault();
                      onGripKey(event.key, panel, layout, columns, onCommit);
                    }}
                  >
                    <GripIcon />
                  </button>
                  <button type="button" className="cw-hide" aria-label={`Hide ${label}`} onClick={() => onHide(panel)}>
                    <span aria-hidden="true">×</span>
                  </button>
                </div>
                <div className="cw-panel-body">{renderPanel(panel)}</div>
              </div>
            );
          })}
        </GridLayout>
      </div>
    </div>
  );
}

function onGripKey(
  key: string,
  panel: DashboardPanel,
  layout: DashboardLayout,
  columns: GridColumns,
  onCommit: (next: DashboardLayout, message: string) => void,
) {
  const label = panelNavItem(panel.type).label;
  if (key === "ArrowUp" || key === "ArrowDown") {
    const next = movePanel(layout, panel.id, key === "ArrowUp" ? "earlier" : "later");
    if (next !== layout) onCommit(next, `${label} moved ${key === "ArrowUp" ? "earlier" : "later"}.`);
    return;
  }
  if ((key === "ArrowLeft" || key === "ArrowRight") && columns > 1) {
    const current = WIDTHS.indexOf(panel.w as PanelWidth);
    const index = current < 0 ? WIDTHS.length - 1 : current;
    const next = WIDTHS[Math.min(WIDTHS.length - 1, Math.max(0, index + (key === "ArrowRight" ? 1 : -1)))];
    if (next !== panel.w) onCommit(resizePanel(layout, panel.id, next), `${label} width updated.`);
  }
}

function toPlacements(layout: Layout): GridPlacement[] {
  return layout.map((item: LayoutItem) => ({ i: item.i, x: item.x, y: item.y, w: item.w, h: item.h }));
}

function sameHeights(current: Record<string, number>, next: Record<string, number>) {
  const keys = Object.keys(next);
  if (keys.length !== Object.keys(current).length) return false;
  return keys.every((key) => current[key] === next[key]);
}

function sameLayout(current: DashboardLayout, next: DashboardLayout) {
  return current.panels.every((panel, index) => {
    const other = next.panels[index];
    return other && panel.id === other.id && panel.visible === other.visible && panel.w === other.w && panel.x === other.x && panel.y === other.y;
  });
}

function GripIcon() {
  return (
    <svg className="cw-grip-icon" viewBox="0 0 12 16" width="12" height="16" aria-hidden="true">
      <circle cx="3" cy="2" r="1.2" />
      <circle cx="9" cy="2" r="1.2" />
      <circle cx="3" cy="8" r="1.2" />
      <circle cx="9" cy="8" r="1.2" />
      <circle cx="3" cy="14" r="1.2" />
      <circle cx="9" cy="14" r="1.2" />
    </svg>
  );
}