CapaKraken/apps/web/src/components/dashboard/DashboardClient.tsx

"use client";

import type { DashboardWidgetConfig, DashboardWidgetType } from "@capakraken/shared/types";
import dynamic from "next/dynamic";
import { Suspense, useState, useRef, useEffect } from "react";
import { useDashboardLayout } from "~/hooks/useDashboardLayout.js";
import { WidgetContainer } from "./WidgetContainer.js";
import { AddWidgetModal } from "./AddWidgetModal.js";
import { getWidget } from "./widget-registry.js";

// Import CSS for react-grid-layout
import "react-grid-layout/css/styles.css";
import "react-resizable/css/styles.css";

function WidgetFallback() {
  return (
    <div className="h-full w-full flex flex-col gap-3 p-4">
      <div className="h-3 w-32 shimmer-skeleton rounded" />
      <div className="h-3 w-full shimmer-skeleton rounded" />
      <div className="h-3 w-4/5 shimmer-skeleton rounded" />
      <div className="h-3 w-3/5 shimmer-skeleton rounded" />
    </div>
  );
}

// Dynamic import — no WidthProvider (uses findDOMNode, broken in React 18 strict mode).
// We measure container width ourselves via ResizeObserver and pass it as a prop.
const GridLayout = dynamic(() => import("react-grid-layout").then((m) => m.Responsive), {
  ssr: false,
});

function renderWidget(
  type: DashboardWidgetType,
  config: DashboardWidgetConfig,
  onConfigChange: (u: Record<string, unknown>) => void,
) {
  const widget = getWidget(type);
  const Component = widget.component;

  return (
    <Suspense fallback={<WidgetFallback />}>
      <Component config={config as Record<string, unknown>} onConfigChange={onConfigChange} />
    </Suspense>
  );
}

export function DashboardClient() {
  const [addModalOpen, setAddModalOpen] = useState(false);
  const { config, addWidget, removeWidget, updateWidgetConfig, onLayoutChange, resetLayout } =
    useDashboardLayout();

  // Measure grid container width so Responsive knows the column size.
  // We can't use WidthProvider (uses findDOMNode, deprecated in React 18).
  const containerRef = useRef<HTMLDivElement>(null);
  const [gridWidth, setGridWidth] = useState(1200);
  useEffect(() => {
    const el = containerRef.current;
    if (!el) return;
    const ro = new ResizeObserver(([entry]) => {
      if (entry) setGridWidth(entry.contentRect.width);
    });
    ro.observe(el);
    setGridWidth(el.getBoundingClientRect().width);
    return () => ro.disconnect();
  }, []);

  const layouts = {
    lg: config.widgets.map((w) => ({
      i: w.id,
      x: w.x,
      y: w.y,
      w: w.w,
      h: w.h,
      minW: w.minW ?? 2,
      minH: w.minH ?? 2,
    })),
  };

  return (
    <div className="app-page space-y-6">
      <div className="app-page-header gap-4">
        <div>
          <h1 className="app-page-title">Dashboard</h1>
          <p className="app-page-subtitle mt-1">
            Drag widgets to rearrange them and resize from the corners.
          </p>
        </div>
        <div className="flex items-center gap-3">
          <button
            type="button"
            onClick={resetLayout}
            className="rounded-xl border border-gray-300 px-3 py-2 text-sm font-medium text-gray-600 transition hover:border-gray-400 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
          >
            Reset
          </button>
          <button
            type="button"
            onClick={() => setAddModalOpen(true)}
            className="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-brand-700"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M12 4v16m8-8H4"
              />
            </svg>
            Add Widget
          </button>
        </div>
      </div>

      {config.widgets.length === 0 ? (
        <div className="app-surface-strong flex flex-col items-center justify-center border-dashed py-24 text-center">
          <p className="text-sm font-medium text-gray-700 dark:text-gray-200">
            No widgets on this dashboard yet.
          </p>
          <p className="mt-2 max-w-md text-sm text-gray-500">
            Start with a widget and build a view that matches how your team actually plans and
            monitors work.
          </p>
          <button
            type="button"
            onClick={() => setAddModalOpen(true)}
            className="mt-5 rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-brand-700"
          >
            Add Widget
          </button>
        </div>
      ) : (
        <div ref={containerRef} className="app-surface overflow-hidden p-3">
          {(() => {
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            const AnyGridLayout = GridLayout as any;
            return (
              <AnyGridLayout
                className="layout"
                layouts={layouts}
                width={gridWidth}
                breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
                cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
                rowHeight={80}
                compactType={null}
                preventCollision={false}
                onLayoutChange={(
                  _: unknown,
                  allLayouts: Record<
                    string,
                    { i: string; x: number; y: number; w: number; h: number }[]
                  >,
                ) => onLayoutChange(allLayouts["lg"] ?? [])}
                draggableHandle=".widget-drag-handle"
                margin={[12, 12]}
              >
                {config.widgets.map((widget) => (
                  <div key={widget.id}>
                    <WidgetContainer
                      title={widget.title ?? getWidget(widget.type).label}
                      description={getWidget(widget.type).description}
                      onRemove={() => removeWidget(widget.id)}
                    >
                      {renderWidget(widget.type, widget.config, (update) =>
                        updateWidgetConfig(widget.id, update),
                      )}
                    </WidgetContainer>
                  </div>
                ))}
              </AnyGridLayout>
            );
          })()}
        </div>
      )}

      {addModalOpen && <AddWidgetModal onAdd={addWidget} onClose={() => setAddModalOpen(false)} />}
    </div>
  );
}