path: root/lib/menu-v2/components/menu-tree.tsx

"use client";

import { useCallback } from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  ChevronRight,
  ChevronDown,
  ChevronUp,
  Folder,
  FolderOpen,
  File,
  Pencil,
  Plus,
  ArrowUpDown,
  EyeOff,
} from "lucide-react";
import type { MenuTreeNode } from "../types";

interface MenuTreeProps {
  nodes: MenuTreeNode[];
  onEdit: (node: MenuTreeNode) => void;
  onMoveUp: (nodeId: number) => void;
  onMoveDown: (nodeId: number) => void;
  onMoveTo: (node: MenuTreeNode) => void;
  onAddGroup: (parentId: number) => void;
  expandedIds: Set<number>;
  onExpandedIdsChange: (ids: Set<number>) => void;
  isPending?: boolean;
}

interface TreeItemProps {
  node: MenuTreeNode;
  depth: number;
  isFirst: boolean;
  isLast: boolean;
  onEdit: (node: MenuTreeNode) => void;
  onMoveUp: (nodeId: number) => void;
  onMoveDown: (nodeId: number) => void;
  onMoveTo: (node: MenuTreeNode) => void;
  onAddGroup: (parentId: number) => void;
  isExpanded: boolean;
  onToggleExpand: () => void;
  isPending?: boolean;
}

function TreeItem({
  node,
  depth,
  isFirst,
  isLast,
  onEdit,
  onMoveUp,
  onMoveDown,
  onMoveTo,
  onAddGroup,
  isExpanded,
  onToggleExpand,
  isPending,
}: TreeItemProps) {
  const isMenuGroup = node.nodeType === "menu_group";
  const isGroup = node.nodeType === "group";
  const isMenu = node.nodeType === "menu";
  const isTopLevel = node.parentId === null;
  const hasChildren = node.children && node.children.length > 0;
  const isExpandable = isMenuGroup || isGroup;
  
  // Move To is disabled for:
  // - menu_group (always at top level, cannot be moved)
  // - top-level menu (parentId === null, can only reorder with up/down)
  const canMoveTo = !isMenuGroup && !isTopLevel;

  const getIcon = () => {
    if (isMenuGroup || isGroup) {
      return isExpanded ? (
        <FolderOpen className="h-4 w-4 text-amber-500" />
      ) : (
        <Folder className="h-4 w-4 text-amber-500" />
      );
    }
    return <File className="h-4 w-4 text-slate-500" />;
  };

  const getTypeLabel = () => {
    switch (node.nodeType) {
      case "menu_group": return "Menu Group";
      case "group": return "Group";
      case "menu": return "Menu";
      default: return "";
    }
  };

  return (
    <div
      className={cn(
        "flex items-center gap-2 px-2 py-1.5 rounded-md border bg-background hover:bg-accent/50 transition-colors",
        !node.isActive && "opacity-50 bg-muted/30 border-dashed"
      )}
      style={{ marginLeft: depth * 24 }}
    >
      {/* Expand/Collapse */}
      {isExpandable ? (
        <button
          onClick={onToggleExpand}
          className="p-0.5 hover:bg-accent rounded shrink-0"
        >
          {isExpanded ? (
            <ChevronDown className="h-4 w-4" />
          ) : (
            <ChevronRight className="h-4 w-4" />
          )}
        </button>
      ) : (
        <div className="w-5 shrink-0" />
      )}

      {/* Icon */}
      {getIcon()}

      {/* Title */}
      <span className={cn(
        "flex-1 text-sm font-medium truncate min-w-0",
        !node.isActive && "line-through text-muted-foreground"
      )}>
        {node.titleKo}
        {node.titleEn && (
          <span className="text-muted-foreground font-normal"> [{node.titleEn}]</span>
        )}
      </span>

      {/* Hidden indicator */}
      {!node.isActive && (
        <EyeOff className="h-3.5 w-3.5 text-muted-foreground shrink-0" title="Hidden" />
      )}

      {/* Path (for menus) */}
      {isMenu && node.menuPath && (
        <span className="text-xs text-muted-foreground truncate max-w-[150px] shrink-0">
          {node.menuPath}
        </span>
      )}

      {/* Type Badge */}
      <Badge variant={node.isActive ? "default" : "secondary"} className="text-xs shrink-0">
        {getTypeLabel()}
      </Badge>

      {/* Active indicator */}
      <div
        className={cn(
          "w-2 h-2 rounded-full shrink-0",
          node.isActive ? "bg-green-500" : "bg-gray-400"
        )}
        title={node.isActive ? "Visible" : "Hidden"}
      />

      {/* Actions */}
      <div className="flex items-center gap-1 shrink-0">
        {/* Move Up */}
        <Button
          variant="ghost"
          size="icon"
          className="h-7 w-7"
          onClick={() => onMoveUp(node.id)}
          disabled={isFirst || isPending}
          title="Move Up"
        >
          <ChevronUp className="h-4 w-4" />
        </Button>

        {/* Move Down */}
        <Button
          variant="ghost"
          size="icon"
          className="h-7 w-7"
          onClick={() => onMoveDown(node.id)}
          disabled={isLast || isPending}
          title="Move Down"
        >
          <ChevronDown className="h-4 w-4" />
        </Button>

        {/* Move To (different parent) - disabled for top level nodes */}
        <Button
          variant="ghost"
          size="icon"
          className="h-7 w-7"
          onClick={() => onMoveTo(node)}
          disabled={!canMoveTo || isPending}
          title={canMoveTo ? "Move To..." : "Cannot move top-level items"}
        >
          <ArrowUpDown className="h-4 w-4" />
        </Button>

        {/* Edit */}
        <Button
          variant="ghost"
          size="icon"
          className="h-7 w-7"
          onClick={() => onEdit(node)}
          disabled={isPending}
          title="Edit"
        >
          <Pencil className="h-4 w-4" />
        </Button>

        {/* Add Sub-Group (for menu groups only) */}
        {isMenuGroup && (
          <Button
            variant="ghost"
            size="icon"
            className="h-7 w-7"
            onClick={() => onAddGroup(node.id)}
            disabled={isPending}
            title="Add Sub-Group"
          >
            <Plus className="h-4 w-4" />
          </Button>
        )}
      </div>
    </div>
  );
}

