// ─────────────────────────────────────────────────────────────
// Closeness Ladder — the default Folk view.
//
// A single vertical line runs down the left edge of the scrollable
// area; it's a gradient from sunlight amber (Close, at top) through
// canopy → dew → muted (Stranger). Folk are beads pinned to the
// ladder at their current stage. Stage headers double as rungs.
// ─────────────────────────────────────────────────────────────

const RUNGS = [
  { stage: 'close',        label: 'Close',        hint: 'The inner ring.' },
  { stage: 'friend',       label: 'Friends',      hint: 'Names + locations exchanged.' },
  { stage: 'acquaintance', label: 'Acquaintances',hint: 'Handle only, met in a forest.' },
  // Strangers are hidden by default — they appear via search/Pulse.
];

function Ladder({ folk, proposals, onTapUser }) {
  return (
    <div style={{ position: 'relative', padding: '4px 0 24px' }}>
      {/* The ladder line — fixed left, gradient by depth */}
      <div style={{
        position: 'absolute', left: 36, top: 14, bottom: 24, width: 1,
        background: 'linear-gradient(180deg, #D4960C 0%, #D4960C 14%, #5E8048 28%, #A8C5A0 68%, #586552 100%)',
        opacity: 0.42, pointerEvents: 'none',
      }}/>

      {RUNGS.map((r, i) => {
        const meta = STAGE_META[r.stage];
        const folks = folk.filter(f => f.stage === r.stage);
        return (
          <div key={r.stage} style={{ padding: '6px 18px 14px' }}>
            {/* Rung header — a knob ON the ladder + label aligned next to it */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10,
                          position: 'relative', paddingLeft: 18 }}>
              <span style={{
                width: 12, height: 12, borderRadius: '50%',
                background: meta.accent,
                boxShadow: r.stage === 'close'
                  ? '0 0 0 4px rgba(212,150,12,0.22)'
                  : `0 0 0 3px ${meta.ring}`,
                flexShrink: 0,
              }}/>
              <span style={{
                font: '500 11px var(--font-sans)', color: meta.accent,
                letterSpacing: '0.10em', textTransform: 'uppercase',
              }}>{r.label}</span>
              <span style={{ font: '400 11px var(--font-sans)', color: '#586552' }}>
                · {folks.length}
              </span>
              <span style={{ flex: 1 }}/>
              <span style={{ font: 'italic 400 11px var(--font-serif)', color: '#586552' }}>
                {r.hint}
              </span>
            </div>

            {/* Beads on the rung */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, paddingLeft: 38 }}>
              {folks.length === 0 ? (
                <div style={{
                  padding: '14px 14px', borderRadius: 10,
                  border: '0.5px dashed #2D3A22', background: 'transparent',
                  font: 'italic 400 12.5px var(--font-serif)', color: '#586552',
                }}>
                  No one here yet.
                </div>
              ) : folks.map(u => (
                <LadderBead key={u.handle} user={u}
                  proposed={proposals[u.handle]}
                  onTap={() => onTapUser(u.handle)}
                  stageMeta={meta}/>
              ))}
            </div>
          </div>
        );
      })}

      {/* Footer: see all (incl. Strangers via search) */}
      <div style={{ padding: '0 18px', marginLeft: 38 }}>
        <div style={{
          padding: '11px 14px',
          background: 'transparent', border: '0.5px dashed #2D3A22',
          borderRadius: 10,
          font: 'italic 400 12.5px var(--font-serif)', color: '#8A9678',
        }}>
          Search to surface strangers from your forests.
        </div>
      </div>
    </div>
  );
}


// A single bead on the ladder — the row UI itself
function LadderBead({ user, proposed, onTap, stageMeta }) {
  return (
    <button onClick={onTap} style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '10px 12px',
      background: stageMeta.soft,
      border: '0.5px solid #1F2B16', borderRadius: 10,
      width: '100%', cursor: 'pointer',
      textAlign: 'left',
      transition: 'background 140ms var(--ease-organic)',
    }}>
      <div style={{ position: 'relative' }}>
        <FolkAvatar user={user} size={30} online={user.online}/>
        {/* Bead "pin" — small line from avatar to the ladder rail */}
        <span style={{
          position: 'absolute', left: -16, top: '50%', transform: 'translateY(-50%)',
          width: 12, height: 1, background: stageMeta.accent, opacity: 0.5,
        }}/>
        <span style={{
          position: 'absolute', left: -22, top: '50%', transform: 'translateY(-50%)',
          width: 5, height: 5, borderRadius: '50%', background: stageMeta.accent,
        }}/>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ font: '500 14px var(--font-mono)', color: '#F2EDE4' }}>
            {user.handle}
          </span>
          {proposed && (
            <span title={`Pending: propose to ${STAGE_META[proposed].label}`}
                  style={{
                    display: 'inline-flex', alignItems: 'center', gap: 3,
                    padding: '1px 6px', borderRadius: 999,
                    background: 'rgba(212,150,12,0.10)',
                    border: '0.5px solid rgba(212,150,12,0.45)',
                    color: '#F4DCA0',
                    font: '500 9.5px var(--font-sans)',
                    letterSpacing: '0.04em', textTransform: 'uppercase',
                  }}>
              <PIcons.ArrowUpRight size={9} color="#F4DCA0"/> Proposed
            </span>
          )}
        </div>
        <div style={{ font: '400 11.5px var(--font-sans)', color: '#8A9678', marginTop: 2,
                      overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {user.mutuals} {user.mutuals === 1 ? 'forest' : 'forests'} · {user.lastTouch}
        </div>
      </div>
      <PIcons.ChevronRight size={16} color="#586552"/>
    </button>
  );
}


window.Ladder = Ladder;