import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { utilityApi } from '../../api/endpoints';
import { Button } from '../../components/ui/Button';
import { DdayChip } from '../../components/ui/Badge';
import type { UtilityOrderDto, UtilityQuote } from '../../api/types';
import './utility-order.css';

/*
 * SCR-08 유틸리티 신청 요약. Stitch utility_order_summary 이식.
 * - 좌: 위치표시도(PDF, "AI verified" 워터마크) / 우: 신청 내역 표 + 총 결제금액 + 마감 안내
 * - 하단: 신청자 정보 + 동의 체크 2건 + 신청 제출
 * ★ utility GET(order)이 501/미존재면 샘플 견적으로 degraded 시연.
 */
const MOCK = `${import.meta.env.BASE_URL}mock/utility_order_summary`;
const DIAGRAM = `${MOCK}/img1.jpg`;

const SAMPLE_QUOTE: UtilityQuote = {
  totalPowerKw: 5,
  requestedKw: 5,
  distributionBox50A: 1,
  lines: [
    { label: '전기 (24시간) 5kW', qty: 1, unitPrice: 275000, amount: 275000 },
    { label: '분전반 설치 (50A)', qty: 1, unitPrice: 100000, amount: 100000 },
    { label: '전용선 인터넷 (LAN)', qty: 1, unitPrice: 150000, amount: 150000 },
    { label: '급배수 (오·급수 연결점)', qty: 1, unitPrice: 150000, amount: 150000 },
  ],
  total: 675000,
  currency: 'KRW',
  rulesetVersion: 'v1.0',
  disclaimer: 'AI verified — 위치표시도는 참고용이며 시공 기준은 확정 도면입니다.',
};

const won = (n: number) => `₩${n.toLocaleString('ko-KR')}`;

export function UtilityOrderSummaryPage() {
  const { eventId = '', boothId = 'A-102' } = useParams();
  const [order, setOrder] = useState<UtilityOrderDto | null>(null);
  const [quote, setQuote] = useState<UtilityQuote>(SAMPLE_QUOTE);
  const [degraded, setDegraded] = useState(false);
  const [agree1, setAgree1] = useState(false);
  const [agree2, setAgree2] = useState(false);
  const [submitted, setSubmitted] = useState(false);

  useEffect(() => {
    let alive = true;
    utilityApi
      .get(eventId, boothId)
      .then((o) => {
        if (!alive) return;
        setOrder(o);
        setQuote(o.quote);
      })
      .catch(() => alive && setDegraded(true));
    return () => {
      alive = false;
    };
  }, [eventId, boothId]);

  return (
    <div className="kx-uord">
      <header className="kx-uord__head">
        <div className="kx-uord__title">
          <button className="kx-uord__back" aria-label="뒤로" onClick={() => history.back()}>
            ←
          </button>
          <h1>유틸리티 신청</h1>
        </div>
        <ol className="kx-uord__wizard" aria-label="신청 단계">
          <li className="is-done">배선 설계</li>
          <li className="is-current">신청 확인</li>
          <li>제출 완료</li>
        </ol>
      </header>

      <div className="kx-uord__body">
        {/* 위치표시도 */}
        <section className="kx-uord__diagram" aria-label="유틸리티 위치표시도">
          <div className="kx-uord__diagram-bar">
            <div>
              <h2>유틸리티 시공 위치표시도</h2>
              <p>각 기기 위치를 도면 위 좌표로 표시합니다.</p>
            </div>
            <Button variant="ghost" leadingIcon="⭳">
              PDF 다운로드
            </Button>
          </div>
          <figure className="kx-uord__diagram-frame">
            <img src={DIAGRAM} alt="유틸리티 위치표시도 (도면)" loading="lazy" />
            <span className="kx-uord__verified" aria-hidden="true">✔ AI verified</span>
          </figure>
        </section>

        {/* 신청 내역 */}
        <aside className="kx-uord__panel" aria-label="신청 내역">
          <div className="kx-uord__panel-head">
            <h2>신청 내역</h2>
            <DdayChip dday={6} />
          </div>

          <ul className="kx-uord__lines">
            {quote.lines.map((l) => (
              <li key={l.label}>
                <span>{l.label}</span>
                <strong className="tnum">{won(l.amount)}</strong>
              </li>
            ))}
          </ul>

          <div className="kx-uord__total">
            <span>총 결제 예상 금액 (VAT 포함)</span>
            <strong className="tnum">{won(quote.total)}</strong>
          </div>

          <div className="kx-uord__notice">
            <span className="kx-uord__notice-icon" aria-hidden="true">ⓘ</span>
            <p>
              마감 시점 안내 — 모든 유틸리티는 행사 마감일 낮 2시 이후부터 순차적으로 공급 중단·시공이 진행됩니다.
            </p>
          </div>

          {degraded && (
            <p className="kx-uord__degraded">견적 API 대기 중 — 샘플 견적을 표시합니다.</p>
          )}

          <div className="kx-uord__applicant">
            <h3>신청자 정보</h3>
            <p>(주)한빛로보틱스 · 부스 {boothId} (독립부스)</p>
            <p>김하나 · 010-1234-5678 · dav@techsolutions.com</p>
          </div>

          <label className="kx-uord__agree">
            <input type="checkbox" checked={agree1} onChange={(e) => setAgree1(e.target.checked)} />
            마감(D-6) 이후 배선 위치 수정 및 유틸리티 변경이 불가함을 확인했습니다.
          </label>
          <label className="kx-uord__agree">
            <input type="checkbox" checked={agree2} onChange={(e) => setAgree2(e.target.checked)} />
            공사비 기준 견적임을 이해하며, 최종 결제는 실측 및 현장 확인 후 이뤄짐에 동의합니다.
          </label>

          <Button
            block
            disabled={!agree1 || !agree2 || submitted}
            onClick={() => setSubmitted(true)}
          >
            {submitted ? '신청 완료됨' : '신청 제출 →'}
          </Button>
          {order && <p className="kx-uord__order-id tnum">주문번호 {order.orderId}</p>}
        </aside>
      </div>
    </div>
  );
}
