/* global React, AX */
const { useState: useStateP, useEffect: useEffectP, useRef: useRefP } = React;

/* ============ Phone shell ============ */
function Phone({ children, label, className = "", style }) {
  return (
    <div className={"relative " + className} style={style}>
      <div className="relative rounded-[2.6rem] p-[3px]"
        style={{
          width: 286, background: "linear-gradient(160deg,#26262b,#0d0d0f 60%)",
          boxShadow: "0 1px 0 rgba(255,255,255,0.08) inset, 0 40px 80px -28px rgba(0,0,0,0.9), 0 0 0 1px rgba(0,0,0,0.6)"
        }}>
        <div className="relative rounded-[2.45rem] overflow-hidden"
          style={{ background: "#0B0B0C", height: 600, boxShadow: "0 0 0 1.5px #000 inset" }}>
          {/* dynamic island */}
          <div className="absolute left-1/2 -translate-x-1/2 top-2.5 z-30 rounded-full"
            style={{ width: 92, height: 26, background: "#000" }}></div>
          {/* status bar */}
          <div className="absolute top-0 left-0 right-0 h-11 z-20 flex items-end justify-between px-6 pb-1.5 text-[11px] font-semibold text-paper/90 pointer-events-none">
            <span style={{ letterSpacing: 0.3 }}>11:48</span>
            <div className="flex items-center gap-1.5">
              <svg width="17" height="11" viewBox="0 0 17 11" fill="none"><rect x="0" y="6" width="3" height="5" rx="1" fill="currentColor"/><rect x="4.5" y="3.5" width="3" height="7.5" rx="1" fill="currentColor"/><rect x="9" y="1" width="3" height="10" rx="1" fill="currentColor"/><rect x="13.5" y="0" width="3" height="11" rx="1" fill="currentColor" opacity="0.4"/></svg>
              <svg width="22" height="11" viewBox="0 0 22 11" fill="none"><rect x="0.5" y="0.5" width="18" height="10" rx="2.5" stroke="currentColor" opacity="0.5"/><rect x="2" y="2" width="13.5" height="7" rx="1.3" fill="currentColor"/><rect x="19.5" y="3.5" width="1.6" height="4" rx="0.8" fill="currentColor" opacity="0.5"/></svg>
            </div>
          </div>
          <div className="absolute inset-0 pt-11">{children}</div>
        </div>
      </div>
      {label && (
        <div className="mt-5 flex items-center gap-2 justify-center">
          <span className="h-px w-5 bg-amber/60"></span>
          <span className="text-[11px] font-bold uppercase tracking-[0.18em] text-faint">{label}</span>
        </div>
      )}
    </div>
  );
}

const Bar = () => (
  <div className="absolute bottom-1.5 left-1/2 -translate-x-1/2 w-[108px] h-[5px] rounded-full bg-paper/30 z-20"></div>
);

