// ============================================================================
// Access Gate — member picker.
// Tap your avatar to log in. Sets session + actor (Photo Quest attribution).
// Session lasts 30 days on this device. Sign out via More → Sign out.
// ============================================================================

const { useState: agS, useEffect: agE } = React;

const SESSION_KEY = 'v2:session';
const ACTOR_KEY   = 'v2:actor';
const SESSION_TTL_MS = 30 * 24 * 3600 * 1000;

function loadSession() {
  try {
    const raw = localStorage.getItem(SESSION_KEY);
    if (!raw) return null;
    const s = JSON.parse(raw);
    // require memberId — clears any old PIN-based sessions
    if (!s.expiresAt || s.expiresAt < Date.now() || !s.memberId) {
      localStorage.removeItem(SESSION_KEY);
      return null;
    }
    return s;
  } catch { return null; }
}

function saveSession(memberId) {
  const s = { memberId, expiresAt: Date.now() + SESSION_TTL_MS };
  try {
    localStorage.setItem(SESSION_KEY, JSON.stringify(s));
    localStorage.setItem(ACTOR_KEY, memberId);
    window.dispatchEvent(new CustomEvent('v2:actorChanged', { detail: memberId }));
  } catch {}
}

function clearSession() {
  try {
    localStorage.removeItem(SESSION_KEY);
    localStorage.removeItem(ACTOR_KEY);
  } catch {}
}

window.__lockApp = () => { clearSession(); location.reload(); };

// ---- Member card -----------------------------------------------------------
function MemberCard({ member, onSelect, selecting }) {
  const [pressed, setPressed] = agS(false);
  const isMe = selecting === member.id;

  return (
    <button
      className={`ag-member ${isMe ? 'ag-member-selecting' : ''}`}
      onClick={() => { setPressed(true); onSelect(member); }}
      disabled={!!selecting}
      aria-label={`Log in as ${member.name}`}
    >
      <div className="ag-avatar-wrap">
        <img
          src={member.avatar}
          alt={member.name}
          className="ag-avatar"
          onError={(e) => {
            e.target.style.display = 'none';
            e.target.nextSibling.style.display = 'flex';
          }}
        />
        <div className="ag-avatar-fallback" style={{ background: member.color }}>
          {member.name[0]}
        </div>
        {isMe && (
          <div className="ag-avatar-spinner">
            <div className="ag-spinner" />
          </div>
        )}
      </div>
      <div className="ag-member-name">{member.name}</div>
      <div className="ag-member-role">{member.role}</div>
    </button>
  );
}

// ---- Main gate -------------------------------------------------------------
function AccessGate({ children }) {
  const [session, setSession] = agS(() => loadSession());
  const [selecting, setSelecting] = agS(null);

  const handleSelect = (member) => {
    setSelecting(member.id);
    setTimeout(() => {
      saveSession(member.id);
      setSession({ memberId: member.id });
      setSelecting(null);
    }, 600);
  };

  if (session) return children;

  const team = window.TEAM || [];

  return (
    <div className="ag-root">
      <svg className="ag-bg" viewBox="0 0 420 800" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
        <defs>
          <radialGradient id="agg1" cx="50%" cy="30%" r="70%">
            <stop offset="0%" stopColor="oklch(34% 0.08 230 / 0.12)" />
            <stop offset="100%" stopColor="transparent" />
          </radialGradient>
        </defs>
        <rect width="420" height="800" fill="url(#agg1)" />
        <path d="M 60 260 Q 210 180 210 340 T 360 420"
              stroke="oklch(34% 0.08 230 / 0.3)" strokeWidth="1"
              fill="none" strokeDasharray="2 6" />
        <circle cx="60"  cy="260" r="3" fill="oklch(34% 0.08 230 / 0.5)" />
        <circle cx="210" cy="340" r="3" fill="oklch(34% 0.08 230 / 0.5)" />
        <circle cx="360" cy="420" r="3" fill="oklch(34% 0.08 230 / 0.5)" />
      </svg>

      <div className="ag-picker-root">
        <div className="ag-brand">
          <div className="ag-brand-mark">USA '26</div>
          <div className="ag-brand-sub">Wojcik Family · private trip log</div>
        </div>

        <h1 className="ag-title">Who are you?</h1>
        <p className="ag-sub">Tap your photo to log in.<br />Your contributions will be tracked separately.</p>

        <div className="ag-members">
          {team.map((m) => (
            <MemberCard
              key={m.id}
              member={m}
              onSelect={handleSelect}
              selecting={selecting}
            />
          ))}
        </div>

        <div className="ag-footer">
          <div className="ag-foot-row">
            <span className="ag-dot" style={{ background: 'var(--status-ok)' }} />
            <span>Session saved on this device for 30 days</span>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AccessGate });