// 이용권 관리 — 리스트(사용/이용완료/다운로드) + 상세 + 결제 + 본인인증 팝업 + 결제 완료

function TicketList({ onBack, onOpenDetail, onOpenPay, onGift }){
  const [tab, setTab] = React.useState("use");

  const items = {
    use: [
      {kind:"정기 1개월",name:"퀀텀 아카데미 판교점 3개월 새벽 정기 이용권",store:"퀀텀 아카데미 판교점",used:41,total:120,daysLeft:35,unit:"7분",label:"7분 남음"},
      {kind:"시니어 이용권",name:"한달정원 월말 이용권",store:"전체 매장 공통",scope:"전체 공통",used:600,total:1200,daysLeft:102,unit:"600분 남음",label:"600분 남음"},
      {kind:"일일 이용권",name:"주차등록 일일 이용권",store:"퀀텀 아카데미 판교점",used:0,total:60,daysLeft:5,unit:"60분 남음",label:"60분 남음"},
      {kind:"레슨권",name:"판교 파미어스몰 레슨권",store:"퀀텀 아카데미 판교점",used:2,total:10,daysLeft:30,unit:"8회 남음",label:"8회 남음",isCount:true},
    ],
    done: [
      {kind:"레슨권",name:"레슨권",store:"퀀텀 아카데미 판교점 박은선 프로",used:1,total:1,unit:"이용 완료",done:true,isCount:true},
      {kind:"패키지 정기 이용권",name:"패키지 정기 이용권",store:"독립 스크린",used:41,total:120,daysLeft:33,unit:"79분 남음",label:"79분 남음"},
      {kind:"패키지 레슨권",name:"패키지 정기 이용권",store:"레슨권 · 로엘이 프로",used:2,total:10,unit:"8회 남음",label:"8회 남음",isCount:true},
    ],
    dl: [
      {kind:"패키지 시간제 이용권",name:"패키지 시간제 이용권",store:"퀀텀 아카데미 판교점",used:917,total:1200,unit:"일시정지",pending:true},
      {kind:"패키지 레슨권",name:"레슨권 · 홍길동 프로",store:"퀀텀 아카데미 판교점 홍길동 프로",used:5,total:10,unit:"5회 남음",pending:true,isCount:true},
      {kind:"패키지 시간 이용권",name:"패키지 월 이용권",store:"가 회원님께 선물",unit:"이용 신청",isGift:true},
      {kind:"패키지 레슨권",name:"레슨권 · 천진선 프로",store:"라이언님 외 19명에 운영중",unit:"이용 신청",isGift:true},
    ],
  };

  return (
    <div className="screen">
      <StatusBar/>
      <Appbar title="이용권 관리" onBack={onBack}
        right={onGift && <button onClick={onGift} style={{display:"flex",alignItems:"center",gap:4,fontSize:13,fontWeight:700,color:"var(--primary)",padding:"8px 6px",background:"transparent"}}><Icon name="gift" size={16}/> 선물하기</button>}/>

      <div style={{padding:"0 20px 12px"}}>
        <div style={{display:"flex",gap:20,borderBottom:"1px solid var(--line)"}}>
          {[["use","사용"],["done","이용완료"],["dl","다운로드"]].map(([k,v])=>(
            <button key={k} onClick={()=>setTab(k)} style={{
              padding:"12px 0",fontSize:15,fontWeight:700,
              color:tab===k?"var(--text)":"var(--text-mute)",
              borderBottom:tab===k?"2px solid var(--text)":"2px solid transparent",
              marginBottom:-1,
              background:"transparent"
            }}>{v}</button>
          ))}
        </div>
      </div>

      <div className="scroll" style={{paddingBottom:100}}>
        {items[tab].map((it,i)=>(
          <button key={i} onClick={()=>onOpenDetail(it)}
            style={{display:"block",width:"100%",textAlign:"left",padding:"16px 20px",background:"transparent",borderBottom:"1px solid var(--line)"}}>
            <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:6}}>
              <div style={{display:"flex",alignItems:"center",gap:6}}>
                <span className="chip" style={{background:"var(--primary-tint)",color:"var(--primary)",fontSize:10}}>{it.kind}</span>
                <span className="chip" style={{background:"var(--bg-soft)",color:"var(--text-sub)",fontSize:10}}>{it.scope || "매장 전용"}</span>
              </div>
              <div style={{fontSize:11,color:it.pending?"var(--text-sub)":it.done?"var(--text-mute)":"var(--text-sub)",fontWeight:600}}>
                {it.daysLeft && `${it.daysLeft}일 남음`}
                {it.done && "완료"}
                {it.isGift && "대기중"}
                {it.pending && !it.daysLeft && !it.isGift && "일시정지"}
              </div>
            </div>
            <div style={{fontSize:15,fontWeight:700,color:"var(--text)",lineHeight:1.4}}>{it.name}</div>
            <div className="muted" style={{fontSize:11.5,margin:"4px 0 10px",display:"flex",alignItems:"center",gap:4}}>
              <Icon name="store" size={12}/> {it.store}
            </div>
            {!it.isGift && (
              <>
                <div className="ubar"><span style={{width: it.isCount ? (it.used/it.total*100)+"%" : (it.used/it.total*100)+"%"}}/></div>
                <div style={{display:"flex",justifyContent:"space-between",marginTop:6,fontSize:11}}>
                  <span style={{color:"var(--primary)",fontWeight:700}}>
                    {it.isCount ? `${it.used}회 사용` : `${it.used}분 사용`}
                  </span>
                  <span style={{color:"var(--text-sub)",fontWeight:500}}>
                    {it.isCount ? `/ ${it.total}회` : `/ ${it.total}분 하루`}
                  </span>
                </div>
              </>
            )}
            {it.isGift && (
              <div style={{padding:"10px 12px",background:"var(--bg-soft)",borderRadius:8,fontSize:12,color:"var(--text-sub)"}}>
                이용 신청하고 시작하세요
              </div>
            )}
          </button>
        ))}
      </div>
    </div>
  );
}

