// Screen components for the customer mobile app.
// Each is a self-contained 402×874 view, designed to slot into <IOSDevice>.
// We use our OWN page bg + header rather than the iOS large-title nav.

const { useState, useEffect, useRef } = React;
const I = () => window.MIcons;
const D = () => window.M_DATA;

// ─────────────────────────────────────────────────────────────
// Custom status bar (replaces IOSStatusBar so it sits on our page bg)
// ─────────────────────────────────────────────────────────────
// iOS frame already renders the system status bar; we just no-op here.
const MStatusBar = () => null;

const MTabBar = ({ active, onChange }) => {
  const tabs = [
    { id: "home", label: "Home",  ic: "home"  },
    { id: "unit", label: "My Unit", ic: "unit" },
    { id: "access", label: "Access", ic: "qr" },
    { id: "billing", label: "Billing", ic: "card" },
    { id: "account", label: "Account", ic: "user" },
  ];
  const Mi = I();
  return (
    <div className="m-tabbar">
      <div className="tabs">
        {tabs.map((t) => {
          const Icon = Mi[t.ic];
          return (
            <button key={t.id} className="m-tab"
              data-active={active === t.id}
              onClick={() => onChange && onChange(t.id)}>
              <Icon size={18} strokeWidth={1.8} />
              <span>{t.label}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// HOME — quick unlock + greeting + cards
// ─────────────────────────────────────────────────────────────
const Screen_Home = () => {
  const Mi = I();
  const d = D();
  return (
    <div className="m-page">
      <MStatusBar />
      <div style={{ padding: "8px 22px 6px", display: "flex", alignItems: "center", gap: 12 }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, color: "var(--m-tx-2)", fontWeight: 500 }}>Tēnā koe,</div>
          <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em" }}>{d.tenant.name.split(" ")[0]}</div>
        </div>
        <button className="m-iconbtn"><Mi.bell size={18}/></button>
        <div style={{ width: 36, height: 36, borderRadius: 12, background: d.tenant.photo_bg, display: "grid", placeItems: "center", fontSize: 13, fontWeight: 600, color: "white" }}>{d.tenant.initials}</div>
      </div>

      <div className="m-scroll">
        {/* Hero unlock card */}
        <div className="m-card glow" style={{ padding: 20, position: "relative", overflow: "hidden" }}>
          <div style={{ position: "absolute", top: -40, right: -40, width: 180, height: 180, borderRadius: "50%", background: "radial-gradient(closest-side, rgba(124,108,255,0.45), transparent)", filter: "blur(20px)" }}/>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14 }}>
            <span className="m-pill live">At facility</span>
            <span className="m-pill" style={{background: "transparent", border: "none", padding: 0, color: "var(--m-tx-2)"}}>·  {d.facility.distance_m}m away</span>
          </div>
          <div style={{ fontSize: 13, color: "var(--m-tx-2)", marginBottom: 4 }}>Tap to unlock</div>
          <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 16 }}>Unit {d.unit.id}</div>
          <button className="m-btn primary lg full">
            <Mi.unlock size={20} strokeWidth={2}/> Unlock with phone
          </button>
          <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
            <button className="m-btn" style={{ flex: 1, height: 40, fontSize: 13 }}><Mi.qr size={16}/> Show PIN</button>
            <button className="m-btn" style={{ flex: 1, height: 40, fontSize: 13 }}><Mi.map size={16}/> Directions</button>
          </div>
        </div>

        <div className="m-section">Your storage</div>
        <div className="m-stack tight">
          <UnitMiniCard unit={d.unit} primary />
          <UnitMiniCard unit={d.locker} />
        </div>

        <div className="m-section">Recent</div>
        <div className="m-card flat">
          {d.recent_access.slice(0, 3).map((r, i) => (
            <div key={i} className="m-row">
              <div className="ic"><Mi.history size={16} color="var(--m-tx-2)"/></div>
              <div className="body">
                <div className="t">{r.method} · {r.unit}</div>
                <div className="s">{r.t} · {r.gate}</div>
              </div>
              <Mi.chevron size={16} color="var(--m-tx-3)"/>
            </div>
          ))}
        </div>

        <div className="m-section">Tips</div>
        <div className="m-card" style={{ display: "flex", gap: 12, alignItems: "center" }}>
          <div style={{ width: 40, height: 40, borderRadius: 12, background: "color-mix(in oklab, var(--m-cyan) 18%, transparent)", display: "grid", placeItems: "center" }}>
            <Mi.shield size={20} color="#67e8f9"/>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 500 }}>Add a backup PIN</div>
            <div style={{ fontSize: 12.5, color: "var(--m-tx-2)" }}>Use it if your phone runs flat at the gate.</div>
          </div>
          <Mi.chevron size={16} color="var(--m-tx-3)"/>
        </div>
      </div>
      <MTabBar active="home" />
    </div>
  );
};

