/* =========================================================
   pages_account.jsx — Connect / onboarding, Hotel dashboard
   ========================================================= */

/* ---------------- connect / onboarding ---------------- */
function ConnectPage(){
  const { wallet, role, setRole, connectWallet, network, setNetwork } = useStore();
  const step = !wallet ? 0 : !role ? 1 : 2;

  return (
    <div className="page" style={{position:"relative"}}>
      <div style={{position:"absolute",inset:0,height:300,overflow:"hidden"}}>
        <Photo seed="kyoto-ryokan" w={1800} h={700} style={{position:"absolute",inset:0,background:"linear-gradient(135deg, oklch(0.45 0.11 250), oklch(0.30 0.10 264) 55%, oklch(0.40 0.09 200))"}} />
        <div style={{position:"absolute",inset:0,background:"linear-gradient(180deg, oklch(0.26 0.05 266 / .7), var(--bg))"}}></div>
      </div>

      <div className="wrap" style={{maxWidth:680, position:"relative", padding:"56px 28px 70px"}}>
        <div style={{textAlign:"center",color:"#fff",marginBottom:28}}>
          <span className="badge" style={{background:"oklch(1 0 0 / .16)",color:"#fff",marginBottom:14}}><Icon name="wallet" size={14}/>온보딩</span>
          <h1 className="display d2" style={{color:"#fff"}}>지갑을 연결하고 시작하세요</h1>
          <p style={{color:"oklch(0.92 0.015 250)",marginTop:8}}>BlockStay는 MetaMask 지갑과 Sepolia 테스트넷으로 동작합니다.</p>
        </div>

        {/* progress */}
        <div className="row gap-8 center" style={{marginBottom:22}}>
          {["지갑 연결","역할 선택","완료"].map((s,i)=>(
            <React.Fragment key={s}>
              <span className={"badge "+(i<=step?"badge-clay":"badge-line")}>{i<step?<Icon name="check" size={12}/>:i+1} {s}</span>
              {i<2 && <span style={{width:18,height:1,background:"var(--line-2)"}}></span>}
            </React.Fragment>
          ))}
        </div>

        {step===0 && (
          <div className="col gap-16">
            <div className="card card-pad col gap-16">
              <div className="row gap-12">
                <span className="logo-mark" style={{width:42,height:42,borderRadius:12}}><Icon name="wallet" size={20} style={{color:"#fff"}}/></span>
                <div><div className="h-md">1. MetaMask 설치</div><div className="muted small">브라우저 확장 지갑이 필요합니다.</div></div>
              </div>
              <div className="panel" style={{padding:14}}>
                <div className="row gap-8 small"><Icon name="info" size={15} style={{color:"var(--clay)"}}/>아직 지갑이 없다면 <a className="link-clay" href="https://metamask.io/download/" target="_blank" rel="noreferrer">metamask.io</a> 에서 설치 후 돌아오세요.</div>
              </div>
              <div className="row gap-12">
                <div className="panel grow col gap-4" style={{padding:14}}>
                  <div className="row gap-6 xs" style={{fontWeight:700,color:"var(--clay-ink)"}}><Icon name="bolt" size={14}/>Sepolia 추가</div>
                  <div className="xs muted">네트워크: Sepolia · ChainID 11155111 · 통화 SepoliaETH</div>
                </div>
                <div className="panel grow col gap-4" style={{padding:14}}>
                  <div className="row gap-6 xs" style={{fontWeight:700,color:"var(--clay-ink)"}}><Icon name="gift" size={14}/>테스트 ETH</div>
                  <div className="xs muted">Sepolia Faucet에서 무료로 받아 수수료를 충전하세요.</div>
                </div>
              </div>
            </div>
            <button className="btn btn-dark btn-lg btn-block" onClick={connectWallet}><Icon name="wallet" size={18}/>MetaMask 연결하기</button>
            <div className="xs muted center" style={{textAlign:"center"}}>(데모) 클릭 시 실제 지갑 대신 시뮬레이션 모달이 표시됩니다.</div>
          </div>
        )}

        {step===1 && (
          <div className="col gap-16">
            <div className="card card-pad row between">
              <div className="row gap-10"><span className="net-pill net-ok"><span className="dot"></span>Sepolia 연결됨</span></div>
              <div className="wallet-chip"><span className="avatar"></span><span className="mono">{shortAddr(wallet.address)}</span></div>
            </div>
            <div style={{textAlign:"center"}}><div className="h-lg">어떤 역할로 이용하시나요?</div><div className="muted small" style={{marginTop:4}}>나중에 언제든 변경할 수 있습니다.</div></div>
            <div className="row gap-16">
              {[
                ["guest","소비자","호텔을 검색하고 예약금을 예치해 안전하게 숙박하세요.","user","/hotels"],
                ["hotel","호텔","객실을 등록하고 보증금을 예치해 신뢰 등급을 받으세요.","building","/hotel/dashboard"],
              ].map(([k,t,d,ic,to])=>(
                <button key={k} className="card card-pad col gap-10 grow" style={{textAlign:"left",cursor:"pointer",alignItems:"flex-start"}}
                  onClick={()=>{ setRole(k); navigate(to); }}>
                  <span className="logo-mark" style={{width:44,height:44,borderRadius:13,background:k==="guest"?"var(--clay-soft)":"var(--green-soft)"}}>
                    <Icon name={ic} size={22} style={{color:k==="guest"?"var(--clay-ink)":"var(--green-deep)"}}/>
                  </span>
                  <b className="h-md">{t}</b>
                  <span className="small muted" style={{lineHeight:1.55}}>{d}</span>
                  <span className="link-clay xs row gap-4" style={{marginTop:4}}>시작하기<Icon name="arrowRight" size={14}/></span>
                </button>
              ))}
            </div>
          </div>
        )}

        {step===2 && (
          <div className="card card-pad col center gap-14" style={{textAlign:"center",padding:"42px"}}>
            <span className="logo-mark" style={{width:54,height:54,borderRadius:16,background:"var(--green)"}}><Icon name="check" size={26} style={{color:"#fff"}}/></span>
            <div className="h-lg">준비 완료!</div>
            <div className="muted">{role==="guest"?"소비자":"호텔"} 역할로 연결되었습니다.</div>
            <div className="row gap-10">
              <button className="btn btn-line" onClick={()=>setRole(null)}>역할 변경</button>
              <button className="btn btn-primary" onClick={()=>navigate(role==="hotel"?"/hotel/dashboard":"/hotels")}>
                {role==="hotel"?"관리자 대시보드로":"호텔 둘러보기"}<Icon name="arrowRight" size={16}/>
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

/* ---------------- hotel dashboard ---------------- */
function HotelDashboardPage(){
  const { wallet, hotelProfile, registerHotel, bookings, addRoom, showToast, chainLoading } = useStore();
  if(!wallet) return <ConnectGate title="호텔 관리자 지갑을 연결하세요" sub="객실 등록과 정산은 호텔 지갑 주소로 이루어집니다." />;
  if(chainLoading) return (
    <div className="wrap" style={{padding:"90px 0",textAlign:"center"}}>
      <span className="spin" style={{width:32,height:32,borderWidth:3,display:"inline-block"}}></span>
      <div className="muted small" style={{marginTop:16}}>블록체인에서 호텔 정보를 불러오는 중…</div>
    </div>
  );
  if(!hotelProfile) return <HotelRegister onDone={registerHotel} />;
  return <HotelDashboard profile={hotelProfile} bookings={bookings} addRoom={addRoom} showToast={showToast} />;
}

function HotelRegister({ onDone }){
  const { showToast } = useStore();
  const [name, setName] = useState("");
  const [city, setCity] = useState("");
  const [tagline, setTagline] = useState("");
  const [image, setImage] = useState("");
  const [busy, setBusy] = useState(false);
  const canSubmit = name.trim() && city.trim() && !busy;

  async function submit(){
    setBusy(true);
    try{
      await onDone({ hotelMeta: { name, city, tagline, image } });
      showToast("호텔이 등록되었습니다. 이제 객실을 등록하세요.");
    } catch(_){} finally{ setBusy(false); }
  }

  return (
    <div className="page wrap" style={{maxWidth:600, padding:"34px 28px 64px"}}>
      <span className="eyebrow">호텔 관리자</span>
      <h1 className="display d2" style={{marginTop:6,marginBottom:6}}>호텔 등록하기</h1>
      <p className="muted" style={{marginBottom:24}}>호텔 기본 정보를 블록체인에 등록합니다. 등록 후 <b>객실 관리</b> 탭에서 객실을 추가하세요.</p>

      <div className="card card-pad col gap-16">
        <div className="field"><label>호텔 이름 <span style={{color:"var(--clay-ink)"}}>*</span></label><input className="input" placeholder="예: 제주 오션 클리프 리조트" value={name} onChange={e=>setName(e.target.value)} /></div>
        <div className="field"><label>지역 <span style={{color:"var(--clay-ink)"}}>*</span></label><input className="input" placeholder="예: 제주" value={city} onChange={e=>setCity(e.target.value)} /></div>
        <div className="field"><label>한 줄 소개 <span className="muted xs">(선택)</span></label><input className="input" placeholder="예: 절벽 위에서 마주하는 제주 남쪽 바다" value={tagline} onChange={e=>setTagline(e.target.value)} /></div>
        <div className="field"><label>대표 이미지 URL <span className="muted xs">(선택)</span></label><input className="input" placeholder="https:// 이미지 주소" value={image} onChange={e=>setImage(e.target.value)} /></div>
        {image && <Photo src={image} rounded={10} style={{width:96,height:64}} />}
        <button className="btn btn-primary btn-lg btn-block" disabled={!canSubmit} onClick={submit}>
          {busy ? <span className="spin" style={{borderTopColor:"#fff",borderColor:"oklch(1 0 0 /.4)"}}></span> : <Icon name="shieldCheck" size={18}/>}
          MetaMask로 호텔 등록
        </button>
        {!canSubmit && !busy && <div className="xs muted" style={{textAlign:"center"}}>호텔 이름과 지역을 입력해 주세요</div>}
      </div>
    </div>
  );
}

function HotelEditModal({ profile, onClose }){
  const { updateMyHotel } = useStore();
  const [name, setName] = useState(profile.name || "");
  const [city, setCity] = useState(profile.city || "");
  const [desc, setDesc] = useState(profile.description || "");
  const [imageUrl, setImageUrl] = useState(profile.image || "");
  const [busy, setBusy] = useState(false);

  async function submit(){
    if(!name.trim() || !city.trim()) return;
    setBusy(true);
    try {
      await updateMyHotel({ name: name.trim(), city: city.trim(), description: desc.trim(), imageUrl: imageUrl.trim() });
      onClose();
    } finally {
      setBusy(false);
    }
  }

  return (
    <div style={{position:"fixed",inset:0,zIndex:9999,background:"rgba(0,0,0,.5)",display:"flex",alignItems:"center",justifyContent:"center"}} onClick={onClose}>
      <div className="card col gap-16" style={{width:420,padding:28}} onClick={e=>e.stopPropagation()}>
        <div className="row between" style={{alignItems:"center"}}>
          <b style={{fontSize:16}}>호텔 정보 수정</b>
          <button className="btn btn-line btn-sm" onClick={onClose}>닫기</button>
        </div>
        <div className="field"><label>호텔 이름 *</label><input className="input" value={name} onChange={e=>setName(e.target.value)} /></div>
        <div className="field"><label>지역 *</label><input className="input" value={city} onChange={e=>setCity(e.target.value)} /></div>
        <div className="field"><label>소개</label><textarea className="input" rows={3} value={desc} onChange={e=>setDesc(e.target.value)} style={{resize:"vertical"}} /></div>
        <div className="field"><label>호텔 이미지 URL</label><input className="input" value={imageUrl} onChange={e=>setImageUrl(e.target.value)} placeholder="https://..." /></div>
        <button className="btn btn-primary btn-block" disabled={!name.trim()||!city.trim()||busy} onClick={submit}>
          {busy ? <span className="spin" style={{borderTopColor:"#fff",borderColor:"oklch(1 0 0 /.4)"}}></span> : "저장"}
        </button>
      </div>
    </div>
  );
}

function HotelDashboard({ profile, bookings, addRoom, showToast }){
  const { updateMyHotel } = useStore();
  const [section, setSection] = useState("rooms");
  const [editOpen, setEditOpen] = useState(false);
  const t = trustTier(profile.depositRatio);
  const rooms = profile.rooms || [];

  const escrowBal = bookings.filter(b=>b.status==="booked"||b.status==="checkedin").reduce((s,b)=>s+b.amountEth+b.collateralEth,0);
  const collateralReserve = bookings.filter(b=>b.status==="booked"||b.status==="checkedin").reduce((s,b)=>s+b.collateralEth,0);
  const pending = bookings.filter(b=>b.status==="checkedin").reduce((s,b)=>s+b.amountEth,0);
  const settled = bookings.filter(b=>b.status==="completed").reduce((s,b)=>s+b.amountEth,0);

  const sections = [["rooms","객실 관리","bed"],["reservations","예약 현황","calendar"],["revenue","수익 현황","coins"]];

  return (
    <div className="page wrap wrap-wide" style={{padding:"28px 28px 64px"}}>
      {editOpen && <HotelEditModal profile={profile} onClose={()=>setEditOpen(false)} />}
      {/* identity banner */}
      <div className="card" style={{padding:0, overflow:"hidden", marginBottom:22, display:"flex"}}>
        <Photo seed={profile.seed||profile.name} src={profile.image} w={520} h={400} style={{width:200,flex:"none"}} />
        <div className="grow row between wrap-row gap-16" style={{padding:"20px 24px",alignItems:"center"}}>
          <div className="col gap-8">
            <span className="badge badge-green" style={{alignSelf:"flex-start"}}><Icon name="building" size={13}/>내가 관리하는 호텔</span>
            <div className="row gap-10 wrap-row" style={{alignItems:"center"}}>
              <h1 className="display d3">{profile.name}</h1>
              <TierChip ratio={profile.depositRatio} withRatio/>
            </div>
            <div className="muted small row gap-6"><Icon name="mapPin" size={14}/>{profile.city} · 객실 {rooms.length}개 운영 중</div>
          </div>
          <button className="btn btn-line" onClick={()=>setEditOpen(true)}><Icon name="edit" size={16}/>호텔 정보 수정</button>
        </div>
      </div>

      {/* section nav */}
      <div className="seg" style={{maxWidth:440, marginBottom:24}}>
        {sections.map(([k,l,ic])=>(
          <button key={k} className={section===k?"on":""} onClick={()=>setSection(k)}>
            <span className="row gap-6 center"><Icon name={ic} size={15}/>{l}</span>
          </button>
        ))}
      </div>

      {section==="rooms" && <RoomsSection profile={profile} updateMyHotel={updateMyHotel} addRoom={addRoom} showToast={showToast} />}
      {section==="reservations" && <ReservationsSection bookings={bookings} />}
      {section==="revenue" && <RevenueSection profile={profile} t={t} escrowBal={escrowBal} collateralReserve={collateralReserve} pending={pending} settled={settled} />}
    </div>
  );
}

/* ---- 객실 관리 ---- */
function RoomsSection({ profile, updateMyHotel, addRoom, showToast }){
  const { removeRoom } = useStore();
  const rooms = (profile.rooms || []).filter(r => r.isAvailable !== false);
  const [adding, setAdding] = useState(false);
  const blank = { name:"", type:"디럭스", beds:"킹 1", size:"40㎡", cap:2, image:"", availFrom:isoPlusDays(1), availTo:isoPlusDays(90) };
  const [form, setForm] = useState(blank);
  const [priceEth, setPriceEth] = useState(0.00001);
  const [ratio, setRatio] = useState(120);
  // 판매기간 총 일수 기준 예치금: pricePerNight × days × depositRatio / 100
  const salesDays = Math.max(1, Math.round((new Date(form.availTo) - new Date(form.availFrom)) / 86400000));
  const minStake = +(priceEth * salesDays * ratio / 100).toFixed(8);
  const [busy, setBusy] = useState(false);

  async function handleAddRoom(){
    setBusy(true);
    try{
      await addRoom({
        hotelId: profile.id,
        roomMeta: { ...form, name: form.name || "새 객실" },
        pricePerNightEth: priceEth,
        depositRatio: ratio,
        stakeEth: minStake,
      });
      setAdding(false);
      setForm(blank);
      showToast("객실이 블록체인에 등록되었습니다");
    } catch(_){} finally{ setBusy(false); }
  }
  async function handleRemoveRoom(room){
    if(!confirm(`"${room.name}" 객실을 비활성화할까요? 온체인에서 판매 중지 처리됩니다.`)) return;
    try{ await removeRoom(room.roomAddress); }catch(_){}
  }

  function RoomCard({ r }){
    const ranges = r.bookedRanges || [];
    const listable = roomListable(r);
    return (
      <div className="card" style={{padding:0,overflow:"hidden",opacity:listable?1:.7}}>
        <div style={{position:"relative"}}>
          <Photo seed={r.name+profile.name} src={r.image} h={260} style={{height:130,filter:listable?"none":"grayscale(.5)"}} />
          <div style={{position:"absolute",top:10,left:10}}>
            {!listable
              ? <span className="badge badge-gray"><Icon name="clock" size={12}/>판매 종료</span>
              : ranges.length>0
                ? <span className="badge badge-blue"><Icon name="key" size={12}/>예약 {ranges.length}건</span>
                : <span className="badge badge-green"><Icon name="check" size={12}/>판매 중</span>}
          </div>
        </div>
        <div className="col gap-10" style={{padding:"14px 16px"}}>
          <div className="row between">
            <div className="row gap-8"><b>{r.name}</b><span className="badge badge-line xs">{r.type||"객실"}</span></div>
            <button className="btn btn-line btn-sm" style={{padding:6}} title="객실 비활성화" onClick={()=>handleRemoveRoom(r)}><Icon name="x" size={14}/></button>
          </div>
          <div className="row gap-12 muted xs" style={{whiteSpace:"nowrap"}}>
            <span className="row gap-4"><Icon name="bed" size={13}/>{r.beds}</span>
            <span>{r.size}</span>
            <span className="row gap-4"><Icon name="user" size={13}/>최대 {r.cap}인</span>
          </div>
          {r.availFrom && (
            <div className="row gap-6 xs muted" style={{whiteSpace:"nowrap"}}>
              <Icon name="calendar" size={13}/>판매 기간 {fmtDate(r.availFrom)} – {fmtDate(r.availTo)}
            </div>
          )}
          {ranges.length>0 && (
            <div className="col gap-5">
              <span className="xs" style={{color:"var(--clay-ink)",fontWeight:600}}>예약된 날짜</span>
              <div className="chip-row">
                {ranges.map((bk,i)=> <span key={i} className="tag" style={{whiteSpace:"nowrap"}}><Icon name="key" size={11}/>{fmtDate(bk.from)}–{fmtDate(bk.to)}</span>)}
              </div>
            </div>
          )}
          <hr className="hairline"/>
          <div className="row between">
            <span><b className="mono">{fmtEth(r.price)}</b> <span className="xs muted">ETH / 박</span></span>
            <span className="xs muted">{ranges.length>0?`나머지 날짜 예약 가능`:"예약 없음"}</span>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="col gap-16">
      <div className="card card-pad row between wrap-row gap-12" style={{background:"var(--clay-soft)",borderColor:"var(--clay-tint)"}}>
        <div className="row gap-10">
          <span className="logo-mark" style={{width:40,height:40,borderRadius:12,background:"var(--clay)"}}><Icon name="bed" size={20} style={{color:"#fff"}}/></span>
          <div>
            <b>객실 등록 & 관리</b>
            <div className="muted xs" style={{marginTop:2}}>판매할 객실을 등록하면 소비자가 예약할 수 있어요. 현재 {rooms.length}개 운영 중</div>
          </div>
        </div>
        <button className="btn btn-primary" onClick={()=>setAdding(a=>!a)}><Icon name={adding?"x":"plus"} size={17}/>{adding?"취소":"새 객실 등록"}</button>
      </div>

      {adding && (
        <div className="card card-pad col gap-16 fade-in">
          <b className="row gap-8"><Icon name="plus" size={16} style={{color:"var(--clay)"}}/>새 객실 정보</b>
          <div className="row gap-12 wrap-row">
            <div className="field grow" style={{minWidth:200}}><label>객실 이름</label><input className="input" placeholder="예: 오션뷰 디럭스" value={form.name} onChange={e=>setForm(f=>({...f,name:e.target.value}))} /></div>
            <div className="field" style={{width:150}}><label>객실 타입</label>
              <select className="select" value={form.type} onChange={e=>setForm(f=>({...f,type:e.target.value}))}>
                {["스탠다드","디럭스","스위트","풀빌라","한실"].map(o=> <option key={o}>{o}</option>)}
              </select>
            </div>
          </div>
          <div className="row gap-12 wrap-row">
            <div className="field grow" style={{minWidth:130}}><label>침대 구성</label><input className="input" value={form.beds} onChange={e=>setForm(f=>({...f,beds:e.target.value}))} /></div>
            <div className="field" style={{width:120}}><label>면적</label><input className="input" value={form.size} onChange={e=>setForm(f=>({...f,size:e.target.value}))} /></div>
            <div className="field"><label>최대 인원</label>
              <div className="row gap-10" style={{height:44,alignItems:"center"}}>
                <button className="btn btn-line btn-sm" onClick={()=>setForm(f=>({...f,cap:Math.max(1,f.cap-1)}))}><Icon name="minus" size={14}/></button>
                <b className="tnum" style={{minWidth:36,textAlign:"center"}}>{form.cap}명</b>
                <button className="btn btn-line btn-sm" onClick={()=>setForm(f=>({...f,cap:f.cap+1}))}><Icon name="plus" size={14}/></button>
              </div>
            </div>
          </div>
          <div className="field"><label>객실 이미지 URL <span className="muted xs">(선택)</span></label>
            <div className="row gap-10" style={{alignItems:"center"}}>
              <input className="input grow" placeholder="https:// 이미지 주소 붙여넣기" value={form.image} onChange={e=>setForm(f=>({...f,image:e.target.value}))} />
              {form.image && <Photo src={form.image} rounded={10} style={{width:80,height:54,flex:"none"}} />}
            </div>
          </div>
          <div className="divider"></div>
          <b className="row gap-8 small"><Icon name="calendar" size={15} style={{color:"var(--clay)"}}/>예약 가능 기간</b>
          <div className="row gap-12 wrap-row">
            <div className="field grow" style={{minWidth:160}}><label>판매 시작일</label>
              <input className="input" type="date" value={form.availFrom} onChange={e=>setForm(f=>({...f,availFrom:e.target.value}))} />
            </div>
            <div className="field grow" style={{minWidth:160}}><label>판매 종료일</label>
              <input className="input" type="date" value={form.availTo} min={form.availFrom} onChange={e=>setForm(f=>({...f,availTo:e.target.value}))} />
            </div>
          </div>
          <div className="field">
            <label className="row between" style={{width:"100%"}}><span>1박 가격</span><b className="mono">{fmtEth(priceEth)} ETH</b></label>
            <input type="range" min="0.00001" max="0.20" step="0.00001" value={priceEth} onChange={e=>setPriceEth(+e.target.value)} style={{accentColor:"var(--clay)"}}/>
            <div className="row between xs muted"><span>0.00001 ETH</span><span>0.20 ETH</span></div>
          </div>
          <div className="field">
            <label className="row between" style={{width:"100%"}}><span>보증금 비율</span><TierChip ratio={ratio}/></label>
            <input type="range" min="100" max="200" step="5" value={ratio} onChange={e=>setRatio(+e.target.value)} style={{accentColor:"var(--green)"}}/>
            <div className="row between xs muted"><span>100% · 최소</span><span style={{color:"var(--green-deep)"}}>200% · 최고 신뢰</span></div>
          </div>
          <div className="panel row gap-8" style={{padding:"11px 13px",background:"var(--clay-soft)",borderColor:"var(--clay-tint)"}}>
            <Icon name="info" size={14} style={{color:"var(--clay)",flex:"none"}}/>
            <span className="xs muted">등록 시 보증금 <b style={{color:"var(--ink)"}}>{fmtEth(minStake)} ETH</b> 예치 ({fmtEth(priceEth)} ETH × {salesDays}일 × {ratio}%)</span>
          </div>
          <button className="btn btn-primary" disabled={busy} onClick={handleAddRoom}>
            {busy ? <span className="spin" style={{borderTopColor:"#fff",borderColor:"oklch(1 0 0 /.4)"}}></span> : <Icon name="check" size={16}/>}
            MetaMask로 객실 등록
          </button>
        </div>
      )}

      {/* room list */}
      <div className="grid-cards">
        {rooms.map((r,i)=> <RoomCard key={i} r={r} />)}
        {rooms.length===0 && !adding && (
          <div className="card card-pad center col gap-10" style={{gridColumn:"1 / -1",padding:48,textAlign:"center"}}>
            <Icon name="bed" size={30} style={{color:"var(--faint)"}}/>
            <div className="muted">아직 등록된 객실이 없습니다.</div>
            <button className="btn btn-soft btn-sm" onClick={()=>setAdding(true)}><Icon name="plus" size={15}/>첫 객실 등록하기</button>
          </div>
        )}
      </div>
    </div>
  );
}

/* ---- 예약 현황 ---- */
function ReservationsSection({ bookings }){
  const [tab, setTab] = useState("all");
  const tabs=[["all","전체"],["booked","예약중"],["checkedin","체크인"],["completed","완료"],["cancelled","취소/보상"]];
  const rows = bookings.filter(b=> tab==="all"?true : tab==="cancelled"?(b.status==="cancelled"||b.status==="disputed"):b.status===tab);
  return (
    <div className="card" style={{padding:0,overflow:"hidden"}}>
      <div className="row between wrap-row gap-12" style={{padding:"16px 20px",borderBottom:"1px solid var(--line)"}}>
        <b className="row gap-8"><Icon name="calendar" size={17} style={{color:"var(--clay)"}}/>받은 예약</b>
        <div className="seg" style={{padding:3}}>{tabs.map(([k,l])=> <button key={k} className={tab===k?"on":""} style={{padding:"6px 11px",fontSize:12.5}} onClick={()=>setTab(k)}>{l}</button>)}</div>
      </div>
      <div>
        {rows.length===0 && <div className="center muted" style={{padding:48}}>해당 예약이 없습니다.</div>}
        {rows.map((b,i)=>(
          <div key={b.id} className="row between" style={{padding:"14px 20px",borderBottom:i<rows.length-1?"1px solid var(--line)":"0"}}>
            <div className="row gap-14">
              <Photo seed={(getHotel(b.hotelId)||{}).photos?.[0]||b.hotelId} src={(getHotel(b.hotelId)||{}).image||""} w={160} h={140} rounded={10} style={{width:54,height:48,flex:"none"}} />
              <div>
                <div className="row gap-8"><b className="small">{b.roomName}</b><span className="mono xs muted">{b.id}</span></div>
                <div className="muted xs row gap-8" style={{marginTop:3}}><span>{fmtDate(b.checkIn)}–{fmtDate(b.checkOut)}</span><span>·</span><span>{b.guests}명</span></div>
              </div>
            </div>
            <div className="row gap-16">
              <div style={{textAlign:"right"}}><div className="mono small"><b>{fmtEth(b.amountEth)}</b> ETH</div><div className="xs muted">보증금 {fmtEth(b.collateralEth)}</div></div>
              <StatusBadge status={b.status}/>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---- 수익 현황 ---- */
function RevenueSection({ profile, t, escrowBal, collateralReserve, pending, settled }){
  return (
    <div className="col gap-20">
      <div className="grid-cards" style={{gridTemplateColumns:"repeat(4,1fr)"}}>
        {[
          ["보관 중 잔액", fmtEth(escrowBal), "예약금 + 보증금", "lock","var(--clay-ink)"],
          ["정산 예정액", fmtEth(pending), "체크아웃 대기 중", "clock","var(--amber-deep)"],
          ["누적 정산 수익", fmtEth(settled), "이용 완료된 예약", "coins","var(--green-deep)"],
          ["맡긴 보증금", fmtEth(collateralReserve), `활성 예약 담보 · ${profile.depositRatio}%`, "shieldCheck","var(--green-deep)"],
        ].map(([l,n,s,ic,c])=>(
          <div className="card card-pad col gap-4" key={l}>
            <div className="row between"><Icon name={ic} size={18} style={{color:c}}/><span className="xs muted">{s}</span></div>
            <div className="serif" style={{fontSize:26,fontWeight:700,marginTop:8}}>{n} <span style={{fontSize:13,color:"var(--muted)"}}>ETH</span></div>
            <div className="small" style={{fontWeight:600}}>{l}</div>
          </div>
        ))}
      </div>
      <div style={{display:"grid",gridTemplateColumns:"1fr 320px",gap:24,alignItems:"start"}}>
        <div className="card card-pad col gap-12">
          <b className="small row gap-8"><Icon name="info" size={15} style={{color:"var(--clay)"}}/>정산은 이렇게 이뤄져요</b>
          <div className="col gap-10 small muted">
            <div className="row gap-8"><Icon name="check" size={15} style={{color:"var(--green)",marginTop:2}}/><span>소비자가 <b style={{color:"var(--ink)"}}>체크아웃</b>을 누르면 예약금이 호텔로 즉시 입금됩니다.</span></div>
            <div className="row gap-8"><Icon name="check" size={15} style={{color:"var(--green)",marginTop:2}}/><span>소비자가 체크아웃을 잊어도 <b style={{color:"var(--ink)"}}>이용 후 24시간</b>이 지나면 자동으로 정산됩니다.</span></div>
            <div className="row gap-8"><Icon name="alert" size={15} style={{color:"var(--red)",marginTop:2}}/><span>호텔 귀책으로 문제가 신고되면 맡긴 보증금이 소비자에게 지급됩니다.</span></div>
          </div>
        </div>
        <div className="card card-pad col center gap-10" style={{textAlign:"center"}}>
          <TrustMeter ratio={profile.depositRatio} size={120}/>
          <b>{t.label} 호텔</b>
          <div className="xs muted" style={{lineHeight:1.5}}>보증금 비율이 높을수록 목록 상단에 노출되고 예약으로 더 잘 이어집니다.</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ConnectPage, HotelDashboardPage });