"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>
  );
}