const UnitMiniCard = ({ unit, primary }) => {
  const Mi = I();
  return (
    <div className="m-card" style={{ padding: 14, display: "flex", alignItems: "center", gap: 14 }}>
      <div style={{
        width: 52, height: 52, borderRadius: 14,
        background: primary
          ? "linear-gradient(140deg, var(--m-accent-2), var(--m-accent))"
          : "var(--m-ink-3)",
        display: "grid", placeItems: "center", flexShrink: 0,
        boxShadow: primary ? "inset 0 1px 0 rgba(255,255,255,0.18)" : "none",
      }}>
        <Mi.unit size={22} color={primary ? "white" : "var(--m-tx-2)"}/>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
          <div style={{ fontSize: 16, fontWeight: 600 }}>{unit.id}</div>
          {primary && <span className="m-pill" style={{ fontSize: 10 }}>Primary</span>}
        </div>
        <div style={{ fontSize: 12.5, color: "var(--m-tx-2)", marginTop: 2 }}>{unit.type} · {unit.size} · ${unit.rate_nzd}/mo</div>
      </div>
      <Mi.chevron size={16} color="var(--m-tx-3)"/>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// UNIT detail
// ─────────────────────────────────────────────────────────────
const Screen_Unit = () => {
  const Mi = I();
  const d = D();
  const u = d.unit;
  return (
    <div className="m-page">
      <MStatusBar />
      <div className="m-header">
        <button className="m-iconbtn"><Mi.back size={18}/></button>
        <h1>Unit {u.id}</h1>
        <button className="m-iconbtn"><Mi.gear size={18}/></button>
      </div>
      <div className="m-scroll">
        {/* Big visual */}
        <div className="m-card" style={{ padding: 0, overflow: "hidden", position: "relative" }}>
          <div style={{ height: 160, background: "linear-gradient(140deg, #1a1f2c 0%, #2a2f4a 50%, #4338ca 100%)", position: "relative" }}>
            <svg viewBox="0 0 240 120" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
              <defs>
                <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
                  <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.06)" strokeWidth="0.5"/>
                </pattern>
              </defs>
              <rect width="240" height="120" fill="url(#grid)"/>
              {/* Drawn locker */}
              <g transform="translate(70 28)">
                <rect x="0" y="0" width="100" height="64" fill="rgba(124,108,255,0.18)" stroke="#7c6cff" strokeWidth="1.5" rx="3"/>
                <rect x="3" y="3" width="94" height="58" fill="none" stroke="rgba(124,108,255,0.4)" strokeWidth="0.5" strokeDasharray="2 2" rx="2"/>
                <circle cx="86" cy="32" r="3" fill="#7c6cff"/>
                <text x="50" y="38" fill="white" fontSize="11" fontWeight="600" textAnchor="middle" fontFamily="Geist">{u.id}</text>
              </g>
            </svg>
          </div>
          <div style={{ padding: 18 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
              <span className="m-pill ok"><span style={{ width: 5, height: 5, borderRadius: 99, background: "#10b981" }}/>Locked</span>
              <span className="m-pill cyan">Climate-controlled</span>
            </div>
            <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em" }}>{u.type}</div>
            <div style={{ fontSize: 13, color: "var(--m-tx-2)", marginTop: 2 }}>{u.size} · {u.sqm}m² · {u.floor} floor · Zone {u.zone}</div>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginTop: 12 }}>
          <button className="m-btn primary" style={{ height: 56, fontSize: 14, flexDirection: "column", gap: 2 }}>
            <Mi.unlock size={18} strokeWidth={2}/>
            <span>Unlock</span>
          </button>
          <button className="m-btn" style={{ height: 56, fontSize: 14, flexDirection: "column", gap: 2 }}>
            <Mi.map size={18}/>
            <span>Find it</span>
          </button>
        </div>

        <div className="m-section">Specifications</div>
        <div className="m-card flat">
          <div className="m-row"><div className="ic"><Mi.ruler size={16} color="var(--m-tx-2)"/></div><div className="body"><div className="t">Size</div></div><div className="end">{u.size}</div></div>
          <div className="m-row"><div className="ic"><Mi.thermo size={16} color="var(--m-tx-2)"/></div><div className="body"><div className="t">Climate</div></div><div className="end">Constant 20°C</div></div>
          <div className="m-row"><div className="ic"><Mi.shield size={16} color="var(--m-tx-2)"/></div><div className="body"><div className="t">Insurance</div></div><div className="end">Up to $5,000</div></div>
          <div className="m-row"><div className="ic"><Mi.history size={16} color="var(--m-tx-2)"/></div><div className="body"><div className="t">Lease started</div></div><div className="end">{u.lease_start}</div></div>
        </div>

        <div className="m-section">Smart lock</div>
        <div className="m-card">
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
            <div style={{ width: 44, height: 44, borderRadius: 12, background: "color-mix(in oklab, var(--m-cyan) 18%, transparent)", display: "grid", placeItems: "center" }}>
              <Mi.ble size={22} color="#67e8f9"/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 500 }}>{u.locker.id}</div>
              <div style={{ fontSize: 12.5, color: "var(--m-tx-2)" }}>Online · firmware {u.locker.fw}</div>
            </div>
            <span className="m-pill ok">Healthy</span>
          </div>
          <div style={{ display: "flex", gap: 10 }}>
            <Stat label="Battery" value={`${u.locker.battery}%`} bar={u.locker.battery} />
            <Stat label="Signal" value={`${u.locker.signal} dBm`} bar={70} />
          </div>
        </div>

        <div className="m-section">Recent activity</div>
        <div className="m-card flat">
          {d.recent_access.slice(0, 4).map((r, i) => (
            <div key={i} className="m-row">
              <div className="ic"><Mi.history size={16} color="var(--m-tx-2)"/></div>
              <div className="body">
                <div className="t">{r.method}</div>
                <div className="s">{r.t} · {r.gate}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <MTabBar active="unit" />
    </div>
  );
};

const Stat = ({ label, value, bar }) => (
  <div style={{ flex: 1, padding: 10, background: "var(--m-ink-3)", borderRadius: 10 }}>
    <div style={{ fontSize: 11, color: "var(--m-tx-2)" }}>{label}</div>
    <div style={{ fontSize: 16, fontWeight: 600, marginTop: 2, fontFeatureSettings: "'tnum'" }}>{value}</div>
    <div style={{ height: 3, background: "rgba(255,255,255,0.06)", borderRadius: 99, marginTop: 6, overflow: "hidden" }}>
      <div style={{ width: `${bar}%`, height: "100%", background: "linear-gradient(90deg, var(--m-accent-2), var(--m-cyan))", borderRadius: 99 }}/>
    </div>
  </div>
);

window.MScreens = { Screen_Home, Screen_Unit, MStatusBar, MTabBar };