'use client'

import { useRouter } from 'next/navigation'
import { InteractiveChecklistItem, AddChecklistItem } from '@/components/InteractiveChecklist'

interface ChecklistItem {
  id: string
  itemName: string
  status: string
  phase: string
  owner: { id: string; name: string } | null
}

interface ChecklistSectionProps {
  rfpId: string
  items: ChecklistItem[]
  phase: string
  phaseTitle: string
}

export function ChecklistSection({ rfpId, items, phase, phaseTitle }: ChecklistSectionProps) {
  const router = useRouter()

  const handleUpdate = () => {
    router.refresh()
  }

  const phaseItems = items.filter((item) => item.phase === phase)

  return (
    <div className="mb-8">
      <h4 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
        {phaseTitle}
        <span className="badge-cozy bg-gradient-to-r from-gray-100 to-gray-200 text-gray-700">
          {phaseItems.filter((i) => i.status === 'Complete').length}/{phaseItems.length}
        </span>
      </h4>
      <div className="space-y-3">
        {phaseItems.map((item) => (
          <InteractiveChecklistItem
            key={item.id}
            id={item.id}
            itemName={item.itemName}
            status={item.status}
            owner={item.owner}
            phase={item.phase}
            onUpdate={handleUpdate}
          />
        ))}
        <AddChecklistItem rfpId={rfpId} phase={phase} onAdd={handleUpdate} />
      </div>
    </div>
  )
}