// Floating panel listing current validation issues — shown next to the
// status bar. Click an issue to focus its anchored element across the rail
// + diagram (via setFocusBlockId). Lets the user verify the validator is
// actually firing on the broken-fixture demos.

"use client";

import { useState } from "react";
import type { ValidationIssue } from "../../lib/sysml/validate";

interface IssuesPanelProps {
  issues: ValidationIssue[];
  onSelectAnchor?: (id: string) => void;
}

const SEV_GLYPH: Record<ValidationIssue["severity"], string> = {
  error: "●",
  warning: "▲",
  soft: "·",
};

export function IssuesPanel({ issues, onSelectAnchor }: IssuesPanelProps) {
  const [collapsed, setCollapsed] = useState(false);

  const grouped = {
    error: issues.filter(i => i.severity === "error"),
    warning: issues.filter(i => i.severity === "warning"),
    soft: issues.filter(i => i.severity === "soft"),
  };

  if (issues.length === 0) {
    return (
      <div className={`issues-panel issues-panel-clean ${collapsed ? "issues-panel-collapsed" : ""}`}>
        <button className="issues-panel-head" onClick={() => setCollapsed(c => !c)} type="button">
          <span className="issues-panel-clean-glyph">✓</span>
          <span className="issues-panel-title">Model is clean</span>
        </button>
      </div>
    );
  }

  return (
    <div className={`issues-panel ${collapsed ? "issues-panel-collapsed" : ""}`}>
      <button className="issues-panel-head" onClick={() => setCollapsed(c => !c)} type="button">
        <span className="issues-panel-counts">
          {grouped.error.length > 0 && <span className="issues-count issues-count-error">● {grouped.error.length}</span>}
          {grouped.warning.length > 0 && <span className="issues-count issues-count-warning">▲ {grouped.warning.length}</span>}
          {grouped.soft.length > 0 && <span className="issues-count issues-count-soft">· {grouped.soft.length}</span>}
        </span>
        <span className="issues-panel-title">{issues.length} validation issue{issues.length === 1 ? "" : "s"}</span>
        <span className="issues-panel-caret">{collapsed ? "▴" : "▾"}</span>
      </button>

      {!collapsed && (
        <ul className="issues-panel-list">
          {(["error", "warning", "soft"] as const).flatMap(sev =>
            grouped[sev].map((i, idx) => (
              <li
                key={`${sev}-${idx}`}
                className={`issues-item issues-item-${i.severity}`}
                onClick={() => onSelectAnchor?.(i.anchor.kind === "property" ? i.anchor.blockId : (i.anchor as { id: string }).id ?? "")}
              >
                <span className="issues-item-sev">{SEV_GLYPH[i.severity]}</span>
                <span className="issues-item-code">{i.code}</span>
                <span className="issues-item-msg">{i.message}</span>
              </li>
            ))
          )}
        </ul>
      )}
    </div>
  );
}