EpicNext-Cms/src/components/admin/catalog-manager/catalog-manager-dialog.tsx

'use client'

import { LayoutGrid } from 'lucide-react'
import { useCallback, useEffect, useState } from 'react'
import { toast } from 'sonner'
import { createCatalogPage } from '@/actions/catalog'
import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import { TooltipProvider } from '@/components/ui/tooltip'
import type { RootTab } from '@/types/catalog'
import { BreadcrumbBar } from './breadcrumb-bar'
import { InlineEditor, type PageUpdateData } from './inline-editor'
import { RootTabs } from './root-tabs'
import { SortableTree } from './sortable-tree'
import { StatsBar } from './stats-bar'
import { CatalogManagerProvider, useCatalogManager } from './use-catalog-store'

export function CatalogManagerDialog() {
  const [open, setOpen] = useState(false)

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="outline" className="gap-2">
          <LayoutGrid className="h-4 w-4" />
          Visual Manager
        </Button>
      </DialogTrigger>
      <DialogContent
        className="max-w-full w-[98vw] h-[95vh] max-h-[95vh] p-0 flex flex-col gap-0 sm:max-w-[98vw]"
        onInteractOutside={(e) => e.preventDefault()}
      >
        <CatalogManagerProvider>
          <CatalogManagerInner open={open} onOpenChange={setOpen} />
        </CatalogManagerProvider>
      </DialogContent>
    </Dialog>
  )
}

function CatalogManagerInner({
  open,
  // biome-ignore lint/correctness/noUnusedFunctionParameters: part of the dialog public API
  onOpenChange,
}: {
  open: boolean
  onOpenChange: (v: boolean) => void
}) {
  const { state, dispatch } = useCatalogManager()

  // Load root pages when dialog opens
  const loadRootPages = useCallback(async () => {
    dispatch({ type: 'SET_LOADING_ROOT', loading: true })
    try {
      const res = await fetch('/api/admin/catalog/tree?parentId=-1')
      if (!res.ok) throw new Error()
      const data = await res.json()
      const pages: RootTab[] = (data.pages || []).map((p: Record<string, unknown>) => ({
        id: p.id as number,
        caption: p.caption as string,
        iconImage: p.iconImage as number,
        enabled: String(p.enabled),
        orderNum: (p.orderNum as number) || 0,
      }))
      dispatch({ type: 'SET_ROOT_PAGES', pages })

      // Auto-select first tab if none or missing
      if (
        pages.length > 0 &&
        (!state.activeTabId || !pages.find((p) => p.id === state.activeTabId))
      ) {
        dispatch({ type: 'SET_ACTIVE_TAB', id: pages[0].id })
      }
    } catch {
      toast.error('Failed to load catalog root pages')
      dispatch({ type: 'SET_LOADING_ROOT', loading: false })
    }
  }, [dispatch, state.activeTabId])

  // biome-ignore lint/correctness/useExhaustiveDependencies: explicitly chosen here, see surrounding code
  useEffect(() => {
    if (open) loadRootPages()
  }, [open]) // eslint-disable-line react-hooks/exhaustive-deps

  // Handle dialog close: preserve tree state, clear selection
  useEffect(() => {
    if (!open) dispatch({ type: 'ON_DIALOG_CLOSE' })
  }, [open, dispatch])

  const handleTabClick = (id: number) => {
    if (state.editorDirty && !confirm('You have unsaved changes. Discard?')) return
    dispatch({ type: 'SET_ACTIVE_TAB', id })
    dispatch({ type: 'CLEAR_TREE' })
  }

  const handleCreateRoot = async () => {
    const caption = prompt('Root page name:')
    if (!caption?.trim()) return
    try {
      const result = await createCatalogPage({ parentId: -1, caption: caption.trim() })
      if (!result.ok) throw new Error(result.error)
      await loadRootPages()
      toast.success('Root page created')
    } catch {
      toast.error('Failed to create root page')
    }
  }

  const handleSelectPage = (id: number) => {
    if (state.editorDirty && !confirm('You have unsaved changes. Discard?')) return
    dispatch({ type: 'SELECT_PAGE', id: id > 0 ? id : null })
  }

  const handleEditTab = (id: number) => {
    // First ensure this tab is active, then select it in the editor
    if (state.activeTabId !== id) {
      dispatch({ type: 'SET_ACTIVE_TAB', id })
      dispatch({ type: 'CLEAR_TREE' })
    }
    if (state.editorDirty && !confirm('You have unsaved changes. Discard?')) return
    dispatch({ type: 'SELECT_PAGE', id })
  }

  const handleEditorSaved = (updated: PageUpdateData) => {
    dispatch({ type: 'UPDATE_NODE', update: { ...updated } })
    dispatch({ type: 'SET_DIRTY', dirty: false })

    // Update root tabs if root page
    const rootIdx = state.rootPages.findIndex((p) => p.id === updated.id)
    if (rootIdx !== -1) {
      const pages = [...state.rootPages]
      pages[rootIdx] = { ...pages[rootIdx], caption: updated.caption, enabled: updated.enabled }
      dispatch({ type: 'SET_ROOT_PAGES', pages })
    }
  }

  return (
    <TooltipProvider delayDuration={300}>
      {/* Header */}
      <DialogHeader className="px-4 py-2.5 border-b shrink-0">
        <DialogTitle className="text-base flex items-center gap-2">
          <LayoutGrid className="h-4 w-4" />
          Visual Catalog Manager
        </DialogTitle>
      </DialogHeader>

      {/* Breadcrumb */}
      <BreadcrumbBar />

      {/* Root tabs */}
      <RootTabs
        tabs={state.rootPages}
        activeTabId={state.activeTabId}
        onTabClick={handleTabClick}
        onEditTab={handleEditTab}
        onCreateRoot={handleCreateRoot}
        loading={state.loadingRoot}
      />

      {/* Main content: tree + editor */}
      <div className="flex flex-1 min-h-0">
        <SortableTree
          activeTabId={state.activeTabId}
          selectedPageId={state.selectedPageId}
          onSelectPage={handleSelectPage}
          onTreeMutation={loadRootPages}
          nodeUpdate={null}
        />
        <InlineEditor pageId={state.selectedPageId} onSaved={handleEditorSaved} />
      </div>

      {/* Stats bar */}
      <StatsBar />
    </TooltipProvider>
  )
}