import { useNavigate, useParams } from 'react-router-dom';
import { Button } from '../../components/ui/Button';
import { AiLabel } from '../../components/ui/Badge';
import './layout-comparison.css';

/*
 * SCR-04 AI 배치안 비교. Stitch layout_comparison 이식.
 * - 3개 자동배치 옵션 카드(S7 조감 AI 이미지 + 요약 지표 + 위반 요약), 1개 선택.
 * ★ 계약 §3 auto-generate(AutoLayoutOption[])는 스켈레톤 → 샘플 3안 시연. 워터마크 상시.
 */
const MOCK = `${import.meta.env.BASE_URL}mock/layout_comparison`;
const AERIAL = `${MOCK}/img1.jpg`;

interface Option {
  id: string;
  label: string;
  booths: number;
  salesAreaM2: number;
  minAisleM: number;
  violationBlock: number;
  violationWarn: number;
  recommended?: boolean;
}

const OPTIONS: Option[] = [
  { id: 'A', label: '배치안 A', booths: 512, salesAreaM2: 4450, minAisleM: 3.0, violationBlock: 0, violationWarn: 0 },
  { id: 'B', label: '배치안 B', booths: 530, salesAreaM2: 4420, minAisleM: 3.5, violationBlock: 0, violationWarn: 0, recommended: true },
  { id: 'C', label: '배치안 C', booths: 525, salesAreaM2: 4550, minAisleM: 2.8, violationBlock: 0, violationWarn: 2 },
];

export function LayoutComparisonPage() {
  const { eventId = '', hallId = 'H7' } = useParams();
  const navigate = useNavigate();

  return (
    <div className="kx-cmp">
      <header className="kx-cmp__head">
        <div>
          <h1>AI 배치안 비교</h1>
          <p className="kx-cmp__sub">조건: 목표 530부스 · 프리미엄 15% · 무대 1개소</p>
        </div>
        <Button variant="ghost">조건 수정</Button>
      </header>

      <div className="kx-cmp__grid" role="radiogroup" aria-label="배치안 선택">
        {OPTIONS.map((o) => (
          <article
            key={o.id}
            className={`kx-cmp__card ${o.recommended ? 'is-selected' : ''}`}
            role="radio"
            aria-checked={o.recommended ?? false}
            tabIndex={0}
          >
            <figure className="kx-cmp__thumb">
              <img src={AERIAL} alt={`${o.label} 조감 예상 이미지`} loading="lazy" />
              <span className="kx-cmp__ai">
                <AiLabel>AI 생성</AiLabel>
              </span>
              {o.recommended && <span className="kx-cmp__check" aria-hidden="true">✓</span>}
              <div className="kx-cmp__wm" aria-hidden="true">AI 생성 예상 이미지</div>
            </figure>

            <div className="kx-cmp__body">
              <div className="kx-cmp__title-row">
                <h2>{o.label}</h2>
                {o.recommended && <span className="kx-cmp__reco">추천</span>}
              </div>
              <dl className="kx-cmp__metrics tnum">
                <div>
                  <dt>총 부스</dt>
                  <dd>{o.booths}개</dd>
                </div>
                <div>
                  <dt>판매면적</dt>
                  <dd>{o.salesAreaM2.toLocaleString()}㎡</dd>
                </div>
                <div>
                  <dt>최소 통로폭</dt>
                  <dd>{o.minAisleM.toFixed(1)}m</dd>
                </div>
                <div>
                  <dt>위반사항</dt>
                  <dd className={o.violationBlock + o.violationWarn > 0 ? 'kx-cmp__warn' : 'kx-cmp__ok'}>
                    {o.violationBlock + o.violationWarn === 0
                      ? '✓ 0건'
                      : `△ ${o.violationBlock + o.violationWarn}건`}
                  </dd>
                </div>
              </dl>
            </div>
          </article>
        ))}
      </div>

      <div className="kx-cmp__footer">
        <p className="kx-cmp__disclaimer">
          AI 조감 이미지는 배치 비교 참고용입니다 — 실 시공 기준은 확정 도면입니다.
        </p>
        <Button
          onClick={() => navigate(`/events/${eventId}/halls/${hallId}/layout`)}
        >
          이 안으로 편집 시작 →
        </Button>
      </div>
    </div>
  );
}