/* ============ 1 · The Door ============ */
function DoorScreen() {
  const [count, setCount] = useStateP(241);
  const cap = 400;
  const [feed, setFeed] = useStateP([
    { n: "Mara Quinn", t: "Table 12 · party 4", ago: "now" },
    { n: "Devon Okafor", t: "GA ticket", ago: "1m" },
    { n: "The Ali party", t: "Table 04 · party 6", ago: "2m" },
  ]);
  const names = ["Priya Anand", "Jonas Vale", "Camille R.", "Noah Webb", "Sofia Marchetti", "Theo Lindqvist"];
  useEffectP(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    let i = 0;
    const id = setInterval(() => {
      setCount(c => Math.min(cap - 1, c + 1));
      i++;
      if (i % 4 === 0) {
        const n = names[Math.floor(Math.random() * names.length)];
        const party = Math.random() > 0.5;
        setFeed(f => [{ n, t: party ? `Table ${String(Math.floor(Math.random()*18)+1).padStart(2,"0")} · party ${Math.floor(Math.random()*5)+2}` : "GA ticket", ago: "now" }, ...f.slice(0, 3)].map((x, idx) => idx === 1 ? { ...x, ago: "now" } : x));
      }
    }, 1400);
    return () => clearInterval(id);
  }, []);
  const pct = count / cap;
  const R = 78, C = 2 * Math.PI * R;
  return (
    <div className="h-full flex flex-col px-5 pt-3 text-paper">
      <div className="flex items-center justify-between">
        <div>
          <div className="text-[10px] font-bold uppercase tracking-[0.2em] text-faint">The Door</div>
          <div className="text-[13px] font-semibold">Velvet Room · Main</div>
        </div>
        <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-full" style={{ background: "rgba(250,250,250,0.13)" }}>
          <span className="w-1.5 h-1.5 rounded-full bg-amber livepulse"></span>
          <span className="text-[10px] font-bold tracking-wide text-amberHi">LIVE</span>
        </div>
      </div>

      {/* occupancy ring */}
      <div className="relative mt-3 mx-auto" style={{ width: 196, height: 196 }}>
        <svg width="196" height="196" viewBox="0 0 196 196" className="-rotate-90">
          <circle cx="98" cy="98" r={R} fill="none" stroke="rgba(250,250,250,0.08)" strokeWidth="12"/>
          <circle cx="98" cy="98" r={R} fill="none" stroke="#FAFAFA" strokeWidth="12" strokeLinecap="round"
            strokeDasharray={C} strokeDashoffset={C * (1 - pct)} style={{ transition: "stroke-dashoffset .9s cubic-bezier(.16,1,.3,1)", filter: "drop-shadow(0 0 10px rgba(250,250,250,0.45))" }}/>
        </svg>
        <div className="absolute inset-0 flex flex-col items-center justify-center">
          <div className="text-[44px] font-bold tracking-tight leading-none tabular-nums">{count}</div>
          <div className="text-[12px] text-faint mt-1">of {cap} capacity</div>
          <div className="mt-1.5 text-[11px] font-semibold text-amberHi">{Math.round(pct * 100)}% full</div>
        </div>
      </div>

      {/* enter / exit */}
      <div className="grid grid-cols-2 gap-2.5 mt-3">
        <button onClick={() => setCount(c => Math.min(cap - 1, c + 1))}
          className="focusable rounded-2xl py-3 flex flex-col items-center active:scale-[.97] transition-transform"
          style={{ background: "#FAFAFA", boxShadow: "0 8px 22px -8px rgba(250,250,250,0.25)" }}>
          <span className="text-[18px] font-bold text-ink leading-none">＋ Enter</span>
          <span className="text-[10px] font-semibold text-ink/55 mt-1 tracking-wide">tap to admit</span>
        </button>
        <button onClick={() => setCount(c => Math.max(0, c - 1))}
          className="focusable rounded-2xl py-3 flex flex-col items-center active:scale-[.97] transition-transform"
          style={{ background: "rgba(250,250,250,0.06)", boxShadow: "inset 0 0 0 1px rgba(250,250,250,0.1)" }}>
          <span className="text-[18px] font-bold leading-none">－ Exit</span>
          <span className="text-[10px] font-semibold text-faint mt-1 tracking-wide">tap to release</span>
        </button>
      </div>

      {/* recent admits */}
      <div className="mt-3 flex-1 min-h-0">
        <div className="text-[10px] font-bold uppercase tracking-[0.18em] text-faint mb-1.5">Recent admits</div>
        <div className="space-y-1.5">
          {feed.slice(0, 3).map((f, i) => (
            <div key={f.n + i} className="flex items-center gap-2.5 rounded-xl px-2.5 py-1.5"
              style={{ background: "rgba(250,250,250,0.035)", boxShadow: "inset 0 0 0 1px rgba(250,250,250,0.05)", animation: i === 0 ? "ticker .5s ease both" : undefined }}>
              <div className="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold"
                style={{ background: "rgba(250,250,250,0.16)", color: "#FAFAFA" }}>{f.n.split(" ").map(w=>w[0]).join("").slice(0,2)}</div>
              <div className="flex-1 min-w-0">
                <div className="text-[12px] font-semibold truncate">{f.n}</div>
                <div className="text-[10px] text-faint truncate">{f.t}</div>
              </div>
              <span className="text-[10px] text-faint">{f.ago}</span>
            </div>
          ))}
        </div>
      </div>
      <Bar/>
    </div>
  );
}

