"use client";

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { cn } from "@/lib/utils";
import { Folder, FolderOpen, Home } from "lucide-react";
import type { MenuTreeNode } from "../types";

interface MoveToDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  node: MenuTreeNode | null;
  availableParents: { id: number | null; title: string; depth: number }[];
  onMove: (newParentId: number | null) => void;
}

export function MoveToDialog({
  open,
  onOpenChange,
  node,
  availableParents,
  onMove,
}: MoveToDialogProps) {
  if (!node) return null;

  const isCurrent = (parentId: number | null) => node.parentId === parentId;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle>Move To</DialogTitle>
          <DialogDescription>
            Select a new location for &quot;{node.titleKo}&quot;
          </DialogDescription>
        </DialogHeader>
        
        <ScrollArea className="max-h-[400px]">
          <div className="space-y-0.5 p-1">
            {availableParents.map((parent) => (
              <Button
                key={parent.id ?? 'root'}
                variant={isCurrent(parent.id) ? "secondary" : "ghost"}
                className={cn(
                  "w-full justify-start h-auto py-2 text-sm",
                  parent.depth === 0 && "font-medium",
                  parent.depth === 1 && "font-medium",
                  parent.depth === 2 && "text-muted-foreground"
                )}
                style={{ paddingLeft: parent.depth * 20 + 8 }}
                onClick={() => onMove(parent.id)}
                disabled={isCurrent(parent.id)}
              >
                {parent.id === null ? (
                  <Home className="mr-2 h-4 w-4 text-blue-500 shrink-0" />
                ) : parent.depth === 1 ? (
                  <FolderOpen className="mr-2 h-4 w-4 text-amber-500 shrink-0" />
                ) : (
                  <Folder className="mr-2 h-4 w-4 text-amber-400 shrink-0" />
                )}
                <span className="truncate">{parent.title}</span>
                {isCurrent(parent.id) && (
                  <span className="ml-auto text-xs text-muted-foreground shrink-0">(current)</span>
                )}
              </Button>
            ))}
          </div>
        </ScrollArea>

        <div className="flex justify-end">
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Cancel
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}