'use client'

import { useEffect, useRef, type ReactNode } from 'react'

export default function IssueFlowStep({
  number, title, summary, active, complete, onEdit, children,
}: {
  number: number
  title: string
  summary: string
  active: boolean
  complete: boolean
  onEdit: () => void
  children: ReactNode
}) {
  const heading = useRef<HTMLHeadingElement>(null)
  useEffect(() => {
    if (!active || number === 1) return
    heading.current?.focus({ preventScroll: true })
    heading.current?.scrollIntoView({ block: 'nearest', behavior: 'instant' })
  }, [active, number])

  if (!active && !complete) return null
  return (
    <section className={`issue-procedure-step ${active ? 'is-current' : 'is-complete'}`} aria-label={title}>
      {active ? (
        <>
          <div className="issue-flow-heading">
            <span className="issue-step-number" aria-hidden="true">{String(number).padStart(2, '0')}</span>
            <h2 ref={heading} tabIndex={-1}>{title}</h2>
          </div>
          <div className="issue-procedure-content">{children}</div>
        </>
      ) : (
        <button type="button" className="issue-step-summary" onClick={onEdit} aria-label={`Change ${title}: ${summary}`}>
          <span className="issue-step-number" aria-hidden="true">✓</span>
          <span className="issue-step-summary-copy"><small>{title}</small><strong>{summary}</strong></span>
          <span className="issue-step-change">Change</span>
        </button>
      )}
    </section>
  )
}