// Phone shell, status bar, tab bar, toast helpers

function StatusBar({ onNavy = false }){
  return (
    <div className="status-bar" style={{color: onNavy ? "#fff" : "var(--text)"}}>
      <div className="mono" style={{fontSize:14,fontWeight:700}}>9:41</div>
      <div className="status-right">
        <Icon name="signal" size={15}/>
        <Icon name="wifi" size={15}/>
        <Icon name="battery" size={22}/>
      </div>
    </div>
  );
}

function TabBar({ current, onNav }){
  const tabs = [
    {id:"home", label:"홈", icon:"home"},
    {id:"report", label:"리포트", icon:"receipt"},
    {id:"qr", label:"", icon:"qr", isFab:true},
    {id:"store", label:"매장찾기", icon:"location"},
    {id:"swing", label:"스윙영상", icon:"video"},
  ];
  return (
    <div className="tabbar">
      {tabs.map(t=>(
        t.isFab ? (
          <div key={t.id} style={{position:"relative"}}>
            <button onClick={()=>onNav(t.id)}
              style={{
                position:"absolute",top:-24,left:"50%",transform:"translateX(-50%)",
                width:56,height:56,borderRadius:"50%",background:"var(--primary)",
                color:"#fff",display:"flex",alignItems:"center",justifyContent:"center",
                boxShadow:"0 8px 20px rgba(34,197,94,.35)"
              }}>
              <Icon name="qr" size={26} stroke={2}/>
            </button>
          </div>
        ) : (
          <button key={t.id} onClick={()=>onNav(t.id)} className={current===t.id?"on":""}>
            <Icon name={t.icon} size={22} stroke={current===t.id?2.1:1.7}/>
            <span>{t.label}</span>
          </button>
        )
      ))}
    </div>
  );
}

function FabQR({ onClick }){
  return (
    <button className="fab-qr" onClick={onClick}>
      <span className="ball"/>
      <span>QR로 로그인</span>
    </button>
  );
}

function Phone({ children, label }){
  return (
    <div className="col">
      <div className="phone-wrap">
        <div className="phone">
          <div className="notch"/>
          {children}
          <div className="homeind"/>
        </div>
      </div>
      {label && <div className="col-label">{label}</div>}
    </div>
  );
}

function Toast({ children, icon = "sun" }){
  return (
    <div className="toast">
      <Icon name={icon} size={14}/>
      <span>{children}</span>
    </div>
  );
}

// Standard appbar — Figma style: white background, CENTERED title, back (<) on left, optional close/search on right.
function Appbar({ title, onBack, onClose, right, leftExtra }){
  return (
    <div className="appbar">
      <div className="side">
        {onBack && <button className="icon-btn" onClick={onBack}><Icon name="back" size={20}/></button>}
        {leftExtra}
      </div>
      {title && <div className="title">{title}</div>}
      <div className="side">
        {right}
        {onClose && <button className="icon-btn" onClick={onClose}><Icon name="x" size={20}/></button>}
      </div>
    </div>
  );
}

// Progress/stepper
function Stepper({ steps, active }){
  const pct = ((active+1) / steps.length) * 100;
  return (
    <div style={{padding:"8px 20px 14px",background:"#fff",borderBottom:"1px solid var(--line)"}}>
      <div style={{display:"flex",justifyContent:"space-between",gap:4,marginBottom:8}}>
        {steps.map((s,i)=>(
          <div key={i} style={{fontSize:10.5,fontWeight:600,letterSpacing:"-.01em",
            color:i===active?"var(--primary)":(i<active?"var(--text-sub)":"var(--text-mute)"),
            flex:1,textAlign:"center"}}>
            {s}
          </div>
        ))}
      </div>
      <div className="progress"><span style={{width:pct+"%"}}/></div>
    </div>
  );
}

