resolutionflow/frontend/src/pages/AdminCategoriesPage.tsx

import { useState, useEffect } from 'react'
import { Plus } from 'lucide-react'
import { DndContext, closestCenter } from '@dnd-kit/core'
import type { DragEndEvent } from '@dnd-kit/core'
import { SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable'
import { stepCategoriesApi } from '@/api/stepCategories'
import { stepsApi } from '@/api/steps'
import { CategoryRow } from '@/components/admin/CategoryRow'
import { CreateCategoryModal } from '@/components/admin/CreateCategoryModal'
import { EditCategoryModal } from '@/components/admin/EditCategoryModal'
import type { StepCategoryListItem } from '@/types'
import { cn } from '@/lib/utils'
import { toast } from '@/lib/toast'

export function AdminCategoriesPage() {
  const [categories, setCategories] = useState<StepCategoryListItem[]>([])
  const [allSteps, setAllSteps] = useState<{ category_id?: string }[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [showCreateModal, setShowCreateModal] = useState(false)
  const [showEditModal, setShowEditModal] = useState(false)
  const [editingCategory, setEditingCategory] = useState<StepCategoryListItem | null>(null)
  const [isSaving, setIsSaving] = useState(false)
  const [includeArchived, setIncludeArchived] = useState(false)

  useEffect(() => {
    loadData()
  }, [includeArchived])

  const loadData = async () => {
    setIsLoading(true)
    try {
      const [categoriesData, stepsData] = await Promise.all([
        stepCategoriesApi.list({ include_inactive: includeArchived }),
        stepsApi.list({})
      ])
      setCategories(categoriesData)
      setAllSteps(stepsData)
    } catch (err) {
      console.error('Failed to load categories:', err)
      toast.error('Failed to load categories')
    } finally {
      setIsLoading(false)
    }
  }

  const getStepCount = (categoryId: string) => {
    return allSteps?.filter(s => s.category_id === categoryId).length || 0
  }

  const handleCreate = async (data: { name: string; description: string }) => {
    setIsSaving(true)
    try {
      await stepCategoriesApi.create({
        name: data.name,
        description: data.description || undefined
      })
      toast.success('Category created successfully')
      setShowCreateModal(false)
      await loadData()
    } catch (err) {
      console.error('Failed to create category:', err)
      toast.error('Failed to create category')
      throw err
    } finally {
      setIsSaving(false)
    }
  }

  const handleEdit = async (data: { name: string; description: string }) => {
    if (!editingCategory) return
    setIsSaving(true)
    try {
      await stepCategoriesApi.update(editingCategory.id, {
        name: data.name,
        description: data.description || undefined
      })
      toast.success('Category updated successfully')
      setShowEditModal(false)
      setEditingCategory(null)
      await loadData()
    } catch (err) {
      console.error('Failed to update category:', err)
      toast.error('Failed to update category')
      throw err
    } finally {
      setIsSaving(false)
    }
  }

  const handleArchive = async (id: string) => {
    try {
      await stepCategoriesApi.archive(id)
      toast.success('Category archived')
      await loadData()
    } catch (err) {
      console.error('Failed to archive category:', err)
      toast.error('Failed to archive category')
    }
  }

  const handleRestore = async (id: string) => {
    try {
      await stepCategoriesApi.restore(id)
      toast.success('Category restored')
      await loadData()
    } catch (err) {
      console.error('Failed to restore category:', err)
      toast.error('Failed to restore category')
    }
  }

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

    const oldIndex = categories.findIndex(c => c.id === active.id)
    const newIndex = categories.findIndex(c => c.id === over.id)

    const reordered = arrayMove(categories, oldIndex, newIndex)

    // Optimistic update
    setCategories(reordered)

    try {
      // Update display_order for all affected categories
      const updates = reordered.map((cat, index) => ({
        id: cat.id,
        display_order: index
      }))
      await stepCategoriesApi.updateOrder(updates)
      toast.success('Categories reordered')
    } catch (err) {
      console.error('Failed to reorder categories:', err)
      toast.error('Failed to save order')
      // Revert on error
      await loadData()
    }
  }

  const openEditModal = (category: StepCategoryListItem) => {
    setEditingCategory(category)
    setShowEditModal(true)
  }

  if (isLoading) {
    return (
      <div className="flex h-64 items-center justify-center">
        <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-foreground" />
      </div>
    )
  }

  return (
    <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
      {/* Header */}
      <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold text-foreground sm:text-3xl">
            Step Categories
          </h1>
          <p className="mt-2 text-muted-foreground">
            Manage categories for organizing step library
          </p>
        </div>
        <button
          onClick={() => setShowCreateModal(true)}
          className={cn(
            'flex items-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
            'hover:opacity-90'
          )}
        >
          <Plus className="h-4 w-4" />
          Create Category
        </button>
      </div>

      {/* Filter Toggle */}
      <div className="mb-4">
        <label className="flex items-center gap-2 cursor-pointer">
          <input
            type="checkbox"
            checked={includeArchived}
            onChange={(e) => setIncludeArchived(e.target.checked)}
            className="h-4 w-4 rounded border-border text-foreground focus:ring-2 focus:ring-primary/20 focus:ring-offset-0"
          />
          <span className="text-sm text-muted-foreground">Show archived categories</span>
        </label>
      </div>

      {/* Categories List */}
      {categories.length === 0 ? (
        <div className="bg-card border border-border rounded-xl p-12 text-center">
          <p className="text-muted-foreground">
            No categories found. Create your first category to get started.
          </p>
        </div>
      ) : (
        <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
          <SortableContext
            items={categories.map(c => c.id)}
            strategy={verticalListSortingStrategy}
          >
            <div className="space-y-3">
              {categories.map(category => (
                <CategoryRow
                  key={category.id}
                  category={category}
                  stepCount={getStepCount(category.id)}
                  onEdit={openEditModal}
                  onArchive={handleArchive}
                  onRestore={handleRestore}
                />
              ))}
            </div>
          </SortableContext>
        </DndContext>
      )}

      {/* Create Modal */}
      <CreateCategoryModal
        isOpen={showCreateModal}
        onClose={() => setShowCreateModal(false)}
        onSubmit={handleCreate}
        isSaving={isSaving}
      />

      {/* Edit Modal */}
      <EditCategoryModal
        isOpen={showEditModal}
        onClose={() => {
          setShowEditModal(false)
          setEditingCategory(null)
        }}
        onSubmit={handleEdit}
        category={editingCategory}
        isSaving={isSaving}
      />
    </div>
  )
}

export default AdminCategoriesPage