/* ============================================================
   TRÀNG AN · ZALO MINI APP — CHROME COMPONENTS (dùng lại)  v2
   ------------------------------------------------------------
   Khung hệ thống Zalo — ốp lên bất kỳ app nào trong hệ.
   Xuất ra window: ZaloStatusBar, ZaloCluster, ZaloActionBar,
   ZaloHomeIndicator, ZaloSafeGuides, ZaloPermissionSheet,
   ZaloChrome (gói tất cả), ZaloDefaultLogo.

   DÙNG:
     <div className="za-frame" data-scheme="light"
          data-variant="home" data-home-dark="false"
          style={{'--zalo-header-bg':'#155E4C',
                  '--zalo-header-fg':'#fff',
                  '--zalo-statusbar-fg':'#fff'}}>
       <div className="za-screen">
         <div className="za-content"> …NỘI DUNG APP… </div>
         <ZaloChrome variant="home" appName="Tràng An" appSub="…"
                     title="…" onBack={fn} scheme="light"
                     showGuides={false}/>
       </div>
     </div>

   variant: 'home' (L1 · logo+tên) | 'page' (L2 · back+tiêu đề)
            | 'fullscreen' (tràn viền · chỉ cụm ···|X nổi)
   Nội dung app dùng padding theo var(--zalo-safe-top/bottom)
   (đã set sẵn ở .za-content).
   ============================================================ */

/* ---- 1 · STATUS BAR (máy) ---- */
function ZaloStatusBar({time = "16:03", battery = 37}) {
  return (
    <div className="za-statusbar">
      <div className="za-sb-left">
        <span>{time}</span>
        {/* chuông tắt tiếng */}
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M18.6 14c-.4-.6-.6-1.3-.6-2V9a6 6 0 0 0-4-5.7"/><path d="M6 9v3c0 .7-.2 1.4-.6 2L4 16h11"/>
          <path d="M10.3 21a2 2 0 0 0 3.4 0"/><path d="M3 3l18 18"/>
        </svg>
      </div>
      <div className="za-sb-right">
        {/* sóng */}
        <svg width="18" height="12" viewBox="0 0 18 12" fill="currentColor"><rect x="0" y="8" width="3" height="4" rx="1"/><rect x="5" y="5.5" width="3" height="6.5" rx="1"/><rect x="10" y="3" width="3" height="9" rx="1"/><rect x="15" y="0" width="3" height="12" rx="1"/></svg>
        <span className="za-sb-lte">LTE</span>
        <span className="za-battery"><b>{battery}</b></span>
      </div>
    </div>
  );
}

/* ---- 2a · cụm hệ thống ···|X (BẤT BIẾN) ---- */
function ZaloCluster({float = false}) {
  return (
    <div className={"za-cluster"+(float?" za-cluster--float":"")} role="group" aria-label="Menu hệ thống Zalo (không tuỳ biến)">
      <div className="za-cl-btn" aria-label="Menu">
        <span className="za-dots"><i/><i/><i/></span>
      </div>
      <div className="za-cl-div"/>
      <div className="za-cl-btn" aria-label="Đóng Mini App">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.3" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
      </div>
    </div>
  );
}

/* ---- 2b · ACTION BAR (header Zalo) ---- */
function ZaloActionBar({variant = "home", appName = "Tràng An", appSub, logo, title, onBack}) {
  return (
    <div className="za-actionbar">
      {variant === "page" ? (
        <>
          <button className="za-back" onClick={onBack} aria-label="Quay lại">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
          </button>
          <div className="za-title">{title}</div>
        </>
      ) : (
        <div className="za-app-id">
          <div className="za-applogo">{logo || <DefaultLogo/>}</div>
          <div className="za-app-meta">
            <span className="za-app-name">{appName}</span>
            {appSub && <span className="za-app-sub">{appSub}</span>}
          </div>
        </div>
      )}
      <ZaloCluster/>
    </div>
  );
}

/* logo mặc định — núi đá karst Tràng An (hình khối đơn giản) */
function DefaultLogo() {
  return (
    <svg viewBox="0 0 36 36" aria-hidden="true">
      <rect width="36" height="36" fill="#155E4C"/>
      <path d="M0 36 L10 17 L17 26 L25 10 L36 36 Z" fill="#cfe8dd"/>
      <path d="M0 36 L8 23 L15 30 L23 16 L36 36 Z" fill="#3f8d76"/>
      <circle cx="27" cy="10" r="3.6" fill="#E0C68C"/>
    </svg>
  );
}