// 매장 사진 히어로 — 매장 등록 이미지가 있으면 등록 이미지(실내/기기/가격표), 없으면 기본 이미지(브랜드 placeholder).
// store.photos: ["interior","machine","price"] 형태(미등록 시 없음). 스크린·트레이닝 예약 공용.
const STORE_PHOTO_META = {
  interior: { caption:"매장 실내",  bg:"linear-gradient(160deg,#3b2f4a 0%,#241b30 55%,#7c3aed 130%)", light:false },
  machine:  { caption:"스크린 기기", bg:"linear-gradient(160deg,#0f2b3a 0%,#0b1f2a 55%,#0EA5E9 130%)", light:false },
  price:    { caption:"가격표",     bg:"linear-gradient(160deg,#e9ecf2 0%,#f6f7f9 60%,#d7dbe3 130%)", light:true },
};
function StoreHero({ store, kicker="Store", photoIdx=0, onDot }){
  const photos = (store && store.photos && store.photos.length) ? store.photos : null;
  const count = photos ? photos.length : 1;
  const idx = Math.min(Math.max(0, photoIdx), count-1);
  const type = photos ? photos[idx] : null;
  const meta = type ? STORE_PHOTO_META[type] : null;
  const light = !!(meta && meta.light);           // 가격표 등 밝은 이미지 → 어두운 텍스트
  const nameColor = light ? "#1A1C1F" : "#fff";
  return (
    <div style={{position:"relative",height:200,overflow:"hidden",background:"#1F2A43"}}>
      {meta ? (
        <div style={{position:"absolute",inset:0,background:meta.bg}}/>
      ) : (
        <>
          <div style={{position:"absolute",inset:0,background:
            "radial-gradient(circle at 30% 40%, rgba(34,187,95,.35), transparent 55%),"+
            "radial-gradient(circle at 75% 70%, rgba(255,220,0,.18), transparent 60%),"+
            "linear-gradient(160deg,#324365 0%,#1f2a43 60%,#16A34A 130%)"
          }}/>
          <svg viewBox="0 0 390 200" preserveAspectRatio="none" style={{position:"absolute",inset:0,width:"100%",height:"100%",opacity:.18}}>
            <path d="M0 130 L390 110" stroke="#fff" strokeWidth="1"/>
            <path d="M0 160 L390 140" stroke="#fff" strokeWidth="1"/>
            <path d="M70 90 L70 200" stroke="#fff" strokeWidth="1"/>
            <path d="M170 80 L170 200" stroke="#fff" strokeWidth="1"/>
            <path d="M270 80 L270 200" stroke="#fff" strokeWidth="1"/>
          </svg>
        </>
      )}
      {/* 이미지 유형 캡션 — 등록 이미지는 유형 라벨 / 미등록은 '기본 이미지' */}
      <div style={{position:"absolute",right:14,top:14,padding:"3px 9px",borderRadius:999,background:"rgba(0,0,0,.5)",color:"#fff",fontSize:10.5,fontWeight:600,letterSpacing:".02em"}}>
        {meta ? meta.caption : "기본 이미지"}
      </div>
      {/* 매장명 오버레이 */}
      <div style={{position:"absolute",left:16,bottom:14,color:nameColor}}>
        <div style={{fontSize:11,opacity:.75,letterSpacing:".08em",fontWeight:600,textTransform:"uppercase",fontFamily:"DM Mono,monospace"}}>{kicker}</div>
        <div style={{fontSize:18,fontWeight:800,letterSpacing:"-.02em",marginTop:2,textShadow:light?"none":"0 1px 6px rgba(0,0,0,.3)"}}>{(store && store.name) || "매장을 선택하세요"}</div>
      </div>
      {/* 페이저 · 도트 — 등록 이미지 여러 장일 때만 */}
      {count>1 && (
        <div style={{position:"absolute",right:14,bottom:14,padding:"3px 9px",borderRadius:999,background:"rgba(0,0,0,.45)",color:"#fff",fontSize:11,fontWeight:600,letterSpacing:".04em",fontFamily:"DM Mono,monospace"}}>{idx+1} / {count}</div>
      )}
      {count>1 && (
        <div style={{position:"absolute",left:16,top:14,display:"flex",gap:5}}>
          {photos.map((_,i)=><button key={i} onClick={()=>onDot&&onDot(i)} style={{width:i===idx?16:5,height:5,borderRadius:3,background:i===idx?"#fff":"rgba(255,255,255,.55)",border:"none",padding:0,transition:"width .2s"}}/>)}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { StatusBar, TabBar, FabQR, Phone, Toast, Appbar, Stepper, StoreHero });