import { useNavigate, useParams } from 'react-router-dom';
import { Button } from '../../components/ui/Button';
import { AiLabel, DdayChip, StatusBadge } from '../../components/ui/Badge';
import './exhibitor-home.css';

/*
 * SCR-05 참가업체 홈. Stitch exhibitor_home 이식.
 * - 헤더 카드(업체·부스·홀 + 미니 도면) · 진행 스테퍼(신청→승인→시공→검수)
 * - 좌: 해야 할 일(마감 임박·컨펌 대기·비용 요약) / 우: 내 부스 예상 사진(AI, 워터마크 상시) + CTA
 * ★ 계약에 참가업체 홈 집계 엔드포인트 부재 → 태스크·비용·스테퍼는 샘플 시연. CTA는 실 라우트.
 */
const MOCK = `${import.meta.env.BASE_URL}mock/exhibitor_home`;
const BOOTH_PREVIEW = `${MOCK}/img1.jpg`; // 내 부스 예상 사진(전시홀 내부)
const FLOORPLAN_THUMB = `${MOCK}/img3.jpg`; // 미니 도면 스키매틱

const STEPS = [
  { key: 'apply', label: '신청', state: 'done' },
  { key: 'approve', label: '승인', state: 'current', note: '설계 승인 대기중' },
  { key: 'build', label: '시공', state: 'todo' },
  { key: 'inspect', label: '검수', state: 'todo' },
] as const;

const COST_ROWS = [
  { label: '전기 5kW', amount: '₩275,000', status: 'submitted' as const, statusLabel: '신청됨' },
  { label: '인터넷 1회선', amount: '₩150,000', status: 'draft' as const, statusLabel: '작성중' },
];

export function ExhibitorHomePage() {
  const { eventId = '', boothId = 'A-102' } = useParams();
  const navigate = useNavigate();

  return (
    <div className="kx-exh">
      {/* 헤더 카드 */}
      <header className="kx-exh__header">
        <div>
          <h1 className="kx-exh__company">(주)한빛로보틱스</h1>
          <div className="kx-exh__ctx">
            <span>부스 {boothId}</span>
            <span aria-hidden="true">·</span>
            <span>독립부스 6×3m</span>
            <span aria-hidden="true">·</span>
            <span>홀7</span>
          </div>
        </div>
        <div className="kx-exh__miniplan">
          <img src={FLOORPLAN_THUMB} alt="내 부스 위치 미니 도면" loading="lazy" />
          <span className="kx-exh__miniplan-pin" aria-hidden="true" />
        </div>
      </header>

      {/* 진행 스테퍼 */}
      <section className="kx-exh__stepper" aria-label="진행 단계">
        <ol className="kx-stepper">
          {STEPS.map((s) => (
            <li key={s.key} className={`kx-stepper__item is-${s.state}`}>
              <span className="kx-stepper__dot" aria-hidden="true">
                {s.state === 'done' ? '✓' : ''}
              </span>
              <span className="kx-stepper__label">{s.label}</span>
              {'note' in s && s.note && <span className="kx-stepper__note">{s.note}</span>}
            </li>
          ))}
        </ol>
      </section>

      <div className="kx-exh__split">
        {/* 좌: 해야 할 일 */}
        <section className="kx-exh__tasks" aria-label="해야 할 일">
          <h2 className="kx-exh__h">해야 할 일</h2>

          <article className="kx-task kx-task--urgent">
            <DdayChip dday={6} />
            <h3>유틸리티 신청 마감</h3>
            <p className="kx-task__warn">인터넷 회선은 현장 추가 신청이 불가합니다</p>
          </article>

          <article className="kx-task">
            <DdayChip dday={15} />
            <h3>장치업체 초대하기</h3>
          </article>

          <article className="kx-task kx-task--primary">
            <h3>설계 컨펌 대기 1건</h3>
            <button
              className="kx-task__link"
              onClick={() => navigate(`/events/${eventId}/booths/${boothId}/design`)}
            >
              확인하기 →
            </button>
          </article>

          <article className="kx-cost">
            <h4>비용 요약</h4>
            {COST_ROWS.map((c) => (
              <div key={c.label} className="kx-cost__row">
                <span>{c.label}</span>
                <div className="kx-cost__right">
                  <strong className="tnum">{c.amount}</strong>
                  <StatusBadge status={c.status} />
                </div>
              </div>
            ))}
          </article>
        </section>

        {/* 우: 내 부스 예상 사진 */}
        <section className="kx-exh__preview" aria-label="내 부스 예상 사진">
          <h2 className="kx-exh__h">
            내 부스 예상 사진 <AiLabel>AI</AiLabel>
          </h2>
          <figure className="kx-exh__preview-frame">
            <img src={BOOTH_PREVIEW} alt="내 부스 AI 예상 사진" loading="lazy" />
            <div className="kx-exh__wm" aria-hidden="true">
              AI 생성 예상 이미지
            </div>
            <figcaption>AI 생성 예상 이미지 — 실제 시공 결과와 다를 수 있음</figcaption>
          </figure>
          <div className="kx-exh__cta">
            <Button
              block
              onClick={() => navigate(`/events/${eventId}/booths/${boothId}/design`)}
            >
              부스 설계 스튜디오
            </Button>
            <Button
              variant="ghost"
              block
              onClick={() => navigate(`/events/${eventId}/booths/${boothId}/utility`)}
            >
              유틸리티 신청
            </Button>
          </div>
        </section>
      </div>
    </div>
  );
}