export function MenuTree({
  nodes,
  onEdit,
  onMoveUp,
  onMoveDown,
  onMoveTo,
  onAddGroup,
  expandedIds,
  onExpandedIdsChange,
  isPending,
}: MenuTreeProps) {
  const toggleExpand = useCallback((nodeId: number) => {
    const next = new Set(expandedIds);
    if (next.has(nodeId)) {
      next.delete(nodeId);
    } else {
      next.add(nodeId);
    }
    onExpandedIdsChange(next);
  }, [expandedIds, onExpandedIdsChange]);

  const renderTree = (nodeList: MenuTreeNode[], depth: number) => {
    return nodeList.map((node, index) => {
      const isExpanded = expandedIds.has(node.id);
      const isExpandable = node.nodeType === "menu_group" || node.nodeType === "group";
      const hasChildren = node.children && node.children.length > 0;

      return (
        <div key={node.id} className="space-y-1">
          <TreeItem
            node={node}
            depth={depth}
            isFirst={index === 0}
            isLast={index === nodeList.length - 1}
            onEdit={onEdit}
            onMoveUp={onMoveUp}
            onMoveDown={onMoveDown}
            onMoveTo={onMoveTo}
            onAddGroup={onAddGroup}
            isExpanded={isExpanded}
            onToggleExpand={() => toggleExpand(node.id)}
            isPending={isPending}
          />
          {isExpandable && isExpanded && hasChildren && (
            <div className="space-y-1">
              {renderTree(node.children!, depth + 1)}
            </div>
          )}
        </div>
      );
    });
  };

  return <div className="space-y-1">{renderTree(nodes, 0)}</div>;
}