'use client'

/**
 * Production Readiness Backlog
 *
 * Comprehensive checklist of items needed before going live with BreakPilot
 * Includes CI/CD, Security, RBAC, Data Protection, and Release Workflows
 *
 * Migrated from website/app/admin/backlog/page.tsx
 * Updated: 2026-02-03
 */

import { PagePurpose } from '@/components/common/PagePurpose'
import { metaModules } from '@/lib/navigation'
import { categories } from './data'
import { useBacklog } from './useBacklog'
import { OverallProgress } from './_components/OverallProgress'
import { CategoryCards } from './_components/CategoryCards'
import { FilterBar } from './_components/FilterBar'
import { BacklogItemCard } from './_components/BacklogItemCard'
import { InfoBox } from './_components/InfoBox'

export default function BacklogPage() {
  const module = metaModules.find((m) => m.id === 'backlog')
  const {
    filteredItems,
    selectedCategory,
    setSelectedCategory,
    selectedPriority,
    setSelectedPriority,
    expandedItems,
    searchQuery,
    setSearchQuery,
    toggleExpand,
    updateItemStatus,
    toggleSubtask,
    progress,
    getCategoryProgress,
    resetToDefaults,
    clearFilters,
    hasActiveFilters,
  } = useBacklog()

  return (
    <div className="space-y-6">
      {module && (
        <PagePurpose
          title={module.name}
          purpose={module.purpose}
          audience={module.audience}
          collapsible={true}
          defaultCollapsed={true}
        />
      )}

      <OverallProgress progress={progress} onReset={resetToDefaults} />

      <CategoryCards
        categories={categories}
        selectedCategory={selectedCategory}
        onSelectCategory={setSelectedCategory}
        getCategoryProgress={getCategoryProgress}
      />

      <FilterBar
        searchQuery={searchQuery}
        onSearchChange={setSearchQuery}
        selectedPriority={selectedPriority}
        onPriorityChange={setSelectedPriority}
        hasActiveFilters={hasActiveFilters}
        onClearFilters={clearFilters}
      />

      {/* Backlog Items */}
      <div className="space-y-3">
        {filteredItems.map((item) => {
          const category = categories.find((c) => c.id === item.category)
          return (
            <BacklogItemCard
              key={item.id}
              item={item}
              category={category}
              isExpanded={expandedItems.has(item.id)}
              onToggleExpand={toggleExpand}
              onUpdateStatus={updateItemStatus}
              onToggleSubtask={toggleSubtask}
            />
          )
        })}
      </div>

      {filteredItems.length === 0 && (
        <div className="text-center py-12 text-slate-500">
          Keine Aufgaben gefunden. Versuche einen anderen Filter.
        </div>
      )}

      <InfoBox />
    </div>
  )
}