/* ---- 3 · HOME INDICATOR ---- */
function ZaloHomeIndicator() { return <div className="za-home-ind"/>; }

/* ---- 4 · SPEC / CHÚ THÍCH VÙNG AN TOÀN ---- */
function ZaloSafeGuides() {
  return (
    <div className="za-guides">
      <div className="za-band za-band-sys" data-label="status bar · 54" style={{top:0,height:'var(--zalo-status-h)'}}/>
      <div className="za-band za-band-sys" data-label="header zalo · 52" style={{top:'var(--zalo-status-h)',height:'var(--zalo-action-h)'}}/>
      <div className="za-nogo" data-label="cấm · ···|X ~104" style={{width:104,height:'var(--zalo-safe-top)'}}/>
      <div className="za-zone-app" data-label="vùng app · safe-area" style={{top:'var(--zalo-safe-top)',left:0,right:0,bottom:'var(--zalo-safe-bottom)'}}/>
      <div className="za-band za-band-sys is-bottom" data-label="home indicator · 34" style={{bottom:0,height:'var(--zalo-safe-bottom)'}}/>
    </div>
  );
}

/* ---- 5 · POPUP XIN QUYỀN (Zalo) ---- */
function ZaloPermissionSheet({appName = "Tràng An", logo, avatar, userName = "Nguyễn Ngọc Tuấn",
                              appearance = "dark", onDeny, onAllow}) {
  const [name, setName] = React.useState(true);
  const [phone, setPhone] = React.useState(false);
  const ready = name || phone;
  return (
    <>
      <div className="za-perm-scrim" onClick={onDeny}/>
      <div className={"za-perm"+(appearance==="light"?" za-perm-light":"")}>
        <div className="za-perm-grab"/>
        <div className="za-perm-icon">{logo || <DefaultLogo/>}</div>
        <h3>Allow {appName} to receive your information</h3>
        <p className="za-perm-desc">{appName} needs access to the following information from your Zalo account to serve you during your usage. <a href="#" onClick={e=>e.preventDefault()}>See more</a></p>

        <div className="za-perm-row">
          <div className="za-perm-ava">{avatar ? <img src={avatar} alt=""/> :
            <svg width="42" height="42" viewBox="0 0 42 42"><rect width="42" height="42" fill="#5c6b5e"/><circle cx="21" cy="16" r="7" fill="#cdd6cc"/><path d="M7 40c2-9 26-9 28 0Z" fill="#cdd6cc"/></svg>}
          </div>
          <div className="za-perm-rowtext">
            <div className="t">{userName}</div>
            <div className="s">Name and avatar</div>
          </div>
          <div className={"za-tgl"+(name?" on":"")} onClick={()=>setName(v=>!v)} role="switch" aria-checked={name}/>
        </div>

        <div className="za-perm-row">
          <div className="za-perm-ic">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z"/></svg>
          </div>
          <div className="za-perm-rowtext">
            <div className="t">Phone number</div>
          </div>
          <div className={"za-tgl"+(phone?" on":"")} onClick={()=>setPhone(v=>!v)} role="switch" aria-checked={phone}/>
        </div>

        <div className="za-perm-btns">
          <button className="za-perm-btn deny" onClick={onDeny}>Deny</button>
          <button className={"za-perm-btn allow"+(ready?" ready":"")} onClick={()=>ready&&onAllow&&onAllow({name,phone})}>Allow</button>
        </div>
      </div>
    </>
  );
}

/* ---- 6 · GÓI TẤT CẢ ---- */
function ZaloChrome({variant="home", appName, appSub, logo, title, onBack,
                     scheme="light", showGuides=false, time="16:03", battery=37}) {
  const fullscreen = variant === "fullscreen";
  return (
    <div className="za-chrome" data-scheme={scheme}>
      {!fullscreen && <div className="za-header-bg"/>}
      <ZaloStatusBar time={time} battery={battery}/>
      {fullscreen
        ? <ZaloCluster float/>
        : <ZaloActionBar variant={variant} appName={appName} appSub={appSub} logo={logo} title={title} onBack={onBack}/>}
      {showGuides && <ZaloSafeGuides/>}
      <ZaloHomeIndicator/>
    </div>
  );
}

Object.assign(window, {
  ZaloStatusBar, ZaloCluster, ZaloActionBar, ZaloHomeIndicator,
  ZaloSafeGuides, ZaloPermissionSheet, ZaloChrome, ZaloDefaultLogo: DefaultLogo,
});