"use client";

import * as React from "react";
import {
  DndContext,
  KeyboardSensor,
  PointerSensor,
  closestCenter,
  type DragEndEvent,
  useSensor,
  useSensors,
} from "@dnd-kit/core";
import {
  SortableContext,
  rectSortingStrategy,
  sortableKeyboardCoordinates,
  useSortable,
} from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { ChevronDown, ChevronRight, GripVertical, Ungroup } from "lucide-react";

import { cn } from "@/lib/utils";
import type { DashboardCardGroup } from "@/app/customer/_lib/dashboard-card-groups";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

type DashboardCardSectionProps = {
  group: DashboardCardGroup;
  editMode?: boolean;
  sumDisplay: string;
  percentLabel: string | null;
  onRename?: (title: string) => void;
  onToggleCollapsed?: () => void;
  onUngroup?: () => void;
  onReorderMembers?: (activeKey: string, overKey: string) => void;
  onPullOutMember?: (key: string) => void;
  children: (cardKey: string) => React.ReactNode;
  memberKeys: string[];
};

export function DashboardCardSection({
  group,
  editMode = false,
  sumDisplay,
  percentLabel,
  onRename,
  onToggleCollapsed,
  onUngroup,
  onReorderMembers,
  onPullOutMember,
  children,
  memberKeys,
}: DashboardCardSectionProps) {
  const collapsed = Boolean(group.collapsed);
  const [draftTitle, setDraftTitle] = React.useState(group.title);

  React.useEffect(() => {
    setDraftTitle(group.title);
  }, [group.title]);

  const sensors = useSensors(
    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
  );

  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;
    if (!over || active.id === over.id) return;
    onReorderMembers?.(String(active.id), String(over.id));
  };

  const memberCountLabel =
    memberKeys.length > 0 ? `${memberKeys.length} cards` : null;

  return (
    <div
      className={cn(
        "@container/section flex h-full min-h-0 flex-col overflow-hidden rounded-[inherit]",
        collapsed
          ? "bg-muted/40"
          : "bg-gradient-to-b from-muted/40 to-transparent",
      )}
      data-dashboard-section={group.id}
    >
      <div
        className={cn(
          "flex shrink-0 items-center gap-2",
          collapsed
            ? cn(
                "h-full px-2.5",
                editMode ? "pl-9" : "pl-2.5",
                "cursor-pointer hover:bg-muted/60",
              )
            : cn("border-b border-border/60 px-2 py-1", editMode ? "pl-8" : "pl-2"),
        )}
        onClick={
          collapsed
            ? (event) => {
                event.stopPropagation();
                onToggleCollapsed?.();
              }
            : undefined
        }
        onKeyDown={
          collapsed
            ? (event) => {
                if (event.key === "Enter" || event.key === " ") {
                  event.preventDefault();
                  event.stopPropagation();
                  onToggleCollapsed?.();
                }
              }
            : undefined
        }
        role={collapsed ? "button" : undefined}
        tabIndex={collapsed ? 0 : undefined}
        aria-expanded={collapsed ? false : true}
      >
        {editMode ? (
          <Input
            value={draftTitle}
            onChange={(event) => setDraftTitle(event.target.value)}
            onBlur={() => onRename?.(draftTitle)}
            onClick={(event) => event.stopPropagation()}
            onKeyDown={(event) => {
              if (event.key === "Enter") {
                event.currentTarget.blur();
              }
            }}
            className={cn(
              "h-6 min-w-0 border-border/70 bg-background px-1.5 text-[10px] font-semibold text-primary",
              collapsed ? "max-w-[10rem] sm:max-w-[14rem]" : "max-w-[11rem]",
            )}
            aria-label="Section title"
            title="Rename section"
          />
        ) : (
          <div className="min-w-0 flex-1">
            <p className="truncate text-[11px] font-semibold leading-tight text-foreground">
              {group.title}
            </p>
            {collapsed && memberCountLabel ? (
              <p className="truncate text-[10px] leading-tight text-muted-foreground">
                {memberCountLabel}
              </p>
            ) : null}
          </div>
        )}

        <div
          className={cn(
            "flex shrink-0 items-center gap-1.5",
            !collapsed && "ml-auto",
            collapsed && !editMode && "ml-auto",
            collapsed && editMode && "ml-auto",
          )}
        >
          <div className="min-w-0 text-right leading-tight">
            <p className="truncate text-[11px] font-semibold tabular-nums tracking-tight">
              {sumDisplay}
            </p>
            {percentLabel ? (
              <p className="truncate text-[10px] tabular-nums text-muted-foreground">
                {percentLabel}
              </p>
            ) : null}
          </div>
          <Button
            type="button"
            size="icon"
            variant="ghost"
            className="size-6 shrink-0 rounded-full border border-border/70 bg-background/80 text-muted-foreground hover:text-foreground"
            onClick={(event) => {
              event.stopPropagation();
              onToggleCollapsed?.();
            }}
            title={collapsed ? "Expand section" : "Collapse section"}
            aria-label={collapsed ? "Expand section" : "Collapse section"}
          >
            {collapsed ? (
              <ChevronRight className="size-3.5" />
            ) : (
              <ChevronDown className="size-3.5" />
            )}
          </Button>
          {editMode ? (
            <Button
              type="button"
              size="icon"
              variant="ghost"
              className="size-6 shrink-0 rounded-full border border-border/70 bg-background/80"
              onClick={(event) => {
                event.stopPropagation();
                onUngroup?.();
              }}
              title="Ungroup cards"
              aria-label="Ungroup cards"
            >
              <Ungroup className="size-3" />
            </Button>
          ) : null}
        </div>
      </div>

      {!collapsed ? (
        <DndContext
          sensors={sensors}
          collisionDetection={closestCenter}
          onDragEnd={editMode && onReorderMembers ? handleDragEnd : () => undefined}
        >
          <SortableContext items={memberKeys} strategy={rectSortingStrategy}>
            {/* Stay 1-col until a nested KPI can keep ~240px; then allow 2-col */}
            <div
              className={cn(
                "grid min-h-0 flex-1 gap-1 overflow-y-auto p-1",
                memberKeys.length < 2
                  ? "grid-cols-1"
                  : "grid-cols-1 @[480px]/section:grid-cols-2",
              )}
            >
              {memberKeys.map((key) => (
                <NestedMetricShell
                  key={key}
                  cardKey={key}
                  editMode={editMode}
                  sortable={Boolean(editMode && onReorderMembers)}
                  onPullOut={onPullOutMember}
                >
                  {children(key)}
                </NestedMetricShell>
              ))}
            </div>
          </SortableContext>
        </DndContext>
      ) : null}
    </div>
  );
}

