import { useNavigate } from '@tanstack/react-router'
import { Card } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { formatRelativeTime } from '@/lib/utils'
import type { PlanningInitiativeItem } from './types'

interface Props {
  items: PlanningInitiativeItem[]
}

export function HQNeedsApprovalSection({ items }: Props) {
  const navigate = useNavigate()

  return (
    <div className="space-y-3">
      <h2 className="text-sm font-medium text-muted-foreground uppercase tracking-wide">
        Needs Approval to Continue
      </h2>
      <div className="space-y-2">
        {items.map((item) => {
          const s = item.pendingPhaseCount === 1 ? '' : 's'
          return (
            <Card key={item.initiativeId} className="p-4 flex items-center justify-between gap-4">
              <div className="min-w-0 flex-1">
                <p className="font-semibold text-sm">{item.initiativeName}</p>
                <p className="text-sm text-muted-foreground">
                  Plan ready — {item.pendingPhaseCount} phase{s} awaiting approval
                </p>
                <p className="text-xs text-muted-foreground">{formatRelativeTime(item.since)}</p>
              </div>
              <Button
                variant="default"
                size="sm"
                onClick={() =>
                  navigate({
                    to: '/initiatives/$id',
                    params: { id: item.initiativeId },
                    search: { tab: 'plan' },
                  })
                }
              >
                Review Plan
              </Button>
            </Card>
          )
        })}
      </div>
    </div>
  )
}