function TicketDetail({ ticket, onBack, onOpenPay, onOpenBook }){
  // Figma layout: 일일이용권 상세 with progress bar + info table + CTA
  const t = ticket || {name:"판교 아카데미 2024 갑진년 새해맞이 청룡가나다 일일 이용권"};
  const isDone = t.done;
  const [cancelOpen, setCancelOpen] = React.useState(false);
  const [payOpen, setPayOpen] = React.useState(false); // 결제 정보 상세 펼침
  const [toast, setToast] = React.useState(null);
  const pop = (m)=>{ setToast(m); window.clearTimeout(pop._t); pop._t=window.setTimeout(()=>setToast(null),2000); };

  return (
    <div className="screen">
      <StatusBar/>
      <Appbar title="이용권 상세 조회" onBack={onBack}
        right={!isDone && <button onClick={()=>setCancelOpen(true)} style={{fontSize:13,color:"var(--text-sub)",padding:"8px 12px",fontWeight:600}}>결제 취소</button>}/>
      {toast && <div className="toast"><span>{toast}</span></div>}

      <div className="scroll" style={{paddingBottom:110}}>
        <div style={{padding:"8px 20px 16px"}}>
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between"}}>
            <div style={{fontSize:13,color:"var(--text-sub)",fontWeight:500}}>{t.kind || "일일이용권"}</div>
            <div style={{fontSize:13,color:"var(--primary)",fontWeight:700}}>1회(60분) 남음</div>
          </div>
          <div style={{fontSize:18,fontWeight:800,letterSpacing:"-.02em",marginTop:6,lineHeight:1.4}}>
            {t.name}
          </div>
          <div className="ubar" style={{marginTop:16}}><span style={{width:"40%"}}/></div>
          <div style={{display:"flex",justifyContent:"space-between",marginTop:8,fontSize:12}}>
            <span style={{color:"var(--primary)",fontWeight:700}}>40분 연습완료</span>
            <span style={{color:"var(--text-sub)"}}>60분 이용가능</span>
          </div>
        </div>

        <div style={{height:10,background:"var(--bg-soft)"}}/>

        <div style={{padding:"20px 20px 8px"}}>
          <div className="h3" style={{fontSize:15,marginBottom:6}}>이용권 정보</div>
          <div className="info-table">
            <div className="ir"><div className="k">이용 매장</div><div className="v">퀀텀 아카데미 판교점</div></div>
            <div className="ir"><div className="k">구매일</div><div className="v">2023.12.29</div></div>
            <div className="ir"><div className="k">이용기간</div><div className="v">2023.12.29 - 2024.12.28</div></div>
            <div className="ir"><div className="k">예약 가능 시간</div><div className="v">13:00 - 15:00</div></div>
            <div className="ir"><div className="k">이용 가능 시간 (1회)</div><div className="v">60분</div></div>
            <div className="ir"><div className="k">이용 가능 횟수</div><div className="v"><span style={{color:"var(--primary)"}}>1회 남음</span> / 10회</div></div>
          </div>
        </div>

        <div style={{height:10,background:"var(--bg-soft)"}}/>

        <div style={{padding:"20px 20px 20px"}}>
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:6}}>
            <div className="h3" style={{fontSize:15}}>결제 정보</div>
            <button onClick={()=>setPayOpen(v=>!v)} className="link" style={{fontSize:12,color:"var(--text-sub)",background:"transparent",border:"none",display:"flex",alignItems:"center",gap:2}}>{payOpen?"접기":"상세"} <Icon name={payOpen?"chev-u":"chev-r"} size={13}/></button>
          </div>
          <div className="info-table">
            <div className="ir"><div className="k">상품 금액</div><div className="v">300,000원</div></div>
            <div className="ir"><div className="k">할인 금액</div><div className="v">-1,000원</div></div>
            {payOpen && (<>
              <div className="ir"><div className="k">결제 수단</div><div className="v">신한카드 (****1234)</div></div>
              <div className="ir"><div className="k">승인 번호</div><div className="v mono">30021456</div></div>
              <div className="ir"><div className="k">결제 일시</div><div className="v mono">2023.12.29 14:22</div></div>
            </>)}
          </div>
          <div style={{height:1,background:"var(--line)",margin:"4px 0"}}/>
          <div className="ir" style={{display:"flex",justifyContent:"space-between",padding:"14px 0"}}>
            <div style={{fontSize:15,fontWeight:700}}>최종 결제 금액</div>
            <div style={{fontSize:17,fontWeight:800,color:"var(--primary)"}}>299,000원</div>
          </div>
        </div>
      </div>

      <div style={{position:"absolute",bottom:0,left:0,right:0,padding:"12px 20px 24px",background:"#fff",borderTop:"1px solid var(--line)"}}>
        <button className={"btn " + (isDone?"btn-disabled":"btn-primary")} style={{width:"100%"}}
          onClick={isDone ? null : onOpenBook}>
          예약하기
        </button>
      </div>

      {cancelOpen && (
        <Sheet title="결제를 취소할까요?" onClose={()=>setCancelOpen(false)}
          footer={<div style={{display:"flex",gap:8}}>
            <button onClick={()=>setCancelOpen(false)} className="btn btn-soft" style={{flex:1,height:48}}>유지하기</button>
            <button onClick={()=>{ setCancelOpen(false); pop("결제가 취소되었어요. 환불은 3~5영업일 소요됩니다."); }} className="btn" style={{flex:1,height:48,background:"#FEECEC",color:"#EF4444",fontWeight:800}}>결제 취소</button>
          </div>}>
          <div style={{padding:"4px 20px 8px",fontSize:13.5,color:"var(--text-sub)",lineHeight:1.6}}>
            이미 <b style={{color:"var(--text)"}}>40분 이용</b>한 이용권이에요. 결제를 취소하면 남은 이용분이 소멸되며, 환불 규정에 따라 부분 환불될 수 있어요.
          </div>
        </Sheet>
      )}
    </div>
  );
}

