import { useParams } from 'react-router-dom';
import { Button } from '../../components/ui/Button';
import { AiLabel } from '../../components/ui/Badge';
import { IconBlock, IconCheck, IconUpload, IconWarning } from '../../components/ui/icons';
import type { ComplianceReport, Violation } from '../../api/types';
import './compliance-report.css';

/*
 * SCR-09 규정 검증 결과. Stitch compliance_report 이식.
 * - 상단 요약 배너(차단/경고/통과) — 차단 존재 시 제출 불가
 * - 좌: 자동 검증 체크리스트(그룹별) / 우: 상세 도면 검토(Elevation) + 위반 오버레이 핀
 * ★ 계약 §4 precheck(ComplianceReport) shape 사용 — 여기선 확정 리포트 시연(샘플).
 */
const MOCK = `${import.meta.env.BASE_URL}mock/compliance_report`;
const ELEVATION = `${MOCK}/img1.jpg`;

const SAMPLE_REPORT: ComplianceReport = {
  rulesetVersion: 'v1.0',
  disclaimer: '본 검증은 사전 심사이며 최종 승인은 현장 검수·구조기술사 판단이 우선합니다.',
  blockCount: 1,
  warnCount: 2,
  passCount: 14,
  submittable: false,
  violations: [
    { pin: 1, code: 'H-01', group: '높이 규정', label: '장치물 높이 5m 이하', severity: 'block', measured: '5.4m (제한 5m)' },
    { pin: 2, code: 'R-03', group: '리깅', label: '리깅 트러스 6.5m 초과 구조계산', severity: 'warn', measured: '7.0m', requiresDocument: '구조계산서 D-7' },
    { pin: 3, code: 'A-02', group: '통로', label: '통로 여유 공간 확보', severity: 'warn', measured: '통로 인접 80% 여유' },
  ],
};

const PASS_GROUPS = [
  { group: '퇴출구', label: '퇴출구 확보' },
  { group: '방염', label: '방염 자재 사용 확인' },
  { group: '전기', label: '전력 부하 적정' },
  { group: '표시', label: '통로 표시 도장 적정' },
];

const SEV_META: Record<Violation['severity'], { label: string; cls: string }> = {
  block: { label: '차단', cls: 'block' },
  warn: { label: '경고', cls: 'warn' },
};

export function ComplianceReportPage() {
  const { boothId = 'A-102' } = useParams();
  const report = SAMPLE_REPORT;

  return (
    <div className="kx-comp">
      <header className="kx-comp__head">
        <h1>부스 {boothId} · 설계 v2 · 규정 검증 결과</h1>
      </header>

      {/* 요약 배너 */}
      <div
        className={`kx-comp__banner ${report.submittable ? 'is-ok' : 'is-block'}`}
        role="status"
      >
        <span className="kx-comp__banner-icon" aria-hidden="true">
          {report.submittable ? <IconCheck size={18} /> : <IconBlock size={18} />}
        </span>
        <span className="tnum">
          차단 {report.blockCount}건 · 경고 {report.warnCount}건 · 통과 {report.passCount}건
        </span>
        {!report.submittable && <span className="kx-comp__banner-note">차단 항목 해결 전 제출 불가</span>}
      </div>

      {/* PDF 업로드 존 */}
      <div className="kx-comp__drop">
        <span className="kx-comp__drop-icon" aria-hidden="true"><IconUpload size={28} /></span>
        <p>기존 도면 업로드 (PDF/이미지)</p>
        <span className="kx-comp__drop-hint">드래그 앤 드롭 또는 클릭해 파일 선택</span>
        <AiLabel>AI 자동 검증</AiLabel>
      </div>

      <div className="kx-comp__body">
        {/* 체크리스트 */}
        <section className="kx-comp__list" aria-label="자동 검증 체크리스트">
          <div className="kx-comp__list-head">
            <h2>자동 검증 체크리스트</h2>
            <div className="kx-comp__legend">
              <span className="kx-comp__lg kx-comp__lg--pass">통과</span>
              <span className="kx-comp__lg kx-comp__lg--warn">경고</span>
              <span className="kx-comp__lg kx-comp__lg--block">차단</span>
            </div>
          </div>

          <ul className="kx-comp__items">
            {report.violations.map((v) => (
              <li key={v.code} className={`kx-comp__item is-${SEV_META[v.severity].cls}`}>
                <span className="kx-comp__pin tnum" aria-hidden="true">{v.pin}</span>
                <div className="kx-comp__item-body">
                  <div className="kx-comp__item-top">
                    <span className="kx-comp__item-label">{v.label}</span>
                    <span className={`kx-comp__sev kx-comp__sev--${SEV_META[v.severity].cls}`}>
                      {SEV_META[v.severity].label}
                    </span>
                  </div>
                  <span className="kx-comp__measured">
                    {v.group} · 측정 {v.measured}
                  </span>
                  {v.requiresDocument && (
                    <span className="kx-comp__doc">{v.requiresDocument} 제출 필요</span>
                  )}
                </div>
              </li>
            ))}
            {PASS_GROUPS.map((p) => (
              <li key={p.group} className="kx-comp__item is-pass">
                <span className="kx-comp__pin kx-comp__pin--pass" aria-hidden="true"><IconCheck size={14} /></span>
                <div className="kx-comp__item-body">
                  <div className="kx-comp__item-top">
                    <span className="kx-comp__item-label">{p.label}</span>
                    <span className="kx-comp__sev kx-comp__sev--pass">통과</span>
                  </div>
                </div>
              </li>
            ))}
          </ul>
        </section>

        {/* 상세 도면 검토 */}
        <section className="kx-comp__drawing" aria-label="상세 도면 검토">
          <div className="kx-comp__drawing-head">
            <h2>상세 도면 검토 (Elevation)</h2>
          </div>
          <figure className="kx-comp__drawing-frame">
            <img src={ELEVATION} alt="상세 도면 (입면) 검토" loading="lazy" />
            <span className="kx-comp__overlay-box" aria-hidden="true" />
            <span className="kx-comp__overlay-badge"><IconWarning size={13} /> 5.4m 초과 · COMPLIANCE 차단</span>
          </figure>
        </section>
      </div>

      <footer className="kx-comp__footer">
        <p className="kx-comp__disclaimer">{report.disclaimer} · 룰셋 {report.rulesetVersion}</p>
        <Button disabled={!report.submittable}>검증 리포트 첨부하여 제출</Button>
      </footer>
    </div>
  );
}
