cyclone/src/components/ClaimDrawer/ValidationPanel.tsx

import { AlertCircle, AlertTriangle, CheckCircle2 } from "lucide-react";
import type { ClaimDetail } from "@/types";

type ValidationPanelProps = {
  validation: ClaimDetail["validation"];
};

type IssueList = ClaimDetail["validation"]["errors"];

/**
 * Group issues by their `rule` field, preserving insertion order so the
 * backend's surface order is respected on screen. Returns an array of
 * `[rule, issues]` pairs — Maps aren't a great fit for JSX iteration here.
 */
function groupByRule(issues: IssueList): Array<[string, IssueList]> {
  const groups = new Map<string, IssueList>();
  for (const issue of issues) {
    const bucket = groups.get(issue.rule);
    if (bucket) {
      bucket.push(issue);
    } else {
      groups.set(issue.rule, [issue]);
    }
  }
  return Array.from(groups.entries());
}

/**
 * One rule-group block: header with rule code + count chip, followed by
 * the list of messages underneath.
 */
function IssueGroup({
  rule,
  issues,
  testId,
}: {
  rule: string;
  issues: IssueList;
  testId: string;
}) {
  const Icon = testId === "validation-errors" ? AlertCircle : AlertTriangle;
  const iconColor =
    testId === "validation-errors"
      ? "text-[color:var(--m-error)]"
      : "text-[color:var(--m-warning)]";

  return (
    <div className="flex flex-col gap-1.5">
      <div className="flex items-center gap-2">
        <span
          className="mono text-[12px] font-semibold tracking-tight text-[color:var(--m-ink-primary)]"
        >
          {rule}
        </span>
        <span
          className="inline-flex items-center rounded-full bg-[color:var(--m-ink-tertiary)]/15 px-1.5 py-0.5 text-[10px] font-medium text-[color:var(--m-ink-secondary)] tabular-nums"
          data-testid={`${testId}-count`}
        >
          {issues.length}
        </span>
      </div>
      <ul className="flex flex-col gap-1.5 pl-1">
        {issues.map((issue, idx) => (
          <li
            key={`${rule}-${idx}`}
            className="flex items-start gap-2 text-[13px] leading-snug text-[color:var(--m-ink-secondary)]"
            data-testid={`${testId}-message`}
          >
            <Icon
              className={`mt-0.5 h-3.5 w-3.5 shrink-0 ${iconColor}`}
              strokeWidth={1.75}
              aria-hidden
            />
            <span>{issue.message}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

/**
 * Validation section of the claim detail drawer (SP4).
 *
 * Three states:
 *  - passed && warnings.length === 0  → "All checks passed" pill
 *  - errors and/or warnings present   → grouped sub-sections
 *
 * Issues are grouped by their `rule` field (e.g. R050_diagnosis_present)
 * with a per-group count, so repeated violations of the same rule don't
 * drown out other rules. Errors render before warnings so the user sees
 * blocking issues first.
 */
export function ValidationPanel({ validation }: ValidationPanelProps) {
  const allPassed = validation.passed && validation.warnings.length === 0;

  if (allPassed) {
    return (
      <section
        data-testid="validation-passed"
        className="flex items-center gap-2 px-6 py-3"
      >
        <CheckCircle2
          className="h-4 w-4 text-[color:var(--m-success)]"
          strokeWidth={1.75}
          aria-hidden
        />
        <span className="text-[13px] font-medium text-[color:var(--m-ink-primary)]">
          All checks passed
        </span>
        <span className="ml-auto inline-flex items-center rounded-full bg-[color:var(--m-success)]/12 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-[color:var(--m-success)]">
          Valid
        </span>
      </section>
    );
  }

  const errorGroups = groupByRule(validation.errors);
  const warningGroups = groupByRule(validation.warnings);

  return (
    <section
      className="flex flex-col gap-4 px-6 py-4 bg-[color:var(--m-surface)]"
      data-testid="validation-panel"
    >
      <span className="eyebrow text-[color:var(--m-ink-tertiary)]">
        Validation
      </span>

      {validation.errors.length > 0 ? (
        <div
          data-testid="validation-errors"
          data-rule-group="errors"
          role="alert"
          className="flex flex-col gap-3 border-l-2 border-[color:var(--m-error)] bg-[hsl(var(--destructive)/0.06)] px-3.5 py-3"
        >
          <div className="flex items-center gap-2">
            <AlertCircle
              className="h-3.5 w-3.5 text-[color:var(--m-error)]"
              strokeWidth={1.75}
              aria-hidden
            />
            <span className="text-[10.5px] font-semibold uppercase tracking-[0.14em] text-[color:var(--m-error)]">
              Errors ({validation.errors.length})
            </span>
          </div>
          <div className="flex flex-col gap-3">
            {errorGroups.map(([rule, issues]) => (
              <IssueGroup
                key={rule}
                rule={rule}
                issues={issues}
                testId="validation-errors"
              />
            ))}
          </div>
        </div>
      ) : null}

      {validation.warnings.length > 0 ? (
        <div
          data-testid="validation-warnings"
          data-rule-group="warnings"
          className="flex flex-col gap-3 border-l-2 border-[color:var(--m-warning)] bg-[hsl(var(--warning)/0.08)] px-3.5 py-3"
        >
          <div className="flex items-center gap-2">
            <AlertTriangle
              className="h-3.5 w-3.5 text-[color:var(--m-warning)]"
              strokeWidth={1.75}
              aria-hidden
            />
            <span className="text-[10.5px] font-semibold uppercase tracking-[0.14em] text-[color:var(--m-warning)]">
              Warnings ({validation.warnings.length})
            </span>
          </div>
          <div className="flex flex-col gap-3">
            {warningGroups.map(([rule, issues]) => (
              <IssueGroup
                key={rule}
                rule={rule}
                issues={issues}
                testId="validation-warnings"
              />
            ))}
          </div>
        </div>
      ) : null}
    </section>
  );
}