/* global React, AndroidStatus, MiniDayDial, StatLine, AetherWheel, TabBar, SH_EL */
// Skyhearth mobile — PORT / TRAINING, three directions.
// All three share the established weathered-blueprint language; they differ in
// information hierarchy, the wheel treatment, and the training interaction shell.

// --- press-and-hold fill ring (static mock shows it mid-hold) ---
function HoldRing({ size = 44, progress = 0.62, color = 'var(--stamp-amber)' }) {
  const r = size / 2 - 2, c = 2 * Math.PI * r;
  return (
    <svg className="holdring" width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="rgba(26,46,74,0.12)" strokeWidth="2.5" />
      <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={color} strokeWidth="2.5"
        strokeLinecap="round" strokeDasharray={c} strokeDashoffset={c * (1 - progress)}
        transform={`rotate(-90 ${size / 2} ${size / 2})`} />
    </svg>
  );
}

// --- a training vein card ---
function Vein({ id, yieldMain = '+10', yieldLeak, ontime, sealed, hold }) {
  const el = SH_EL[id];
  if (sealed) {
    return (
      <div className="vein sealed">
        <div className="glyph"><span style={{ fontSize: 15 }}>{el.glyph}</span></div>
        <div className="col">
          <span className="nm" style={{ color: 'var(--ink-faded)' }}>Sealed Vein</span>
          <span className="yield">rescue to unseal</span>
        </div>
      </div>
    );
  }
  return (
    <div className="vein" style={{ borderColor: el.color }}>
      <div className="glyph" style={{ color: el.color, position: 'relative' }}>
        <img className="drop-white" src={el.icon} alt="" />
        {hold && <HoldRing size={42} progress={0.55} />}
      </div>
      <div className="col grow">
        <span className="nm">{el.name}</span>
        <span className="yield">
          <b>{yieldMain}</b>{yieldLeak ? <> · <span className={ontime ? 'ot' : ''}>{yieldLeak} leak</span></> : <> · <span className="muted">leak sealed</span></>}
        </span>
      </div>
      {ontime && <span className="stamp stamp-amber" style={{ fontSize: 8, transform: 'rotate(-4deg)' }}>ON-TIME</span>}
    </div>
  );
}

const MORNING_VEINS = [
  { id: 'fire', yieldMain: '+10', yieldLeak: '+9', ontime: true },
  { id: 'earth', yieldMain: '+10', yieldLeak: '+9', ontime: true },
  { id: 'water', yieldMain: '+10', yieldLeak: '+2' },
  { id: 'nature', yieldMain: '+10', yieldLeak: null },
];

function SlotSelector({ compact }) {
  const slots = [['Night', '☾', 'done'], ['Morning', '☀', 'active'], ['Afternoon', '◐', ''], ['Evening', '☽', '']];
  return (
    <div className="slots">
      {slots.map(([nm, ic, st]) => (
        <div key={nm} className={'slot' + (st ? ' ' + st : '')}>
          <span className="ic">{ic}</span>
          <span>{compact ? nm.slice(0, 3) : nm}</span>
        </div>
      ))}
    </div>
  );
}

