import React from "react";
import type { ClaimDetail } from "@/types";

type RawSegmentsPanelProps = {
  rawSegments: ClaimDetail["rawSegments"];
};

/**
 * Format a single segment by joining its elements with `*` (the X12
 * element separator). Trailing/leading whitespace inside individual
 * elements is preserved — these strings come straight off the parser
 * and any trimming would change the visible byte-for-byte content.
 */
function formatSegment(elements: string[]): string {
  return elements.join("*");
}

/**
 * Raw-segments debug section of the claim detail drawer (SP4).
 *
 * Renders the exact X12 segment strings the parser saw, collapsed by
 * default behind a native <details>/<summary> so the user can opt in
 * to a wall of monospace when they're debugging. Element separator is
 * `*` and segment terminator is implicit at the end of each line —
 * matches what the parser produces. This is a read-only diagnostic;
 * the plan keeps it intentionally simple (no copy button for v1).
 */
export function RawSegmentsPanel({ rawSegments }: RawSegmentsPanelProps) {
  return (
    <section
      className="flex flex-col gap-3 px-6 py-4"
      data-testid="raw-segments-panel"
    >
      <h3
        data-testid="section-label"
        className="eyebrow text-muted-foreground"
      >
        Raw Segments ({rawSegments.length})
      </h3>

      <details className="group rounded-lg border border-border/60 bg-muted/30 overflow-hidden transition-colors hover:border-border">
        <summary
          className="cursor-pointer select-none px-4 py-2.5 text-sm text-muted-foreground hover:text-foreground transition-colors [&::-webkit-details-marker]:hidden flex items-center gap-2"
          data-testid="raw-segments-summary"
        >
          <span className="inline-block h-1.5 w-1.5 rounded-full bg-muted-foreground group-open:bg-accent transition-colors" />
          {rawSegments.length === 0
            ? `Show raw segments`
            : `Show ${rawSegments.length} raw segment${rawSegments.length === 1 ? "" : "s"}`}
        </summary>

        {rawSegments.length === 0 ? (
          <p
            data-testid="raw-segments-empty"
            className="px-4 pb-3 text-sm text-muted-foreground"
          >
            No segments
          </p>
        ) : (
          <pre
            data-testid="raw-segments-pre"
            className="overflow-x-auto whitespace-pre-wrap border-t border-border/40 px-4 pb-3 pt-3 text-[12px] leading-relaxed text-foreground font-mono"
            style={{ fontFamily: "var(--m-font-mono)" }}
          >
            {rawSegments.map((segment, i) => (
              <React.Fragment key={i}>
                {i > 0 ? "\n" : null}
                <span data-testid="raw-segment-line">{formatSegment(segment)}</span>
              </React.Fragment>
            ))}
          </pre>
        )}
      </details>
    </section>
  );
}