EpicNext-Cms/src/components/admin/catalog-manager/root-tabs.tsx

'use client'

import {
  closestCenter,
  DndContext,
  type DragEndEvent,
  DragOverlay,
  type DragStartEvent,
  PointerSensor,
  useSensor,
  useSensors,
} from '@dnd-kit/core'
import {
  arrayMove,
  horizontalListSortingStrategy,
  SortableContext,
  useSortable,
} from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import { Loader2, Pencil, Plus, Power, PowerOff, Trash2 } from 'lucide-react'
import { useCallback, useState } from 'react'
import { toast } from 'sonner'
import { deleteTreePage, reorderTreePage, toggleCatalogPage } from '@/actions/catalog'
import { CatalogIcon } from '@/components/admin/catalog-tree'
import { Button } from '@/components/ui/button'
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from '@/components/ui/context-menu'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { cn } from '@/lib/utils'

export type { RootTab } from '@/types/catalog'

import type { RootTab } from '@/types/catalog'

interface RootTabsProps {
  tabs: RootTab[]
  activeTabId: number | null
  onTabClick: (id: number) => void
  onEditTab: (id: number) => void
  onCreateRoot: () => void
  loading?: boolean
}

export function RootTabs({
  tabs,
  activeTabId,
  onTabClick,
  onEditTab,
  onCreateRoot,
  loading,
}: RootTabsProps) {
  const [activeDragId, setActiveDragId] = useState<number | null>(null)
  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 8 } }))

  const handleDragStart = useCallback((event: DragStartEvent) => {
    setActiveDragId(event.active.id as number)
  }, [])

  const handleDragEnd = useCallback(
    async (event: DragEndEvent) => {
      const { active, over } = event
      setActiveDragId(null)
      if (!over || active.id === over.id) return

      const oldIndex = tabs.findIndex((t) => t.id === active.id)
      const newIndex = tabs.findIndex((t) => t.id === over.id)
      if (oldIndex === -1 || newIndex === -1) return

      const newOrder = arrayMove(tabs, oldIndex, newIndex)

      // Batch reorder
      try {
        const results = await Promise.allSettled(
          newOrder.map((tab, idx) => reorderTreePage({ pageId: tab.id, newOrderNum: idx + 1 })),
        )
        const failed = results.filter((r) => r.status === 'rejected').length
        if (failed) toast.error(`${failed} reorder(s) failed`)
        else toast.success('Tabs reordered')
      } catch {
        toast.error('Failed to reorder tabs')
      }
    },
    [tabs],
  )

  const handleToggle = async (tab: RootTab) => {
    try {
      await toggleCatalogPage({ id: tab.id, action: 'toggleEnabled' })
      toast.success(`${tab.caption} ${tab.enabled === '1' ? 'disabled' : 'enabled'}`)
    } catch {
      toast.error('Failed to toggle')
    }
  }

  const handleDelete = async (tab: RootTab) => {
    if (!confirm(`Delete root page "${tab.caption}"? Children will be reparented.`)) return
    try {
      await deleteTreePage({ pageId: tab.id, mode: 'reparent' })
      toast.success(`"${tab.caption}" deleted`)
    } catch {
      toast.error('Failed to delete')
    }
  }

  const draggedTab = activeDragId ? tabs.find((t) => t.id === activeDragId) : null

  return (
    <div className="flex items-center gap-1 border-b bg-muted/30 px-2 py-1.5 overflow-x-auto shrink-0">
      {loading && <Loader2 className="h-4 w-4 animate-spin text-muted-foreground mx-2" />}
      <DndContext
        sensors={sensors}
        collisionDetection={closestCenter}
        onDragStart={handleDragStart}
        onDragEnd={handleDragEnd}
      >
        <SortableContext items={tabs.map((t) => t.id)} strategy={horizontalListSortingStrategy}>
          {tabs.map((tab) => (
            <SortableRootTab
              key={tab.id}
              tab={tab}
              isActive={activeTabId === tab.id}
              onClick={() => onTabClick(tab.id)}
              onEdit={() => onEditTab(tab.id)}
              onToggle={() => handleToggle(tab)}
              onDelete={() => handleDelete(tab)}
            />
          ))}
        </SortableContext>
        <DragOverlay>
          {draggedTab && (
            <TabButton tab={draggedTab} isActive={activeTabId === draggedTab.id} isOverlay />
          )}
        </DragOverlay>
      </DndContext>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button
            variant="ghost"
            size="icon"
            className="h-7 w-7 shrink-0 ml-1"
            onClick={onCreateRoot}
          >
            <Plus className="h-3.5 w-3.5" />
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>New root page</p>
        </TooltipContent>
      </Tooltip>
    </div>
  )
}

// ── Sortable root tab ─────────────────────────────────────────

function SortableRootTab({
  tab,
  isActive,
  onClick,
  onEdit,
  onToggle,
  onDelete,
}: {
  tab: RootTab
  isActive: boolean
  onClick: () => void
  onEdit: () => void
  onToggle: () => void
  onDelete: () => void
}) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id: tab.id,
  })

  const style: React.CSSProperties = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.3 : 1,
  }

  return (
    <ContextMenu>
      <ContextMenuTrigger asChild>
        <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
          <TabButton tab={tab} isActive={isActive} onClick={onClick} onDoubleClick={onEdit} />
        </div>
      </ContextMenuTrigger>
      <ContextMenuContent className="w-44">
        <ContextMenuItem onClick={onEdit}>
          <Pencil className="mr-2 h-3.5 w-3.5" />
          Edit page
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem onClick={onToggle}>
          {tab.enabled === '1' ? (
            <PowerOff className="mr-2 h-3.5 w-3.5" />
          ) : (
            <Power className="mr-2 h-3.5 w-3.5" />
          )}
          {tab.enabled === '1' ? 'Disable' : 'Enable'}
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem className="text-destructive focus:text-destructive" onClick={onDelete}>
          <Trash2 className="mr-2 h-3.5 w-3.5" />
          Delete
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}

// ── Tab button render ─────────────────────────────────────────

function TabButton({
  tab,
  isActive,
  isOverlay,
  onClick,
  onDoubleClick,
}: {
  tab: RootTab
  isActive: boolean
  isOverlay?: boolean
  onClick?: () => void
  onDoubleClick?: () => void
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      onDoubleClick={onDoubleClick}
      className={cn(
        'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors whitespace-nowrap shrink-0',
        isActive
          ? 'bg-primary text-primary-foreground shadow-sm'
          : 'hover:bg-accent text-muted-foreground hover:text-foreground',
        tab.enabled !== '1' && 'opacity-50',
        isOverlay && 'bg-card shadow-lg border',
      )}
    >
      <CatalogIcon iconImage={tab.iconImage} size={16} />
      <span className="max-w-32 truncate">{tab.caption}</span>
    </button>
  )
}