// ======================================================================
// DIRECTION A — "THE LEDGER"  (faithful vertical scroll)
// Everything from the desktop, translated straight down a single column.
// Sticky app bar + sticky tab bar in-app; here the full scroll is shown.
// ======================================================================
function PortLedgerA() {
  return (
    <div className="phone sh-m">
      <AndroidStatus />
      <div className="appbar">
        <div className="col">
          <span className="home">Skyhearth Port</span>
          <span className="sub">TIER III · POP 12 / 50</span>
        </div>
        <div className="row g8 aic">
          <span className="stamp">Tier III</span>
          <MiniDayDial day={1} slotIdx={1} size={46} schedule={[null, null, null, null]} />
        </div>
      </div>

      <div className="screen-body scrolls" style={{ paddingTop: 2 }}>
        <div className="resbar panel panel-soft">
          {[['Pop', '12'], ['Coin', '38'], ['Staple', '03'], ['Offer', '00']].map(([k, v]) => (
            <div className="res" key={k}><span className="k">{k}</span><span className="v">{v}</span></div>
          ))}
        </div>

        <div className="row between aic" style={{ padding: '0 2px' }}>
          <div className="col">
            <span className="label">Now Raising</span>
            <span className="fell" style={{ fontSize: 21, lineHeight: 1.05, marginTop: 1 }}>Drift-Mote</span>
          </div>
          <div className="col" style={{ alignItems: 'flex-end', gap: 5 }}>
            <span className="stamp stamp-blue" style={{ fontSize: 8 }}>Nascent</span>
            <span className="mono muted" style={{ fontSize: 10 }}>life · 1 day</span>
          </div>
        </div>

        {/* wheel */}
        <div className="panel brackets" style={{ padding: '14px 10px 10px' }}>
          <div className="card-head" style={{ padding: '0 4px', marginBottom: 4 }}>
            <span className="label">Aetheric Wheel · The Eight</span>
            <span className="label label-faded">4 Attuned</span>
          </div>
          <AetherWheel size={300} treatment="classic" ontime={['fire', 'earth']}
            values={{ fire: 0, water: 0, earth: 0, nature: 0 }} />
        </div>

        {/* slot */}
        <div className="col g6">
          <SlotSelector />
          <div className="row between" style={{ padding: '0 2px' }}>
            <span className="label">Morning Slot</span>
            <span className="label" style={{ color: 'var(--stamp-amber)' }}>On-time · Fire &amp; Earth</span>
          </div>
        </div>

        {/* care */}
        <div className="panel panel-pad col g8">
          <div className="card-head" style={{ margin: 0 }}>
            <span className="label">Condition</span>
            <span className="label label-faded">Tend below</span>
          </div>
          <StatLine name="Fatigue" value={18} tag="Steady" tone="warn" />
          <StatLine name="Fullness" value={62} tag="Sated" tone="ok" />
          <StatLine name="Bond" value={55} tag="Settled" tone="gold" />
        </div>

        {/* tend */}
        <div className="col g6">
          <div className="row between" style={{ padding: '0 2px' }}>
            <span className="label">Tend</span>
            <span className="label label-faded">Feed free · Rest 1 slot</span>
          </div>
          <div className="row g8">
            <div className="tend"><span className="t">Feed</span><span className="d">staple ×2 · +22 full</span></div>
            <div className="tend"><span className="t">Rest</span><span className="d">nap · −60 fatigue</span></div>
          </div>
        </div>

        {/* train */}
        <div className="col g6">
          <div className="row between" style={{ padding: '0 2px' }}>
            <span className="label">Train · Hold to commit</span>
            <span className="label label-faded">Uses 1 slot</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            <Vein {...MORNING_VEINS[0]} hold />
            <Vein {...MORNING_VEINS[1]} />
            <Vein {...MORNING_VEINS[2]} />
            <Vein {...MORNING_VEINS[3]} />
            <Vein id="ice" sealed />
            <Vein id="lightning" sealed />
          </div>
        </div>

        <button className="btn-primary" style={{ marginTop: 2 }}>Launch Expedition ▸</button>
      </div>

      <TabBar active="raise" />
    </div>
  );
}