function TicketPay({ onBack, onClose, onComplete }){
  const [verified, setVerified] = React.useState(false);
  const [popup, setPopup] = React.useState(false);
  const [toast, setToast] = React.useState(false);

  // 이용권 구매 할인 — 할인권·캐시·마일리지 (정책 §4·§5)
  const PRODUCT = 300000;
  const DISCOUNTS = [
    {id:"coupon", label:"할인권", desc:"신규가입 할인권", amount:1000},
    {id:"cash",   label:"캐시", desc:"보유 5,000원", amount:5000},
    {id:"mileage",label:"마일리지", desc:"보유 2,300P", amount:2300},
  ];
  const [applied, setApplied] = React.useState(["coupon"]);
  const toggleDiscount = (id)=> setApplied(a=> a.includes(id) ? a.filter(x=>x!==id) : [...a, id]);
  const discount = DISCOUNTS.filter(d=>applied.includes(d.id)).reduce((s,d)=>s+d.amount,0);
  const finalPay = Math.max(0, PRODUCT - discount);
  const won = (n)=> n.toLocaleString("ko-KR") + "원";

  const clickPay = ()=>{
    if (!verified){ setPopup(true); return; }
    onComplete();
  };

  const verify = ()=>{
    setPopup(false);
    setToast(true);
    setTimeout(()=>{ setVerified(true); setToast(false); }, 1800);
  };

  return (
    <div className="screen">
      <StatusBar/>
      <Appbar title="이용권 결제" onBack={onBack}
        right={<button className="icon-btn" onClick={onClose}><Icon name="x" size={18}/></button>}/>

      <div className="scroll" style={{paddingBottom:140}}>
        <div style={{padding:"8px 20px 16px"}}>
          <div style={{fontSize:13,color:"var(--text-sub)",fontWeight:500,marginBottom:4}}>정기 이용권</div>
          <div style={{fontSize:18,fontWeight:800,letterSpacing:"-.02em"}}>광교 아카데미 오전 12개월 이용권</div>
        </div>

        <div style={{height:10,background:"var(--bg-soft)"}}/>

        <div style={{padding:"20px 20px 8px"}}>
          <div className="h3" style={{fontSize:15,marginBottom:6}}>이용권 정보</div>
          <div className="info-table">
            <div className="ir"><div className="k">이용 매장</div><div className="v">퀀텀 아카데미 광교점</div></div>
            <div className="ir"><div className="k">하루 이용 시간</div><div className="v">60분 (1회)</div></div>
            <div className="ir"><div className="k">이용 기간</div><div className="v">2023.12.29 - 2024.12.28</div></div>
          </div>
        </div>

        <div style={{height:10,background:"var(--bg-soft)"}}/>

        <div style={{padding:"20px 20px 8px"}}>
          <div className="h3" style={{fontSize:15,marginBottom:10}}>할인 적용</div>
          <div style={{display:"flex",flexDirection:"column",gap:8}}>
            {DISCOUNTS.map(d=>{
              const on = applied.includes(d.id);
              return (
                <button key={d.id} onClick={()=>toggleDiscount(d.id)}
                  style={{display:"flex",alignItems:"center",gap:10,width:"100%",textAlign:"left",padding:"12px 14px",borderRadius:10,background:on?"var(--primary-tint)":"#fff",border:"1.5px solid "+(on?"var(--primary)":"var(--line)")}}>
                  <div style={{width:20,height:20,borderRadius:"50%",border:"2px solid "+(on?"var(--primary)":"var(--line-strong)"),display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}>
                    {on && <span style={{width:10,height:10,borderRadius:"50%",background:"var(--primary)"}}/>}
                  </div>
                  <div style={{flex:1}}>
                    <div style={{fontSize:13.5,fontWeight:700,color:"var(--text)"}}>{d.label}</div>
                    <div style={{fontSize:11,color:"var(--text-sub)",marginTop:1}}>{d.desc}</div>
                  </div>
                  <div style={{fontSize:13,fontWeight:700,color:on?"var(--primary)":"var(--text-mute)"}}>-{won(d.amount)}</div>
                </button>
              );
            })}
          </div>
        </div>

        <div style={{height:10,background:"var(--bg-soft)"}}/>

        <div style={{padding:"20px 20px 8px"}}>
          <div className="h3" style={{fontSize:15,marginBottom:6}}>결제 정보</div>
          <div className="info-table">
            <div className="ir"><div className="k">상품 금액</div><div className="v">{won(PRODUCT)}</div></div>
            <div className="ir"><div className="k">할인 금액</div><div className="v" style={{color:discount?"var(--primary)":"var(--text)"}}>{discount?("-"+won(discount)):"0원"}</div></div>
          </div>
          <div style={{height:1,background:"var(--line)",margin:"4px 0"}}/>
          <div className="ir" style={{display:"flex",justifyContent:"space-between",padding:"14px 0"}}>
            <div style={{fontSize:15,fontWeight:700}}>최종 결제 금액</div>
            <div style={{fontSize:17,fontWeight:800,color:"var(--primary)"}}>{won(finalPay)}</div>
          </div>
        </div>

        <div style={{height:10,background:"var(--bg-soft)"}}/>

        <div style={{padding:"18px 20px",display:"flex",gap:10,alignItems:"flex-start"}}>
          <div style={{width:22,height:22,borderRadius:"50%",background:"var(--primary)",color:"#fff",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}>
            <Icon name="check" size={14} stroke={3}/>
          </div>
          <div style={{flex:1}}>
            <div style={{fontSize:13,fontWeight:700}}>[필수] 취소/환불 규정 ›</div>
            <div className="muted" style={{fontSize:12,marginTop:2}}>위의 내용을 확인하였으며, 취소/환불 규정에 동의합니다</div>
          </div>
        </div>

        <div style={{height:1,background:"var(--line)",margin:"0 20px"}}/>

        <div style={{padding:"16px 20px"}}>
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:8}}>
            <div style={{fontSize:15,fontWeight:700}}>부가정보</div>
            <Icon name="chev-d" size={16} style={{color:"var(--text-mute)"}}/>
          </div>
          <div className="info-table" style={{fontSize:12}}>
            <div className="ir" style={{padding:"10px 0"}}><div className="k">상호명</div><div className="v">카카오 VX</div></div>
            <div className="ir" style={{padding:"10px 0"}}><div className="k">대표자 명</div><div className="v">문태식</div></div>
            <div className="ir" style={{padding:"10px 0"}}><div className="k">사업자 등록 번호</div><div className="v">144-81-03460</div></div>
            <div className="ir" style={{padding:"10px 0"}}><div className="k">대표 번호</div><div className="v">1666-1538</div></div>
            <div className="ir" style={{padding:"10px 0"}}><div className="k">주소</div><div className="v" style={{textAlign:"right",maxWidth:220}}>경기도 성남시 분당구<br/>판교역로 231 H스퀘어 S동 5층</div></div>
            <div className="ir" style={{padding:"10px 0"}}><div className="k">통신 판매업 신고 번호</div><div className="v">2012-경기성남-1139</div></div>
          </div>
        </div>
      </div>

      <div style={{position:"absolute",bottom:0,left:0,right:0}}>
        <div style={{padding:"12px 20px 24px",background:"#fff",borderTop:"1px solid var(--line)"}}>
          <button className="btn btn-primary" style={{width:"100%"}} onClick={clickPay}>
            {won(finalPay)} 결제하기
          </button>
        </div>
      </div>
      {toast && <div className="toast"><Icon name="check" size={14}/><span>본인인증이 완료되었습니다</span></div>}

      {popup && (
        <>
          <div className="sheet-back" onClick={()=>setPopup(false)}/>
          <div style={{position:"absolute",left:32,right:32,top:"35%",background:"#fff",borderRadius:16,padding:24,zIndex:200}}>
            <div style={{fontSize:16,fontWeight:800,lineHeight:1.5,marginBottom:14}}>
              이용권을 구매하려면,<br/>본인인증이 필요합니다.
            </div>
            <div style={{display:"flex",gap:8}}>
              <button className="btn btn-outline" style={{flex:1,height:48}} onClick={()=>setPopup(false)}>나중에</button>
              <button className="btn btn-primary" style={{flex:1,height:48}} onClick={verify}>본인인증</button>
            </div>
          </div>
        </>
      )}
    </div>
  );
}

