import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './mobile.css';

/*
 * SCR-M2 홀매니저 현장 검수(모바일 390px). Stitch manager_field_inspection 이식.
 * - 도면 vs 현장 사진 비교(AI 사전심사 플래그) · 검수 항목 적합/부적합 토글 · 위반 사진·메모
 * - 부적합 존재 시 시정 요청, 전부 적합 시 검수 승인.
 * ★ 계약에 현장 검수 엔드포인트 부재 → 로컬 상태 시연.
 */
const MOCK = `${import.meta.env.BASE_URL}mock/manager_field_inspection`;
const DRAWING = `${MOCK}/img2.jpg`;
const FIELD = `${MOCK}/img3.jpg`;
const VIOLATION = `${MOCK}/img4.jpg`;

interface Item {
  id: string;
  label: string;
  note?: string;
  hasPhoto?: boolean;
}
const ITEMS: Item[] = [
  { id: 'height', label: '장치물 높이 (제한 4m)' },
  { id: 'flame', label: '방염 라벨 부착' },
  { id: 'aisle', label: '통로 침범 여부', note: '통로 0.3m 침범 확인', hasPhoto: true },
  { id: 'noise', label: '소음 규정 준수' },
];

export function ManagerFieldInspectionPage() {
  const navigate = useNavigate();
  // 기본값: 통로만 부적합(Stitch)
  const [verdicts, setVerdicts] = useState<Record<string, 'pass' | 'fail'>>({
    height: 'pass',
    flame: 'pass',
    aisle: 'fail',
    noise: 'pass',
  });
  const [memo, setMemo] = useState('통로 0.3m 침범');
  const [slide, setSlide] = useState(0);

  const anyFail = Object.values(verdicts).some((v) => v === 'fail');

  return (
    <div className="kx-m kx-m--inspect">
      <header className="kx-m__head">
        <div className="kx-m__head-row">
          <div className="kx-m__head-left">
            <button className="kx-m__back" aria-label="뒤로" onClick={() => navigate(-1)}>
              ←
            </button>
            <div>
              <h1>현장 검수 · 부스 A-102</h1>
              <div className="kx-m__sub">
                <span>홀7 · KINTEX</span>
              </div>
            </div>
          </div>
          <img className="kx-m__thumb" src={DRAWING} alt="도면 썸네일" loading="lazy" />
        </div>
      </header>

      <main className="kx-m__body">
        {/* 비교 카드 */}
        <section className="kx-m__compare">
          <div className="kx-m__compare-head">
            <h2>도면 vs 현장 비교</h2>
            <span className="kx-m__flag">✦ AI 사전심사 플래그 3건</span>
          </div>
          <div className="kx-m__compare-imgs">
            <figure>
              <span className="kx-m__img-label">승인 도면</span>
              <img src={DRAWING} alt="승인 도면" loading="lazy" />
            </figure>
            <div className="kx-m__compare-div" aria-hidden="true">⇄</div>
            <figure>
              <span className="kx-m__img-label">현장 사진</span>
              <img src={FIELD} alt="현장 사진" loading="lazy" />
            </figure>
          </div>
          <div className="kx-m__dots" role="tablist" aria-label="비교 슬라이드">
            {[0, 1, 2].map((i) => (
              <button
                key={i}
                className={slide === i ? 'is-active' : ''}
                aria-label={`슬라이드 ${i + 1}`}
                onClick={() => setSlide(i)}
              />
            ))}
          </div>
        </section>

        {/* 검수 항목 */}
        <section className="kx-m__ilist">
          <h3>검수 항목 (4)</h3>
          {ITEMS.map((it) => {
            const v = verdicts[it.id];
            return (
              <div key={it.id} className={`kx-m__icard ${v === 'fail' ? 'is-fail' : ''}`}>
                <div className="kx-m__icard-top">
                  <div className="kx-m__icard-label">
                    <span>{it.label}</span>
                    {v === 'fail' && it.note && <small>⚠ {it.note}</small>}
                  </div>
                  <div className="kx-m__verdict" role="radiogroup" aria-label={`${it.label} 판정`}>
                    <button
                      role="radio"
                      aria-checked={v === 'pass'}
                      className={v === 'pass' ? 'is-pass' : ''}
                      onClick={() => setVerdicts((s) => ({ ...s, [it.id]: 'pass' }))}
                    >
                      적합
                    </button>
                    <button
                      role="radio"
                      aria-checked={v === 'fail'}
                      className={v === 'fail' ? 'is-fail' : ''}
                      onClick={() => setVerdicts((s) => ({ ...s, [it.id]: 'fail' }))}
                    >
                      부적합
                    </button>
                  </div>
                </div>
                {v === 'fail' && it.hasPhoto && (
                  <div className="kx-m__icard-evidence">
                    <img src={VIOLATION} alt="위반 사진" loading="lazy" />
                    <textarea
                      value={memo}
                      onChange={(e) => setMemo(e.target.value)}
                      rows={2}
                      placeholder="메모 입력…"
                    />
                  </div>
                )}
              </div>
            );
          })}
        </section>
      </main>

      <footer className="kx-m__foot kx-m__foot--dual">
        <button className="kx-m__cta kx-m__cta--danger">시정 요청</button>
        <button className="kx-m__cta kx-m__cta--ok" disabled={anyFail}>
          검수 승인
        </button>
      </footer>
    </div>
  );
}