// ======================================================================
// DIRECTION B — "FOCUS DIAL"  (wheel-first, native bottom sheet)
// The wheel is the hero; press-and-hold a node to train. A draggable sheet
// carries the slot, the selected vein's detail, quick-tend, and Launch.
// Spacious, gesture-forward — the reimagined-for-touch direction.
// ======================================================================
function PortFocusB() {
  return (
    <div className="phone sh-m">
      <AndroidStatus />
      <div className="row between aic" style={{ padding: '4px 16px 0' }}>
        <div className="col">
          <span className="label">Now Raising</span>
          <span className="fell" style={{ fontSize: 18, lineHeight: 1 }}>Drift-Mote</span>
          <span className="label" style={{ fontSize: 8, marginTop: 2 }}>Nascent · 1 day</span>
        </div>
        <MiniDayDial day={1} slotIdx={1} size={52} />
      </div>

      {/* hero wheel */}
      <div className="grow col center aic" style={{ position: 'relative', paddingTop: 4 }}>
        <AetherWheel size={344} treatment="hero" showSlotArc activeSlot={1}
          ontime={['fire', 'earth']} values={{ fire: 0, water: 0, earth: 0, nature: 0 }} />
        {/* the active node's hold-ring, floated over Fire (top) */}
        <div style={{ position: 'absolute', top: 'calc(50% - 132px)', left: '50%', transform: 'translate(-50%,-50%)' }}>
          <HoldRing size={56} progress={0.62} />
        </div>
        <span className="label" style={{ marginTop: 2, color: 'var(--stamp-amber)' }}>Hold Fire to train · +10 / +9 leak</span>
      </div>

      {/* condition — slim row of dials */}
      <div className="row g8" style={{ padding: '0 16px 8px' }}>
        {[['Fatigue', 18, 'warn'], ['Fullness', 62, 'ok'], ['Bond', 55, 'gold']].map(([nm, v, tone]) => (
          <div key={nm} className="col grow g4" style={{ alignItems: 'stretch' }}>
            <div className="row between"><span className="label" style={{ fontSize: 8 }}>{nm}</span><span className="mono" style={{ fontSize: 10 }}>{v}</span></div>
            <window.Meter value={v} segs={8} tone={tone} />
          </div>
        ))}
      </div>

      {/* bottom sheet */}
      <div className="sheet">
        <div className="handle" />
        <div className="row between aic" style={{ marginBottom: 8 }}>
          <SlotSelector compact />
        </div>
        <div className="row g10 aic" style={{ marginBottom: 9 }}>
          <div className="glyph" style={{ color: SH_EL.fire.color, width: 40, height: 40, flex: '0 0 40px', borderRadius: '50%', border: '1.5px solid', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <img className="drop-white" src={SH_EL.fire.icon} alt="" style={{ width: 26, height: 26 }} />
          </div>
          <div className="col grow">
            <span className="fell" style={{ fontSize: 15 }}>Fire · selected</span>
            <span className="mono muted" style={{ fontSize: 10 }}>main <b style={{ color: 'var(--ink)' }}>+10</b> · leak <span className="ot" style={{ color: 'var(--stamp-amber)' }}>+9</span> → Water</span>
          </div>
          <span className="stamp stamp-amber" style={{ fontSize: 8 }}>On-time</span>
        </div>
        <div className="row g8" style={{ marginBottom: 9 }}>
          <button className="btn-ghost grow" style={{ fontSize: 13, padding: 9 }}>Feed</button>
          <button className="btn-ghost grow" style={{ fontSize: 13, padding: 9 }}>Rest</button>
          <button className="btn-ghost grow" style={{ fontSize: 13, padding: 9 }}>Bond</button>
        </div>
        <button className="btn-primary" style={{ fontSize: 15, padding: 11 }}>Launch Expedition ▸</button>
      </div>
      <TabBar active="raise" />
    </div>
  );
}

// ======================================================================
// DIRECTION C — "CARD DECK"  (denser, card-game rhythm)
// Compact wheel plate up top; a filmstrip of time-of-day slots; the training
// actions become a swipeable carousel of vein cards (peeking neighbours).
// Tactile and game-y — the high-density direction.
// ======================================================================
function DeckCard({ id, focus }) {
  const el = SH_EL[id];
  const v = MORNING_VEINS.find(x => x.id === id) || { yieldMain: '+10', yieldLeak: null, ontime: false };
  return (
    <div className="panel" style={{
      flex: focus ? '0 0 156px' : '0 0 96px',
      padding: focus ? '14px 12px' : '12px 8px',
      borderColor: el.color, background: 'rgba(244,236,214,0.6)',
      transform: focus ? 'none' : 'scale(0.92)', opacity: focus ? 1 : 0.55,
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
      borderWidth: focus ? 2 : 1.5,
    }}>
      <div style={{ position: 'relative', width: focus ? 54 : 40, height: focus ? 54 : 40, borderRadius: '50%', border: `1.5px solid ${el.color}`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: el.color }}>
        <img className="drop-white" src={el.icon} alt="" style={{ width: focus ? 36 : 26, height: focus ? 36 : 26 }} />
        {focus && <HoldRing size={focus ? 60 : 44} progress={0.58} />}
      </div>
      <span className="fell" style={{ fontSize: focus ? 17 : 12 }}>{el.name}</span>
      {focus && (
        <>
          <span className="mono" style={{ fontSize: 11 }}><b>{v.yieldMain}</b> <span className="muted">main</span></span>
          <span className="mono" style={{ fontSize: 10 }}>{v.yieldLeak ? <span className={v.ontime ? 'ot' : 'muted'} style={v.ontime ? { color: 'var(--stamp-amber)' } : {}}>{v.yieldLeak} leak</span> : <span className="muted">leak sealed</span>}</span>
          <span className="label" style={{ fontSize: 8, marginTop: 2, color: 'var(--stamp-amber)' }}>Hold to train</span>
        </>
      )}
    </div>
  );
}
function PortDeckC() {
  return (
    <div className="phone sh-m">
      <AndroidStatus />
      <div className="appbar" style={{ paddingBottom: 4 }}>
        <div className="row g6 aic">
          <span className="home" style={{ fontSize: 15 }}>Skyhearth</span>
          <span className="stamp" style={{ fontSize: 7.5 }}>Tier III</span>
        </div>
        <MiniDayDial day={1} slotIdx={1} size={44} />
      </div>
      <div className="resbar" style={{ padding: '0 14px 4px' }}>
        {[['Pop', '12'], ['Coin', '38'], ['Staple', '03'], ['Offer', '00']].map(([k, v]) => (
          <div className="res" key={k}><span className="k">{k}</span><span className="v" style={{ fontSize: 13 }}>{v}</span></div>
        ))}
      </div>

      <div className="screen-body scrolls" style={{ gap: 10 }}>
        {/* spirit + compact wheel plate */}
        <div className="panel brackets row aic" style={{ padding: '8px 10px', gap: 6 }}>
          <AetherWheel size={186} treatment="compact" ontime={['fire', 'earth']}
            values={{ fire: 0, water: 0, earth: 0, nature: 0 }} />
          <div className="col grow g6" style={{ alignItems: 'flex-start' }}>
            <span className="label">Now Raising</span>
            <span className="fell" style={{ fontSize: 18, lineHeight: 1 }}>Drift-Mote</span>
            <span className="stamp stamp-blue" style={{ fontSize: 8 }}>Nascent · 1 day</span>
            <div className="col g4" style={{ width: '100%', marginTop: 4 }}>
              {[['Fat', 18, 'warn'], ['Full', 62, 'ok'], ['Bond', 55, 'gold']].map(([nm, v, tone]) => (
                <div key={nm} className="row g6 aic">
                  <span className="label" style={{ fontSize: 7.5, width: 26, flex: '0 0 26px' }}>{nm}</span>
                  <window.Meter value={v} segs={9} tone={tone} />
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* time-of-day filmstrip */}
        <div className="col g4">
          <span className="label" style={{ padding: '0 2px' }}>Time of Day</span>
          <SlotSelector compact />
        </div>

        {/* action deck carousel */}
        <div className="col g4">
          <div className="row between" style={{ padding: '0 2px' }}>
            <span className="label">Train Deck · Swipe</span>
            <span className="label label-faded">Morning · on-time Fire</span>
          </div>
          <div className="row aic" style={{ gap: 8, justifyContent: 'center', overflow: 'hidden', padding: '4px 0' }}>
            <DeckCard id="nature" />
            <DeckCard id="fire" focus />
            <DeckCard id="earth" />
          </div>
          <div className="row center g4" style={{ marginTop: 2 }}>
            {['nature', 'fire', 'earth', 'water'].map((id, i) => (
              <span key={id} style={{ width: i === 1 ? 16 : 6, height: 6, borderRadius: 3, background: i === 1 ? 'var(--stamp-amber)' : 'var(--ink-ghost)' }} />
            ))}
          </div>
        </div>

        {/* tend strip */}
        <div className="row g8">
          <div className="tend"><span className="t">Feed</span><span className="d">staple · free</span></div>
          <div className="tend"><span className="t">Rest</span><span className="d">−60 fatigue</span></div>
          <div className="tend"><span className="t">Bond</span><span className="d">+12 trust</span></div>
        </div>

        <button className="btn-primary">Launch Expedition ▸</button>
      </div>

      <TabBar active="raise" />
    </div>
  );
}

Object.assign(window, { PortLedgerA, PortFocusB, PortDeckC, SH_HoldRing: HoldRing, SH_SlotSelector: SlotSelector });