/* ============ 2 · Scan ============ */
function ScanScreen() {
  return (
    <div className="h-full flex flex-col px-5 pt-3 text-paper">
      <div className="text-center">
        <div className="text-[10px] font-bold uppercase tracking-[0.2em] text-faint">Scan to admit</div>
        <div className="text-[13px] font-semibold">Point at any Axxess code</div>
      </div>

      {/* reticle */}
      <div className="relative mx-auto mt-4" style={{ width: 200, height: 200 }}>
        <div className="absolute inset-0 rounded-[1.4rem] overflow-hidden"
          style={{ background: "radial-gradient(120% 120% at 50% 30%, #1a1a1e, #0d0d0f)" }}>
          {/* faux qr glints */}
          <div className="absolute inset-0 opacity-30" style={{ backgroundImage: "repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 6px),repeating-linear-gradient(0deg,#fff 0 2px,transparent 2px 6px)", maskImage: "radial-gradient(circle at 50% 50%, #000 30%, transparent 70%)" }}></div>
          <div className="absolute left-0 right-0 h-[2px] scanline" style={{ background: "linear-gradient(90deg,transparent,#FAFAFA,transparent)", boxShadow: "0 0 14px 2px rgba(250,250,250,0.6)" }}></div>
        </div>
        {/* corner brackets */}
        {[["top-0 left-0","border-t-2 border-l-2 rounded-tl-xl"],["top-0 right-0","border-t-2 border-r-2 rounded-tr-xl"],["bottom-0 left-0","border-b-2 border-l-2 rounded-bl-xl"],["bottom-0 right-0","border-b-2 border-r-2 rounded-br-xl"]].map(([pos,b],i)=>(
          <span key={i} className={"absolute w-7 h-7 "+pos+" "+b} style={{ borderColor: "#FAFAFA" }}></span>
        ))}
      </div>

      {/* admit result card */}
      <div className="mt-4 rounded-2xl p-3.5"
        style={{ background: "rgba(250,250,250,0.1)", boxShadow: "inset 0 0 0 1px rgba(250,250,250,0.32)" }}>
        <div className="flex items-center gap-2.5">
          <div className="w-9 h-9 rounded-full flex items-center justify-center shrink-0" style={{ background: "#FAFAFA" }}>
            <AX.IconCheck size={20} stroke={2.6} className="text-ink"/>
          </div>
          <div className="flex-1">
            <div className="text-[14px] font-bold text-amberHi leading-tight">ADMIT · Table 12</div>
            <div className="text-[11px] text-paper/70">The Marchetti party · seated 11:20</div>
          </div>
          <div className="text-right">
            <div className="text-[20px] font-bold leading-none">4</div>
            <div className="text-[9px] text-faint tracking-wide">GUESTS</div>
          </div>
        </div>
        <div className="mt-3 pt-3 flex items-center gap-2" style={{ borderTop: "1px solid rgba(250,250,250,0.22)" }}>
          <AX.IconTicket size={15} className="text-amberHi"/>
          <span className="text-[11px] font-semibold text-paper/85">Your table is your ticket</span>
          <span className="ml-auto text-[10px] text-faint">no separate entry</span>
        </div>
      </div>

      <div className="mt-auto mb-4 text-center text-[10px] text-faint">Validated cryptographically · offline-safe</div>
      <Bar/>
    </div>
  );
}

/* ============ 3 · Reservations ============ */
function ReservationsScreen() {
  const rows = [
    { n: "Marchetti", p: 4, t: "11:20", tb: "T12", s: "Seated" },
    { n: "Okafor", p: 6, t: "11:45", tb: "T04", s: "Seated" },
    { n: "Lindqvist", p: 2, t: "12:00", tb: "T18", s: "Upcoming" },
    { n: "Velasquez", p: 8, t: "12:15", tb: "T01", s: "Upcoming" },
    { n: "Anand", p: 3, t: "12:30", tb: "T09", s: "Upcoming" },
    { n: "Webb", p: 5, t: "12:45", tb: "T07", s: "Upcoming" },
  ];
  return (
    <div className="h-full flex flex-col px-5 pt-3 text-paper">
      <div className="flex items-end justify-between">
        <div>
          <div className="text-[10px] font-bold uppercase tracking-[0.2em] text-faint">Reservations</div>
          <div className="text-[17px] font-bold tracking-tight">Tonight · Sat 28</div>
        </div>
        <div className="text-right">
          <div className="text-[17px] font-bold tabular-nums">31</div>
          <div className="text-[9px] text-faint tracking-wide">BOOKINGS</div>
        </div>
      </div>

      <div className="flex gap-1.5 mt-3 text-[10px] font-semibold">
        <span className="px-2.5 py-1 rounded-full text-ink" style={{ background: "#FAFAFA" }}>All 31</span>
        <span className="px-2.5 py-1 rounded-full text-faint" style={{ background: "rgba(250,250,250,0.06)" }}>Seated 12</span>
        <span className="px-2.5 py-1 rounded-full text-faint" style={{ background: "rgba(250,250,250,0.06)" }}>Upcoming 19</span>
      </div>

      <div className="mt-2.5 flex-1 min-h-0 overflow-hidden space-y-1.5">
        {rows.map((r, i) => (
          <div key={i} className="flex items-center gap-2.5 rounded-xl px-2.5 py-2"
            style={{ background: "rgba(250,250,250,0.035)", boxShadow: "inset 0 0 0 1px rgba(250,250,250,0.05)" }}>
            <div className="w-9 text-center">
              <div className="text-[12px] font-bold tabular-nums">{r.t}</div>
            </div>
            <div className="w-px h-7 bg-paper/10"></div>
            <div className="flex-1 min-w-0">
              <div className="text-[12.5px] font-semibold truncate">The {r.n} party</div>
              <div className="text-[10px] text-faint flex items-center gap-1">
                <AX.IconUsers size={11}/> party of {r.p} · {r.tb}
              </div>
            </div>
            {r.s === "Seated" ? (
              <span className="text-[9.5px] font-bold px-2 py-1 rounded-full" style={{ background: "rgba(250,250,250,0.15)", color: "#FAFAFA" }}>SEATED</span>
            ) : (
              <span className="text-[9.5px] font-bold px-2 py-1 rounded-full text-faint" style={{ background: "rgba(250,250,250,0.06)" }}>UPCOMING</span>
            )}
          </div>
        ))}
      </div>
      <Bar/>
    </div>
  );
}