function TicketComplete({ onConfirm }){
  return (
    <div className="screen">
      <StatusBar/>
      <div style={{flex:1,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",padding:"20px 40px"}}>
        <div style={{fontSize:22,fontWeight:800,letterSpacing:"-.02em",textAlign:"center"}}>결제가 완료되었어요.</div>
        <div className="muted" style={{fontSize:14,marginTop:10,textAlign:"center",lineHeight:1.5}}>
          상세 내역은 이용권 관리에서<br/>확인할 수 있어요.
        </div>

        <div style={{marginTop:40}}>
          <div className="char-ph" style={{width:220,height:220}}>
            placeholder: 라이언 캐릭터
          </div>
        </div>
      </div>
      <div style={{padding:"12px 20px 24px",background:"#fff"}}>
        <button className="btn btn-primary" style={{width:"100%"}} onClick={onConfirm}>확인</button>
      </div>
    </div>
  );
}

function TicketFlow({ onClose, goHome, onGift }){
  const [step, setStep] = React.useState("list"); // list | detail | pay | done
  const [ticket, setTicket] = React.useState(null);

  if (step==="detail") return <TicketDetail ticket={ticket} onBack={()=>setStep("list")} onOpenPay={()=>setStep("pay")} onOpenBook={()=>setStep("pay")}/>;
  if (step==="pay") return <TicketPay onBack={()=>setStep("detail")} onClose={onClose} onComplete={()=>setStep("done")}/>;
  if (step==="done") return <TicketComplete onConfirm={goHome}/>;

  return <TicketList onBack={onClose} onGift={onGift} onOpenDetail={(t)=>{ setTicket(t); setStep("detail"); }}/>;
}

/* ============================================================
   이용권 선물하기 — 정책 §5
   App 내 이용권/마일리지 선물 (카카오톡 선물하기 연동 · 타 회원에게 선물)
   ============================================================ */
function GiftFlow({ onClose, goHome }){
  const [step, setStep] = React.useState("pick");   // pick | recipient | message | confirm | done
  const [kind, setKind] = React.useState("ticket"); // ticket | mileage
  const [picked, setPicked] = React.useState(null);
  const [mileage, setMileage] = React.useState(1000);
  const [name, setName] = React.useState("");
  const [phone, setPhone] = React.useState("");
  const [recipient, setRecipient] = React.useState(null); // {via:'kakao'|'member', name, phone}
  const [message, setMessage] = React.useState("");
  const [sending, setSending] = React.useState(false);

  const MY = [
    {id:"g1", kind:"정기 1개월", name:"퀀텀 아카데미 판교점 3개월 정기 이용권", scope:"매장 전용", store:"퀀텀 아카데미 판교점", left:"35일 남음"},
    {id:"g2", kind:"트레이닝권", name:"FA 무제한 60분", scope:"매장 전용", store:"판교점", left:"14회 남음"},
    {id:"g3", kind:"공통 금액권", name:"전체 매장 공통 금액권 5만원", scope:"전체 공통", store:"전체 매장 공통", left:"50,000원"},
  ];
  const MILEAGE_OWNED = 2300;
  const won = (n)=> n.toLocaleString("ko-KR");
  const giftLabel = kind==="mileage" ? `마일리지 ${won(mileage)}P` : (picked ? picked.name : "");
  const canPickNext = kind==="mileage" ? (mileage>0 && mileage<=MILEAGE_OWNED) : !!picked;
  const phoneOk = phone.replace(/[^0-9]/g,"").length >= 10;

  /* ---- STEP: 선물 항목 선택 ---- */
  if (step==="pick") return (
    <div className="screen">
      <StatusBar/>
      <Appbar title="이용권 선물하기" onBack={onClose}/>
      <div className="scroll" style={{padding:"8px 20px 110px"}}>
        <div style={{fontSize:18,fontWeight:800,letterSpacing:"-.02em",margin:"6px 0 18px"}}>무엇을 선물할까요?</div>

        <div style={{display:"flex",background:"var(--bg-soft)",borderRadius:8,padding:3,gap:3,marginBottom:18}}>
          {[["ticket","이용권"],["mileage","마일리지"]].map(([k,v])=>{
            const on = kind===k;
            return <button key={k} onClick={()=>setKind(k)} style={{flex:1,height:40,borderRadius:6,fontSize:14,fontWeight:700,background:on?"#fff":"transparent",color:on?"var(--primary)":"var(--text-mute)",boxShadow:on?"0 1px 3px rgba(0,0,0,.08)":"none"}}>{v}</button>;
          })}
        </div>

        {kind==="ticket" ? (
          <>
            <div style={{display:"flex",flexDirection:"column",gap:10}}>
              {MY.map(t=>{
                const on = picked?.id===t.id;
                return (
                  <button key={t.id} onClick={()=>setPicked(t)} style={{textAlign:"left",padding:16,borderRadius:10,background:on?"var(--primary-tint)":"#fff",border:"1.5px solid "+(on?"var(--primary)":"var(--line)")}}>
                    <div style={{display:"flex",alignItems:"center",gap:6,marginBottom:6}}>
                      <span className="chip" style={{background:"var(--primary-tint)",color:"var(--primary)",fontSize:10}}>{t.kind}</span>
                      <span className="chip" style={{background:"var(--bg-soft)",color:"var(--text-sub)",fontSize:10}}>{t.scope}</span>
                    </div>
                    <div style={{fontSize:14.5,fontWeight:700,lineHeight:1.4}}>{t.name}</div>
                    <div style={{fontSize:12,color:"var(--text-sub)",marginTop:4,display:"flex",alignItems:"center",gap:4}}>
                      <Icon name="store" size={12}/> {t.store} · {t.left}
                    </div>
                  </button>
                );
              })}
            </div>
            <div style={{marginTop:12,fontSize:11.5,color:"var(--text-mute)",lineHeight:1.6}}>
              · 전체 매장 공통권·금액권은 어디서나 사용할 수 있어 선물에 적합해요.<br/>· 받는 분이 수락하면 전달되며, 수락 전까지는 취소할 수 있어요.
            </div>
          </>
        ) : (
          <>
            <div className="card" style={{padding:16}}>
              <div style={{display:"flex",alignItems:"center",justifyContent:"space-between"}}>
                <span style={{fontSize:13,color:"var(--text-sub)",fontWeight:600}}>보유 마일리지</span>
                <span style={{fontSize:18,fontWeight:800}}>{won(MILEAGE_OWNED)}<span style={{fontSize:13,fontWeight:700}}>P</span></span>
              </div>
              <div style={{height:1,background:"var(--line)",margin:"14px 0"}}/>
              <div style={{fontSize:13,fontWeight:700,marginBottom:10}}>선물할 금액</div>
              <div style={{display:"flex",gap:8}}>
                {[1000,2000,2300].map(v=>{
                  const on = mileage===v;
                  return <button key={v} onClick={()=>setMileage(v)} style={{flex:1,padding:"11px 0",borderRadius:8,fontSize:13,fontWeight:700,background:on?"var(--primary-tint)":"var(--bg-soft)",color:on?"var(--primary)":"var(--text-sub)",border:"1.5px solid "+(on?"var(--primary)":"transparent")}}>{v===MILEAGE_OWNED?"전액":won(v)+"P"}</button>;
                })}
              </div>
            </div>
            <div style={{marginTop:12,fontSize:11.5,color:"var(--text-mute)",lineHeight:1.6}}>· 마일리지는 받는 분의 캐시/포인트로 적립돼 이용권 구매 시 사용할 수 있어요.</div>
          </>
        )}
      </div>
      <div style={{position:"absolute",bottom:0,left:0,right:0,padding:"12px 20px 24px",background:"#fff",borderTop:"1px solid var(--line)"}}>
        <button className={"btn " + (canPickNext?"btn-primary":"btn-disabled")} style={{width:"100%"}} onClick={canPickNext?()=>setStep("recipient"):null}>다음</button>
      </div>
    </div>
  );

  /* ---- STEP: 받는 사람 선택 ---- */
  if (step==="recipient") return (
    <div className="screen">
      <StatusBar/>
      <Appbar title="받는 사람" onBack={()=>setStep("pick")}/>
      <div className="scroll" style={{padding:"8px 20px 40px"}}>
        <div style={{fontSize:18,fontWeight:800,letterSpacing:"-.02em",margin:"6px 0 18px"}}>누구에게 보낼까요?</div>

        {/* 카카오톡 선물하기 연동 */}
        <button onClick={()=>{ setRecipient({via:"kakao", name:"카카오톡 친구"}); setStep("message"); }}
          className="btn btn-kakao" style={{width:"100%",gap:8}}>
          <svg viewBox="0 0 24 24" width="18" height="18" fill="#3C1E1E"><path d="M12 3C6.5 3 2 6.5 2 10.8c0 2.8 1.9 5.2 4.7 6.6-.2.7-.7 2.6-.8 3-.1.5.2.5.4.4.2-.1 2.6-1.8 3.7-2.5.6.1 1.3.1 2 .1 5.5 0 10-3.5 10-7.8S17.5 3 12 3z"/></svg>
          카카오톡으로 선물 보내기
        </button>
        <div style={{fontSize:11.5,color:"var(--text-mute)",marginTop:8,textAlign:"center"}}>카카오톡 선물하기로 친구에게 메시지와 함께 전달돼요.</div>

        <div style={{display:"flex",alignItems:"center",gap:10,margin:"22px 0 16px"}}>
          <div style={{flex:1,height:1,background:"var(--line)"}}/>
          <span style={{fontSize:12,color:"var(--text-mute)"}}>또는 회원 검색</span>
          <div style={{flex:1,height:1,background:"var(--line)"}}/>
        </div>

        <div style={{fontSize:12,color:"var(--text-sub)",fontWeight:600,marginBottom:6}}>이름</div>
        <input value={name} onChange={e=>setName(e.target.value)} placeholder="받는 분 이름"
          style={{width:"100%",padding:"12px 0",border:0,borderBottom:"1.5px solid var(--line-strong)",outline:"none",fontSize:16,background:"transparent",marginBottom:18}}/>
        <div style={{fontSize:12,color:"var(--text-sub)",fontWeight:600,marginBottom:6}}>휴대폰 번호</div>
        <input value={phone} onChange={e=>setPhone(e.target.value.replace(/[^0-9]/g,""))} placeholder="-를 제외하고 입력" inputMode="numeric"
          style={{width:"100%",padding:"12px 0",border:0,borderBottom:"1.5px solid var(--line-strong)",outline:"none",fontSize:16,background:"transparent"}}/>

        {phoneOk && (
          <button onClick={()=>{ setRecipient({via:"member", name:(name.trim()||"홍길동"), phone}); setStep("message"); }}
            style={{marginTop:18,width:"100%",display:"flex",alignItems:"center",gap:12,padding:"14px 16px",borderRadius:12,background:"var(--bg-soft)",border:"1px solid var(--line)",textAlign:"left"}}>
            <div className="avatar" style={{width:44,height:44,flex:"0 0 44px",fontSize:15}}>{(name.trim()||"홍")[0]}</div>
            <div style={{flex:1}}>
              <div style={{fontSize:14,fontWeight:700}}>{name.trim()||"홍길동"} 회원님</div>
              <div className="mono" style={{fontSize:12,color:"var(--text-sub)",marginTop:2}}>{phone.replace(/(\d{3})(\d{3,4})(\d{4})/, "$1-$2-$3")}</div>
            </div>
            <span className="chip" style={{background:"var(--primary-tint)",color:"var(--primary)"}}>선택</span>
          </button>
        )}
        <div style={{marginTop:14,fontSize:11.5,color:"var(--text-mute)",lineHeight:1.6}}>· 회원 검색은 이름·휴대폰 번호가 모두 일치할 때 매칭돼요. (개인정보 보호를 위해 일부 마스킹 처리)</div>
      </div>
    </div>
  );

  /* ---- STEP: 메시지 ---- */
  if (step==="message") return (
    <div className="screen">
      <StatusBar/>
      <Appbar title="선물 메시지" onBack={()=>setStep("recipient")}/>
      <div className="scroll" style={{padding:"8px 20px 110px"}}>
        {/* 선물 미리보기 카드 */}
        <div style={{marginTop:8,borderRadius:16,padding:"24px 20px",background:"linear-gradient(135deg,#16A34A,#22C55E)",color:"#fff",textAlign:"center"}}>
          <div style={{width:64,height:64,borderRadius:18,background:"rgba(255,255,255,.18)",display:"flex",alignItems:"center",justifyContent:"center",margin:"0 auto 14px"}}>
            <Icon name="gift" size={30}/>
          </div>
          <div style={{fontSize:12,opacity:.9}}>{recipient?.name}님에게</div>
          <div style={{fontSize:16,fontWeight:800,marginTop:4,lineHeight:1.4}}>{giftLabel}</div>
          {message && <div style={{fontSize:12.5,marginTop:12,padding:"10px 14px",background:"rgba(255,255,255,.16)",borderRadius:10,lineHeight:1.5}}>{message}</div>}
        </div>

        <div style={{marginTop:18,fontSize:13,fontWeight:700,marginBottom:8}}>선물 메시지 <span style={{fontSize:11,color:"var(--text-mute)",fontWeight:500}}>선택</span></div>
        <textarea value={message} onChange={e=>setMessage(e.target.value.slice(0,50))} placeholder="축하 메시지를 입력해 주세요. (최대 50자)"
          style={{width:"100%",padding:"14px",border:"1px solid var(--line)",borderRadius:10,outline:"none",resize:"none",fontSize:14,lineHeight:1.5,minHeight:88,fontFamily:"inherit",background:"#fff"}}/>
        <div style={{textAlign:"right",fontSize:11,color:"var(--text-mute)",marginTop:4}}>{message.length}/50</div>
      </div>
      <div style={{position:"absolute",bottom:0,left:0,right:0,padding:"12px 20px 24px",background:"#fff",borderTop:"1px solid var(--line)"}}>
        <button className="btn btn-primary" style={{width:"100%"}} onClick={()=>setStep("confirm")}>다음</button>
      </div>
    </div>
  );

  /* ---- STEP: 확인 ---- */
  if (step==="confirm") return (
    <div className="screen">
      <StatusBar/>
      <Appbar title="선물 확인" onBack={()=>setStep("message")}/>
      <div className="scroll" style={{padding:"8px 20px 120px"}}>
        <div style={{fontSize:16,fontWeight:800,color:"var(--text-sub)",margin:"14px 0 16px"}}>선물 내용</div>
        <div style={{display:"grid",gridTemplateColumns:"84px 1fr",rowGap:18,fontSize:14}}>
          <div style={{color:"var(--text-sub)"}}>받는 사람</div>
          <div style={{fontWeight:600,textAlign:"right",display:"flex",alignItems:"center",justifyContent:"flex-end",gap:6}}>
            <span className="chip" style={{background:recipient?.via==="kakao"?"#FFF7C2":"var(--bg-soft)",color:recipient?.via==="kakao"?"#6F5A00":"var(--text-sub)"}}>{recipient?.via==="kakao"?"카카오톡":"회원"}</span>
            {recipient?.name}{recipient?.phone?` · ${recipient.phone.replace(/(\d{3})(\d{3,4})(\d{4})/, "$1-$2-$3")}`:""}
          </div>
          <div style={{color:"var(--text-sub)"}}>선물</div>
          <div style={{fontWeight:600,textAlign:"right"}}>{giftLabel}</div>
          <div style={{color:"var(--text-sub)"}}>메시지</div>
          <div style={{fontWeight:600,textAlign:"right",lineHeight:1.5}}>{message || "—"}</div>
        </div>

        <div style={{marginTop:22,padding:"14px 16px",background:"var(--bg-soft)",borderRadius:10,fontSize:12.5,color:"var(--text-sub)",lineHeight:1.7}}>
          · 받는 분이 수락하면 <b style={{color:"var(--text)"}}>이용권 관리 &gt; 다운로드</b>에서 사용할 수 있어요.<br/>
          · 카카오톡 선물하기로 보낸 경우 카카오톡 메시지로 전달됩니다.<br/>
          · 수락 전에는 보낸 선물을 취소할 수 있어요.
        </div>
      </div>
      <div style={{position:"absolute",bottom:0,left:0,right:0,padding:"12px 20px 24px",background:"#fff"}}>
        <button className="btn btn-primary" style={{width:"100%"}} onClick={()=>{ setSending(true); setTimeout(()=>{ setSending(false); setStep("done"); }, 1200); }}>선물 보내기</button>
      </div>
      {sending && (
        <div style={{position:"absolute",inset:0,background:"rgba(255,255,255,.72)",zIndex:200,display:"flex",alignItems:"center",justifyContent:"center"}}>
          <div style={{fontSize:14,fontWeight:700}}>선물을 보내고 있어요…</div>
        </div>
      )}
    </div>
  );

  /* ---- STEP: 완료 ---- */
  return (
    <div className="screen">
      <StatusBar/>
      <Appbar title="선물 완료" onBack={goHome}/>
      <div className="scroll" style={{padding:"16px 20px 120px",textAlign:"center"}}>
        <div className="circle-ok bump" style={{marginTop:24}}><Icon name="gift" size={42}/></div>
        <div className="h1" style={{marginTop:20}}>선물을 보냈어요!</div>
        <div className="muted" style={{fontSize:13,marginTop:6,lineHeight:1.6}}>{recipient?.name}님이 수락하면 전달돼요.<br/>수락 전까지는 선물 내역에서 취소할 수 있어요.</div>
        <div className="card" style={{marginTop:24,padding:18,textAlign:"left"}}>
          <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:12}}>
            <div style={{width:38,height:38,borderRadius:11,background:"var(--primary-tint)",color:"var(--primary)",display:"flex",alignItems:"center",justifyContent:"center"}}><Icon name="gift" size={18}/></div>
            <div style={{fontWeight:800,fontSize:15}}>{giftLabel}</div>
          </div>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12,paddingTop:12,borderTop:"1px dashed var(--line)"}}>
            <div><div className="label">받는 사람</div><div className="val" style={{marginTop:3}}>{recipient?.name}</div></div>
            <div><div className="label">방식</div><div className="val" style={{marginTop:3,color:"var(--primary)"}}>{recipient?.via==="kakao"?"카카오톡 선물하기":"회원 선물"}</div></div>
          </div>
        </div>
      </div>
      <div className="footer-bar" style={{display:"flex",gap:10}}>
        <button className="btn btn-outline" style={{flex:1}} onClick={goHome}>홈으로</button>
        <button className="btn btn-primary" style={{flex:2}} onClick={goHome}>확인</button>
      </div>
    </div>
  );
}

Object.assign(window, { TicketList, TicketDetail, TicketPay, TicketComplete, TicketFlow, GiftFlow });