[V0_FILE]typescriptreact:file="components/folder-browser.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { ScrollArea } from "@/components/ui/scroll-area" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { FileText, FolderOpen, Folder, ChevronRight, ChevronDown } from "lucide-react" import type { FolderNode } from "@/types/pdf-merger" interface FolderBrowserProps { folders: FolderNode[] onFileSelect: (filePath: string) => void } export function FolderBrowser({ folders, onFileSelect }: FolderBrowserProps) { const [expandedFolders, setExpandedFolders] = useState>(new Set(["/Documents", "/Projects"])) const toggleFolder = (path: string) => { setExpandedFolders((prev) => { const newSet = new Set(prev) if (newSet.has(path)) { newSet.delete(path) } else { newSet.add(path) } return newSet }) } const handleDragStart = (e: React.DragEvent, filePath: string) => { e.dataTransfer.setData("filePath", filePath) e.dataTransfer.effectAllowed = "copy" } const renderFolderTree = (nodes: FolderNode[], level = 0) => { return nodes.map((node) => (

{node.type === "folder" ? (

toggleFolder(node.path)} > {expandedFolders.has(node.path) ? ( ) : ( )} {expandedFolders.has(node.path) ? ( ) : ( )} {node.name}

{expandedFolders.has(node.path) && node.children && (

{renderFolderTree(node.children, level + 1)}

)}

) : (

handleDragStart(e, node.path)} onClick={() => onFileSelect(node.path)} > {node.name}

)}

)) } return ( File Browser

{renderFolderTree(folders)}

💡 Click or drag files to add them to your merge queue. Drop anywhere on a file card to place before or after.

) } [V0_FILE]typescriptreact:file="components/config-form.tsx" isMerged="true" "use client" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import type { SequenceOption } from "@/types/pdf-merger" interface ConfigFormProps { filename: string description: string selectedSequence: string sequenceOptions: SequenceOption[] onFilenameChange: (value: string) => void onDescriptionChange: (value: string) => void onSequenceChange: (value: string) => void } export function ConfigForm({ filename, description, selectedSequence, sequenceOptions, onFilenameChange, onDescriptionChange, onSequenceChange, }: ConfigFormProps) { return (

{/* File Details */}

Output Filename onFilenameChange(e.target.value)} placeholder="Enter filename" />

Description (Optional)

onDescriptionChange(e.target.value)}
            placeholder="Brief description of the merged document"
            rows={3}
          />
        </div>
      </div>

