import type { ComplianceReport, LayoutSummary } from '../../api/types';
import { EmptyState } from '../../components/ui/States';

/*
 * 검증 패널 (SCR-03 우측 [검증] 탭).
 * report(POST validate 결과)가 있으면 위반 카드 목록, 없으면 layout.summary 카운트로 요약.
 */
export function ValidationPanel({
  report,
  summary,
  degraded,
}: {
  report: ComplianceReport | null;
  summary: LayoutSummary | undefined;
  degraded: boolean;
}) {
  const blockCount = report?.blockCount ?? summary?.violationBlock ?? 0;
  const warnCount = report?.warnCount ?? summary?.violationWarn ?? 0;
  const submittable = report?.submittable ?? blockCount === 0;

  return (
    <div className="kx-valid">
      <div className="kx-valid__summary">
        <span className="kx-valid__chip kx-valid__chip--block">차단 {blockCount}</span>
        <span className="kx-valid__chip kx-valid__chip--warn">경고 {warnCount}</span>
      </div>

      {submittable && blockCount === 0 && (report || summary) && (
        <div className="kx-valid__ok" role="status">
          위반 0건 — 제출 가능
        </div>
      )}

      {report ? (
        report.violations.length === 0 ? (
          <EmptyState title="위반 항목이 없습니다" />
        ) : (
          <>
            <ul className="kx-valid__list">
              {report.violations.map((v) => (
                <li
                  key={v.pin}
                  className={`kx-valid__card kx-valid__card--${v.severity}`}
                >
                  <span className={`kx-valid__pin kx-valid__pin--${v.severity}`}>{v.pin}</span>
                  <div className="kx-valid__card-body">
                    <div className="kx-valid__card-head">
                      <span className="kx-valid__label">{v.label}</span>
                      <button className="kx-valid__locate" type="button">
                        위치 보기
                      </button>
                    </div>
                    <p className="kx-valid__measured">{v.measured}</p>
                    {v.requiresDocument && (
                      <span className="kx-valid__doc">구조계산서 D-7 제출 필요</span>
                    )}
                  </div>
                </li>
              ))}
            </ul>
            <p className="kx-valid__disclaimer">
              {report.disclaimer} · 룰셋 {report.rulesetVersion}
            </p>
          </>
        )
      ) : (
        <EmptyState
          title={degraded ? '규정 검증 준비 중' : '규정 검증을 실행하세요'}
          description={
            degraded
              ? '검증 엔진 연결 후 위반 상세가 표시됩니다.'
              : '"규정 검증 실행"을 눌러 위반 항목을 확인하세요.'
          }
        />
      )}
    </div>
  );
}