/* ============ 4 · Floor plan ============ */
function FloorScreen() {
  // table: x,y in % ; r radius ; seated bool ; label
  const tables = [
    { x: 22, y: 16, r: 17, s: true,  l: "12" },
    { x: 60, y: 14, r: 14, s: false, l: "18" },
    { x: 84, y: 22, r: 13, s: true,  l: "07" },
    { x: 18, y: 44, r: 20, s: true,  l: "04" },
    { x: 50, y: 42, r: 15, s: false, l: "09" },
    { x: 82, y: 48, r: 14, s: false, l: "11" },
    { x: 24, y: 74, r: 16, s: true,  l: "01" },
    { x: 56, y: 72, r: 18, s: true,  l: "02" },
    { x: 84, y: 76, r: 13, s: false, l: "15" },
  ];
  return (
    <div className="h-full flex flex-col px-5 pt-3 text-paper">
      <div className="flex items-center justify-between">
        <div>
          <div className="text-[10px] font-bold uppercase tracking-[0.2em] text-faint">Floor plan</div>
          <div className="text-[13px] font-semibold">Main room · 24 tables</div>
        </div>
        <div className="flex items-center gap-3 text-[10px]">
          <span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-full" style={{background:"#FAFAFA"}}></span><span className="text-faint">Seated</span></span>
          <span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-full" style={{boxShadow:"inset 0 0 0 1.5px rgba(250,250,250,0.3)"}}></span><span className="text-faint">Open</span></span>
        </div>
      </div>

      <div className="relative mt-3 flex-1 rounded-2xl overflow-hidden"
        style={{ background: "radial-gradient(140% 120% at 50% 0%, #161619, #0c0c0e)", boxShadow: "inset 0 0 0 1px rgba(250,250,250,0.06)" }}>
        {/* stage / bar marker */}
        <div className="absolute top-2 left-1/2 -translate-x-1/2 text-[8.5px] font-bold tracking-[0.2em] text-faint px-3 py-1 rounded-full" style={{ background: "rgba(250,250,250,0.05)" }}>BAR</div>
        {/* grid lines */}
        <div className="absolute inset-0 opacity-[0.5]" style={{ backgroundImage: "linear-gradient(rgba(250,250,250,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(250,250,250,0.04) 1px,transparent 1px)", backgroundSize: "26px 26px" }}></div>
        {tables.map((t, i) => (
          <div key={i} className="absolute -translate-x-1/2 -translate-y-1/2 rounded-full flex items-center justify-center"
            style={{
              left: t.x + "%", top: "calc(12% + " + t.y + "% * 0.82)", width: t.r * 2, height: t.r * 2,
              background: t.s ? "rgba(250,250,250,0.92)" : "rgba(250,250,250,0.04)",
              boxShadow: t.s ? "0 0 16px -2px rgba(250,250,250,0.6), inset 0 0 0 1px rgba(255,255,255,0.15)" : "inset 0 0 0 1.5px rgba(250,250,250,0.22)",
            }}>
            <span className="text-[9px] font-bold tabular-nums" style={{ color: t.s ? "#0A0A0A" : "rgba(250,250,250,0.55)" }}>{t.l}</span>
          </div>
        ))}
      </div>

      <div className="grid grid-cols-3 gap-2 mt-3 mb-4 text-center">
        {[["12","Seated"],["9","Open"],["3","Held"]].map(([n,l],i)=>(
          <div key={i} className="rounded-xl py-2" style={{ background: "rgba(250,250,250,0.035)", boxShadow: "inset 0 0 0 1px rgba(250,250,250,0.05)" }}>
            <div className="text-[18px] font-bold leading-none tabular-nums" style={{ color: i===0?"#FAFAFA":"#FAFAFA" }}>{n}</div>
            <div className="text-[9px] text-faint mt-0.5 tracking-wide uppercase">{l}</div>
          </div>
        ))}
      </div>
      <Bar/>
    </div>
  );
}

window.AX = Object.assign(window.AX || {}, {
  Phone, DoorScreen, ScanScreen, ReservationsScreen, FloorScreen,
});