{/* Sequence Selection */}
      <div className="space-y-2">
        <Label htmlFor="sequence">Auto-Sequence Files</Label>
        <Select value={selectedSequence} onValueChange={onSequenceChange}>
          <SelectTrigger>
            <SelectValue placeholder="Select a sequence pattern to auto-order files" />
          </SelectTrigger>
          <SelectContent>
            {sequenceOptions.map((option) => (
              <SelectItem key={option.id} value={option.id}>
                <div className="flex items-center gap-2">
                  {option.icon}
                  <div>
                    <div className="font-medium">{option.name}</div>
                    <div className="text-xs text-muted-foreground">{option.description}</div>
                  </div>
                </div>
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/action-buttons.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Download } from "lucide-react"

interface ActionButtonsProps {
  fileCount: number
  onMerge: () => void
  onClear: () => void
}

export function ActionButtons({ fileCount, onMerge, onClear }: ActionButtonsProps) {
  return (
    <div className="flex gap-3 pt-4">
      <Button className="flex-1" disabled={fileCount === 0} onClick={onMerge}>
        <Download className="w-4 h-4 mr-2" />
        Merge PDFs ({fileCount})
      </Button>
      <Button variant="outline" onClick={onClear}>
        Clear All
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
import Component from "../pdf-merger"

export default function Page() {
  return <Component />
}
[V0_FILE]typescriptreact:file="components/merge-queue.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useState, useRef } from "react"
import { Badge } from "@/components/ui/badge"
import { Upload } from "lucide-react"
import { FileCard } from "./file-card"
import type { PDFFile } from "@/types/pdf-merger"

interface MergeQueueProps {
  files: PDFFile[]
  onToggleInclusion: (fileId: string) => void
  onRemove: (fileId: string) => void
  onReorder: (fromIndex: number, toIndex: number) => void
  onVersionChange: (fileId: string, version: string) => void
  onAddFile: (filePath: string, insertIndex?: number) => void
}

export function MergeQueue({
  files,
  onToggleInclusion,
  onRemove,
  onReorder,
  onVersionChange,
  onAddFile,
}: MergeQueueProps) {
  const [draggedIndex, setDraggedIndex] = useState<number | null>(null)
  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null)
  const [dragPosition, setDragPosition] = useState<"before" | "after" | null>(null)
  const [isDraggingExternal, setIsDraggingExternal] = useState(false)

// Ref to store the container element for auto-scrolling
  const containerRef = useRef<HTMLDivElement>(null)

const handleDragStart = (e: React.DragEvent, index: number) => {
    setDraggedIndex(index)
    e.dataTransfer.effectAllowed = "move"
    // Set a transparent drag image to hide the default one
    const img = new Image()
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    e.dataTransfer.setDragImage(img, 0, 0)
  }

const handleDragEnd = () => {
    setDraggedIndex(null)
    setDragOverIndex(null)
    setDragPosition(null)
    setIsDraggingExternal(false)
  }

const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault()

// Check if this is an external file being dragged
    if (draggedIndex === null && !isDraggingExternal) {
      setIsDraggingExternal(true)
    }

// Auto-scroll the container if needed
    if (containerRef.current) {
      const container = containerRef.current
      const containerRect = container.getBoundingClientRect()
      const scrollSpeed = 10

if (e.clientY < containerRect.top + 50) {
        // Scroll up
        container.scrollTop -= scrollSpeed
      } else if (e.clientY > containerRect.bottom - 50) {
        // Scroll down
        container.scrollTop += scrollSpeed
      }
    }
  }

const handleDragEnter = (e: React.DragEvent, index: number) => {
    e.preventDefault()
    e.stopPropagation()

// Don't allow dropping onto itself
    if (index === draggedIndex) {
      setDragOverIndex(null)
      setDragPosition(null)
      return
    }

// Determine if we're in the top or bottom half of the card
    const rect = e.currentTarget.getBoundingClientRect()
    const y = e.clientY - rect.top
    const isTopHalf = y < rect.height / 2

setDragOverIndex(index)
    setDragPosition(isTopHalf ? "before" : "after")
  }

const handleDragLeave = (e: React.DragEvent) => {
    // Only clear if we're leaving to an element that's not a child
    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
      setDragOverIndex(null)
      setDragPosition(null)
    }
  }

const handleDrop = (e: React.DragEvent, index: number) => {
    e.preventDefault()
    e.stopPropagation()

// Determine if we're in the top or bottom half of the card
    const rect = e.currentTarget.getBoundingClientRect()
    const y = e.clientY - rect.top
    const isTopHalf = y < rect.height / 2

const targetIndex = isTopHalf ? index : index + 1

// Check if this is an external file being dropped
    const filePath = e.dataTransfer.getData("filePath")
    const removedFileId = e.dataTransfer.getData("removedFileId")

if (filePath) {
      onAddFile(filePath, targetIndex)
    } else if (removedFileId) {
      // Handle dropping a removed file
      onAddFile(removedFileId, targetIndex)
    } else if (draggedIndex !== null && draggedIndex !== index) {
      // Adjust the target index if needed
      let adjustedTargetIndex = targetIndex
      if (draggedIndex < index && isTopHalf) {
        adjustedTargetIndex -= 1
      } else if (draggedIndex > index && !isTopHalf) {
        adjustedTargetIndex += 0
      }

onReorder(draggedIndex, adjustedTargetIndex)
    }

setDraggedIndex(null)
    setDragOverIndex(null)
    setDragPosition(null)
    setIsDraggingExternal(false)
  }

// Handle drop on the empty state container
  const handleEmptyStateDrop = (e: React.DragEvent) => {
    e.preventDefault()
    const filePath = e.dataTransfer.getData("filePath")
    const removedFileId = e.dataTransfer.getData("removedFileId")

if (filePath) {
      onAddFile(filePath)
    } else if (removedFileId) {
      onAddFile(removedFileId)
    }

setIsDraggingExternal(false)
  }

// Render the files with visual indicators for drag and drop
  const renderFiles = () => {
    if (files.length === 0) {
      return (
        <div
          className="border-2 border-dashed border-slate-300 rounded-lg p-8 text-center transition-all duration-300 hover:border-blue-400 hover:bg-blue-50/30"
          onDragOver={(e) => e.preventDefault()}
          onDrop={handleEmptyStateDrop}
          onDragEnter={() => setIsDraggingExternal(true)}
          onDragLeave={() => setIsDraggingExternal(false)}
        >
          <Upload className="w-12 h-12 text-slate-400 mx-auto mb-4" />
          <p className="text-slate-600 mb-2">No files added yet</p>
          <p className="text-sm text-slate-500">Select files from the browser or drag them here</p>
        </div>
      )
    }

return (
      <div className="space-y-3">
        {files.map((file, index) => {
          // Determine if this file is being dragged
          const isDragging = draggedIndex === index

// Determine if we should show a drop indicator before this file
          const showBeforeIndicator = dragOverIndex === index && dragPosition === "before" && draggedIndex !== index

// Determine if we should show a drop indicator after this file
          const showAfterIndicator = dragOverIndex === index && dragPosition === "after" && draggedIndex !== index

// Determine if this file should be hidden (because it's being dragged)
          const isHidden = isDragging

return (
            <div key={file.id} className="relative">
              {/* Drop indicator before */}
              {showBeforeIndicator && (
                <div className="absolute -top-2 left-0 right-0 h-1 bg-blue-500 rounded-full z-10" />
              )}

{/* The file card */}
              <div
                className={`transition-all duration-200 ${isHidden ? "opacity-50" : "opacity-100"}`}
                onDragEnter={(e) => handleDragEnter(e, index)}
                onDragOver={handleDragOver}
                onDragLeave={handleDragLeave}
                onDrop={(e) => handleDrop(e, index)}
              >
                <FileCard
                  file={file}
                  index={index}
                  onToggleInclusion={onToggleInclusion}
                  onRemove={onRemove}
                  onVersionChange={onVersionChange}
                  isDragging={isDragging}
                  onDragStart={(e) => handleDragStart(e, index)}
                  onDragEnd={handleDragEnd}
                  isDropTarget={dragOverIndex === index}
                  dropPosition={dragPosition}
                />
              </div>

{/* Drop indicator after */}
              {showAfterIndicator && (
                <div className="absolute -bottom-2 left-0 right-0 h-1 bg-blue-500 rounded-full z-10" />
              )}

{/* Ghost card that follows the cursor when dragging */}
              {isDragging && (
                <div
                  className="fixed opacity-80 pointer-events-none z-50 w-full max-w-2xl"
                  style={{
                    left: "0px",
                    top: "0px",
                    transform: `translate(${window.mouseX - 100}px, ${window.mouseY - 30}px)`,
                  }}
                >
                  <div className="bg-white rounded-lg border shadow-lg p-3">
                    <div className="flex items-center gap-2">
                      <Badge variant="outline" className="w-6 h-6 rounded-full flex items-center justify-center">
                        {index + 1}
                      </Badge>
                      <div className="font-medium text-sm truncate">{file.name}</div>
                    </div>
                  </div>
                </div>
              )}
            </div>
          )
        })}

{/* Final drop zone at the end of the list */}
        {files.length > 0 && isDraggingExternal && (
          <div
            className="border-2 border-dashed border-blue-400 rounded-lg p-4 bg-blue-50/50 text-center transition-all duration-300"
            onDragOver={(e) => e.preventDefault()}
            onDrop={(e) => {
              e.preventDefault()
              const filePath = e.dataTransfer.getData("filePath")
              const removedFileId = e.dataTransfer.getData("removedFileId")

if (filePath) {
                onAddFile(filePath)
              } else if (removedFileId) {
                onAddFile(removedFileId)
              }

setIsDraggingExternal(false)
            }}
          >
            <p className="text-blue-600 text-sm font-medium">Drop here to add at the end</p>
          </div>
        )}
      </div>
    )
  }

return (
    <div>
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-lg font-semibold">Merge Queue</h3>
        <Badge variant="secondary">{files.filter((f) => f.included).length} files selected</Badge>
      </div>

<div ref={containerRef} className="max-h-[500px] overflow-y-auto pr-2" onDragOver={handleDragOver}>
        {renderFiles()}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/file-card.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { FileText, Trash2, GripVertical } from "lucide-react"
import type { PDFFile } from "@/types/pdf-merger"

interface FileCardProps {
  file: PDFFile
  index: number
  onToggleInclusion: (fileId: string) => void
  onRemove: (fileId: string) => void
  onVersionChange: (fileId: string, version: string) => void
  isDragging: boolean
  onDragStart: (e: React.DragEvent) => void
  onDragEnd: () => void
  isDropTarget: boolean
  dropPosition: "before" | "after" | null
}

export function FileCard({
  file,
  index,
  onToggleInclusion,
  onRemove,
  onVersionChange,
  isDragging,
  onDragStart,
  onDragEnd,
  isDropTarget,
  dropPosition,
}: FileCardProps) {
  // Sample versions - in a real app, these would come from the file data
  const versions = ["Latest", "v1.0", "v2.0", "Draft"]

return (
    <div
      draggable
      onDragStart={onDragStart}
      onDragEnd={onDragEnd}
      className={`flex items-center gap-3 p-4 bg-white rounded-lg border transition-all duration-200 ${
        isDragging ? "opacity-0" : "hover:shadow-md"
      } ${!file.included ? "opacity-60" : ""} ${
        isDropTarget ? "ring-2 ring-blue-400 shadow-md transform scale-[1.01]" : ""
      }`}
    >
      <div className="flex items-center gap-2">
        <Badge variant="outline" className="w-8 h-8 rounded-full flex items-center justify-center">
          {index + 1}
        </Badge>
        <div className="p-1 rounded-md hover:bg-slate-100 cursor-grab active:cursor-grabbing">
          <GripVertical className="w-4 h-4 text-slate-400" />
        </div>
      </div>

<div className="flex items-center gap-3">
        <div className="w-28">
          <Select value={file.version || "Latest"} onValueChange={(value) => onVersionChange(file.id, value)}>
            <SelectTrigger className="h-8 text-xs">
              <SelectValue placeholder="Version" />
            </SelectTrigger>
            <SelectContent>
              {versions.map((version) => (
                <SelectItem key={version} value={version}>
                  {version}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

<div className="flex items-center gap-2">
          <Switch
            id={`include-${file.id}`}
            checked={file.included}
            onCheckedChange={() => onToggleInclusion(file.id)}
          />
          <Label htmlFor={`include-${file.id}`} className="text-xs">
            Include
          </Label>
        </div>

<Button
          variant="ghost"
          size="sm"
          onClick={() => onRemove(file.id)}
          className="text-red-600 hover:text-red-700 hover:bg-red-50"
        >
          <Trash2 className="w-4 h-4" />
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/removed-files.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"

import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { FileText, GripVertical, Plus } from "lucide-react"
import type { PDFFile } from "@/types/pdf-merger"

interface RemovedFilesProps {
  files: PDFFile[]
  onAddBack: (fileId: string, insertIndex?: number) => void
}

export function RemovedFiles({ files, onAddBack }: RemovedFilesProps) {
  const handleDragStart = (e: React.DragEvent, fileId: string) => {
    e.dataTransfer.setData("removedFileId", fileId)
    e.dataTransfer.effectAllowed = "copy"

// Set a transparent drag image to hide the default one
    const img = new Image()
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    e.dataTransfer.setDragImage(img, 0, 0)

// Create a ghost element that follows the cursor
    const ghostEl = document.createElement("div")
    ghostEl.id = "drag-ghost"
    ghostEl.style.position = "fixed"
    ghostEl.style.zIndex = "9999"
    ghostEl.style.pointerEvents = "none"
    ghostEl.style.left = "0"
    ghostEl.style.top = "0"
    ghostEl.style.opacity = "0.8"
    ghostEl.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`

const file = files.find((f) => f.id === fileId)
    if (file) {
      ghostEl.innerHTML = `
        <div class="bg-white rounded-lg border shadow-lg p-3">
          <div class="flex items-center gap-2">
            <div class="p-1 bg-red-50 rounded">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" class="text-red-600">
                <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
                <polyline points="14 2 14 8 20 8"></polyline>
              </svg>
            </div>
            <div class="font-medium text-sm">${file.name}</div>
          </div>
        </div>
      `
      document.body.appendChild(ghostEl)

// Update ghost position on mouse move
      const moveHandler = (moveEvent: MouseEvent) => {
        ghostEl.style.transform = `translate(${moveEvent.clientX + 10}px, ${moveEvent.clientY + 10}px)`
      }

document.addEventListener("mousemove", moveHandler)

// Remove ghost on drag end
      const endHandler = () => {
        document.removeEventListener("mousemove", moveHandler)
        document.removeEventListener("dragend", endHandler)
        if (ghostEl.parentNode) {
          ghostEl.parentNode.removeChild(ghostEl)
        }
      }

document.addEventListener("dragend", endHandler)
    }
  }

if (files.length === 0) return null

return (
    <div>
      <h3 className="text-lg font-semibold mb-4">Removed Files</h3>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        {files.map((file) => (
          <Card
            key={file.id}
            className="flex items-center gap-2 p-3 bg-slate-50 cursor-grab hover:shadow-md transition-all"
            draggable
            onDragStart={(e) => handleDragStart(e, file.id)}
          >
            <div className="p-1 rounded-md hover:bg-slate-200 cursor-grab active:cursor-grabbing">
              <GripVertical className="w-3 h-3 text-slate-400" />
            </div>
            <div className="p-1 bg-red-50 rounded">
              <FileText className="w-4 h-4 text-red-600" />
            </div>
            <span className="text-sm flex-1 truncate" title={file.name}>
              {file.name}
            </span>
            <Button
              variant="ghost"
              size="sm"
              onClick={() => onAddBack(file.id)}
              className="text-green-600 hover:text-green-700 hover:bg-green-50"
            >
              <Plus className="w-4 h-4" />
            </Button>
          </Card>
        ))}
      </div>
      <div className="mt-3 p-3 bg-green-50 rounded-lg border border-green-200">
        <p className="text-xs text-green-700">
          💡 Drag removed files back to the merge queue and drop them anywhere on a file to position before or after it
        </p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="pdf-merger.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { FileText } from "lucide-react"
import { FolderBrowser } from "@/components/folder-browser"
import { MergeQueue } from "@/components/merge-queue"
import { RemovedFiles } from "@/components/removed-files"
import { ConfigForm } from "@/components/config-form"
import { ActionButtons } from "@/components/action-buttons"
import type { PDFFile, FolderNode, SequenceOption } from "@/types/pdf-merger"
import { Calendar, ListOrderedIcon as AlphabeticalSort, Hash } from "lucide-react"

// Track mouse position globally for drag ghost
if (typeof window !== "undefined") {
  window.mouseX = 0
  window.mouseY = 0
  window.addEventListener("mousemove", (e) => {
    window.mouseX = e.clientX
    window.mouseY = e.clientY
  })
}

// Predefined sequence options
const sequenceOptions: SequenceOption[] = [
  {
    id: "chronological",
    name: "Chronological",
    description: "Order by dates in filename (Q1, Q2, 2023, 2024, etc.)",
    icon: <Calendar className="w-4 h-4" />,
    patterns: [
      "Q1",
      "Q2",
      "Q3",
      "Q4",
      "2023",
      "2024",
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec",
    ],
  },
  {
    id: "alphabetical",
    name: "Alphabetical",
    description: "Sort files alphabetically by name",
    icon: <AlphabeticalSort className="w-4 h-4" />,
    patterns: [],
  },
  {
    id: "numerical",
    name: "Numerical",
    description: "Order by numbers in filename (1, 2, 3, etc.)",
    icon: <Hash className="w-4 h-4" />,
    patterns: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
  },
  {
    id: "document-type",
    name: "Document Type",
    description: "Group by document type (Report, Contract, Invoice, etc.)",
    icon: <FileText className="w-4 h-4" />,
    patterns: ["Report", "Contract", "Invoice", "Agreement", "Manual", "Spec", "Proposal", "Summary"],
  },
]

// Sample folder structure
const sampleFolders: FolderNode[] = [
  {
    name: "Documents",
    type: "folder",
    path: "/Documents",
    children: [
      {
        name: "Reports",
        type: "folder",
        path: "/Documents/Reports",
        children: [
          { name: "Q1_Report.pdf", type: "file", path: "/Documents/Reports/Q1_Report.pdf" },
          { name: "Q2_Report.pdf", type: "file", path: "/Documents/Reports/Q2_Report.pdf" },
          { name: "Annual_Summary.pdf", type: "file", path: "/Documents/Reports/Annual_Summary.pdf" },
        ],
      },
      {
        name: "Contracts",
        type: "folder",
        path: "/Documents/Contracts",
        children: [
          { name: "Service_Agreement.pdf", type: "file", path: "/Documents/Contracts/Service_Agreement.pdf" },
          { name: "NDA_Template.pdf", type: "file", path: "/Documents/Contracts/NDA_Template.pdf" },
        ],
      },
      { name: "Invoice_2024.pdf", type: "file", path: "/Documents/Invoice_2024.pdf" },
    ],
  },
  {
    name: "Projects",
    type: "folder",
    path: "/Projects",
    children: [
      {
        name: "Website_Redesign",
        type: "folder",
        path: "/Projects/Website_Redesign",
        children: [
          { name: "Wireframes.pdf", type: "file", path: "/Projects/Website_Redesign/Wireframes.pdf" },
          { name: "Design_Specs.pdf", type: "file", path: "/Projects/Website_Redesign/Design_Specs.pdf" },
        ],
      },
      { name: "Project_Proposal.pdf", type: "file", path: "/Projects/Project_Proposal.pdf" },
    ],
  },
  {
    name: "Archive",
    type: "folder",
    path: "/Archive",
    children: [
      { name: "Old_Manual.pdf", type: "file", path: "/Archive/Old_Manual.pdf" },
      { name: "Legacy_Docs.pdf", type: "file", path: "/Archive/Legacy_Docs.pdf" },
    ],
  },
]

export default function Component() {
  const [mergeFiles, setMergeFiles] = useState<PDFFile[]>([])
  const [removedFiles, setRemovedFiles] = useState<PDFFile[]>([])
  const [filename, setFilename] = useState("merged_document")
  const [description, setDescription] = useState("")
  const [selectedSequence, setSelectedSequence] = useState<string>("")

// Fuzzy matching function
  const fuzzyMatch = (text: string, patterns: string[]): number => {
    let score = 0
    const lowerText = text.toLowerCase()

patterns.forEach((pattern, index) => {
      const lowerPattern = pattern.toLowerCase()
      if (lowerText.includes(lowerPattern)) {
        // Earlier patterns get higher priority
        score += (patterns.length - index) * 10
        // Exact matches get bonus points
        if (lowerText === lowerPattern) score += 50
        // Word boundary matches get bonus points
        if (lowerText.includes(` ${lowerPattern}`) || lowerText.startsWith(lowerPattern)) score += 20
      }
    })

return score
  }

// Apply sequence to files
  const applySequence = (sequenceId: string) => {
    if (!sequenceId || mergeFiles.length === 0) return

const sequence = sequenceOptions.find((s) => s.id === sequenceId)
    if (!sequence) return

const sortedFiles = [...mergeFiles]

switch (sequenceId) {
      case "alphabetical":
        sortedFiles.sort((a, b) => a.name.localeCompare(b.name))
        break
      case "chronological":
      case "numerical":
      case "document-type":
        sortedFiles.sort((a, b) => {
          const scoreA = fuzzyMatch(a.name, sequence.patterns)
          const scoreB = fuzzyMatch(b.name, sequence.patterns)
          if (scoreA !== scoreB) return scoreB - scoreA // Higher score first
          return a.name.localeCompare(b.name) // Fallback to alphabetical
        })
        break
    }

setMergeFiles(sortedFiles)
  }

const addFileToMerge = (filePath: string, insertIndex?: number) => {
    const fileName = filePath.split("/").pop() || filePath
    const newFile: PDFFile = {
      id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
      name: fileName,
      size: `${Math.floor(Math.random() * 5000 + 500)} KB`,
      path: filePath,
      included: true,
      version: "Latest",
    }

if (insertIndex !== undefined) {
      const newFiles = [...mergeFiles]
      newFiles.splice(insertIndex, 0, newFile)
      setMergeFiles(newFiles)
    } else {
      setMergeFiles((prev) => [...prev, newFile])
    }
  }

const removeFileFromMerge = (fileId: string) => {
    const fileToRemove = mergeFiles.find((f) => f.id === fileId)
    if (fileToRemove) {
      setMergeFiles((prev) => prev.filter((f) => f.id !== fileId))
      setRemovedFiles((prev) => [...prev, fileToRemove])
    }
  }

const addFileBackToMerge = (fileId: string, insertIndex?: number) => {
    const fileToAdd = removedFiles.find((f) => f.id === fileId)
    if (fileToAdd) {
      setRemovedFiles((prev) => prev.filter((f) => f.id !== fileId))

if (insertIndex !== undefined) {
        const newFiles = [...mergeFiles]
        newFiles.splice(insertIndex, 0, fileToAdd)
        setMergeFiles(newFiles)
      } else {
        setMergeFiles((prev) => [...prev, fileToAdd])
      }
    }
  }

const toggleFileInclusion = (fileId: string) => {
    setMergeFiles((prev) => prev.map((f) => (f.id === fileId ? { ...f, included: !f.included } : f)))
  }

const updateFileVersion = (fileId: string, version: string) => {
    setMergeFiles((prev) => prev.map((f) => (f.id === fileId ? { ...f, version } : f)))
  }

const reorderFiles = (fromIndex: number, toIndex: number) => {
    const newFiles = [...mergeFiles]
    const [movedFile] = newFiles.splice(fromIndex, 1)
    newFiles.splice(toIndex, 0, movedFile)
    setMergeFiles(newFiles)
  }

const handleMerge = () => {
    // In a real app, this would trigger the PDF merge process
    console.log(
      "Merging files:",
      mergeFiles.filter((f) => f.included),
    )
    alert(`Merging ${mergeFiles.filter((f) => f.included).length} files`)
  }

const handleClear = () => {
    setMergeFiles([])
    setRemovedFiles([])
    setFilename("merged_document")
    setDescription("")
    setSelectedSequence("")
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 p-6">
      <div className="max-w-7xl mx-auto">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-slate-900 mb-2">PDF Merger</h1>
          <p className="text-slate-600">Combine multiple PDF files into a single document with ease</p>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* File Browser */}
          <FolderBrowser folders={sampleFolders} onFileSelect={addFileToMerge} />

{/* Main Merge Area */}
          <Card className="lg:col-span-2 shadow-md">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <FileText className="w-5 h-5" />
                PDF Merge Configuration
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              {/* Configuration Form */}
              <ConfigForm
                filename={filename}
                description={description}
                selectedSequence={selectedSequence}
                sequenceOptions={sequenceOptions}
                onFilenameChange={setFilename}
                onDescriptionChange={setDescription}
                onSequenceChange={(value) => {
                  setSelectedSequence(value)
                  applySequence(value)
                }}
              />

{/* Merge Queue */}
              <MergeQueue
                files={mergeFiles}
                onToggleInclusion={toggleFileInclusion}
                onRemove={removeFileFromMerge}
                onReorder={reorderFiles}
                onVersionChange={updateFileVersion}
                onAddFile={addFileToMerge}
              />

{/* Removed Files */}
              {removedFiles.length > 0 && (
                <>
                  <Separator />
                  <RemovedFiles files={removedFiles} onAddBack={addFileBackToMerge} />
                </>
              )}

{/* Action Buttons */}
              <ActionButtons
                fileCount={mergeFiles.filter((f) => f.included).length}
                onMerge={handleMerge}
                onClear={handleClear}
              />
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="types/pdf-merger.ts" isEdit="true" isQuickEdit="true"
import type { ReactNode } from "react"

// Add this to the global Window interface at the top of the file
declare global {
  interface Window {
    mouseX: number
    mouseY: number
  }
}

export interface PDFFile {
  id: string
  name: string
  size: string
  path: string
  included: boolean
  version?: string
}

export interface FolderNode {
  name: string
  type: "folder" | "file"
  children?: FolderNode[]
  path: string
}

export interface SequenceOption {
  id: string
  name: string
  description: string
  icon: ReactNode
  patterns: string[]
}</article></body></html>