type NestedMetricShellProps = {
  cardKey: string;
  editMode?: boolean;
  sortable?: boolean;
  onPullOut?: (key: string) => void;
  children: React.ReactNode;
};

/** Nested statistic card inside a clubbed section (not an RGL child). */
export function NestedMetricShell({
  cardKey,
  editMode = false,
  sortable = false,
  onPullOut,
  children,
}: NestedMetricShellProps) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id: cardKey,
    disabled: !sortable,
  });

  return (
    <div
      ref={sortable ? setNodeRef : undefined}
      style={
        sortable
          ? {
              transform: CSS.Transform.toString(transform),
              transition,
            }
          : undefined
      }
      className={cn(
        "relative min-h-0 overflow-hidden rounded-md border border-border/60 bg-card",
        isDragging && "z-10 opacity-90 shadow-md",
      )}
      data-dashboard-card={cardKey}
      data-nested-metric="true"
    >
      {editMode && sortable ? (
        <button
          type="button"
          className="absolute top-0.5 left-0.5 z-10 inline-flex size-5 cursor-grab touch-none items-center justify-center rounded border bg-background/95 text-muted-foreground shadow-sm active:cursor-grabbing"
          aria-label="Drag to reorder inside section"
          title="Drag to reorder"
          {...attributes}
          {...listeners}
        >
          <GripVertical className="size-3" />
        </button>
      ) : null}
      {editMode && onPullOut ? (
        <button
          type="button"
          className="absolute top-0.5 right-0.5 z-10 rounded border bg-background/95 px-1 py-0.5 text-[9px] font-medium text-muted-foreground shadow-sm hover:text-foreground"
          onClick={() => onPullOut(cardKey)}
          title="Remove from section"
        >
          Remove
        </button>
      ) : null}
      <div className="h-full [&>*]:h-full [&>*]:border-0 [&>*]:shadow-none">{children}</div>
    </div>
  );
}